diff options
Diffstat (limited to 'resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss')
-rw-r--r-- | resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss new file mode 100644 index 00000000..2efff820 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss @@ -0,0 +1,62 @@ +/* _effects.scss */ + +/* Mixins for visual effects in CSS3 */ + +// ---------------------------------------------------------------------------- +// Gradients +// ---------------------------------------------------------------------------- +@mixin vertical-gradient ($startColor: lighten($agoraGray, 95%), $endColor: $agoraGray) { + // Fallback + background-color: $endColor; + *background-color: $endColor; // IE7 + + // IE6-8 + @include filter-gradient($startColor, $endColor, vertical); + + // IE9+, Opera, Gecko, WebKit + @include background-image(linear-gradient(top, $startColor, $endColor)); +} + +// ---------------------------------------------------------------------------- +// Button styling +// ---------------------------------------------------------------------------- +@mixin buttonColors ($baseColor: $agoraGray) { + // Background color + @include vertical-gradient(lighten($baseColor, 7.5%), $baseColor); + + @if $baseColor == $agoraGray { + color: black; + @include text-shadow(0 1px 1px rgba($baseColor, 0.3)); + } @else { + color: white; + @include text-shadow(0 1px 1px rgba($baseColor, 0.75)); + } + + border: 1px solid darken($baseColor, 2%); + + &:hover, + &.mw-ui-hover { + @include vertical-gradient(lighten($baseColor, 12.5%), lighten($baseColor, 7.5%)); + text-decoration: none; + } + + &:active, + &.mw-ui-active { + background: { + image: none; + color: darken($baseColor, 3%); + } + + text-shadow: none; + } + + &:disabled, + &.mw-ui-disabled { + background: { + image: none; + color: $baseColor; + } + opacity: 0.5; + text-shadow: none; + } +} |