mixins.less

//
// Mixins
// --------------------------------------------------
// Bootstrap overrides and PatternFly-specific mixins

// Bootstrap overrides
// -------------------

// Button variants
.button-variant(@color; @background; @background-image-start; @background-image-stop; @border) {
  background-color: @background;
  #gradient > .vertical(@background-image-start, @background-image-stop);
  border-color: @border;
  color: @color;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open .dropdown-toggle& {
    background-color: @background;
    background-image: none;
    border-color: @border;
    color: @color;
  }
  &:active,
  &.active,
  .open .dropdown-toggle& {
    background-image: none;
    &:hover,
    &:focus,
    &.focus {
      background-color: darken(@background, 5%);
          border-color: darken(@border, 7%);
    }
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
      border-color: @border
    }
  }
}

// Form control outline
.form-control-outline(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0 !important;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

// Gradients
#gradient {
  .striped(@color: rgba(0,0,0,.15); @angle: -45deg) {
    background-image: -webkit-linear-gradient(@angle, @color 25%, @color 26%, transparent 27%, transparent 49%, @color 50%, @color 51%, transparent 52%, transparent 74%, @color 75%, @color 76%, transparent 77%);
    background-image: linear-gradient(@angle, @color 25%, @color 26%, transparent 27%, transparent 49%, @color 50%, @color 51%, transparent 52%, transparent 74%, @color 75%, @color 76%, transparent 77%);
  }
}

// Horizontal dividers
.nav-divider(@color: #e5e5e5, @margin: 4px 1px) {
  background-color: @color;
  height: 1px;
  margin: @margin;
  overflow: hidden;
}

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder            { color: @color; font-style: italic; } // Firefox 4-18
  &::-moz-placeholder           { color: @color; font-style: italic;} // Firefox 19+
  &:-ms-input-placeholder       { color: @color; font-style: italic; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; font-style: italic; } // Safari and Chrome
}

// PatternFly-specific
// -------------------

.tab-indicator(@background: @gray-light-pf, @left: 15px, @right: 15px) {
  &:before {
    background: @background;
    bottom: -1px;
    content: '';
    display: block;
    height: 2px;
    left: @left;
    position: absolute;
    right: @right;
  }
}