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