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

   1 // Mediawiki.ui button mixins for MediaWiki (deprecated)
   2 //
   3 // Helper mixins used to create button styles. This file is importable
   4 // by all LESS files via `@import 'mediawiki.ui/mixins.buttons';`.
   5
   6 /* stylelint-disable selector-class-pattern */
   7
   8 // Default button mixin.
   9 .mw-ui-button() {
  10         // Container layout
  11         display: inline-block;
  12         .box-sizing( border-box );
  13         min-width: 4em;
  14         max-width: 28.75em; // equivalent to 460px, @see T95367
  15         margin: 0;
  16         padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
  17         border: @border-width-base @border-style-base @border-color-base;
  18         border-radius: @borderRadius;
  19         cursor: pointer;
  20         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  21         vertical-align: middle;
  22         // Inherit the font rather than apply user agent stylesheet (T72072)
  23         font-family: inherit;
  24         font-size: 1em;
  25         font-weight: bold;
  26         line-height: 1;
  27         text-align: center;
  28         // Disable weird iOS styling
  29         -webkit-appearance: none;
  30         // IE 6 & 7 hack
  31         // https://stackoverflow.com/a/5838575/365238
  32         *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
  33         zoom: 1;
  34 }
  35
  36 // Mixin for button interaction states.
  37 .mw-ui-button-states() {
  38         // Make sure that `color` isn't inheriting from user-agent styles
  39         &:visited {
  40                 color: @colorButtonText;
  41         }
  42
  43         &:hover {
  44                 background-color: @background-color-base;
  45                 color: @colorGray4;
  46                 border-color: @colorGray10;
  47         }
  48
  49         &:focus {
  50                 background-color: @background-color-base;
  51                 // Make sure that `color` isn't inheriting from user-agent styles
  52                 color: @colorButtonText;
  53                 border-color: @colorProgressive;
  54                 box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @background-color-base;
  55                 outline-width: 0;
  56
  57                 // Remove the inner border and padding in Firefox.
  58                 &::-moz-focus-inner {
  59                         border-color: transparent;
  60                         padding: 0;
  61                 }
  62         }
  63
  64         &:active,
  65         &.is-on {
  66                 background-color: @colorGray12;
  67                 color: @colorGray1;
  68                 border-color: @colorGray7;
  69                 box-shadow: none;
  70         }
  71
  72         &:disabled {
  73                 background-color: @colorGray12;
  74                 color: @colorBaseInverted;
  75                 border-color: @colorGray12;
  76                 cursor: default;
  77
  78                 // Make sure disabled buttons don't have hover and active states
  79                 &:hover,
  80                 &:active {
  81                         background-color: @colorGray12;
  82                         color: @colorBaseInverted;
  83                         box-shadow: none;
  84                         border-color: @colorGray12;
  85                 }
  86         }
  87
  88         // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
  89         &:not( :disabled ) {
  90                 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
  91         }
  92 }
  93
  94 // Primary buttons mixin.
  95 .mw-ui-button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
  96         background-color: @bgColor;
  97         color: #fff;
  98         // border of the same color as background so that light background and
  99         // dark background buttons are the same height and width
 100         border: 1px solid @bgColor;
 101
 102         &:hover {
 103                 background-color: @highlightColor;
 104                 border-color: @highlightColor;
 105         }
 106
 107         &:focus {
 108                 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
 109         }
 110
 111         &:active,
 112         &.is-on {
 113                 background-color: @activeColor;
 114                 border-color: @activeColor;
 115                 box-shadow: none;
 116         }
 117
 118         &:disabled {
 119                 background-color: @colorGray12;
 120                 color: #fff;
 121                 border-color: @colorGray12;
 122
 123                 // Make sure disabled buttons don't have hover and active states
 124                 &:hover,
 125                 &:active {
 126                         background-color: @colorGray12;
 127                         color: #fff;
 128                         border-color: @colorGray12;
 129                         box-shadow: none;
 130                 }
 131         }
 132 }