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 Markup:
  33 <a href="#" class="mw-ui-anchor mw-ui-progressive">Progressive</a>
  34 <a href="#" class="mw-ui-anchor mw-ui-destructive">Destructive</a>
  35
  36 .mw-ui-quiet - Quiet until interaction.
  37
  38 Styleguide 6.2.
  39 */
  40
  41 // Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive)
  42 .mw-ui-anchor {
  43         &.mw-ui-progressive {
  44                 .mixin-mw-ui-anchor-styles( @colorProgressive );
  45         }
  46
  47         &.mw-ui-destructive {
  48                 .mixin-mw-ui-anchor-styles( @colorDestructive );
  49         }
  50 }
  51
  52 /*
  53 Quiet anchors
  54
  55 Use quiet anchors when they are less important and alongside other progressive/destructive
  56 anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state.
  57
  58 Markup:
  59 <a href="#" class="mw-ui-anchor mw-ui-progressive mw-ui-quiet">Progressive</a>
  60 <a href="#" class="mw-ui-anchor mw-ui-destructive mw-ui-quiet">Destructive</a>
  61
  62 Styleguide 6.2.1.
  63 */
  64 .mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
  65         color: @colorTextLight;
  66         text-decoration: none;
  67
  68         &:hover {
  69                 color: @mainColor;
  70         }
  71         &:focus,
  72         &:active {
  73                 color: darken( @mainColor, @colorDarkenPercentage );
  74         }
  75 }