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