Create global variables related to mediawiki.ui icons

Change-Id: I6f2e64592e8985c9c14f88b0e91df1d0314a27d0

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index e91302b..f6bf382 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -60,3 +60,8 @@
 
 // Global border radius to be used to buttons and inputs
 @borderRadius: 2px;
+
+
+// Icon related variables
+@iconSize: 1.4em;
+@iconGutterWidth: 1em;

diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less
index ad951b0..5107f8e 100644 (file)
--- a/resources/src/mediawiki.ui/components/icons.less
+++ b/resources/src/mediawiki.ui/components/icons.less
@@ -1,8 +1,5 @@
 @import "mediawiki.mixins";
-
-// Variables
-@iconSize: 1.4em;
-@gutterWidth: 1em;
+@import "mediawiki.ui/variables";
 
 // Mixins
 .mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
@@ -42,7 +39,7 @@
        //
        // Styleguide 6.1.1.
        &.mw-ui-icon-element {
-               @width: @iconSize + ( 2 * @gutterWidth );
+               @width: @iconSize + ( 2 * @iconGutterWidth );
 
                text-indent: -999px;
                overflow: hidden;
@@ -53,7 +50,7 @@
                        left: 0;
                        right: 0;
                        position: absolute;
-                       margin: 0 @gutterWidth;
+                       margin: 0 @iconGutterWidth;
                }
        }
 
@@ -81,7 +78,7 @@
                &:before {
                        position: relative;
                        width: @iconSize;
-                       margin-right: @gutterWidth;
+                       margin-right: @iconGutterWidth;
                }
        }
 
@@ -96,7 +93,7 @@
                        position: relative;
                        float: right;
                        width: @iconSize;
-                       margin-left: @gutterWidth;
+                       margin-left: @iconGutterWidth;
                }
        }
 }