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
  53 /*
  54 Quiet anchors
  55
  56 Use quiet anchors when they are less important and alongside other progressive/destructive
  57 anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state.
  58
  59 Markup:
  60 <a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a>
  61 <a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a>
  62
  63 Styleguide 6.2.1.
  64 */
  65 .mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
  66         color: @colorTextLight;
  67         text-decoration: none;
  68
  69         &:hover {
  70                 color: @mainColor;
  71         }
  72         &:focus,
  73         &:active {
  74                 color: darken( @mainColor, @colorDarkenPercentage );
  75         }
  76 }