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

   1 // ----------------------------------------------------------------------------
   2 // Form styling mixins
   3 // ----------------------------------------------------------------------------
   4
   5 // Font is not included.
   6 .agora-field-styling() {
   7
   8         border: 1px solid @colorFieldBorder;
   9
  10         &:focus {
  11                 // Styling focus of native checkboxes etc on Mac is almost impossible.
  12                 &:not([type=checkbox]):not([type=radio]) {
  13                         outline: 0; // Removes OS field focus
  14                 }
  15
  16                 box-shadow: lighten(@colorProgressive, 6%) 0 0 5px;
  17
  18                 border-color: lighten(@colorProgressive, 6%);
  19         }
  20
  21         color: @colorText;
  22         padding: 0.35em 0.5em 0.35em 0.5em;
  23
  24         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  25         vertical-align: middle;
  26 }
  27
  28 .agora-label-styling() {
  29         font-size: 0.9em;
  30         color: @colorText;
  31
  32         * {
  33                 font-weight: normal;
  34         }
  35 }
  36
  37 .agora-inline-label-styling() {
  38         margin-bottom: 0.5em;
  39         cursor: pointer;
  40         vertical-align: bottom;
  41         line-height: normal;
  42
  43         font-weight: normal;
  44
  45         & > input[type="checkbox"],
  46         & > input[type="radio"] {
  47                 width: auto;
  48                 height: auto;
  49                 margin: 0 0.1em 0 0;
  50                 padding: 0;
  51                 border: 1px solid @colorFieldBorder;
  52                 cursor: pointer;
  53         }
  54 }
  55
  56 // ----------------------------------------------------------------------------
  57 // Button styling
  58 // ----------------------------------------------------------------------------
  59
  60 .button-colors(@bgColor) {
  61         background: @bgColor;
  62
  63         &:hover,
  64         &:focus {
  65                 // The inner bottom bevel should match the active background color.
  66                 box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
  67                 border-bottom-color: mix(#000, @bgColor, 20%);
  68                 outline: none;
  69                 // remove outline in Firefox
  70                 &::-moz-focus-inner {
  71                         border-color: transparent;
  72                 }
  73         }
  74
  75         &:active,
  76         &.mw-ui-checked {
  77                 // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
  78                 // it passes it through, then ResourceLoader drops it.
  79                 // background: shade(@bgColor, 20%);
  80                 background: mix(#000, @bgColor, 20%);
  81                 box-shadow: none;
  82         }
  83 }
  84
  85 .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
  86         color: @colorButtonText;
  87         border: 1px solid @colorGray12;
  88
  89         &:disabled {
  90                 color: @colorDisabledText;
  91
  92                 // make sure disabled buttons don't have hover and active states
  93                 &:hover,
  94                 &:active {
  95                         background: @bgColor;
  96                         box-shadow: none;
  97                 }
  98         }
  99 }
 100
 101 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
 102         color: #fff;
 103         // border of the same color as background so that light background and
 104         // dark background buttons are the same height (only top and bottom to
 105         // make box shadow on hover cover the corners too)
 106         border: 1px solid @bgColor;
 107         border-left: none;
 108         border-right: none;
 109         text-shadow: 0 1px rgba(0, 0, 0, .1);
 110
 111         &:disabled {
 112                 background: @colorGray12;
 113                 border-color: @colorGray12;
 114
 115                 // make sure disabled buttons don't have hover and active states
 116                 &:hover,
 117                 &:active,
 118                 &.mw-ui-checked {
 119                         box-shadow: none;
 120                 }
 121         }
 122 }
 123
 124 .button-colors-quiet(@textColor) {
 125         // Quiet buttons all start gray, and reveal
 126         // constructive/progressive/destructive color on hover and active.
 127         color: @colorButtonText;
 128
 129         &:hover,
 130         &:focus {
 131                 // lessphp doesn't implement tint, see above
 132                 // color: tint(@textColor, 20%);
 133                 color: mix(#fff, @textColor, 20%);
 134         }
 135
 136         &:active,
 137         &.mw-ui-checked {
 138                 // lessphp doesn't implement shade, see above
 139                 // color: shade(@textColor, 20%);
 140                 color: mix(#000, @textColor, 20%);
 141         }
 142
 143         &:disabled {
 144                 color: @colorDisabledText;
 145         }
 146 }