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
  19         font-weight: normal;
  20
  21         & > input[type="checkbox"],
  22         & > input[type="radio"] {
  23                 width: auto;
  24                 height: auto;
  25                 margin: 0 0.1em 0 0;
  26                 padding: 0;
  27                 border: 1px solid @colorFieldBorder;
  28                 cursor: pointer;
  29         }
  30 }
  31
  32 // ----------------------------------------------------------------------------
  33 // Button styling
  34 // ----------------------------------------------------------------------------
  35
  36 .button-colors( @bgColor, @highlightColor, @activeColor ) {
  37         background: @bgColor;
  38
  39         &:hover {
  40                 // The inner bottom bevel should match the active background color.
  41                 background-color: @highlightColor;
  42         }
  43
  44         &:focus {
  45                 border-color: @colorWhite;
  46                 box-shadow: 0 0 0 1px @highlightColor;
  47
  48                 outline: none;
  49                 // remove outline in Firefox
  50                 &::-moz-focus-inner {
  51                         border-color: transparent;
  52                 }
  53         }
  54
  55         &:active,
  56         &.is-on,
  57         &.mw-ui-checked {
  58                 background: @activeColor;
  59                 box-shadow: none;
  60         }
  61 }
  62
  63 .button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) {
  64         color: @colorButtonText;
  65         border: 1px solid @colorGray12;
  66
  67         &:hover,
  68         &:active,
  69         &:visited {
  70                 // make sure that is isn't inheriting from a general rule
  71                 color: @colorButtonText;
  72         }
  73
  74         &:focus {
  75                 background-color: @highlightColor;
  76         }
  77
  78         &:disabled {
  79                 color: @colorDisabledText;
  80
  81                 // make sure disabled buttons don't have hover and active states
  82                 &:hover,
  83                 &:active {
  84                         background: @bgColor;
  85                         box-shadow: none;
  86                 }
  87         }
  88 }
  89
  90 .button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) < 70% ) {
  91         color: #fff;
  92         // border of the same color as background so that light background and
  93         // dark background buttons are the same height and width
  94         border: 1px solid @bgColor;
  95         text-shadow: 0 1px rgba(0, 0, 0, .1);
  96
  97         &:disabled {
  98                 background: @colorGray13;
  99                 border-color: @colorGray13;
 100
 101                 // make sure disabled buttons don't have hover and active states
 102                 &:hover,
 103                 &:active,
 104                 &.mw-ui-checked {
 105                         box-shadow: none;
 106                 }
 107         }
 108 }
 109
 110 .button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
 111         // Quiet buttons all start gray, and reveal
 112         // constructive/progressive/destructive color on hover and active.
 113         color: @colorButtonText;
 114
 115         &:hover,
 116         &:focus {
 117                 background: transparent;
 118                 color: @textColor;
 119         }
 120
 121         &:active,
 122         &.mw-ui-checked {
 123                 color: @activeColor;
 124         }
 125
 126         &:disabled {
 127                 color: @colorDisabledText;
 128         }
 129 }