resources/src/mediawiki.ui/components/anchors.less

   1 @import "mediawiki.mixins";
   2 @import "mediawiki.ui/variables";
   3 @import "mediawiki.ui/mixins";
   4
   5 // Helpers
   6 .mixin-mw-ui-anchor-styles( @mainColor ) {
   7         color: @mainColor;
   8
   9         &:hover {
  10                 color: lighten( @mainColor, @colorLightenPercentage );
  11         }
  12
  13         &:focus,
  14         &:active {
  15                 color: darken( @mainColor, @colorDarkenPercentage );
  16                 outline: 0;
  17         }
  18
  19         // Quiet mode is gray at first
  20         &.mw-ui-quiet {
  21                 .mixin-mw-ui-anchor-styles-quiet( @mainColor );
  22         }
  23 }
  24
  25 /*
  26 Anchors
  27
  28 The anchor base type can be applied to `a` elements when a basic context styling needs to be given to a link, without
  29 having to assign it as a button type. `.mw-ui-anchor` only changes the text color, and should not be used in combination
  30 with other base classes, such as `.mw-ui-button`.
  31
  32
  33 Markup:
  34 <a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a>
  35 <a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a>
  36
  37 .mw-ui-quiet - Quiet until interaction.
  38
  39 Styleguide 6.2.
  40 */
  41
  42 // Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive)
  43 .mw-ui-anchor {
  44         &.mw-ui-progressive {
  45                 .mixin-mw-ui-anchor-styles( @colorProgressive );
  46         }
  47
  48         &.mw-ui-destructive {
  49                 .mixin-mw-ui-anchor-styles( @colorDestructive );
  50         }
  51
  52         //`.mw-ui-constructive` is deprecated; consolidated with `progressive`, see T110555
  53         &.mw-ui-constructive {
  54                 .mixin-mw-ui-anchor-styles( @colorConstructive );
  55         }
  56 }
  57
  58 /*
  59 Quiet anchors
  60
  61 Use quiet anchors when they are less important and alongside other progressive/destructive/progressive
  62 anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state.
  63
  64 Markup:
  65 <a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a>
  66 <a href="#" class="mw-ui-anchor mw-ui-constructive mw-ui-quiet">Constructive</a>
  67 <a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a>
  68
  69 Styleguide 6.2.1.
  70 */
  71 .mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
  72         color: @colorTextLight;
  73         text-decoration: none;
  74
  75         &:hover {
  76                 color: @mainColor;
  77         }
  78         &:focus,
  79         &:active {
  80                 color: darken( @mainColor, @colorDarkenPercentage );
  81         }
  82 }