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 @transitionDuration: .1s;
16 @transitionFunction: ease-in-out;
18 // Neutral button styling
22 // <button class="mw-ui-button">.mw-ui-button</button>
25 // <button class="mw-ui-button" disabled>.mw-ui-button</button>
30 // Inherit the font rather than apply user agent stylesheet (bug 70072)
34 display: inline-block;
37 .box-sizing(border-box);
39 // Disable weird iOS styling
40 -webkit-appearance: none;
43 // http://stackoverflow.com/a/5838575/365238
49 border-radius: @borderRadius;
52 // Ensure that buttons and inputs are nicely aligned when they have differing heights
53 vertical-align: middle;
59 // Interaction styling
67 .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
69 // Styling for specific button types
70 // -----------------------------------------
74 // Not all buttons are equal. You can emphasise certain actions over others
75 // using the mw-ui-big class.
79 // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
82 // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
85 // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
88 // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
98 // Some buttons might need to be stacked.
102 // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
105 // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
108 // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
111 // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
120 // Progressive buttons
122 // Use progressive buttons for actions which lead to a next step in the process.
123 // .mw-ui-primary is deprecated, kept for compatibility.
127 // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
130 // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
136 .button-colors(@colorProgressive);
139 .button-colors-quiet(@colorProgressive);
143 // Constructive buttons
145 // Use constructive buttons for actions which result in a final action in the process that results
146 // in a change of state.
147 // e.g. save changes button
151 // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
154 // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
158 &.mw-ui-constructive {
159 .button-colors(@colorConstructive);
162 .button-colors-quiet(@colorConstructive);
166 // Destructive buttons
168 // Use destructive buttons for actions which result in the destruction of data.
169 // e.g. deleting a page.
170 // This should not be used for cancel buttons.
174 // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
177 // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
181 &.mw-ui-destructive {
182 .button-colors(@colorDestructive);
185 .button-colors-quiet(@colorDestructive);
191 // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
195 // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
198 // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
201 // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
204 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
207 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
210 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
213 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
218 background: transparent;
221 .button-colors-quiet(@colorButtonText);
230 background: transparent;
236 text-decoration: none;
238 // This overrides an underline declaration on a:hover and a:focus in
239 // commonElements.css, which the class alone isn't specific enough to do.
242 text-decoration: none;
248 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
251 // <div class="mw-ui-button-group">
252 // <div class="mw-ui-button">A</div>
253 // <div class="mw-ui-button">B</div>
254 // <div class="mw-ui-button">C</div>
255 // <div class="mw-ui-button">D</div>
256 // </div><div style="clear:both"></div>
259 .mw-ui-button-group > * {
265 border-top-left-radius: @borderRadius;
266 border-bottom-left-radius: @borderRadius;
269 &:not(:first-child) {
274 border-top-right-radius: @borderRadius;
275 border-bottom-right-radius: @borderRadius;