Remove the 'top' definition from .mw-ui-icon-element:before

[lhc/web/wiklou.git] / resources / src / mediawiki.ui / components / icons.less

diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less
index d85cc98..0912554 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);
+               }
        }
 }
 
@@ -23,7 +26,7 @@
 // However, icon-only elements do not yet degrade to text-only elements in these
 // browsers.
 //
-// Styleguide 4.
+// Styleguide 6.
 
 .mw-ui-icon {
        position: relative;
@@ -36,7 +39,7 @@
        // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
        // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
        //
-       // Styleguide 4.1.1.
+       // Styleguide 6.1.1.
        &.mw-ui-icon-element {
                @width: @iconSize + ( 2 * @gutterWidth );
 
@@ -53,13 +56,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: '';
        }
@@ -71,13 +75,29 @@
        // <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 4.1.2
+       // 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