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 .mw-ui-anchor( @mainColor ) {
   7         // Make all context classes take the main color in IE6
   8         .select-ie6-only& {
   9                 &:link, &:visited, &:hover, &:focus, &:active {
  10                         color: @mainColor;
  11                 }
  12         }
  13
  14         // Hover state
  15         &:hover {
  16                 color: lighten( @mainColor, @colorLightenPercentage );
  17         }
  18         // Focus and active states
  19         &:focus, &:active {
  20                 color: darken( @mainColor, @colorDarkenPercentage );
  21                 outline: none; // outline fix
  22         }
  23
  24         color: @mainColor;
  25
  26         // Quiet mode is gray at first
  27         &.mw-ui-quiet {
  28                 .mw-ui-anchor-quiet( @mainColor );
  29         }
  30 }
  31
  32 .mw-ui-anchor-quiet( @mainColor ) {
  33         color: @colorTextLight;
  34         text-decoration: none;
  35
  36         &:hover {
  37                 color: @mainColor;
  38         }
  39         &:focus, &:active {
  40                 color: darken( @mainColor, @colorDarkenPercentage );
  41         }
  42 }
  43
  44 /*
  45 Text & Anchors
  46
  47 Allows you to give text a context as to the type of action it is indicating.
  48
  49 Styleguide 6.
  50 */
  51
  52 /*
  53 Guidelines
  54
  55 This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context.
  56
  57 Markup:
  58 <a href=# class="mw-ui-progressive {$modifiers}">Progressive</a>
  59 <a href=# class="mw-ui-constructive {$modifiers}">Constructive</a>
  60 <a href=# class="mw-ui-destructive {$modifiers}">Destructive</a>
  61
  62 .mw-ui-quiet - Quiet until interaction.
  63
  64 Styleguide 6.1.
  65 */
  66 .mw-ui-progressive {
  67         .mw-ui-anchor( @colorProgressive );
  68 }
  69 .mw-ui-constructive {
  70         .mw-ui-anchor( @colorConstructive );
  71 }
  72 .mw-ui-destructive {
  73         .mw-ui-anchor( @colorDestructive );
  74 }
  75 .mw-ui-quiet {
  76         .mw-ui-anchor-quiet( @colorTextLight );
  77 }