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) {
  37         background: @bgColor;
  38
  39         &:hover {
  40                 // The inner bottom bevel should match the active background color.
  41                 box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
  42                 border-bottom-color: mix(#000, @bgColor, 20%);
  43         }
  44
  45         &:focus {
  46                 box-shadow:inset 0px 0px 0px 3px rgba(0, 0, 0, 20%);
  47                 outline: none;
  48
  49                 // remove outline in Firefox
  50                 &::-moz-focus-inner {
  51                         border-color: transparent;
  52                 }
  53
  54         }
  55
  56         &:active,
  57         &.mw-ui-checked {
  58                 // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
  59                 // it passes it through, then ResourceLoader drops it.
  60                 // background: shade(@bgColor, 20%);
  61                 background: mix(#000, @bgColor, 20%);
  62                 box-shadow: none;
  63         }
  64 }
  65
  66 .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
  67         color: @colorButtonText;
  68         border: 1px solid @colorGray12;
  69
  70         &:disabled {
  71                 color: @colorDisabledText;
  72
  73                 // make sure disabled buttons don't have hover and active states
  74                 &:hover,
  75                 &:active {
  76                         background: @bgColor;
  77                         box-shadow: none;
  78                 }
  79         }
  80 }
  81
  82 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
  83         color: #fff;
  84         // border of the same color as background so that light background and
  85         // dark background buttons are the same height (only top and bottom to
  86         // make box shadow on hover cover the corners too)
  87         border: 1px solid @bgColor;
  88         border-left: none;
  89         border-right: none;
  90         text-shadow: 0 1px rgba(0, 0, 0, .1);
  91
  92         &:disabled {
  93                 background: @colorGray12;
  94                 border-color: @colorGray12;
  95
  96                 // make sure disabled buttons don't have hover and active states
  97                 &:hover,
  98                 &:active,
  99                 &.mw-ui-checked {
 100                         box-shadow: none;
 101                 }
 102         }
 103 }
 104
 105 .button-colors-quiet(@textColor) {
 106         // Quiet buttons all start gray, and reveal
 107         // constructive/progressive/destructive color on hover and active.
 108         color: @colorButtonText;
 109
 110         &:hover {
 111                 // lessphp doesn't implement tint, see above
 112                 // color: tint(@textColor, 20%);
 113                 color: mix(#fff, @textColor, 20%);
 114         }
 115
 116         &:focus {
 117                 box-shadow:inset 0px 0px 0px 3px rgba(0, 0, 0, 20%);
 118                 outline: none;
 119
 120                 // remove outline in Firefox
 121                 &::-moz-focus-inner {
 122                         border-color: transparent;
 123                 }
 124
 125         }
 126
 127         &:active,
 128         &.mw-ui-checked {
 129                 // lessphp doesn't implement shade, see above
 130                 // color: shade(@textColor, 20%);
 131                 color: mix(#000, @textColor, 20%);
 132         }
 133
 134         &:disabled {
 135                 color: @colorDisabledText;
 136         }
 137 }