From 65699c37e6db5ee1042f4753e7335390b95081fd Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Wed, 8 May 2019 13:18:00 +0200 Subject: [PATCH] Extract default mediawiki.ui button styles into mixins Move the default mediawiki.ui button styles into two mixins: .mw-ui-button() and .mw-ui-button-states(). Change name of .button-colors-primary() mixin to .mw-ui-button-colors-primary(). These mixins are globally available and originally intended for use on special pages in the MinervaNeue skin. Bug: T219895 Change-Id: Ibeed271e143c062c6bfc48a6c4db74635dbc40e2 --- .../mediawiki.ui/mixins.buttons.less | 96 ++++++++++++++++++- .../src/mediawiki.ui/components/buttons.less | 86 +---------------- 2 files changed, 95 insertions(+), 87 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less index 9ee92b2654..360ae792f5 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less @@ -1,12 +1,98 @@ -// Common button mixins for MediaWiki +// Mediawiki.ui button mixins for MediaWiki (deprecated) // -// Helper mixins used to create button styles. this file is importable -// by all less files via `@import 'mediawiki.mixins.buttons';`. +// Helper mixins used to create button styles. This file is importable +// by all LESS files via `@import 'mediawiki.ui/mixins.buttons';`. /* stylelint-disable selector-class-pattern */ -// Primary buttons mixin -.button-colors-primary( @bgColor, @highlightColor, @activeColor ) { +// Default button mixin. +.mw-ui-button() { + // Container layout + display: inline-block; + .box-sizing( border-box ); + min-width: 4em; + max-width: 28.75em; // equivalent to 460px, @see T95367 + margin: 0; + padding: 0.57142857em 0.9375em; // equivalent to `8px 12px` + border: @border-width-base @border-style-base @border-color-base; + border-radius: @borderRadius; + cursor: pointer; + // Ensure that buttons and inputs are nicely aligned when they have differing heights + vertical-align: middle; + // 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; +} + +// Mixin for button interaction states. +.mw-ui-button-states() { + // 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. + &::-moz-focus-inner { + border-color: transparent; + padding: 0; + } + } + + &:active, + &.is-on { + background-color: @colorGray12; + color: @colorGray1; + border-color: @colorGray7; + box-shadow: none; + } + + &:disabled { + 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' ); + } +} + +// Primary buttons mixin. +.mw-ui-button-colors-primary( @bgColor, @highlightColor, @activeColor ) { background-color: @bgColor; color: #fff; // border of the same color as background so that light background and diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index e58cb1e4e1..e105f4d24d 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -28,86 +28,8 @@ .mw-ui-button { 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 - margin: 0; - 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; - 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; - // 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. - &::-moz-focus-inner { - border-color: transparent; - padding: 0; - } - } - - &:active, - &.is-on { - background-color: @colorGray12; - color: @colorGray1; - border-color: @colorGray7; - box-shadow: none; - } - - &:disabled { - 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' ); - } + .mw-ui-button(); + .mw-ui-button-states(); // Styling for specific button types // ----------------------------------------- @@ -187,7 +109,7 @@ // // Styleguide 2.1.2. &.mw-ui-progressive { - .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); + .mw-ui-button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); &.mw-ui-quiet { color: @colorProgressive; @@ -223,7 +145,7 @@ // // Styleguide 2.1.3. &.mw-ui-destructive { - .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive ); + .mw-ui-button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive ); &.mw-ui-quiet { color: @colorDestructive; -- 2.20.1