1 @import 'mediawiki.mixins';
2 @import 'mediawiki.ui/mixins.buttons';
3 @import 'mediawiki.ui/variables';
5 /* stylelint-disable selector-class-pattern */
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.
15 // Neutral button styling
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.
21 // <button class="mw-ui-button">.mw-ui-button</button>
24 // <button class="mw-ui-button" disabled>.mw-ui-button</button>
29 background-color: @colorGray15;
30 color: @colorButtonText;
32 display: inline-block;
33 .box-sizing( border-box );
35 max-width: 28.75em; // equivalent to 460px, @see T95367
37 padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
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)
46 // Disable weird iOS styling
47 -webkit-appearance: none;
49 // https://stackoverflow.com/a/5838575/365238
50 *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
52 // Ensure that buttons and inputs are nicely aligned when they have differing heights
53 vertical-align: middle;
54 // Interaction styling
57 // Make sure that `color` isn't inheriting from user-agent styles
59 color: @colorButtonText;
63 background-color: @background-color-base;
65 border-color: @colorGray10;
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;
76 // Remove the inner border and padding in Firefox.
78 border-color: transparent;
85 background-color: @colorGray12;
87 border-color: @colorGray7;
92 background-color: @colorGray12;
93 color: @colorBaseInverted;
94 border-color: @colorGray12;
97 // Make sure disabled buttons don't have hover and active states
100 background-color: @colorGray12;
101 color: @colorBaseInverted;
103 border-color: @colorGray12;
107 // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
109 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
112 // Styling for specific button types
113 // -----------------------------------------
117 // 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.
118 // Its use is not recommended on mobile/tablet due to lack of hover state.
122 // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
125 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
128 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
131 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
134 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
139 &.mw-ui-quiet.mw-ui-progressive,
140 &.mw-ui-quiet.mw-ui-destructive {
141 background-color: transparent;
142 // Quiet buttons all start gray, and reveal
143 // progressive/destructive color on hover and active.
144 color: @colorButtonText;
145 border-color: transparent;
148 background-color: transparent;
149 color: @colorButtonTextHighlight;
150 border-color: transparent;
155 background-color: transparent;
156 color: @colorButtonTextActive;
157 border-color: transparent;
161 background-color: transparent;
162 color: @colorButtonText;
163 border-color: transparent;
170 background-color: transparent;
171 color: @colorDisabledText;
172 border-color: transparent;
176 // Progressive buttons
178 // Use progressive buttons for actions which lead to a next step in the process.
182 // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
185 // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
189 &.mw-ui-progressive {
190 .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
193 color: @colorProgressive;
196 background-color: transparent;
197 color: @colorProgressiveHighlight;
201 color: @colorProgressiveActive;
205 background-color: transparent;
206 color: @colorProgressive;
211 // Destructive buttons
213 // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
214 // This should not be used for cancel buttons.
218 // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
221 // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
225 &.mw-ui-destructive {
226 .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
229 color: @colorDestructive;
232 background-color: transparent;
233 color: @colorDestructiveHighlight;
237 color: @colorDestructiveActive;
241 background-color: transparent;
242 color: @colorDestructive;
249 // Not all buttons are equal. You can emphasise certain actions over others
250 // using the mw-ui-big class.
254 // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
257 // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
260 // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
270 // Some buttons might need to be stacked.
274 // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
277 // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
280 // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
293 button.mw-ui-button {
294 // Buttons in Firefox have extra height
295 &::-moz-focus-inner {
302 text-decoration: none;
304 // This overrides an underline declaration on a:hover and a:focus in
305 // commonElements.css, which the class alone isn't specific enough to do.
308 text-decoration: none;
314 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
317 // <div class="mw-ui-button-group">
318 // <div class="mw-ui-button is-on">A</div>
319 // <div class="mw-ui-button">B</div>
320 // <div class="mw-ui-button">C</div>
321 // <div class="mw-ui-button">D</div>
322 // </div><div style="clear:both"></div>
325 .mw-ui-button-group {
332 border-top-left-radius: @borderRadius;
333 border-bottom-left-radius: @borderRadius;
336 &:not( :first-child ) {
341 border-top-right-radius: @borderRadius;
342 border-bottom-right-radius: @borderRadius;