[ Index ]

PHP Cross Reference of MediaWiki-1.24.0

title

Body

[close]

/resources/src/mediawiki.less/mediawiki.ui/ -> mixins.less (source)

   1  // ----------------------------------------------------------------------------
   2  // Form styling mixins
   3  // ----------------------------------------------------------------------------
   4  .agora-label-styling() {
   5      font-size: 0.9em;
   6      color: @colorText;
   7  
   8      * {
   9          font-weight: normal;
  10      }
  11  }
  12  
  13  .agora-inline-label-styling() {
  14      margin-bottom: 0.5em;
  15      cursor: pointer;
  16      vertical-align: bottom;
  17      line-height: normal;
  18  
  19      font-weight: normal;
  20  
  21      & > input[type="checkbox"],
  22      & > input[type="radio"] {
  23          width: auto;
  24          height: auto;
  25          margin: 0 0.1em 0 0;
  26          padding: 0;
  27          border: 1px solid @colorFieldBorder;
  28          cursor: pointer;
  29      }
  30  }
  31  
  32  // ----------------------------------------------------------------------------
  33  // Button styling
  34  // ----------------------------------------------------------------------------
  35  
  36  .button-colors(@bgColor) {
  37      background: @bgColor;
  38  
  39      &:hover,
  40      &:focus {
  41          // The inner bottom bevel should match the active background color.
  42          box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
  43          border-bottom-color: mix(#000, @bgColor, 20%);
  44          outline: none;
  45          // remove outline in Firefox
  46          &::-moz-focus-inner {
  47              border-color: transparent;
  48          }
  49      }
  50  
  51      &:active,
  52      &.mw-ui-checked {
  53          // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
  54          // it passes it through, then ResourceLoader drops it.
  55          // background: shade(@bgColor, 20%);
  56          background: mix(#000, @bgColor, 20%);
  57          box-shadow: none;
  58      }
  59  }
  60  
  61  .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
  62      color: @colorButtonText;
  63      border: 1px solid @colorGray12;
  64  
  65      &:disabled {
  66          color: @colorDisabledText;
  67  
  68          // make sure disabled buttons don't have hover and active states
  69          &:hover,
  70          &:active {
  71              background: @bgColor;
  72              box-shadow: none;
  73          }
  74      }
  75  }
  76  
  77  .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
  78      color: #fff;
  79      // border of the same color as background so that light background and
  80      // dark background buttons are the same height (only top and bottom to
  81      // make box shadow on hover cover the corners too)
  82      border: 1px solid @bgColor;
  83      border-left: none;
  84      border-right: none;
  85      text-shadow: 0 1px rgba(0, 0, 0, .1);
  86  
  87      &:disabled {
  88          background: @colorGray12;
  89          border-color: @colorGray12;
  90  
  91          // make sure disabled buttons don't have hover and active states
  92          &:hover,
  93          &:active,
  94          &.mw-ui-checked {
  95              box-shadow: none;
  96          }
  97      }
  98  }
  99  
 100  .button-colors-quiet(@textColor) {
 101      // Quiet buttons all start gray, and reveal
 102      // constructive/progressive/destructive color on hover and active.
 103      color: @colorButtonText;
 104  
 105      &:hover,
 106      &:focus {
 107          // lessphp doesn't implement tint, see above
 108          // color: tint(@textColor, 20%);
 109          color: mix(#fff, @textColor, 20%);
 110      }
 111  
 112      &:active,
 113      &.mw-ui-checked {
 114          // lessphp doesn't implement shade, see above
 115          // color: shade(@textColor, 20%);
 116          color: mix(#000, @textColor, 20%);
 117      }
 118  
 119      &:disabled {
 120          color: @colorDisabledText;
 121      }
 122  }


Generated: Fri Nov 28 14:03:12 2014 Cross-referenced by PHPXref 0.7.1