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;
+	}
+}