1 @import "mediawiki.mixins";
2 @import "../../settings/typography";
3 @import "../../mixins/effects";
4 @import "../../mixins/utilities";
8 // All buttons start with mw-ui-button class, modified by other classes.
9 // It can be any element. Due to a lack of a CSS reset, the exact styling of
10 // the button depends on what type of element is used.
11 // There are two kinds of buttons, the default is a "Call to Action" with an obvious border
12 // and there is a quiet kind without a border.
16 @buttonBorderRadius: 3px;
17 @transitionDuration: .1s;
18 @transitionFunction: ease-in-out;
20 // Neutral button styling
23 // <button class="mw-ui-button">.mw-ui-button</button>
24 // <button class="mw-ui-button" disabled>.mw-ui-button</button>
29 display: inline-block;
32 .box-sizing(border-box);
34 // Disable weird iOS styling
35 -webkit-appearance: none;
38 // http://stackoverflow.com/a/5838575/365238
43 .button-colors(@colorWhite);
44 border-radius: @buttonBorderRadius;
46 // Ensure that buttons and inputs are nicely aligned when they have differing heights
47 vertical-align: middle;
52 text-shadow: 0 1px rgba(0, 0, 0, .1);
54 // Interaction styling
62 .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
64 // Styling for specific button types
65 // -----------------------------------------
69 // Not all buttons are equal. You can emphasise certain actions over others
70 // using the mw-ui-big class.
73 // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
74 // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
75 // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
76 // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
80 font-size: @baseFontSize * 1.3;
85 // Some buttons might need to be stacked.
88 // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
89 // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
90 // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
91 // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
99 // Progressive buttons
101 // Use progressive buttons for actions which lead to a next step in the process.
102 // .mw-ui-primary is deprecated, kept for compatibility.
105 // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
106 // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
111 .button-colors(@colorProgressive);
114 .button-colors-quiet(@colorProgressive);
118 // Constructive buttons
120 // Use constructive buttons for actions which result in a final action in the process that results
121 // in a change of state.
122 // e.g. save changes button
125 // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
126 // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
129 &.mw-ui-constructive {
130 .button-colors(@colorConstructive);
133 .button-colors-quiet(@colorConstructive);
137 // Destructive buttons
139 // Use destructive buttons for actions which result in the destruction of data.
140 // e.g. deleting a page.
141 // This should not be used for cancel buttons.
144 // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
145 // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
148 &.mw-ui-destructive {
149 .button-colors(@colorDestructive);
152 .button-colors-quiet(@colorDestructive);
158 // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
161 // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
162 // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
163 // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
164 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
165 // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
166 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
167 // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
171 background: transparent;
174 .button-colors-quiet(@colorGrayDark);
183 background: transparent;
189 text-decoration: none;
191 // This overrides an underline declaration on a:hover and a:focus in
192 // commonElements.css, which the class alone isn't specific enough to do.
195 text-decoration: none;
201 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
204 // <div class="mw-ui-button-group">
205 // <div class="mw-ui-button">A</div>
206 // <div class="mw-ui-button">B</div>
207 // <div class="mw-ui-button">C</div>
208 // <div class="mw-ui-button">D</div>
209 // </div><div style="clear:both"></div>
212 .mw-ui-button-group > * {
217 border-top-left-radius: @buttonBorderRadius;
218 border-bottom-left-radius: @buttonBorderRadius;
221 &:not(:first-child) {
226 border-top-right-radius: @buttonBorderRadius;
227 border-bottom-right-radius: @buttonBorderRadius;