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

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3 @import 'mediawiki.ui/mixins';
   4
   5 // Buttons
   6 //
   7 // All buttons start with mw-ui-button class, modified by other classes.
   8 // It can be any element.  Due to a lack of a CSS reset, the exact styling of
   9 // the button depends on what type of element is used.
  10 // There are two kinds of buttons, the default is a "Call to Action" with an obvious border
  11 // and there is a quiet kind without a border.
  12 //
  13 // Styleguide 2.
  14
  15 // Neutral button styling
  16 //
  17 // These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.
  18 //
  19 // Markup:
  20 // <div>
  21 //   <button class="mw-ui-button">.mw-ui-button</button>
  22 // </div>
  23 // <div>
  24 //   <button class="mw-ui-button" disabled>.mw-ui-button</button>
  25 // </div>
  26 //
  27 // Styleguide 2.1.
  28 .mw-ui-button {
  29         // Inherit the font rather than apply user agent stylesheet (T72072)
  30         font-family: inherit;
  31         font-size: 1em;
  32         // Container layout
  33         display: inline-block;
  34         min-width: 4em;
  35         max-width: 28.75em; // equivalent to 460px, @see T95367
  36         padding: 0.546875em 1em;
  37         line-height: 1.286;
  38         margin: 0;
  39         border-radius: @borderRadius;
  40         .box-sizing( border-box );
  41
  42         // Disable weird iOS styling
  43         -webkit-appearance: none;
  44
  45         // IE 6 & 7 hack
  46         // https://stackoverflow.com/a/5838575/365238
  47         *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
  48         zoom: 1;
  49
  50         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  51         vertical-align: middle;
  52
  53         // Content styling
  54         .button-colors( @colorGray15, #fff, #d9d9d9 );
  55         text-align: center;
  56         font-weight: bold;
  57
  58         // Interaction styling
  59         cursor: pointer;
  60
  61         &:focus {
  62                 outline-width: 0;
  63
  64                 // Remove the inner border and padding in Firefox.
  65                 &::-moz-focus-inner {
  66                         border-color: transparent;
  67                         padding: 0;
  68                 }
  69         }
  70
  71         // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
  72         &:not( :disabled ) {
  73                 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
  74         }
  75
  76         &:disabled {
  77                 text-shadow: none;
  78                 cursor: default;
  79         }
  80
  81         // Styling for specific button types
  82         // -----------------------------------------
  83
  84         // Big buttons
  85         //
  86         // Not all buttons are equal. You can emphasise certain actions over others
  87         // using the mw-ui-big class.
  88         //
  89         // Markup:
  90         // <div>
  91         //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
  92         // </div>
  93         // <div>
  94         //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
  95         // </div>
  96         // <div>
  97         //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
  98         // </div>
  99         //
 100         // Styleguide 2.1.6.
 101         &.mw-ui-big {
 102                 font-size: 1.3em;
 103         }
 104
 105         // Block buttons
 106         //
 107         // Some buttons might need to be stacked.
 108         //
 109         // Markup:
 110         // <div>
 111         //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
 112         // </div>
 113         // <div>
 114         //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
 115         // </div>
 116         // <div>
 117         //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
 118         // </div>
 119         //
 120         // Styleguide 2.1.5.
 121         &.mw-ui-block {
 122                 display: block;
 123                 width: 100%;
 124                 margin-left: auto;
 125                 margin-right: auto;
 126         }
 127
 128         // Progressive buttons
 129         //
 130         // Use progressive buttons for actions which lead to a next step in the process.
 131         // .mw-ui-constructive is deprecated; consolidated with `progressive`, see T110555
 132         //
 133         // Markup:
 134         // <div>
 135         //   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
 136         // </div>
 137         // <div>
 138         //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
 139         // </div>
 140         //
 141         // Styleguide 2.1.1.
 142         &.mw-ui-progressive,
 143         &.mw-ui-constructive {
 144                 .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 145
 146                 &.mw-ui-quiet {
 147                         .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 148                 }
 149         }
 150
 151         // Destructive buttons
 152         //
 153         // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
 154         // This should not be used for cancel buttons.
 155         //
 156         // Markup:
 157         // <div>
 158         //   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 159         // </div>
 160         // <div>
 161         //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 162         // </div>
 163         //
 164         // Styleguide 2.1.2.
 165         &.mw-ui-destructive {
 166                 .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 167
 168                 &.mw-ui-quiet {
 169                         .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 170                 }
 171         }
 172
 173         // Quiet buttons
 174         //
 175         // Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow.
 176         // Its use is  not recommended on mobile/tablet due to lack of hover state.
 177         //
 178         // Markup:
 179         // <div>
 180         //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
 181         // </div>
 182         // <div>
 183         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
 184         // </div>
 185         // <div>
 186         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
 187         // </div>
 188         // <div>
 189         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
 190         // </div>
 191         // <div>
 192         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
 193         // </div>
 194         //
 195         // Styleguide 2.1.3.
 196         &.mw-ui-quiet {
 197                 background: transparent;
 198                 border: 0;
 199                 text-shadow: none;
 200                 .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
 201
 202                 &:hover,
 203                 &:focus {
 204                         box-shadow: none;
 205                 }
 206
 207                 &:active,
 208                 &:disabled {
 209                         background: transparent;
 210                 }
 211         }
 212 }
 213
 214 input.mw-ui-button,
 215 button.mw-ui-button {
 216         // Buttons in Firefox have extra height
 217         &::-moz-focus-inner {
 218                 margin-top: -1px;
 219                 margin-bottom: -1px;
 220         }
 221 }
 222
 223 a.mw-ui-button {
 224         text-decoration: none;
 225
 226         // This overrides an underline declaration on a:hover and a:focus in
 227         // commonElements.css, which the class alone isn't specific enough to do.
 228         &:hover,
 229         &:focus {
 230                 text-decoration: none;
 231         }
 232 }
 233
 234 // Button groups
 235 //
 236 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 237 //
 238 // Markup:
 239 // <div class="mw-ui-button-group">
 240 //   <div class="mw-ui-button is-on">A</div>
 241 //   <div class="mw-ui-button">B</div>
 242 //   <div class="mw-ui-button">C</div>
 243 //   <div class="mw-ui-button">D</div>
 244 // </div><div style="clear:both"></div>
 245 //
 246 // Styleguide 2.2.
 247 .mw-ui-button-group {
 248         & > * {
 249                 min-width: 48px;
 250                 border-radius: 0;
 251                 float: left;
 252
 253                 &:first-child {
 254                         border-top-left-radius: @borderRadius;
 255                         border-bottom-left-radius: @borderRadius;
 256                 }
 257
 258                 &:not( :first-child ) {
 259                         border-left: 0;
 260                 }
 261
 262                 &:last-child {
 263                         border-top-right-radius: @borderRadius;
 264                         border-bottom-right-radius: @borderRadius;
 265                 }
 266         }
 267
 268         & .is-on .button {
 269                 cursor: default;
 270         }
 271 }