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

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3
   4 // Helpers
   5 .mixin-mw-ui-anchor-styles( @mainColor ) {
   6         color: @mainColor;
   7
   8         &:hover {
   9                 color: lighten( @mainColor, @colorLightenPercentage );
  10         }
  11
  12         &:focus,
  13         &:active {
  14                 color: darken( @mainColor, @colorDarkenPercentage );
  15                 outline: 0;
  16         }
  17
  18         // Quiet mode is gray at first
  19         &.mw-ui-quiet {
  20                 .mixin-mw-ui-anchor-styles-quiet( @mainColor );
  21         }
  22 }
  23
  24 /*
  25 Anchors
  26
  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`.
  30
  31 Markup:
  32 <a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a>
  33 <a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a>
  34
  35 .mw-ui-quiet - Quiet until interaction.
  36
  37 Styleguide 6.2.
  38 */
  39
  40 // Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive)
  41 .mw-ui-anchor {
  42         &.mw-ui-progressive {
  43                 .mixin-mw-ui-anchor-styles( @colorProgressive );
  44         }
  45
  46         &.mw-ui-destructive {
  47                 .mixin-mw-ui-anchor-styles( @colorDestructive );
  48         }
  49 }
  50
  51 /*
  52 Quiet anchors
  53
  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.
  56
  57 Markup:
  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>
  60
  61 Styleguide 6.2.1.
  62 */
  63 .mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
  64         color: @colorTextLight;
  65         text-decoration: none;
  66
  67         &:hover {
  68                 color: @mainColor;
  69         }
  70         &:focus,
  71         &:active {
  72                 color: darken( @mainColor, @colorDarkenPercentage );
  73         }
  74 }