less/patternfly/mixins.less

   1 //
   2 // Mixins
   3 // --------------------------------------------------
   4 // Bootstrap overrides and PatternFly-specific mixins
   5
   6 // Bootstrap overrides
   7 // -------------------
   8
   9 // Button variants
  10 .button-variant(@color; @background; @background-image-start; @background-image-stop; @border) {
  11   background-color: @background;
  12   #gradient > .vertical(@background-image-start, @background-image-stop);
  13   border-color: @border;
  14   color: @color;
  15
  16   &:hover,
  17   &:focus,
  18   &:active,
  19   &.active,
  20   .open .dropdown-toggle& {
  21     background-color: @background;
  22     background-image: none;
  23     border-color: @border;
  24     color: @color;
  25   }
  26   &:active,
  27   &.active,
  28   .open .dropdown-toggle& {
  29     background-image: none;
  30     &:hover,
  31     &:focus,
  32     &.focus {
  33       background-color: darken(@background, 5%);
  34           border-color: darken(@border, 7%);
  35     }
  36   }
  37   &.disabled,
  38   &[disabled],
  39   fieldset[disabled] & {
  40     &,
  41     &:hover,
  42     &:focus,
  43     &:active,
  44     &.active {
  45       background-color: @background;
  46       border-color: @border
  47     }
  48   }
  49 }
  50
  51 // Form control outline
  52 .form-control-outline(@color: @input-border-focus) {
  53   @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  54   &:focus {
  55     border-color: @color;
  56     outline: 0 !important;
  57     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  58   }
  59 }
  60
  61 // Gradients
  62 #gradient {
  63   .striped(@color: rgba(0,0,0,.15); @angle: -45deg) {
  64     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%);
  65     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%);
  66   }
  67 }
  68
  69 // Horizontal dividers
  70 .nav-divider(@color: #e5e5e5, @margin: 4px 1px) {
  71   background-color: @color;
  72   height: 1px;
  73   margin: @margin;
  74   overflow: hidden;
  75 }
  76
  77 // Placeholder text
  78 .placeholder(@color: @input-color-placeholder) {
  79   &:-moz-placeholder            { color: @color; font-style: italic; } // Firefox 4-18
  80   &::-moz-placeholder           { color: @color; font-style: italic;} // Firefox 19+
  81   &:-ms-input-placeholder       { color: @color; font-style: italic; } // Internet Explorer 10+
  82   &::-webkit-input-placeholder  { color: @color; font-style: italic; } // Safari and Chrome
  83 }
  84
  85 // PatternFly-specific
  86 // -------------------
  87
  88 .tab-indicator(@background: @gray-light-pf, @left: 15px, @right: 15px) {
  89   &:before {
  90     background: @background;
  91     bottom: -1px;
  92     content: '';
  93     display: block;
  94     height: 2px;
  95     left: @left;
  96     position: absolute;
  97     right: @right;
  98   }
  99 }