cursor: default;
}
- // Button sizes and displays
+ // Styling for specific button types
// -----------------------------------------
&.mw-ui-big {
font-size: @baseFontSize * 1.3;
}
+
&.mw-ui-block {
display: block;
width: 100%;
}
+
+ // Primary buttons
+ //
+ // Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons
+ // use mw-ui-progressive (coming soon)
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-primary">mw-ui-primary</button>
+ //
+ // Styleguide 2.1.1.
+ &.mw-ui-primary {
+ .buttonColors(@agoraBlue);
+ }
+
+ // Constructive buttons
+ //
+ // Use constructive buttons for actions which result in a final action in the process that results
+ // in a change of state.
+ // e.g. save changes button
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-constructive">mw-ui-constructive</button>
+ //
+ // Styleguide 2.1.2.
+ &.mw-ui-constructive {
+ .buttonColors(@agoraGreen);
+ }
+
+ // Destructive buttons
+ //
+ // Use destructive buttons for actions which result in the destruction of data.
+ // e.g. deleting a page.
+ // This should not be used for cancel buttons.
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-destructive">mw-ui-destructive</button>
+ //
+ // Styleguide 2.1.3.
+ &.mw-ui-destructive {
+ .buttonColors(@agoraRed);
+ }
}
// This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
@import "../../mixins/type";
.mw-ui-button {
- // Primary buttons
- //
- // Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons
- // use mw-ui-progressive (coming soon)
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-primary">mw-ui-primary</button>
- //
- // Styleguide 2.1.1.
- &.mw-ui-primary {
- .buttonColors(@agoraBlue);
- }
-
- // Constructive buttons
- //
- // Use constructive buttons for actions which result in a final action in the process that results
- // in a change of state.
- // e.g. save changes button
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-constructive">mw-ui-constructive</button>
- //
- // Styleguide 2.1.2.
- &.mw-ui-constructive {
- .buttonColors(@agoraGreen);
- }
-
-
- // Destructive buttons
- //
- // Use destructive buttons for actions which result in the destruction of data.
- // e.g. deleting a page.
- // This should not be used for cancel buttons.
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-destructive">mw-ui-destructive</button>
- //
- // Styleguide 2.1.3.
- &.mw-ui-destructive {
- .buttonColors(@agoraRed);
- }
-
.vector-type();
}