1 @import 'mediawiki.mixins';
2 @import 'mediawiki.ui/variables';
4 /* stylelint-disable selector-class-pattern */
8 // Primary buttons mixin
9 .button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
10 background-color: @bgColor;
12 // border of the same color as background so that light background and
13 // dark background buttons are the same height and width
14 border: 1px solid @bgColor;
17 background-color: @highlightColor;
18 border-color: @highlightColor;
22 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
27 background-color: @activeColor;
28 border-color: @activeColor;
33 background-color: @colorGray12;
35 border-color: @colorGray12;
37 // Make sure disabled buttons don't have hover and active states
40 background-color: @colorGray12;
42 border-color: @colorGray12;
48 // All buttons start with `.mw-ui-button` class, modified by other classes.
49 // It can be any element. Due to a lack of a CSS reset, the exact styling of
50 // the button depends on what type of element is used.
51 // There are two kinds of buttons, the default is a "Call to Action" with an obvious border
52 // and there is a quiet kind without a border.
56 // Neutral button styling
58 // These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.
62 // <button class="mw-ui-button">.mw-ui-button</button>
65 // <button class="mw-ui-button" disabled>.mw-ui-button</button>
70 background-color: @colorGray15;
71 color: @colorButtonText;
73 display: inline-block;
74 .box-sizing( border-box );
76 max-width: 28.75em; // equivalent to 460px, @see T95367
78 padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
79 border: @border-width-base @border-style-base @border-color-base;
80 border-radius: @borderRadius;
81 // Inherit the font rather than apply user agent stylesheet (T72072)
87 // Disable weird iOS styling
88 -webkit-appearance: none;
90 // https://stackoverflow.com/a/5838575/365238
91 *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
93 // Ensure that buttons and inputs are nicely aligned when they have differing heights
94 vertical-align: middle;
95 // Interaction styling
98 // Make sure that `color` isn't inheriting from user-agent styles
100 color: @colorButtonText;
104 background-color: @background-color-base;
106 border-color: @colorGray10;
110 background-color: @background-color-base;
111 // Make sure that `color` isn't inheriting from user-agent styles
112 color: @colorButtonText;
113 border-color: @colorProgressive;
114 box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @background-color-base;
117 // Remove the inner border and padding in Firefox.
118 &::-moz-focus-inner {
119 border-color: transparent;
126 background-color: @colorGray12;
128 border-color: @colorGray7;
133 background-color: @colorGray12;
134 color: @colorBaseInverted;
135 border-color: @colorGray12;
138 // Make sure disabled buttons don't have hover and active states
141 background-color: @colorGray12;
142 color: @colorBaseInverted;
144 border-color: @colorGray12;
148 // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
150 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
153 // Styling for specific button types
154 // -----------------------------------------
158 // 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.
159 // Its use is not recommended on mobile/tablet due to lack of hover state.
163 // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
166 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
169 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
172 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
175 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
180 &.mw-ui-quiet.mw-ui-progressive,
181 &.mw-ui-quiet.mw-ui-destructive {
182 background-color: transparent;
183 // Quiet buttons all start gray, and reveal
184 // progressive/destructive color on hover and active.
185 color: @colorButtonText;
186 border-color: transparent;
189 background-color: transparent;
190 color: @colorButtonTextHighlight;
191 border-color: transparent;
196 background-color: transparent;
197 color: @colorButtonTextActive;
198 border-color: transparent;
202 background-color: transparent;
203 color: @colorButtonText;
204 border-color: transparent;
211 background-color: transparent;
212 color: @colorDisabledText;
213 border-color: transparent;
217 // Progressive buttons
219 // Use progressive buttons for actions which lead to a next step in the process.
223 // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
226 // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
230 &.mw-ui-progressive {
231 .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
234 color: @colorProgressive;
237 background-color: transparent;
238 color: @colorProgressiveHighlight;
242 color: @colorProgressiveActive;
246 background-color: transparent;
247 color: @colorProgressive;
252 // Destructive buttons
254 // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
255 // This should not be used for cancel buttons.
259 // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
262 // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
266 &.mw-ui-destructive {
267 .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
270 color: @colorDestructive;
273 background-color: transparent;
274 color: @colorDestructiveHighlight;
278 color: @colorDestructiveActive;
282 background-color: transparent;
283 color: @colorDestructive;
290 // Not all buttons are equal. You can emphasise certain actions over others
291 // using the mw-ui-big class.
295 // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
298 // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
301 // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
311 // Some buttons might need to be stacked.
315 // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
318 // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
321 // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
334 button.mw-ui-button {
335 // Buttons in Firefox have extra height
336 &::-moz-focus-inner {
343 text-decoration: none;
345 // This overrides an underline declaration on a:hover and a:focus in
346 // commonElements.css, which the class alone isn't specific enough to do.
349 text-decoration: none;
355 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
358 // <div class="mw-ui-button-group">
359 // <div class="mw-ui-button is-on">A</div>
360 // <div class="mw-ui-button">B</div>
361 // <div class="mw-ui-button">C</div>
362 // <div class="mw-ui-button">D</div>
363 // </div><div style="clear:both"></div>
366 .mw-ui-button-group {
373 border-top-left-radius: @borderRadius;
374 border-bottom-left-radius: @borderRadius;
377 &:not( :first-child ) {
382 border-top-right-radius: @borderRadius;
383 border-bottom-right-radius: @borderRadius;