resources/mediawiki.ui/mixins/effects.less

   1 @import "../settings/colors";
   2 // ----------------------------------------------------------------------------
   3 // Button styling
   4 // ----------------------------------------------------------------------------
   5
   6 .button-colors(@bgColor) {
   7         background: @bgColor;
   8
   9         &:hover,
  10         &:focus {
  11                 // The inner bottom bevel should match the active background color.
  12                 box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
  13                 outline: none;
  14                 // remove outline in Firefox
  15                 &::-moz-focus-inner {
  16                         border-color: transparent;
  17                 }
  18         }
  19
  20         &:active,
  21         &.mw-ui-checked {
  22                 // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
  23                 // it passes it through, then ResourceLoader drops it.
  24                 // background: shade(@bgColor, 20%);
  25                 background: mix(#000, @bgColor, 20%);
  26                 box-shadow: none;
  27         }
  28 }
  29
  30 .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
  31         color: @colorGrayDark;
  32         border: 1px solid @colorGrayLight;
  33
  34         &:disabled {
  35                 color: @colorGrayLight;
  36
  37                 // make sure disabled buttons don't have hover and active states
  38                 &:hover,
  39                 &:active {
  40                         background: @bgColor;
  41                         box-shadow: none;
  42                 }
  43         }
  44 }
  45
  46 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
  47         color: @colorWhite;
  48         border: none;
  49
  50         &:disabled {
  51                 background: @colorGrayLight;
  52
  53                 // make sure disabled buttons don't have hover and active states
  54                 &:hover,
  55                 &:active,
  56                 &.mw-ui-checked {
  57                         box-shadow: none;
  58                 }
  59         }
  60 }
  61
  62 .button-colors-quiet(@textColor) {
  63         // Quiet buttons all start gray, and reveal
  64         // constructive/progressive/destructive color on hover and active.
  65         color: @colorGrayDark;
  66
  67         &:hover,
  68         &:focus {
  69                 // lessphp doesn't implement tint, see above
  70                 // color: tint(@textColor, 20%);
  71                 color: mix(#fff, @textColor, 20%);
  72         }
  73
  74         &:active,
  75         &.mw-ui-checked {
  76                 // lessphp doesn't implement shade, see above
  77                 // color: shade(@textColor, 20%);
  78                 color: mix(#000, @textColor, 20%);
  79         }
  80
  81         &:disabled {
  82                 color: @colorGrayLight;
  83         }
  84 }