From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 11 Jul 2014 21:56:18 +0000 (-0700)
Subject: mediawiki.ui: One mixin file to rule them all
X-Git-Tag: 1.31.0-rc.0~14938
X-Git-Url: https://git.cyclocoop.org/%27.WWW_URL.%27admin/?a=commitdiff_plain;h=f32f9a911b9c24f8d7da7c85aa6df56d4e143f91;p=lhc%2Fweb%2Fwiklou.git

mediawiki.ui: One mixin file to rule them all

Change-Id: I10a78148c1c34d442c1655b6b3a0009aff3fdcc7
---

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
new file mode 100644
index 0000000000..5c500d91a8
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -0,0 +1,148 @@
+// ----------------------------------------------------------------------------
+// Form styling mixins
+// ----------------------------------------------------------------------------
+
+// Font is not included.
+// For Vector, that should be layered on top with vector-type
+.agora-field-styling() {
+
+	border: 1px solid @colorGrayLight;
+
+	&:focus {
+		// Styling focus of native checkboxes etc on Mac is almost impossible.
+		&:not([type=checkbox]):not([type=radio]) {
+			outline: 0; // Removes OS field focus
+		}
+
+		box-shadow: @colorProgressiveShadow 0 0 5px;
+
+		border-color: @colorProgressiveShadow;
+	}
+
+	color: @colorText;
+	padding: 0.35em 0.5em 0.35em 0.5em;
+
+	// Ensure that buttons and inputs are nicely aligned when they have differing heights
+	vertical-align: middle;
+}
+
+.agora-label-styling() {
+	//font-weight: bold;
+	font-size: 0.9em;
+	color: darken(@colorGrayLight, 50%);
+
+	* {
+		font-weight: normal;
+	}
+}
+
+.agora-inline-label-styling() {
+	margin-bottom: 0.5em;
+	cursor: pointer;
+	vertical-align: bottom;
+	line-height: normal;
+
+	font-weight: normal;
+
+	& > input[type="checkbox"],
+	& > input[type="radio"] {
+		width: auto;
+		height: auto;
+		margin: 0 0.1em 0 0;
+		padding: 0;
+		border: 1px solid @colorGrayLight;
+		cursor: pointer;
+	}
+}
+
+// ----------------------------------------------------------------------------
+// Button styling
+// ----------------------------------------------------------------------------
+
+.button-colors(@bgColor) {
+	background: @bgColor;
+
+	&:hover,
+	&:focus {
+		// The inner bottom bevel should match the active background color.
+		box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
+		border-bottom-color: mix(#000, @bgColor, 20%);
+		outline: none;
+		// remove outline in Firefox
+		&::-moz-focus-inner {
+			border-color: transparent;
+		}
+	}
+
+	&:active,
+	&.mw-ui-checked {
+		// lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
+		// it passes it through, then ResourceLoader drops it.
+		// background: shade(@bgColor, 20%);
+		background: mix(#000, @bgColor, 20%);
+		box-shadow: none;
+	}
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
+	color: @colorGrayDark;
+	border: 1px solid @colorGrayLight;
+
+	&:disabled {
+		color: @colorGrayLight;
+
+		// make sure disabled buttons don't have hover and active states
+		&:hover,
+		&:active {
+			background: @bgColor;
+			box-shadow: none;
+		}
+	}
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
+	color: @colorWhite;
+	// border of the same color as background so that light background and
+	// dark background buttons are the same height (only top and bottom to
+	// make box shadow on hover cover the corners too)
+	border: 1px solid @bgColor;
+	border-left: none;
+	border-right: none;
+	text-shadow: 0 1px rgba(0, 0, 0, .1);
+
+	&:disabled {
+		background: @colorGrayLight;
+		border-color: @colorGrayLight;
+
+		// make sure disabled buttons don't have hover and active states
+		&:hover,
+		&:active,
+		&.mw-ui-checked {
+			box-shadow: none;
+		}
+	}
+}
+
+.button-colors-quiet(@textColor) {
+	// Quiet buttons all start gray, and reveal
+	// constructive/progressive/destructive color on hover and active.
+	color: @colorGrayDark;
+
+	&:hover,
+	&:focus {
+		// lessphp doesn't implement tint, see above
+		// color: tint(@textColor, 20%);
+		color: mix(#fff, @textColor, 20%);
+	}
+
+	&:active,
+	&.mw-ui-checked {
+		// lessphp doesn't implement shade, see above
+		// color: shade(@textColor, 20%);
+		color: mix(#000, @textColor, 20%);
+	}
+
+	&:disabled {
+		color: @colorGrayLight;
+	}
+}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less
deleted file mode 100644
index 9b62efe5dc..0000000000
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less
+++ /dev/null
@@ -1,91 +0,0 @@
-// ----------------------------------------------------------------------------
-// Button styling
-// ----------------------------------------------------------------------------
-
-.button-colors(@bgColor) {
-	background: @bgColor;
-
-	&:hover,
-	&:focus {
-		// The inner bottom bevel should match the active background color.
-		box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
-		border-bottom-color: mix(#000, @bgColor, 20%);
-		outline: none;
-		// remove outline in Firefox
-		&::-moz-focus-inner {
-			border-color: transparent;
-		}
-	}
-
-	&:active,
-	&.mw-ui-checked {
-		// lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
-		// it passes it through, then ResourceLoader drops it.
-		// background: shade(@bgColor, 20%);
-		background: mix(#000, @bgColor, 20%);
-		box-shadow: none;
-	}
-}
-
-.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
-	color: @colorGrayDark;
-	border: 1px solid @colorGrayLight;
-
-	&:disabled {
-		color: @colorGrayLight;
-
-		// make sure disabled buttons don't have hover and active states
-		&:hover,
-		&:active {
-			background: @bgColor;
-			box-shadow: none;
-		}
-	}
-}
-
-.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
-	color: @colorWhite;
-	// border of the same color as background so that light background and
-	// dark background buttons are the same height (only top and bottom to
-	// make box shadow on hover cover the corners too)
-	border: 1px solid @bgColor;
-	border-left: none;
-	border-right: none;
-	text-shadow: 0 1px rgba(0, 0, 0, .1);
-
-	&:disabled {
-		background: @colorGrayLight;
-		border-color: @colorGrayLight;
-
-		// make sure disabled buttons don't have hover and active states
-		&:hover,
-		&:active,
-		&.mw-ui-checked {
-			box-shadow: none;
-		}
-	}
-}
-
-.button-colors-quiet(@textColor) {
-	// Quiet buttons all start gray, and reveal
-	// constructive/progressive/destructive color on hover and active.
-	color: @colorGrayDark;
-
-	&:hover,
-	&:focus {
-		// lessphp doesn't implement tint, see above
-		// color: tint(@textColor, 20%);
-		color: mix(#fff, @textColor, 20%);
-	}
-
-	&:active,
-	&.mw-ui-checked {
-		// lessphp doesn't implement shade, see above
-		// color: shade(@textColor, 20%);
-		color: mix(#000, @textColor, 20%);
-	}
-
-	&:disabled {
-		color: @colorGrayLight;
-	}
-}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less
deleted file mode 100644
index 7258d30aac..0000000000
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less
+++ /dev/null
@@ -1,52 +0,0 @@
-// Font is not included.
-// For Vector, that should be layered on top with vector-type
-.agora-field-styling() {
-
-	border: 1px solid @colorGrayLight;
-
-	&:focus {
-		// Styling focus of native checkboxes etc on Mac is almost impossible.
-		&:not([type=checkbox]):not([type=radio]) {
-			outline: 0; // Removes OS field focus
-		}
-
-		box-shadow: @colorProgressiveShadow 0 0 5px;
-
-		border-color: @colorProgressiveShadow;
-	}
-
-	color: @colorText;
-	padding: 0.35em 0.5em 0.35em 0.5em;
-
-	// Ensure that buttons and inputs are nicely aligned when they have differing heights
-	vertical-align: middle;
-}
-
-.agora-label-styling() {
-	//font-weight: bold;
-	font-size: 0.9em;
-	color: darken(@colorGrayLight, 50%);
-
-	* {
-		font-weight: normal;
-	}
-}
-
-.agora-inline-label-styling() {
-	margin-bottom: 0.5em;
-	cursor: pointer;
-	vertical-align: bottom;
-	line-height: normal;
-
-	font-weight: normal;
-
-	& > input[type="checkbox"],
-	& > input[type="radio"] {
-		width: auto;
-		height: auto;
-		margin: 0 0.1em 0 0;
-		padding: 0;
-		border: 1px solid @colorGrayLight;
-		cursor: pointer;
-	}
-}
diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less
index e5495ba4d9..ec08413ae4 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -1,6 +1,6 @@
 @import "mediawiki.mixins";
 @import "mediawiki.ui/variables";
-@import "mediawiki.ui/mixins/effects";
+@import "mediawiki.ui/mixins";
 
 // Buttons
 //
diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less
index bb914801c4..2e586a6b80 100644
--- a/resources/src/mediawiki.ui/components/forms.less
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -2,7 +2,7 @@
 
 @import "mediawiki.mixins";
 @import "mediawiki.ui/variables";
-@import "mediawiki.ui/mixins/forms";
+@import "mediawiki.ui/mixins";
 
 // --------------------------------------------------------------------------
 // Layouts