@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.
@transitionDuration: .1s;
@transitionFunction: ease-in-out;
// Neutral button styling
//
// 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;
padding: .5em 1em;
margin: 0;
.box-sizing(border-box);
// Disable weird iOS styling
-webkit-appearance: none;
// IE6/IE7 hack
// http://stackoverflow.com/a/5838575/365238
*display: inline;
zoom: 1;
// Container styling
.button-colors(#FFF);
border-radius: @borderRadius;
min-width: 4em;
// Ensure that buttons and inputs are nicely aligned when they have differing heights
vertical-align: middle;
// Content styling
text-align: center;
font-weight: bold;
// Interaction styling
cursor: pointer;
&:disabled {
text-shadow: none;
cursor: default;
}
.transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
// 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%;
}
// Progressive buttons
//
// Use progressive buttons for actions which lead to a next step in the process.
// .mw-ui-primary is deprecated, kept for compatibility.
//
// Markup:
//
//
//
//
//
//
//
// Styleguide 2.1.1.
&.mw-ui-progressive,
&.mw-ui-primary {
.button-colors(@colorProgressive);
&.mw-ui-quiet {
.button-colors-quiet(@colorProgressive);
}
}
// 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:
//
//
//
//
//
//
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
.button-colors(@colorConstructive);
&.mw-ui-quiet {
.button-colors-quiet(@colorConstructive);
}
}
// 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.3.
&.mw-ui-destructive {
.button-colors(@colorDestructive);
&.mw-ui-quiet {
.button-colors-quiet(@colorDestructive);
}
}
// Quiet buttons
//
// Use quiet buttons when they are less important and alongside other constructive/progressive/destructive buttons.
// Use of quiet buttons is not recommended on mobile/tablet due to lack of hover state.
//
// Markup:
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// Styleguide 2.1.4.
&.mw-ui-quiet {
background: transparent;
border: none;
text-shadow: none;
.button-colors-quiet(@colorButtonText);
&: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;
}
}
// Button groups
//
// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
//
// Markup:
//