1 files changed, 107 insertions, 0 deletions
diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less
new file mode 100644
index 00000000..ad951b08
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/icons.less
@@ -0,0 +1,107 @@
+@import "mediawiki.mixins";
+
+// Variables
+@iconSize: 1.4em;
+@gutterWidth: 1em;
+
+// Mixins
+.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
+	&.mw-ui-icon {
+		&:after,
+		&:before {
+			.background-image-svg(@iconSvg, @iconPng);
+		}
+	}
+}
+
+// Icons
+//
+// To use icons you must be using a browser that supports pseudo elements.
+// This includes support for IE8.
+// http://caniuse.com/#feat=css-gencontent
+//
+// For elements that are intended to have both an icon and text, browsers that
+// do not support pseudo-selectors will degrade to text-only.
+//
+// However, icon-only elements do not yet degrade to text-only elements in these
+// browsers.
+//
+// Styleguide 6.
+
+.mw-ui-icon {
+	position: relative;
+	min-height: @iconSize;
+	min-width: @iconSize;
+
+	// Standalone icons
+	//
+	// Markup:
+	// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br/>
+	// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br/>
+	// <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button>
+	//
+	// Styleguide 6.1.1.
+	&.mw-ui-icon-element {
+		@width: @iconSize + ( 2 * @gutterWidth );
+
+		text-indent: -999px;
+		overflow: hidden;
+		width: @width;
+		min-width: @width;
+		max-width: @width;
+		&:before {
+			left: 0;
+			right: 0;
+			position: absolute;
+			margin: 0 @gutterWidth;
+		}
+	}
+
+	&.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;
+		min-height: @iconSize;
+		content: '';
+	}
+
+
+	// Icons with text
+	//
+	// Markup:
+	// <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
+	// <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
+	//
+	// Styleguide 6.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 6.1.3
+	&.mw-ui-icon-after {
+		&:after {
+			position: relative;
+			float: right;
+			width: @iconSize;
+			margin-left: @gutterWidth;
+		}
+	}
+}
+
+// Icons
+.mw-ui-icon-ok {
+	.mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
+}