Improve styles & align components to CSS/Less guidelines

[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 5107f8e..9b9d324 100644 (file)
--- a/resources/src/mediawiki.ui/components/icons.less
+++ b/resources/src/mediawiki.ui/components/icons.less
@@ -2,11 +2,10 @@
 @import "mediawiki.ui/variables";
 
 // Mixins
-.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
+.mixin-mw-ui-icon-bgimage( @iconSvg, @iconPng ) {
        &.mw-ui-icon {
-               &:after,
                &:before {
-                       .background-image-svg(@iconSvg, @iconPng);
+                       .background-image-svg( @iconSvg, @iconPng );
                }
        }
 }
@@ -14,7 +13,7 @@
 // Icons
 //
 // To use icons you must be using a browser that supports pseudo elements.
-// This includes support for IE8.
+// This includes support for IE 8.
 // http://caniuse.com/#feat=css-gencontent
 //
 // For elements that are intended to have both an icon and text, browsers that
@@ -46,6 +45,7 @@
                width: @width;
                min-width: @width;
                max-width: @width;
+
                &:before {
                        left: 0;
                        right: 0;
@@ -54,19 +54,17 @@
                }
        }
 
-       &.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;
+               float: left;
+               display: block;
                min-height: @iconSize;
                content: '';
        }
 
-
        // Icons with text
        //
        // Markup:
@@ -81,24 +79,4 @@
                        margin-right: @iconGutterWidth;
                }
        }
-
-       // 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: @iconGutterWidth;
-               }
-       }
-}
-
-// Icons
-.mw-ui-icon-ok {
-       .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
 }