diff options
Diffstat (limited to 'resources/src/mediawiki.ui/components/anchors.less')
| -rw-r--r-- | resources/src/mediawiki.ui/components/anchors.less | 89 |
1 files changed, 46 insertions, 43 deletions
diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less index e1b258dd..f0fb7b95 100644 --- a/resources/src/mediawiki.ui/components/anchors.less +++ b/resources/src/mediawiki.ui/components/anchors.less @@ -3,13 +3,8 @@ @import "mediawiki.ui/mixins"; // Helpers -.mw-ui-anchor( @mainColor ) { - // Make all context classes take the main color in IE6 - .select-ie6-only& { - &:link, &:visited, &:hover, &:focus, &:active { - color: @mainColor; - } - } +.mixin-mw-ui-anchor-styles( @mainColor ) { + color: @mainColor; // Hover state &:hover { @@ -21,57 +16,65 @@ outline: none; // outline fix } - color: @mainColor; - // Quiet mode is gray at first &.mw-ui-quiet { - .mw-ui-anchor-quiet( @mainColor ); + .mixin-mw-ui-anchor-styles-quiet( @mainColor ); } } -.mw-ui-anchor-quiet( @mainColor ) { - color: @colorTextLight; - text-decoration: none; +/* +Anchors - &:hover { - color: @mainColor; - } - &:focus, &:active { - color: darken( @mainColor, @colorDarkenPercentage ); - } -} +The anchor base type can be applied to A elements when a basic context styling needs to be given to a link, without +having to assign it as a button type. mw-ui-anchor only changes the text color, and should not be used in combination +with other base classes, such as mw-ui-button. -/* -Text & Anchors +Markup: +<a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a> +<a href="#" class="mw-ui-anchor mw-ui-constructive">Constructive</a> +<a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a> -Allows you to give text a context as to the type of action it is indicating. +.mw-ui-quiet - Quiet until interaction. -Styleguide 6. +Styleguide 6.2. */ +// Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive) +.mw-ui-anchor { + &.mw-ui-progressive { + .mixin-mw-ui-anchor-styles( @colorProgressive ); + } + + &.mw-ui-constructive { + .mixin-mw-ui-anchor-styles( @colorConstructive ); + } + + &.mw-ui-destructive { + .mixin-mw-ui-anchor-styles( @colorDestructive ); + } +} + /* -Guidelines +Quiet anchors -This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context. +Use quiet anchors when they are less important and alongside other progressive/destructive/progressive +anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state. Markup: -<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a> -<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a> -<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a> +<a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a> +<a href="#" class="mw-ui-anchor mw-ui-constructive mw-ui-quiet">Constructive</a> +<a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a> -.mw-ui-quiet - Quiet until interaction. - -Styleguide 6.1. +Styleguide 6.2.1. */ -.mw-ui-progressive { - .mw-ui-anchor( @colorProgressive ); -} -.mw-ui-constructive { - .mw-ui-anchor( @colorConstructive ); -} -.mw-ui-destructive { - .mw-ui-anchor( @colorDestructive ); -} -.mw-ui-quiet { - .mw-ui-anchor-quiet( @colorTextLight ); +.mixin-mw-ui-anchor-styles-quiet( @mainColor ) { + color: @colorTextLight; + text-decoration: none; + + &:hover { + color: @mainColor; + } + &:focus, &:active { + color: darken( @mainColor, @colorDarkenPercentage ); + } } |