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 state
  10         &:hover {
  11                 color: lighten( @mainColor, @colorLightenPercentage );
  12         }
  13         // Focus and active states
  14         &:focus, &:active {
  15                 color: darken( @mainColor, @colorDarkenPercentage );
  16                 outline: none; // outline fix
  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 .mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
  26         color: @colorTextLight;
  27         text-decoration: none;
  28
  29         &:hover {
  30                 color: @mainColor;
  31         }
  32         &:focus, &:active {
  33                 color: darken( @mainColor, @colorDarkenPercentage );
  34         }
  35 }
  36
  37 /*
  38 Anchors
  39
  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.
  43
  44 Markup:
  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>
  48
  49 .mw-ui-quiet - Quiet until interaction.
  50
  51 Styleguide 6.2.
  52 */
  53
  54 // Setup compound anchor selectors (such as .mw-ui-anchor.my-ui-progressive)
  55 .mw-ui-anchor {
  56         &.mw-ui-progressive {
  57                 .mixin-mw-ui-anchor-styles( @colorProgressive );
  58         }
  59
  60         &.mw-ui-constructive {
  61                 .mixin-mw-ui-anchor-styles( @colorConstructive );
  62         }
  63
  64         &.mw-ui-destructive {
  65                 .mixin-mw-ui-anchor-styles( @colorDestructive );
  66         }
  67 }