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

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