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

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3
   4 // Buttons
   5 // Helper mixins
   6 // Primary buttons mixin
   7 .button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
   8         background-color: @bgColor;
   9         color: #fff;
  10         // border of the same color as background so that light background and
  11         // dark background buttons are the same height and width
  12         border: 1px solid @bgColor;
  13
  14         &:hover {
  15                 background-color: @highlightColor;
  16                 border-color: @highlightColor;
  17         }
  18
  19         &:focus {
  20                 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
  21         }
  22
  23         &:active,
  24         &.is-on {
  25                 background-color: @activeColor;
  26                 border-color: @activeColor;
  27                 box-shadow: none;
  28         }
  29
  30         &:disabled {
  31                 background-color: @colorGray12;
  32                 color: #fff;
  33                 border-color: @colorGray12;
  34
  35                 // Make sure disabled buttons don't have hover and active states
  36                 &:hover,
  37                 &:active {
  38                         background-color: @colorGray12;
  39                         color: #fff;
  40                         border-color: @colorGray12;
  41                         box-shadow: none;
  42                 }
  43         }
  44 }
  45
  46 // All buttons start with `.mw-ui-button` class, modified by other classes.
  47 // It can be any element.  Due to a lack of a CSS reset, the exact styling of
  48 // the button depends on what type of element is used.
  49 // There are two kinds of buttons, the default is a "Call to Action" with an obvious border
  50 // and there is a quiet kind without a border.
  51 //
  52 // Styleguide 2.
  53
  54 // Neutral button styling
  55 //
  56 // These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.
  57 //
  58 // Markup:
  59 // <div>
  60 //   <button class="mw-ui-button">.mw-ui-button</button>
  61 // </div>
  62 // <div>
  63 //   <button class="mw-ui-button" disabled>.mw-ui-button</button>
  64 // </div>
  65 //
  66 // Styleguide 2.1.
  67 .mw-ui-button {
  68         background-color: @colorGray15;
  69         color: @colorButtonText;
  70         // Container layout
  71         display: inline-block;
  72         .box-sizing( border-box );
  73         min-width: 4em;
  74         max-width: 28.75em; // equivalent to 460px, @see T95367
  75         margin: 0;
  76         padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
  77         border: @border-width-base @border-style-base @border-color-base;
  78         border-radius: @borderRadius;
  79         // Inherit the font rather than apply user agent stylesheet (T72072)
  80         font-family: inherit;
  81         font-size: 1em;
  82         font-weight: bold;
  83         line-height: 1;
  84         text-align: center;
  85         // Disable weird iOS styling
  86         -webkit-appearance: none;
  87         // IE 6 & 7 hack
  88         // https://stackoverflow.com/a/5838575/365238
  89         *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
  90         zoom: 1;
  91         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  92         vertical-align: middle;
  93         // Interaction styling
  94         cursor: pointer;
  95
  96         // Make sure that `color` isn't inheriting from user-agent styles
  97         &:visited {
  98                 color: @colorButtonText;
  99         }
 100
 101         &:hover {
 102                 background-color: @background-color-base;
 103                 color: @colorGray4;
 104                 border-color: @colorGray10;
 105         }
 106
 107         &:focus {
 108                 background-color: @background-color-base;
 109                 // Make sure that `color` isn't inheriting from user-agent styles
 110                 color: @colorButtonText;
 111                 border-color: @colorProgressive;
 112                 box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @background-color-base;
 113                 outline-width: 0;
 114
 115                 // Remove the inner border and padding in Firefox.
 116                 &::-moz-focus-inner {
 117                         border-color: transparent;
 118                         padding: 0;
 119                 }
 120         }
 121
 122         &:active,
 123         &.is-on {
 124                 background-color: @colorGray12;
 125                 color: @colorGray1;
 126                 border-color: @colorGray7;
 127                 box-shadow: none;
 128         }
 129
 130         &:disabled {
 131                 background-color: @colorGray12;
 132                 color: @colorBaseInverted;
 133                 border-color: @colorGray12;
 134                 cursor: default;
 135
 136                 // Make sure disabled buttons don't have hover and active states
 137                 &:hover,
 138                 &:active {
 139                         background-color: @colorGray12;
 140                         color: @colorBaseInverted;
 141                         box-shadow: none;
 142                         border-color: @colorGray12;
 143                 }
 144         }
 145
 146         // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
 147         &:not( :disabled ) {
 148                 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
 149         }
 150
 151         // Styling for specific button types
 152         // -----------------------------------------
 153
 154         // Quiet buttons
 155         //
 156         // 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.
 157         // Its use is  not recommended on mobile/tablet due to lack of hover state.
 158         //
 159         // Markup:
 160         // <div>
 161         //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
 162         // </div>
 163         // <div>
 164         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
 165         // </div>
 166         // <div>
 167         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
 168         // </div>
 169         // <div>
 170         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
 171         // </div>
 172         // <div>
 173         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
 174         // </div>
 175         //
 176         // Styleguide 2.1.1.
 177         &.mw-ui-quiet,
 178         &.mw-ui-quiet.mw-ui-progressive,
 179         &.mw-ui-quiet.mw-ui-destructive {
 180                 background-color: transparent;
 181                 // Quiet buttons all start gray, and reveal
 182                 // progressive/destructive color on hover and active.
 183                 color: @colorButtonText;
 184                 border-color: transparent;
 185
 186                 &:hover {
 187                         background-color: transparent;
 188                         color: @colorButtonTextHighlight;
 189                         border-color: transparent;
 190                         box-shadow: none;
 191                 }
 192
 193                 &:active {
 194                         background-color: transparent;
 195                         color: @colorButtonTextActive;
 196                         border-color: transparent;
 197                 }
 198
 199                 &:focus {
 200                         background-color: transparent;
 201                         color: @colorButtonText;
 202                         border-color: transparent;
 203                         box-shadow: none;
 204                 }
 205
 206                 &:disabled,
 207                 &:disabled:hover,
 208                 &:disabled:active {
 209                         background-color: transparent;
 210                         color: @colorDisabledText;
 211                         border-color: transparent;
 212                 }
 213         }
 214
 215         // Progressive buttons
 216         //
 217         // Use progressive buttons for actions which lead to a next step in the process.
 218         //
 219         // Markup:
 220         // <div>
 221         //   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
 222         // </div>
 223         // <div>
 224         //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
 225         // </div>
 226         //
 227         // Styleguide 2.1.2.
 228         &.mw-ui-progressive {
 229                 .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 230
 231                 &.mw-ui-quiet {
 232                         color: @colorProgressive;
 233
 234                         &:hover {
 235                                 background-color: transparent;
 236                                 color: @colorProgressiveHighlight;
 237                         }
 238
 239                         &:active {
 240                                 color: @colorProgressiveActive;
 241                         }
 242
 243                         &:focus {
 244                                 background-color: transparent;
 245                                 color: @colorProgressive;
 246                         }
 247                 }
 248         }
 249
 250         // Destructive buttons
 251         //
 252         // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
 253         // This should not be used for cancel buttons.
 254         //
 255         // Markup:
 256         // <div>
 257         //   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 258         // </div>
 259         // <div>
 260         //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 261         // </div>
 262         //
 263         // Styleguide 2.1.3.
 264         &.mw-ui-destructive {
 265                 .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 266
 267                 &.mw-ui-quiet {
 268                         color: @colorDestructive;
 269
 270                         &:hover {
 271                                 background-color: transparent;
 272                                 color: @colorDestructiveHighlight;
 273                         }
 274
 275                         &:active {
 276                                 color: @colorDestructiveActive;
 277                         }
 278
 279                         &:focus {
 280                                 background-color: transparent;
 281                                 color: @colorDestructive;
 282                         }
 283                 }
 284         }
 285
 286         // Big buttons
 287         //
 288         // Not all buttons are equal. You can emphasise certain actions over others
 289         // using the mw-ui-big class.
 290         //
 291         // Markup:
 292         // <div>
 293         //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
 294         // </div>
 295         // <div>
 296         //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
 297         // </div>
 298         // <div>
 299         //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
 300         // </div>
 301         //
 302         // Styleguide 2.1.4.
 303         &.mw-ui-big {
 304                 font-size: 1.3em;
 305         }
 306
 307         // Block buttons
 308         //
 309         // Some buttons might need to be stacked.
 310         //
 311         // Markup:
 312         // <div>
 313         //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
 314         // </div>
 315         // <div>
 316         //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
 317         // </div>
 318         // <div>
 319         //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
 320         // </div>
 321         //
 322         // Styleguide 2.1.5.
 323         &.mw-ui-block {
 324                 display: block;
 325                 width: 100%;
 326                 margin-left: auto;
 327                 margin-right: auto;
 328         }
 329 }
 330
 331 input.mw-ui-button,
 332 button.mw-ui-button {
 333         // Buttons in Firefox have extra height
 334         &::-moz-focus-inner {
 335                 margin-top: -1px;
 336                 margin-bottom: -1px;
 337         }
 338 }
 339
 340 a.mw-ui-button {
 341         text-decoration: none;
 342
 343         // This overrides an underline declaration on a:hover and a:focus in
 344         // commonElements.css, which the class alone isn't specific enough to do.
 345         &:hover,
 346         &:focus {
 347                 text-decoration: none;
 348         }
 349 }
 350
 351 // Button groups
 352 //
 353 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 354 //
 355 // Markup:
 356 // <div class="mw-ui-button-group">
 357 //   <div class="mw-ui-button is-on">A</div>
 358 //   <div class="mw-ui-button">B</div>
 359 //   <div class="mw-ui-button">C</div>
 360 //   <div class="mw-ui-button">D</div>
 361 // </div><div style="clear:both"></div>
 362 //
 363 // Styleguide 2.2.
 364 .mw-ui-button-group {
 365         & > * {
 366                 min-width: 48px;
 367                 border-radius: 0;
 368                 float: left;
 369
 370                 &:first-child {
 371                         border-top-left-radius: @borderRadius;
 372                         border-bottom-left-radius: @borderRadius;
 373                 }
 374
 375                 &:not( :first-child ) {
 376                         border-left: 0;
 377                 }
 378
 379                 &:last-child {
 380                         border-top-right-radius: @borderRadius;
 381                         border-bottom-right-radius: @borderRadius;
 382                 }
 383         }
 384
 385         & .is-on .button {
 386                 cursor: default;
 387         }
 388 }