Changed name of utilities and their width value

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";

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; }

src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less

@@ -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;
-}

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="" />

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="" />