@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/mixins.buttons.less';
@import 'mediawiki.ui/variables.less';
/* stylelint-disable selector-class-pattern */
// 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.
// 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:
//
//
//
//
//
//
.mw-ui-button {
background-color: @colorGray15;
color: @color-base;
.mw-ui-button();
.mw-ui-button-states();
// Styling for specific button types
// -----------------------------------------
// 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:
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
&.mw-ui-quiet,
&.mw-ui-quiet.mw-ui-progressive,
&.mw-ui-quiet.mw-ui-destructive {
background-color: transparent;
// Quiet buttons all start gray, and reveal
// progressive/destructive color on hover and active.
color: @color-base;
border-color: transparent;
&:hover {
background-color: transparent;
color: @color-base--hover;
border-color: transparent;
box-shadow: none;
}
&:active {
background-color: transparent;
color: @color-base--active;
border-color: transparent;
}
&:focus {
background-color: transparent;
color: @color-base;
border-color: transparent;
box-shadow: none;
}
&:disabled,
&:disabled:hover,
&:disabled:active {
background-color: transparent;
color: @color-base--disabled;
border-color: transparent;
}
}
// Progressive buttons
//
// Use progressive buttons for actions which lead to a next step in the process.
//
// Markup:
//
//
//
//
//
//
&.mw-ui-progressive {
.mw-ui-button-colors-primary( @color-primary, @color-primary--hover, @color-primary--active );
&.mw-ui-quiet {
color: @color-primary;
&:hover {
background-color: transparent;
color: @color-primary--hover;
}
&:active {
color: @color-primary--active;
}
&:focus {
background-color: transparent;
color: @color-primary--focus;
}
}
}
// 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:
//
//
//
//
//
//
&.mw-ui-destructive {
.mw-ui-button-colors-primary( @color-destructive, @color-destructive--hover, @color-destructive--active );
&.mw-ui-quiet {
color: @color-destructive;
&:hover {
background-color: transparent;
color: @color-destructive--hover;
}
&:active {
color: @color-destructive--active;
}
&:focus {
background-color: transparent;
color: @color-destructive;
}
}
}
// Big buttons
//
// Not all buttons are equal. You can emphasise certain actions over others
// using the mw-ui-big class.
//
// Markup:
//
//
//
//
//
//
//
//
//
&.mw-ui-big {
font-size: 1.3em;
}
// Block buttons
//
// Some buttons might need to be stacked.
//
// Markup:
//
//
//
//
//
//
//
//
//
&.mw-ui-block {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
input.mw-ui-button,
button.mw-ui-button {
// Buttons in Firefox have extra height
&::-moz-focus-inner {
margin-top: -1px;
margin-bottom: -1px;
}
}
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:
//