1 @import "mediawiki.mixins";
2 @import "mediawiki.ui/variables";
3 @import "mediawiki.ui/mixins";
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 // Inherit the font rather than apply user agent stylesheet (T72072)
33 display: inline-block;
35 max-width: 28.75em; // equivalent to 460px, @see T95367
36 padding: 0.546875em 1em;
39 border-radius: @borderRadius;
40 .box-sizing( border-box );
42 // Disable weird iOS styling
43 -webkit-appearance: none;
46 // https://stackoverflow.com/a/5838575/365238
47 *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
50 // Ensure that buttons and inputs are nicely aligned when they have differing heights
51 vertical-align: middle;
54 .button-colors( @colorGray15, #fff, #d9d9d9 );
58 // Interaction styling
64 // Remove the inner border and padding in Firefox.
66 border-color: transparent;
71 // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
73 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
81 // Styling for specific button types
82 // -----------------------------------------
86 // Not all buttons are equal. You can emphasise certain actions over others
87 // using the mw-ui-big class.
91 // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
94 // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
97 // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
107 // Some buttons might need to be stacked.
111 // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
114 // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
117 // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
128 // Progressive buttons
130 // Use progressive buttons for actions which lead to a next step in the process.
131 // .mw-ui-constructive is deprecated; consolidated with `progressive`, see T110555
135 // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
138 // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
143 &.mw-ui-constructive {
144 .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
147 .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
151 // Destructive buttons
153 // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
154 // This should not be used for cancel buttons.
158 // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
161 // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
165 &.mw-ui-destructive {
166 .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
169 .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
175 // 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.
176 // Its use is not recommended on mobile/tablet due to lack of hover state.
180 // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
183 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
186 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
189 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
192 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
197 background: transparent;
200 .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
209 background: transparent;
215 button.mw-ui-button {
216 // Buttons in Firefox have extra height
217 &::-moz-focus-inner {
224 text-decoration: none;
226 // This overrides an underline declaration on a:hover and a:focus in
227 // commonElements.css, which the class alone isn't specific enough to do.
230 text-decoration: none;
236 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
239 // <div class="mw-ui-button-group">
240 // <div class="mw-ui-button is-on">A</div>
241 // <div class="mw-ui-button">B</div>
242 // <div class="mw-ui-button">C</div>
243 // <div class="mw-ui-button">D</div>
244 // </div><div style="clear:both"></div>
247 .mw-ui-button-group {
254 border-top-left-radius: @borderRadius;
255 border-bottom-left-radius: @borderRadius;
258 &:not( :first-child ) {
263 border-top-right-radius: @borderRadius;
264 border-bottom-right-radius: @borderRadius;