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 .agora-inline-label-styling() {
  14         margin-bottom: 0.5em;
  15         cursor: pointer;
  16         vertical-align: bottom;
  17         line-height: normal;
  18         font-weight: normal;
  19
  20         & > input[type="checkbox"],
  21         & > input[type="radio"] {
  22                 width: auto;
  23                 height: auto;
  24                 margin: 0 0.1em 0 0;
  25                 padding: 0;
  26                 border: 1px solid @colorGray7;
  27                 cursor: pointer;
  28         }
  29 }
  30
  31 // ----------------------------------------------------------------------------
  32 // Button styling
  33 // ----------------------------------------------------------------------------
  34
  35 .button-colors( @bgColor, @highlightColor, @activeColor ) {
  36         background-color: @bgColor;
  37         color: @colorButtonText;
  38         border: 1px solid @colorFieldBorder;
  39
  40         // Make sure that `color` isn't inheriting from user-agent styles
  41         &:visited {
  42                 color: @colorButtonText;
  43         }
  44
  45         &:hover {
  46                 background-color: @highlightColor;
  47                 color: @colorGray4;
  48                 border-color: @colorGray10;
  49         }
  50
  51         &:focus {
  52                 background-color: @highlightColor;
  53                 // Make sure that `color` isn't inheriting from user-agent styles
  54                 color: @colorButtonText;
  55                 border-color: @colorProgressive;
  56                 box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px #fff;
  57         }
  58
  59         &:active,
  60         &.is-on,
  61         &.mw-ui-checked {
  62                 background-color: @activeColor;
  63                 color: @colorGray1;
  64                 border-color: @colorGray7;
  65                 box-shadow: none;
  66         }
  67
  68         &:disabled {
  69                 background-color: @colorGray12;
  70                 color: #fff;
  71                 border-color: @colorGray12;
  72
  73                 // Make sure disabled buttons don't have hover and active states
  74                 &:hover,
  75                 &:active {
  76                         background-color: @colorGray12;
  77                         color: #fff;
  78                         box-shadow: none;
  79                         border-color: @colorGray12;
  80                 }
  81         }
  82 }
  83
  84 .button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
  85         background-color: @bgColor;
  86         color: #fff;
  87         // border of the same color as background so that light background and
  88         // dark background buttons are the same height and width
  89         border: 1px solid @bgColor;
  90         text-shadow: 0 1px rgba( 0, 0, 0, 0.1 );
  91
  92         &:hover {
  93                 background-color: @highlightColor;
  94                 border-color: @highlightColor;
  95         }
  96
  97         &:focus {
  98                 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
  99         }
 100
 101         &:active,
 102         &.is-on,
 103         &.mw-ui-checked {
 104                 background-color: @activeColor;
 105                 border-color: @activeColor;
 106                 box-shadow: none;
 107         }
 108
 109         &:disabled {
 110                 background-color: @colorGray12;
 111                 color: #fff;
 112                 border-color: @colorGray12;
 113
 114                 // Make sure disabled buttons don't have hover and active states
 115                 &:hover,
 116                 &:active,
 117                 &.mw-ui-checked {
 118                         background-color: @colorGray12;
 119                         color: #fff;
 120                         border-color: @colorGray12;
 121                         box-shadow: none;
 122                 }
 123         }
 124 }
 125
 126 .button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
 127         // Quiet buttons all start gray, and reveal
 128         // progressive/destructive color on hover and active.
 129         color: @colorButtonText;
 130
 131         &:hover {
 132                 background-color: transparent;
 133                 color: @highlightColor;
 134         }
 135
 136         &:active,
 137         &.mw-ui-checked {
 138                 color: @activeColor;
 139         }
 140
 141         &:focus {
 142                 background-color: transparent;
 143                 color: @textColor;
 144         }
 145
 146         &:disabled {
 147                 color: @colorDisabledText;
 148         }
 149 }