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         text-shadow: 0 1px rgba(0, 0, 0, .1);
  56
  57         &:disabled {
  58                 background: @colorGrayLight;
  59                 border-color: @colorGrayLight;
  60
  61                 // make sure disabled buttons don't have hover and active states
  62                 &:hover,
  63                 &:active,
  64                 &.mw-ui-checked {
  65                         box-shadow: none;
  66                 }
  67         }
  68 }
  69
  70 .button-colors-quiet(@textColor) {
  71         // Quiet buttons all start gray, and reveal
  72         // constructive/progressive/destructive color on hover and active.
  73         color: @colorGrayDark;
  74
  75         &:hover,
  76         &:focus {
  77                 // lessphp doesn't implement tint, see above
  78                 // color: tint(@textColor, 20%);
  79                 color: mix(#fff, @textColor, 20%);
  80         }
  81
  82         &:active,
  83         &.mw-ui-checked {
  84                 // lessphp doesn't implement shade, see above
  85                 // color: shade(@textColor, 20%);
  86                 color: mix(#000, @textColor, 20%);
  87         }
  88
  89         &:disabled {
  90                 color: @colorGrayLight;
  91         }
  92 }