resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss

   1 /* _effects.scss */
   2
   3 /* Mixins for visual effects in CSS3 */
   4
   5 // ----------------------------------------------------------------------------
   6 // Gradients
   7 // ----------------------------------------------------------------------------
   8 @mixin vertical-gradient ($startColor: lighten($agoraGray, 95%), $endColor: $agoraGray) {
   9         // Fallback
  10     background-color: $endColor;
  11     *background-color: $endColor; // IE7
  12
  13     // IE6-8
  14     @include filter-gradient($startColor, $endColor, vertical);
  15
  16     // IE9+, Opera, Gecko, WebKit
  17     @include background-image(linear-gradient(top, $startColor, $endColor));
  18 }
  19
  20 // ----------------------------------------------------------------------------
  21 // Button styling
  22 // ----------------------------------------------------------------------------
  23 @mixin buttonColors ($baseColor: $agoraGray) {
  24         // Background color
  25         @include vertical-gradient(lighten($baseColor, 7.5%), $baseColor);
  26
  27         @if $baseColor == $agoraGray {
  28                 color: darken($baseColor, 50%);
  29                 @include text-shadow(0 1px 1px rgba($baseColor, 0.3));
  30         } @else {
  31                 color: white;
  32                 @include text-shadow(0 1px 1px rgba($baseColor, 0.75));
  33         }
  34
  35         border: 1px solid darken($baseColor, 2%);
  36
  37         &:hover,
  38         &.mw-ui-hover {
  39                 @include vertical-gradient(lighten($baseColor, 12.5%), lighten($baseColor, 7.5%));
  40                 text-decoration: none;
  41         }
  42
  43         &:active,
  44         &.mw-ui-active {
  45                 background: {
  46                         image: none;
  47                         color: darken($baseColor, 3%);
  48                 }
  49
  50                 text-shadow: none;
  51         }
  52
  53         &:disabled,
  54         &.mw-ui-disabled {
  55                 background: {
  56                         image: none;
  57                         color: $baseColor;
  58                 }
  59                 opacity: 0.5;
  60                 text-shadow: none;
  61         }
  62 }