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                 // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
  22                 // it passes it through, then ResourceLoader drops it.
  23                 // background: shade(@bgColor, 20%);
  24                 background: mix(#000, @bgColor, 20%);
  25                 box-shadow: none;
  26         }
  27 }
  28
  29 .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
  30         color: @colorGrayDark;
  31         border: 1px solid @colorGrayLight;
  32
  33         &:disabled {
  34                 color: @colorGrayLight;
  35
  36                 // make sure disabled buttons don't have hover and active states
  37                 &:hover,
  38                 &:active {
  39                         background: @bgColor;
  40                         box-shadow: none;
  41                 }
  42         }
  43 }
  44
  45 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
  46         color: @colorWhite;
  47         border: none;
  48
  49         &:disabled {
  50                 background: @colorGrayLight;
  51
  52                 // make sure disabled buttons don't have hover and active states
  53                 &:hover,
  54                 &:active {
  55                         box-shadow: none;
  56                 }
  57         }
  58 }
  59
  60 .button-colors-quiet(@textColor) {
  61         // Quiet buttons all start gray, and reveal
  62         // constructive/progressive/destructive color on hover and active.
  63         color: @colorGrayDark;
  64
  65         &:hover,
  66         &:focus {
  67                 // lessphp doesn't implement tint, see above
  68                 // color: tint(@textColor, 20%);
  69                 color: mix(#fff, @textColor, 20%);
  70         }
  71
  72         &:active {
  73                 // lessphp doesn't implement shade, see above
  74                 // color: shade(@textColor, 20%);
  75                 color: mix(#000, @textColor, 20%);
  76         }
  77
  78         &:disabled {
  79                 color: @colorGrayLight;
  80         }
  81 }