// Neutral button styling
//
// Markup:
-// <button class="mw-ui-button">.mw-ui-button</button>
-// <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// <div>
+// <button class="mw-ui-button">.mw-ui-button</button>
+// </div>
+// <div>
+// <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// </div>
//
// Styleguide 2.1.
.mw-ui-button {
// using the mw-ui-big class.
//
// Markup:
- // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
+ // </div>
//
// Styleguide 2.1.6.
&.mw-ui-big {
// Some buttons might need to be stacked.
//
// Markup:
- // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+ // </div>
//
// Styleguide 2.1.5.
&.mw-ui-block {
// .mw-ui-primary is deprecated, kept for compatibility.
//
// Markup:
- // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
+ // </div>
//
// Styleguide 2.1.1.
&.mw-ui-progressive,
// e.g. save changes button
//
// Markup:
- // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
+ // </div>
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
// This should not be used for cancel buttons.
//
// Markup:
- // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
+ // </div>
//
// Styleguide 2.1.3.
&.mw-ui-destructive {
// Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
//
// Markup:
- // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+ // </div>
//
// Styleguide 2.1.4.
&.mw-ui-quiet {