diff options
Diffstat (limited to 'www/wiki/resources/src/mediawiki.ui/components/anchors.less')
-rw-r--r-- | www/wiki/resources/src/mediawiki.ui/components/anchors.less | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.ui/components/anchors.less b/www/wiki/resources/src/mediawiki.ui/components/anchors.less new file mode 100644 index 00000000..8e97c3ed --- /dev/null +++ b/www/wiki/resources/src/mediawiki.ui/components/anchors.less @@ -0,0 +1,75 @@ +@import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; +@import 'mediawiki.ui/mixins'; + +// Helpers +.mixin-mw-ui-anchor-styles( @mainColor ) { + color: @mainColor; + + &:hover { + color: lighten( @mainColor, @colorLightenPercentage ); + } + + &:focus, + &:active { + color: darken( @mainColor, @colorDarkenPercentage ); + outline: 0; + } + + // Quiet mode is gray at first + &.mw-ui-quiet { + .mixin-mw-ui-anchor-styles-quiet( @mainColor ); + } +} + +/* +Anchors + +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`. + +Markup: +<a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a> +<a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a> + +.mw-ui-quiet - Quiet until interaction. + +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-destructive { + .mixin-mw-ui-anchor-styles( @colorDestructive ); + } +} + +/* +Quiet anchors + +Use quiet anchors when they are less important and alongside other progressive/destructive +anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state. + +Markup: +<a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a> +<a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a> + +Styleguide 6.2.1. +*/ +.mixin-mw-ui-anchor-styles-quiet( @mainColor ) { + color: @colorTextLight; + text-decoration: none; + + &:hover { + color: @mainColor; + } + &:focus, + &:active { + color: darken( @mainColor, @colorDarkenPercentage ); + } +} |