@import 'mediawiki.mixins';
+@import 'mediawiki.ui/mixins.buttons';
@import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
-// Buttons
-//
-// All buttons start with mw-ui-button class, modified by other classes.
+/* 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
//
// Styleguide 2.1.
.mw-ui-button {
- // Inherit the font rather than apply user agent stylesheet (T72072)
- font-family: inherit;
- font-size: 1em;
+ background-color: @colorGray15;
+ color: @colorButtonText;
// Container layout
display: inline-block;
+ .box-sizing( border-box );
min-width: 4em;
max-width: 28.75em; // equivalent to 460px, @see T95367
- padding: 0.546875em 1em;
- line-height: 1.286;
margin: 0;
+ padding: 0.57142857em 0.9375em; // equivalent to `8px 12px`
+ border: @border-width-base @border-style-base @border-color-base;
border-radius: @borderRadius;
- .box-sizing( border-box );
-
+ // Inherit the font rather than apply user agent stylesheet (T72072)
+ font-family: inherit;
+ font-size: 1em;
+ font-weight: bold;
+ line-height: 1;
+ text-align: center;
// Disable weird iOS styling
-webkit-appearance: none;
-
// IE 6 & 7 hack
// https://stackoverflow.com/a/5838575/365238
*display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
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;
+ // Make sure that `color` isn't inheriting from user-agent styles
+ &:visited {
+ color: @colorButtonText;
+ }
+
+ &:hover {
+ background-color: @background-color-base;
+ color: @colorGray4;
+ border-color: @colorGray10;
+ }
+
&:focus {
+ background-color: @background-color-base;
+ // Make sure that `color` isn't inheriting from user-agent styles
+ color: @colorButtonText;
+ border-color: @colorProgressive;
+ box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @background-color-base;
outline-width: 0;
// Remove the inner border and padding in Firefox.
}
}
- // `: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' );
+ &:active,
+ &.is-on {
+ background-color: @colorGray12;
+ color: @colorGray1;
+ border-color: @colorGray7;
+ box-shadow: none;
}
&:disabled {
- text-shadow: none;
+ background-color: @colorGray12;
+ color: @colorBaseInverted;
+ border-color: @colorGray12;
cursor: default;
+
+ // Make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active {
+ background-color: @colorGray12;
+ color: @colorBaseInverted;
+ box-shadow: none;
+ border-color: @colorGray12;
+ }
+ }
+
+ // `: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' );
}
// Styling for specific button types
// -----------------------------------------
- // Big buttons
+ // Quiet buttons
//
- // Not all buttons are equal. You can emphasise certain actions over others
- // using the mw-ui-big class.
+ // 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:
// <div>
- // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
+ // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
// </div>
// <div>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
// </div>
// <div>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
- // </div>
- //
- // Styleguide 2.1.6.
- &.mw-ui-big {
- font-size: 1.3em;
- }
-
- // Block buttons
- //
- // Some buttons might need to be stacked.
- //
- // Markup:
- // <div>
- // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
// </div>
// <div>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
// </div>
// <div>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
// </div>
//
- // Styleguide 2.1.5.
- &.mw-ui-block {
- display: block;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
+ // Styleguide 2.1.1.
+ &.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: @colorButtonText;
+ border-color: transparent;
+
+ &:hover {
+ background-color: transparent;
+ color: @colorButtonTextHighlight;
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ &:active {
+ background-color: transparent;
+ color: @colorButtonTextActive;
+ border-color: transparent;
+ }
+
+ &:focus {
+ background-color: transparent;
+ color: @colorButtonText;
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ &:disabled,
+ &:disabled:hover,
+ &:disabled:active {
+ background-color: transparent;
+ color: @colorDisabledText;
+ border-color: transparent;
+ }
}
// Progressive buttons
// <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
// </div>
//
- // Styleguide 2.1.1.
+ // Styleguide 2.1.2.
&.mw-ui-progressive {
.button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
&.mw-ui-quiet {
- .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
+ color: @colorProgressive;
+
+ &:hover {
+ background-color: transparent;
+ color: @colorProgressiveHighlight;
+ }
+
+ &:active {
+ color: @colorProgressiveActive;
+ }
+
+ &:focus {
+ background-color: transparent;
+ color: @colorProgressive;
+ }
}
}
// <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
// </div>
//
- // Styleguide 2.1.2.
+ // Styleguide 2.1.3.
&.mw-ui-destructive {
.button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
&.mw-ui-quiet {
- .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
+ color: @colorDestructive;
+
+ &:hover {
+ background-color: transparent;
+ color: @colorDestructiveHighlight;
+ }
+
+ &:active {
+ color: @colorDestructiveActive;
+ }
+
+ &:focus {
+ background-color: transparent;
+ color: @colorDestructive;
+ }
}
}
- // Quiet buttons
+ // Big 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.
+ // Not all buttons are equal. You can emphasise certain actions over others
+ // using the mw-ui-big class.
//
// Markup:
// <div>
- // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+ // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
// </div>
// <div>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
// </div>
// <div>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
// </div>
+ //
+ // Styleguide 2.1.4.
+ &.mw-ui-big {
+ font-size: 1.3em;
+ }
+
+ // Block buttons
+ //
+ // Some buttons might need to be stacked.
+ //
+ // Markup:
// <div>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
// </div>
// <div>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
// </div>
//
- // 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;
- }
+ // Styleguide 2.1.5.
+ &.mw-ui-block {
+ display: block;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
}
}
dépôts / lhc / web / wiklou.git / blobdiff