1 @import "mediawiki.mixins";
2 @import "mediawiki.ui/variables";
3 @import "mediawiki.ui/mixins";
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.
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.
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>
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.
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% );
48 .mixin-mw-ui-button-disabled-state() {
52 background: @colorGrayLight;
55 .box-shadow( ~"none" );
59 .mixin-mw-ui-button-normal-mode() {
60 background: @contextualColor;
61 text-shadow: 0 1px fade( @textShadowColor, 10% );
66 .mixin-mw-ui-button-disabled-state();
70 background: @raisedColor;
71 text-shadow: 0 1px fade( @textShadowColor, 33% );
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)" );
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}" );
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)" );
91 // Default mode (fully colored)
93 .mixin-mw-ui-button-normal-mode();
95 .lte-ie8 & { // IE7 & IE8 do not support :not() selector
96 .mixin-mw-ui-button-normal-mode();
99 // Quiet mode (transparent bg, no border; text color on activity)
100 .lte-ie8 &.mw-ui-quiet,
102 background: transparent;
105 color: @colorTextLight;
109 color: @contextualColor;
113 color: @depressedColor;
117 color: @quietDepressedColor;
120 .mixin-mw-ui-button-disabled-state();
124 // Default button styles
125 .mixin-mw-ui-button-default() {
126 background: @colorGrayLightest;
129 color: @colorTextLight;
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% );
138 .mixin-mw-ui-button-normal-mode() {
141 background: @raisedColor;
142 text-shadow: 0 1px fade( @textShadowColor, 33% );
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)" );
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}" );
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)" );
162 // Default mode (fully colored)
163 &:not(.mw-ui-quiet) {
164 .mixin-mw-ui-button-normal-mode();
166 .lte-ie8 & { // IE7 & IE8 do not support :not() selector
167 .mixin-mw-ui-button-normal-mode();
170 // Quiet mode (transparent bg, no border; text color on activity)
171 .lte-ie8 &.mw-ui-quiet,
173 background: transparent;
183 // Selector mixins, used for customization if needed
184 .mixin-mw-ui-button() {
186 display: inline-block;
189 vertical-align: middle;
190 .box-sizing(border-box);
196 // Disable weird iOS styling
197 -webkit-appearance: none;
200 font-family: inherit;
203 line-height: inherit;
205 text-decoration: none;
209 border: 0px solid transparent;
214 .transition( ~"box-shadow .1s linear, background-color .1s linear, opacity .5s linear" );
216 // Disabled state (cursor fix)
220 // Focus/active state (outline fix)
226 * Button modes (continued in .mw-ui-button-context())
229 // Thin mode (no padding)
232 font-weight: inherit;
233 vertical-align: inherit;
238 // Big mode (1.3x font size)
244 * Default button styles
247 .mixin-mw-ui-button-default();
253 // Progressive context
254 &.mw-ui-progressive {
255 .mixin-mw-ui-button-context( @colorProgressive );
258 // Constructive context
259 &.mw-ui-constructive {
260 .mixin-mw-ui-button-context( @colorConstructive );
263 // Destructive context
264 &.mw-ui-destructive {
265 .mixin-mw-ui-button-context( @colorDestructive );
273 // Default mw-ui-button implementation forces min dimensions for improved touch access
277 // When these buttons are children of mw-ui-button-group, adjust accordingly
278 .mw-ui-button-group > & {
279 .mw-ui-button-group-child;
289 <div class="mw-ui-button-group">
290 <a class="mw-ui-button" href=javascript:void(0)>A</a>
291 <a class="mw-ui-button" href=javascript:void(0)>B</a>
292 <a class="mw-ui-button" href=javascript:void(0)>C</a>
293 <a class="mw-ui-button" href=javascript:void(0)>D</a>
298 .mw-ui-button-group {
308 // To be used within .mw-ui-button selector
309 .mw-ui-button-group-child() {
314 border-top-left-radius: 3px;
315 border-bottom-left-radius: 3px;
319 border-top-right-radius: 3px;
320 border-bottom-right-radius: 3px;