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

   1 // ----------------------------------------------------------------------------
   2 // Button styling
   3 // ----------------------------------------------------------------------------
   4
   5 .button-colors( @bgColor, @highlightColor, @activeColor ) {
   6         background-color: @bgColor;
   7         color: @colorButtonText;
   8         border-color: @colorFieldBorder;
   9
  10         // Make sure that `color` isn't inheriting from user-agent styles
  11         &:visited {
  12                 color: @colorButtonText;
  13         }
  14
  15         &:hover {
  16                 background-color: @highlightColor;
  17                 color: @colorGray4;
  18                 border-color: @colorGray10;
  19         }
  20
  21         &:focus {
  22                 background-color: @highlightColor;
  23                 // Make sure that `color` isn't inheriting from user-agent styles
  24                 color: @colorButtonText;
  25                 border-color: @colorProgressive;
  26                 box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px #fff;
  27         }
  28
  29         &:active,
  30         &.is-on,
  31         &.mw-ui-checked {
  32                 background-color: @activeColor;
  33                 color: @colorGray1;
  34                 border-color: @colorGray7;
  35                 box-shadow: none;
  36         }
  37
  38         &:disabled {
  39                 background-color: @colorGray12;
  40                 color: #fff;
  41                 border-color: @colorGray12;
  42
  43                 // Make sure disabled buttons don't have hover and active states
  44                 &:hover,
  45                 &:active {
  46                         background-color: @colorGray12;
  47                         color: #fff;
  48                         box-shadow: none;
  49                         border-color: @colorGray12;
  50                 }
  51         }
  52 }
  53
  54 .button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
  55         background-color: @bgColor;
  56         color: #fff;
  57         // border of the same color as background so that light background and
  58         // dark background buttons are the same height and width
  59         border: 1px solid @bgColor;
  60
  61         &:hover {
  62                 background-color: @highlightColor;
  63                 border-color: @highlightColor;
  64         }
  65
  66         &:focus {
  67                 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
  68         }
  69
  70         &:active,
  71         &.is-on,
  72         &.mw-ui-checked {
  73                 background-color: @activeColor;
  74                 border-color: @activeColor;
  75                 box-shadow: none;
  76         }
  77
  78         &:disabled {
  79                 background-color: @colorGray12;
  80                 color: #fff;
  81                 border-color: @colorGray12;
  82
  83                 // Make sure disabled buttons don't have hover and active states
  84                 &:hover,
  85                 &:active,
  86                 &.mw-ui-checked {
  87                         background-color: @colorGray12;
  88                         color: #fff;
  89                         border-color: @colorGray12;
  90                         box-shadow: none;
  91                 }
  92         }
  93 }
  94
  95 .button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
  96         // Quiet buttons all start gray, and reveal
  97         // progressive/destructive color on hover and active.
  98         color: @colorButtonText;
  99
 100         &:hover {
 101                 background-color: transparent;
 102                 color: @highlightColor;
 103         }
 104
 105         &:active,
 106         &.mw-ui-checked {
 107                 color: @activeColor;
 108         }
 109
 110         &:focus {
 111                 background-color: transparent;
 112                 color: @textColor;
 113         }
 114
 115         &:disabled {
 116                 color: @colorDisabledText;
 117         }
 118 }