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

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