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 bf8e41e..9242aac 100644 (file)
--- 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