1 @import 'mediawiki.mixins';
2 @import 'mediawiki.ui/variables';
5 .mixin-mw-ui-anchor-styles( @mainColor ) {
9 color: lighten( @mainColor, @colorLightenPercentage );
14 color: darken( @mainColor, @colorDarkenPercentage );
18 // Quiet mode is gray at first
20 .mixin-mw-ui-anchor-styles-quiet( @mainColor );
27 The anchor base type can be applied to `a` elements when a basic context styling needs to be given to a link, without
28 having to assign it as a button type. `.mw-ui-anchor` only changes the text color, and should not be used in combination
29 with other base classes, such as `.mw-ui-button`.
32 <a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a>
33 <a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a>
35 .mw-ui-quiet - Quiet until interaction.
40 // Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive)
43 .mixin-mw-ui-anchor-styles( @colorProgressive );
47 .mixin-mw-ui-anchor-styles( @colorDestructive );
54 Use quiet anchors when they are less important and alongside other progressive/destructive
55 anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state.
58 <a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a>
59 <a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a>
63 .mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
64 color: @colorTextLight;
65 text-decoration: none;
73 color: darken( @mainColor, @colorDarkenPercentage );