From: Prateek Saxena <prtksxna@gmail.com>
Date: Fri, 27 Mar 2015 06:26:07 +0000 (+0530)
Subject: mediawiki.ui: Add @activeColor argument to the .button-colors() mixin
X-Git-Tag: 1.31.0-rc.0~10870^2
X-Git-Url: https://git.cyclocoop.org//%22?a=commitdiff_plain;h=ed38734dd474d889c2353e34138119b41cd1d61a;p=lhc%2Fweb%2Fwiklou.git

mediawiki.ui: Add @activeColor argument to the .button-colors() mixin

Have kept the colors same for now except for .mw-ui-button:active and
.mw-ui-button.mw-ui-checked . Can be changed later once the design
team has decided.

Change-Id: I7c418b970c5e5fa95f740ecf3d90622bf7f02364
---

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index db983a78d7..56b68117f5 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -33,7 +33,7 @@
 // Button styling
 // ----------------------------------------------------------------------------
 
-.button-colors(@bgColor, @highlightColor) {
+.button-colors(@bgColor, @highlightColor, @activeColor) {
 	background: @bgColor;
 
 	&:hover {
@@ -55,12 +55,12 @@
 
 	&:active,
 	&.mw-ui-checked {
-		background: @highlightColor;
+		background: @activeColor;
 		box-shadow: none;
 	}
 }
 
-.button-colors(@bgColor, @highlightColor) when (lightness(@bgColor) >= 70%) {
+.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) {
 	color: @colorButtonText;
 	border: 1px solid @colorGray12;
 
@@ -83,7 +83,7 @@
 	}
 }
 
-.button-colors(@bgColor, @highlightColor) when (lightness(@bgColor) < 70%) {
+.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) < 70%) {
 	color: #fff;
 	// border of the same color as background so that light background and
 	// dark background buttons are the same height and width
@@ -103,7 +103,7 @@
 	}
 }
 
-.button-colors-quiet(@textColor, @highlightColor) {
+.button-colors-quiet(@textColor, @highlightColor, @activeColor) {
 	// Quiet buttons all start gray, and reveal
 	// constructive/progressive/destructive color on hover and active.
 	color: @colorButtonText;
@@ -115,7 +115,7 @@
 
 	&:active,
 	&.mw-ui-checked {
-		color: @highlightColor;
+		color: @activeColor;
 	}
 
 	&:disabled {
diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 8ffc6ed41a..7a81ff293c 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -22,14 +22,17 @@
 // Blue; for contextual use of a continuing action
 @colorProgressive: #347bff;
 @colorProgressiveHighlight: #2962CC;
+@colorProgressiveActive: #2962CC;
 // Green; for contextual use of a positive finalizing action
 @colorConstructive: #00af89;
 @colorConstructiveHighlight: #008C6D;
+@colorConstructiveActive: #008C6D;
 // Orange; for contextual use of returning to a past action
 @colorRegressive: #FF5D00;
 // Red; for contextual use of a negative action of high severity
 @colorDestructive: #d11d13;
 @colorDestructiveHighlight: #A7170F;
+@colorDestructiveActive: #A7170F;
 // Orange; for contextual use of a potentially negative action of medium severity
 @colorMediumSevere: #FF5D00;
 // Yellow; for contextual use of a potentially negative action of low severity
@@ -45,6 +48,7 @@
 @colorTextLight: @colorGray6;
 @colorButtonText: @colorGray5;
 @colorButtonTextHighlight: @colorGray7;
+@colorButtonTextActive: @colorGray7;
 @colorDisabledText: @colorGray12;
 @colorErrorText: #CC0000;
 
diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index 53e13b7564..77b3f9d882 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -47,7 +47,7 @@
 	zoom: 1;
 
 	// Container styling
-	.button-colors(#FFF, #CCC);
+	.button-colors(#FFF, #CCC, #777);
 	border-radius: @borderRadius;
 	min-width: 4em;
 
@@ -135,10 +135,10 @@
 	// Styleguide 2.1.1.
 	&.mw-ui-progressive,
 	&.mw-ui-primary {
-		.button-colors(@colorProgressive, @colorProgressiveHighlight);
+		.button-colors(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
 
 		&.mw-ui-quiet {
-			.button-colors-quiet(@colorProgressive, @colorProgressiveHighlight);
+			.button-colors-quiet(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
 		}
 	}
 
@@ -158,10 +158,10 @@
 	//
 	// Styleguide 2.1.2.
 	&.mw-ui-constructive {
-		.button-colors(@colorConstructive, @colorConstructiveHighlight);
+		.button-colors(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
 
 		&.mw-ui-quiet {
-			.button-colors-quiet(@colorConstructive, @colorConstructiveHighlight);
+			.button-colors-quiet(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
 		}
 	}
 
@@ -180,10 +180,10 @@
 	//
 	// Styleguide 2.1.3.
 	&.mw-ui-destructive {
-		.button-colors(@colorDestructive, @colorDestructiveHighlight);
+		.button-colors(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
 
 		&.mw-ui-quiet {
-			.button-colors-quiet(@colorDestructive, @colorDestructiveHighlight);
+			.button-colors-quiet(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
 		}
 	}
 
@@ -220,7 +220,7 @@
 		background: transparent;
 		border: none;
 		text-shadow: none;
-		.button-colors-quiet(@colorButtonText, @colorButtonTextHighlight);
+		.button-colors-quiet(@colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive);
 
 		&:hover,
 		&:focus {