@import "mediawiki.mixins"; @import "mediawiki.ui/variables"; @import "mediawiki.ui/mixins"; // Buttons // // All buttons start with mw-ui-button class, modified by other classes. // It can be any element. Due to a lack of a CSS reset, the exact styling of // the button depends on what type of element is used. // There are two kinds of buttons, the default is a "Call to Action" with an obvious border // and there is a quiet kind without a border. // // Styleguide 2. // Neutral button styling // // These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet. // // Markup: //
// //
//
// //
// // Styleguide 2.1. .mw-ui-button { // Inherit the font rather than apply user agent stylesheet (bug 70072) font-family: inherit; font-size: 1em; // Container layout display: inline-block; min-width: 4em; max-width: 28.75em; // equivalent to 460px, @see T95367 padding: .5em 1em; margin: 0; border-radius: @borderRadius; .box-sizing( border-box ); // Disable weird iOS styling -webkit-appearance: none; // IE 6 & 7 hack // https://stackoverflow.com/a/5838575/365238 *display: inline; zoom: 1; // Ensure that buttons and inputs are nicely aligned when they have differing heights vertical-align: middle; // Content styling .button-colors( @colorGray15, #fff, #d9d9d9 ); text-align: center; font-weight: bold; // Interaction styling cursor: pointer; &:focus { outline-width: 0; // Remove the inner border and padding in Firefox. &::-moz-focus-inner { border-color: transparent; padding: 0; } } // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9 &:not( :disabled ) { .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' ); } &:disabled { text-shadow: none; cursor: default; } // Styling for specific button types // ----------------------------------------- // Big buttons // // Not all buttons are equal. You can emphasise certain actions over others // using the mw-ui-big class. // // Markup: //
// //
//
// //
//
// //
// // Styleguide 2.1.6. &.mw-ui-big { font-size: 1.3em; } // Block buttons // // Some buttons might need to be stacked. // // Markup: //
// //
//
// //
//
// //
// // Styleguide 2.1.5. &.mw-ui-block { display: block; width: 100%; margin-left: auto; margin-right: auto; } // Progressive buttons // // Use progressive buttons for actions which lead to a next step in the process. // .mw-ui-constructive is deprecated; consolidated with `progressive`, see T110555 // // Markup: //
// //
//
// //
// // Styleguide 2.1.1. &.mw-ui-progressive, &.mw-ui-constructive { .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); &.mw-ui-quiet { .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); } } // Destructive buttons // // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user. // This should not be used for cancel buttons. // // Markup: //
// //
//
// //
// // Styleguide 2.1.2. &.mw-ui-destructive { .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive ); &.mw-ui-quiet { .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive ); } } // Quiet buttons // // 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. // Its use is not recommended on mobile/tablet due to lack of hover state. // // Markup: //
// //
//
// //
//
// //
//
// //
//
// //
// // Styleguide 2.1.3. &.mw-ui-quiet { background: transparent; border: 0; text-shadow: none; .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive ); &:hover, &:focus { box-shadow: none; } &:active, &:disabled { background: transparent; } } } a.mw-ui-button { text-decoration: none; // This overrides an underline declaration on a:hover and a:focus in // commonElements.css, which the class alone isn't specific enough to do. &:hover, &:focus { text-decoration: none; } // a-tags behave different to inputs if the line-height attribute is inherited // from another element (e.g. mw-body-content). They appear bigger as input // tags. See Bug T116427. To fix that, apply the correct line-height (used // for inputs) to a-tags, too. line-height: normal; } // Button groups // // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group. // // Markup: //
//
A
//
B
//
C
//
D
//
// // Styleguide 2.2. .mw-ui-button-group { & > * { min-width: 48px; border-radius: 0; float: left; &:first-child { border-top-left-radius: @borderRadius; border-bottom-left-radius: @borderRadius; } &:not( :first-child ) { border-left: 0; } &:last-child { border-top-right-radius: @borderRadius; border-bottom-right-radius: @borderRadius; } } & .is-on .button { cursor: default; } }