From ca40fd3976121848020f9236ab63f5b8073cd865 Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Wed, 29 Jun 2016 14:11:49 +0200
Subject: [PATCH] Changed name of utilities and their width value

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  8 +++---
 .../{umb-utility_flex.less => _flexbox.less}  |  0
 ...umb-utility_spacing.less => _spacing.less} |  0
 ...ility_text-align.less => _text-align.less} |  0
 .../src/less/utilities/_width.less            | 26 ++++++++++++++++++
 .../less/utilities/umb-utility_widths.less    | 27 -------------------
 .../src/views/packager/views/installed.html   |  2 +-
 .../src/views/packager/views/repo.html        |  2 +-
 8 files changed, 32 insertions(+), 33 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/less/utilities/{umb-utility_flex.less => _flexbox.less} (100%)
 rename src/Umbraco.Web.UI.Client/src/less/utilities/{umb-utility_spacing.less => _spacing.less} (100%)
 rename src/Umbraco.Web.UI.Client/src/less/utilities/{umb-utility_text-align.less => _text-align.less} (100%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/utilities/_width.less
 delete mode 100644 src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index c19eb4c847..3a55e87382 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -121,10 +121,10 @@
 @import "components/umb-file-dropzone.less";
 
 // Utilities
-@import "utilities/umb-utility_flex.less";
-@import "utilities/umb-utility_spacing.less";
-@import "utilities/umb-utility_text-align.less";
-@import "utilities/umb-utility_widths.less";
+@import "utilities/_flexbox.less";
+@import "utilities/_spacing.less";
+@import "utilities/_text-align.less";
+@import "utilities/_width.less";
 
 //page specific styles
 @import "pages/document-type-editor.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_flexbox.less
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less
rename to src/Umbraco.Web.UI.Client/src/less/utilities/_flexbox.less
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_spacing.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_spacing.less
rename to src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_text-align.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_text-align.less
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_text-align.less
rename to src/Umbraco.Web.UI.Client/src/less/utilities/_text-align.less
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/_width.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_width.less
new file mode 100644
index 0000000000..a9f2fd3362
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/utilities/_width.less
@@ -0,0 +1,26 @@
+/*
+    Width
+*/
+
+
+/* Width Scale */
+
+.w1 {    width: 1rem; }
+.w2 {    width: 2rem; }
+.w3 {    width: 4rem; }
+.w4 {    width: 8rem; }
+.w5 {    width: 16rem; }
+
+.w-10 {  width:  10%; }
+.w-20 {  width:  20%; }
+.w-25 {  width:  25%; }
+.w-33 {  width:  33%; }
+.w-34 {  width:  34%; }
+.w-40 {  width:  40%; }
+.w-50 {  width:  50%; }
+.w-60 {  width:  60%; }
+.w-75 {  width:  75%; }
+.w-80 {  width:  80%; }
+.w-100 { width: 100%; }
+
+.w-auto { width: auto; }
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less b/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less
deleted file mode 100644
index c9fbba3798..0000000000
--- a/src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less
+++ /dev/null
@@ -1,27 +0,0 @@
-// Widths
-.width-1  { width: calc(1/12 * 100%); }
-.width-2  { width: calc(2/12 * 100%); }
-.width-3  { width: calc(3/12 * 100%); }
-.width-4  { width: calc(4/12 * 100%); }
-.width-5  { width: calc(5/12 * 100%); }
-.width-6  { width: calc(6/12 * 100%); }
-.width-7  { width: calc(7/12 * 100%); }
-.width-8  { width: calc(8/12 * 100%); }
-.width-9  { width: calc(9/12 * 100%); }
-.width-10 { width: calc(10/12 * 100%); }
-.width-11 { width: calc(11/12 * 100%); }
-.width-12 { width: 100%; }
-
-.width-100 {
-    width: 100%;
-}
-
-.width {
-    float: left;
-    box-sizing: border-box;
-}
-
-.width-right {
-    float: right;
-    box-sizing: border-box;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
index ea96fe38e0..27110f0f28 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
@@ -55,7 +55,7 @@
 
             <div class="umb-info-local-items">
 
-                <form novalidate name="uninstallForm" class="width-100">
+                <form novalidate name="uninstallForm" class="w-100">
                     <div class="umb-package-icon">
                         <i ng-if="!vm.package.icon" class="icon-box"></i>
                         <img ng-if="vm.package.icon" ng-src="{{vm.package.icon}}" alt="" />
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
index 3e1806d17a..be2096b4ec 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
@@ -273,7 +273,7 @@
 
                 <div class="umb-info-local-items">
 
-                    <form novalidate name="localPackageForm" class="width-100">
+                    <form novalidate name="localPackageForm" class="w-100">
                         <div class="umb-package-icon">
                             <i ng-if="!vm.localPackage.icon" class="icon-box"></i>
                             <img ng-if="vm.localPackage.icon" ng-src="{{vm.localPackage.icon}}" alt="" />