From: Shahyar <shahyar@gmail.com>
Date: Wed, 30 Jul 2014 16:44:19 +0000 (-0400)
Subject: Add mw-ui-* context colors for any element, plus special handling for anchors
X-Git-Tag: 1.31.0-rc.0~14635
X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_ecrire%28%22brouteur%22%2C%28%24id_rubrique%20?a=commitdiff_plain;h=5c74148ba3f7c4f64cca6902e516ebb0c6b7f52a;p=lhc%2Fweb%2Fwiklou.git

Add mw-ui-* context colors for any element, plus special handling for anchors

Progressive, constructive, destructive can now be used independently of mw-ui-button.

Change-Id: I89d80927d603407678182592a1b12e2132de4141
---

diff --git a/docs/kss/Makefile b/docs/kss/Makefile
index 1be5e5ca32..7d2ee3be97 100644
--- a/docs/kss/Makefile
+++ b/docs/kss/Makefile
@@ -6,7 +6,7 @@ kss: nodecheck
 # Generates CSS of mediawiki.ui and mediawiki.ui.button using ResourceLoader, then applies it to the
 # KSS style guide
 	$(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX))
-	@curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.checkbox|mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP)
+	@curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.anchor|mediawiki.ui.checkbox|mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP)
 	@node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/ --css $(KSS_RL_TMP) -t styleguide-template
 	@rm $(KSS_RL_TMP)
 
diff --git a/resources/Resources.php b/resources/Resources.php
index c3aa864d22..d3f8f7d55b 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1433,6 +1433,12 @@ return array(
 		'styles' => array(
 			'resources/src/mediawiki.ui/components/checkbox.less',
 		),
+	),
+	// Lightweight module for anchor styles
+	'mediawiki.ui.anchor' => array(
+		'styles' => array(
+			'resources/src/mediawiki.ui/components/anchors.less',
+		),
 		'position' => 'top',
 		'targets' => array( 'desktop', 'mobile' ),
 	),
diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less
new file mode 100644
index 0000000000..e1b258dda8
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/anchors.less
@@ -0,0 +1,77 @@
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// Helpers
+.mw-ui-anchor( @mainColor ) {
+	// Make all context classes take the main color in IE6
+	.select-ie6-only& {
+		&:link, &:visited, &:hover, &:focus, &:active {
+			color: @mainColor;
+		}
+	}
+
+	// Hover state
+	&:hover {
+		color: lighten( @mainColor, @colorLightenPercentage );
+	}
+	// Focus and active states
+	&:focus, &:active {
+		color: darken( @mainColor, @colorDarkenPercentage );
+		outline: none; // outline fix
+	}
+
+	color: @mainColor;
+
+	// Quiet mode is gray at first
+	&.mw-ui-quiet {
+		.mw-ui-anchor-quiet( @mainColor );
+	}
+}
+
+.mw-ui-anchor-quiet( @mainColor ) {
+	color: @colorTextLight;
+	text-decoration: none;
+
+	&:hover {
+		color: @mainColor;
+	}
+	&:focus, &:active {
+		color: darken( @mainColor, @colorDarkenPercentage );
+	}
+}
+
+/*
+Text & Anchors
+
+Allows you to give text a context as to the type of action it is indicating.
+
+Styleguide 6.
+*/
+
+/*
+Guidelines
+
+This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context.
+
+Markup:
+<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a>
+<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a>
+<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a>
+
+.mw-ui-quiet - Quiet until interaction.
+
+Styleguide 6.1.
+*/
+.mw-ui-progressive {
+	.mw-ui-anchor( @colorProgressive );
+}
+.mw-ui-constructive {
+	.mw-ui-anchor( @colorConstructive );
+}
+.mw-ui-destructive {
+	.mw-ui-anchor( @colorDestructive );
+}
+.mw-ui-quiet {
+	.mw-ui-anchor-quiet( @colorTextLight );
+}