1 @import "mediawiki.mixins";
2 @import "mediawiki.ui/variables";
3 @import "mediawiki.ui/mixins";
6 .mixin-mw-ui-anchor-styles( @mainColor ) {
11 color: lighten( @mainColor, @colorLightenPercentage );
13 // Focus and active states
15 color: darken( @mainColor, @colorDarkenPercentage );
16 outline: none; // outline fix
19 // Quiet mode is gray at first
21 .mixin-mw-ui-anchor-styles-quiet( @mainColor );
25 .mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
26 color: @colorTextLight;
27 text-decoration: none;
33 color: darken( @mainColor, @colorDarkenPercentage );
40 The anchor base type can be applied to A elements when a basic context styling needs to be given to a link, without
41 having to assign it as a button type. mw-ui-anchor only changes the text color, and should not be used in combination
42 with other base classes, such as mw-ui-button.
45 <a href=# class="mw-ui-anchor mw-ui-progressive {$modifiers}">Progressive</a>
46 <a href=# class="mw-ui-anchor mw-ui-constructive {$modifiers}">Constructive</a>
47 <a href=# class="mw-ui-anchor mw-ui-destructive {$modifiers}">Destructive</a>
49 .mw-ui-quiet - Quiet until interaction.
54 // Setup compound anchor selectors (such as .mw-ui-anchor.my-ui-progressive)
57 .mixin-mw-ui-anchor-styles( @colorProgressive );
60 &.mw-ui-constructive {
61 .mixin-mw-ui-anchor-styles( @colorConstructive );
65 .mixin-mw-ui-anchor-styles( @colorDestructive );