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

   1 @import "mediawiki.mixins";
   2 @import "mediawiki.ui/variables";
   3 @import "mediawiki.ui/mixins";
   4
   5 /*
   6 Buttons
   7
   8 <h3>Guidelines:</h3>
   9
  10 - .mw-ui-button can **only** be used on **A, INPUT, and BUTTON tags**. There is support for some input types, but this doesn't work in older browsers.
  11 - .mw-ui-progressive, .mw-ui-constructive, and .mw-ui-destructive can be applied alone on A (see Styleguide 4.0), but can be applied in tandem with .mw-ui-button. *The class order is important:* **base type** (mw-ui-button) must come **first**, **mode** (mw-ui-quiet) **second**, and **context** (mw-ui-progressive) comes **last**.
  12 - A .mw-ui-quiet button may **never** be the first or only button in a form.
  13 - Semantically, the **first button in a form should always be the affirmative action** (eg. Submit). This is for accessibility purposes. Where it appears visually is not as important.
  14
  15 <h3>Notes:</h3>
  16
  17 - IE6 does not apply any .mw-ui-button styles at all on BUTTON.
  18 - IE6 only applies the base .mw-ui-CONTEXT color on A, and doesn't care if you are combining it (ie. .mw-ui-destructive.mw-ui-quiet = always red text).
  19 - IE7 and IE8 look slightly different from other browsers when rendering certain modes of these buttons.
  20
  21 Markup:
  22 <button class="mw-ui-button {$modifiers}">Default</button>
  23 <button class="mw-ui-button mw-ui-progressive {$modifiers}">Progressive</button>
  24 <button class="mw-ui-button mw-ui-constructive {$modifiers}">Constructive</button>
  25 <button class="mw-ui-button mw-ui-destructive {$modifiers}">Destructive</button>
  26 <button class="mw-ui-button mw-ui-progressive {$modifiers}" disabled>Disabled Progressive</button>
  27 <a class="mw-ui-button {$modifiers}">Default Anchor</a>
  28 <a class="mw-ui-button mw-ui-progressive {$modifiers}">Progressive Anchor</a>
  29 <a class="mw-ui-button mw-ui-constructive {$modifiers}">Constructive Anchor</a>
  30 <a class="mw-ui-button mw-ui-destructive {$modifiers}">Destructive Anchor</a>
  31
  32 .mw-ui-quiet - Quiet: A button that doesn't look like a button.
  33 .mw-ui-inline - Inline: An even smaller button (zero padding) which also inherits font weight.
  34 .mw-ui-big - Big: 1.3x font-size.
  35
  36 Styleguide 2.
  37 */
  38
  39 // Helpers
  40 // Individual Button Contexts
  41 .mixin-mw-ui-button-context( @contextualColor ) {
  42         @textShadowColor: spin( @colorTextLight, 180 );
  43         @borderColor: mix( @contextualColor, #000, 75% );
  44         @raisedColor: mix( @contextualColor, #fff, 92% );
  45         @depressedColor: darken( @contextualColor, 8% );
  46         @quietDepressedColor: darken( @contextualColor, 25% );
  47
  48         .mixin-mw-ui-button-disabled-state() {
  49                 &[disabled],
  50                 &[disabled]:hover,
  51                 &[disabled]:focus {
  52                         background: @colorGrayLight;
  53                         color: @colorWhite;
  54                         text-shadow: none;
  55                         .box-shadow( ~"none" );
  56                 }
  57         }
  58
  59         .mixin-mw-ui-button-normal-mode() {
  60                 background: @contextualColor;
  61                 text-shadow: 0 1px fade( @textShadowColor, 10% );
  62                 &, &:visited {
  63                         color: @colorWhite;
  64                 }
  65
  66                 .mixin-mw-ui-button-disabled-state();
  67
  68                 &:hover,
  69                 &:focus {
  70                         background: @raisedColor;
  71                         text-shadow: 0 1px fade( @textShadowColor, 33% );
  72                 }
  73
  74                 &:hover {
  75                         // Shadow under outer, 3D raising inner, edge shading inner
  76                         .box-shadow( ~"0 1px 0 0 rgba(0, 0, 0, .15), inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05)" );
  77                 }
  78
  79                 &:focus {
  80                         // 3D raising inner, edge shading inner
  81                         .box-shadow( ~"inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05), inset 0 0 0 1px @{borderColor}" );
  82                 }
  83
  84                 &:active {
  85                         background: @depressedColor;
  86                         // Slight 3D raising inner, deep edge shading inner
  87                         .box-shadow( ~"inset 0 -2px 0 0 @{depressedColor}, inset 0 2px 0 0 rgba(0, 0, 0, .25)" );
  88                 }
  89         }
  90
  91         // Default mode (fully colored)
  92         &:not(.mw-ui-quiet) {
  93                 .mixin-mw-ui-button-normal-mode();
  94         }
  95         .lte-ie8 & { // IE7 & IE8 do not support :not() selector
  96                 .mixin-mw-ui-button-normal-mode();
  97         }
  98
  99         // Quiet mode (transparent bg, no border; text color on activity)
 100         .lte-ie8 &.mw-ui-quiet,
 101         &.mw-ui-quiet {
 102                 background: transparent;
 103
 104                 &, &:visited {
 105                         color: @colorTextLight;
 106                 }
 107
 108                 &:hover {
 109                         color: @contextualColor;
 110                 }
 111
 112                 &:active {
 113                         color: @depressedColor;
 114                 }
 115
 116                 &:focus {
 117                         color: @quietDepressedColor;
 118                 }
 119
 120                 .mixin-mw-ui-button-disabled-state();
 121         }
 122 }
 123
 124 // Default button styles
 125 .mixin-mw-ui-button-default() {
 126         background: @colorGrayLightest;
 127
 128         &, &:visited {
 129                 color: @colorTextLight;
 130         }
 131
 132         @textShadowColor: spin( @colorTextLight, 180 );
 133         @borderColor: mix( @colorGrayLightest, #000, 75% );
 134         @raisedColor: mix( @colorGrayLightest, #fff, 92% );
 135         @depressedColor: darken( @colorGrayLightest, 8% );
 136         @quietDepressedColor: darken( @colorGrayLightest, 25% );
 137
 138         .mixin-mw-ui-button-normal-mode() {
 139                 &:hover,
 140                 &:focus {
 141                         background: @raisedColor;
 142                         text-shadow: 0 1px fade( @textShadowColor, 33% );
 143                 }
 144
 145                 &:hover {
 146                         // Shadow under outer, 3D raising inner, edge shading inner
 147                         .box-shadow( ~"0 1px 0 0 rgba(0, 0, 0, .15), inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05)" );
 148                 }
 149
 150                 &:focus {
 151                         // 3D raising inner, edge shading inner
 152                         .box-shadow( ~"inset 0 -4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05), inset 0 0 0 1px @{borderColor}" );
 153                 }
 154
 155                 &:active {
 156                         background: @depressedColor;
 157                         // Slight 3D raising inner, deep edge shading inner
 158                         .box-shadow( ~"inset 0 -2px 0 0 @{depressedColor}, inset 0 2px 0 0 rgba(0, 0, 0, .25)" );
 159                 }
 160         }
 161
 162         // Default mode (fully colored)
 163         &:not(.mw-ui-quiet) {
 164                 .mixin-mw-ui-button-normal-mode();
 165         }
 166         .lte-ie8 & { // IE7 & IE8 do not support :not() selector
 167                 .mixin-mw-ui-button-normal-mode();
 168         }
 169
 170         // Quiet mode (transparent bg, no border; text color on activity)
 171         .lte-ie8 &.mw-ui-quiet,
 172         &.mw-ui-quiet {
 173                 background: transparent;
 174
 175                 &:hover,
 176                 &:focus,
 177                 &:active {
 178                         color: @colorText;
 179                 }
 180         }
 181 }
 182
 183 // Selector mixins, used for customization if needed
 184 .mixin-mw-ui-button() {
 185         // Container layout
 186         display: inline-block;
 187         padding: .5em 1em;
 188         margin: 0;
 189         vertical-align: middle;
 190         .box-sizing(border-box);
 191
 192         // IE6/IE7 hack
 193         *display: inline;
 194         zoom: 1;
 195
 196         // Disable weird iOS styling
 197         -webkit-appearance: none;
 198
 199         // Typography
 200         font-family: inherit;
 201         font-size: 1em;
 202         font-weight: bold;
 203         line-height: inherit;
 204         &, &:hover {
 205                 text-decoration: none;
 206         }
 207
 208         // Design
 209         border: 0px solid transparent;
 210         border-radius: 3px;
 211         cursor: pointer;
 212
 213         // Animation
 214         .transition( ~"box-shadow .1s linear, background-color .1s linear, opacity .5s linear" );
 215
 216         // Disabled state (cursor fix)
 217         &:disabled {
 218                 cursor: default;
 219         }
 220         // Focus/active state (outline fix)
 221         &:focus, &:active {
 222                 outline: none;
 223         }
 224
 225         /*
 226          * Button modes (continued in .mw-ui-button-context())
 227          */
 228
 229         // Thin mode (no padding)
 230         &.mw-ui-inline {
 231                 padding: 0;
 232                 font-weight: inherit;
 233                 vertical-align: inherit;
 234         }
 235
 236         // Big mode (1.3x font size)
 237         &.mw-ui-big {
 238                 font-size: 1.3em;
 239         }
 240
 241         /*
 242          * Default button styles
 243          */
 244
 245         .mixin-mw-ui-button-default();
 246
 247         /*
 248          * Contextual classes
 249          */
 250
 251         // Progressive context
 252         &.mw-ui-progressive {
 253                 .mixin-mw-ui-button-context( @colorProgressive );
 254         }
 255
 256         // Constructive context
 257         &.mw-ui-constructive {
 258                 .mixin-mw-ui-button-context( @colorConstructive );
 259         }
 260
 261         // Destructive context
 262         &.mw-ui-destructive {
 263                 .mixin-mw-ui-button-context( @colorDestructive );
 264         }
 265 }
 266
 267 // Button selectors
 268 .mw-ui-button {
 269         .mixin-mw-ui-button;
 270
 271         // Default mw-ui-button implementation forces min dimensions for improved touch access
 272         min-width: 48px;
 273         min-height: 33px;
 274
 275         // When these buttons are children of mw-ui-button-group, adjust accordingly
 276         .mw-ui-button-group > & {
 277                 .mw-ui-button-group-child;
 278         }
 279 }
 280
 281 /*
 282 Button groups
 283
 284 Group of buttons.
 285
 286 Markup:
 287 <div class="mw-ui-button-group">
 288   <a class="mw-ui-button" href=javascript:void(0)>A</a>
 289   <a class="mw-ui-button" href=javascript:void(0)>B</a>
 290   <a class="mw-ui-button" href=javascript:void(0)>C</a>
 291   <a class="mw-ui-button" href=javascript:void(0)>D</a>
 292 </div>
 293
 294 Styleguide 2.1.
 295 */
 296 .mw-ui-button-group {
 297         // Clearfix
 298         zoom: 1;
 299         &:after {
 300                 content: "";
 301                 display: table;
 302                 clear: both;
 303         }
 304 }
 305
 306 // To be used within .mw-ui-button selector
 307 .mw-ui-button-group-child() {
 308         border-radius: 0;
 309         float: left;
 310
 311         &:first-child {
 312                 border-top-left-radius: 3px;
 313                 border-bottom-left-radius: 3px;
 314         }
 315
 316         &:last-child {
 317                 border-top-right-radius: 3px;
 318                 border-bottom-right-radius: 3px;
 319         }
 320 }