resources/src/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                 border-bottom-color: mix(#000, @bgColor, 20%);
  14                 outline: none;
  15                 // remove outline in Firefox
  16                 &::-moz-focus-inner {
  17                         border-color: transparent;
  18                 }
  19         }
  20
  21         &:active,
  22         &.mw-ui-checked {
  23                 // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
  24                 // it passes it through, then ResourceLoader drops it.
  25                 // background: shade(@bgColor, 20%);
  26                 background: mix(#000, @bgColor, 20%);
  27                 box-shadow: none;
  28         }
  29 }
  30
  31 .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
  32         color: @colorGrayDark;
  33         border: 1px solid @colorGrayLight;
  34
  35         &:disabled {
  36                 color: @colorGrayLight;
  37
  38                 // make sure disabled buttons don't have hover and active states
  39                 &:hover,
  40                 &:active {
  41                         background: @bgColor;
  42                         box-shadow: none;
  43                 }
  44         }
  45 }
  46
  47 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
  48         color: @colorWhite;
  49         // border of the same color as background so that light background and
  50         // dark background buttons are the same height (only top and bottom to
  51         // make box shadow on hover cover the corners too)
  52         border: 1px solid @bgColor;
  53         border-left: none;
  54         border-right: none;
  55
  56         &:disabled {
  57                 background: @colorGrayLight;
  58                 border-color: @colorGrayLight;
  59
  60                 // make sure disabled buttons don't have hover and active states
  61                 &:hover,
  62                 &:active,
  63                 &.mw-ui-checked {
  64                         box-shadow: none;
  65                 }
  66         }
  67 }
  68
  69 .button-colors-quiet(@textColor) {
  70         // Quiet buttons all start gray, and reveal
  71         // constructive/progressive/destructive color on hover and active.
  72         color: @colorGrayDark;
  73
  74         &:hover,
  75         &:focus {
  76                 // lessphp doesn't implement tint, see above
  77                 // color: tint(@textColor, 20%);
  78                 color: mix(#fff, @textColor, 20%);
  79         }
  80
  81         &:active,
  82         &.mw-ui-checked {
  83                 // lessphp doesn't implement shade, see above
  84                 // color: shade(@textColor, 20%);
  85                 color: mix(#000, @textColor, 20%);
  86         }
  87
  88         &:disabled {
  89                 color: @colorGrayLight;
  90         }
  91 }