resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less

   1 // ----------------------------------------------------------------------------
   2 // Button styling
   3 // ----------------------------------------------------------------------------
   4
   5 .button-colors(@bgColor) {
   6         background: @bgColor;
   7
   8         &:hover,
   9         &:focus {
  10                 // The inner bottom bevel should match the active background color.
  11                 box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
  12                 border-bottom-color: mix(#000, @bgColor, 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 of the same color as background so that light background and
  49         // dark background buttons are the same height (only top and bottom to
  50         // make box shadow on hover cover the corners too)
  51         border: 1px solid @bgColor;
  52         border-left: none;
  53         border-right: none;
  54         text-shadow: 0 1px rgba(0, 0, 0, .1);
  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 }