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