@import 'mediawiki.mixins';
+@import 'mediawiki.ui/mixins.buttons';
@import 'mediawiki.ui/variables';
-// Buttons
-// Helper mixins
-// Primary buttons mixin
-.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
- background-color: @bgColor;
- color: #fff;
- // border of the same color as background so that light background and
- // dark background buttons are the same height and width
- border: 1px solid @bgColor;
-
- &:hover {
- background-color: @highlightColor;
- border-color: @highlightColor;
- }
-
- &:focus {
- box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
- }
-
- &:active,
- &.is-on {
- background-color: @activeColor;
- border-color: @activeColor;
- box-shadow: none;
- }
-
- &:disabled {
- background-color: @colorGray12;
- color: #fff;
- border-color: @colorGray12;
-
- // Make sure disabled buttons don't have hover and active states
- &:hover,
- &:active {
- background-color: @colorGray12;
- color: #fff;
- border-color: @colorGray12;
- box-shadow: none;
- }
- }
-}
+/* 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
min-width: 4em;
max-width: 28.75em; // equivalent to 460px, @see T95367
margin: 0;
- padding: 0.546875em 1em;
+ padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
border: @border-width-base @border-style-base @border-color-base;
border-radius: @borderRadius;
// Inherit the font rather than apply user agent stylesheet (T72072)
font-family: inherit;
font-size: 1em;
font-weight: bold;
- line-height: 1.286;
+ line-height: 1;
text-align: center;
// Disable weird iOS styling
-webkit-appearance: none;