From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 30 Sep 2014 18:43:31 +0000 (-0700)
Subject: Add mw-ui-icon-after
X-Git-Tag: 1.31.0-rc.0~13543^2
X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=commitdiff_plain;h=5b6c82d29e58f5778fe0e0d118b927888f932215

Add mw-ui-icon-after

Change-Id: I5133d243ef98b17adada313f03cac48d8d3fc827
---

diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less
index bf8e41e731..9242aacb12 100644
--- a/resources/src/mediawiki.ui/components/icons.less
+++ b/resources/src/mediawiki.ui/components/icons.less
@@ -6,8 +6,11 @@
 
 // Mixins
 .mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
-	&.mw-ui-icon:before {
-		.background-image-svg(@iconSvg, @iconPng);
+	&.mw-ui-icon {
+		&:after,
+		&:before {
+			.background-image-svg(@iconSvg, @iconPng);
+		}
 	}
 }
 
@@ -48,13 +51,14 @@
 		}
 	}
 
-	&:before {
+	&.mw-ui-icon-after:after,
+	&.mw-ui-icon-before:before,
+	&.mw-ui-icon-element:before {
 		background-position: 50% 50%;
 		float: left;
 		display: block;
 		background-repeat: no-repeat;
 		background-size: 100% auto;
-		position: relative;
 		min-height: @iconSize;
 		content: '';
 	}
@@ -69,10 +73,26 @@
 	// Styleguide 4.1.2
 	&.mw-ui-icon-before {
 		&:before {
+			position: relative;
 			width: @iconSize;
 			margin-right: @gutterWidth;
 		}
 	}
+
+	// Icons with text before
+	//
+	// Markup:
+	// <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
+	//
+	// Styleguide 4.1.3
+	&.mw-ui-icon-after {
+		&:after {
+			position: relative;
+			float: right;
+			width: @iconSize;
+			margin-left: @gutterWidth;
+		}
+	}
 }
 
 // Icons