[Summary view] [Print] [Text view]

   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  }