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 .mw-ui-button-states();
34 // Styling for specific button types
35 // -----------------------------------------
39 // 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.
40 // Its use is not recommended on mobile/tablet due to lack of hover state.
44 // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
47 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
50 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
53 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
56 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
61 &.mw-ui-quiet.mw-ui-progressive,
62 &.mw-ui-quiet.mw-ui-destructive {
63 background-color: transparent;
64 // Quiet buttons all start gray, and reveal
65 // progressive/destructive color on hover and active.
66 color: @colorButtonText;
67 border-color: transparent;
70 background-color: transparent;
71 color: @colorButtonTextHighlight;
72 border-color: transparent;
77 background-color: transparent;
78 color: @colorButtonTextActive;
79 border-color: transparent;
83 background-color: transparent;
84 color: @colorButtonText;
85 border-color: transparent;
92 background-color: transparent;
93 color: @colorDisabledText;
94 border-color: transparent;
98 // Progressive buttons
100 // Use progressive buttons for actions which lead to a next step in the process.
104 // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
107 // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
111 &.mw-ui-progressive {
112 .mw-ui-button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
115 color: @colorProgressive;
118 background-color: transparent;
119 color: @colorProgressiveHighlight;
123 color: @colorProgressiveActive;
127 background-color: transparent;
128 color: @colorProgressive;
133 // Destructive buttons
135 // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
136 // This should not be used for cancel buttons.
140 // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
143 // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
147 &.mw-ui-destructive {
148 .mw-ui-button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
151 color: @colorDestructive;
154 background-color: transparent;
155 color: @colorDestructiveHighlight;
159 color: @colorDestructiveActive;
163 background-color: transparent;
164 color: @colorDestructive;
171 // Not all buttons are equal. You can emphasise certain actions over others
172 // using the mw-ui-big class.
176 // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
179 // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
182 // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
192 // Some buttons might need to be stacked.
196 // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
199 // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
202 // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
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;