Various Styles Bug fixed and improvement

Conflicts:
	src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
	src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
	src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html

@@ -1,7 +1,9 @@
 
 <div ng-controller="Umbraco.canvasdesigner.background">
 
-    <h5>{{item.name}}</h5>
+    <div class="box-slider">
+        <spectrum colorselected="item.values.color"></spectrum>
+    </div>    
 
     <div class="box-slider">
         <div class="imagePickerPreview" ng-click="open(item.values)" style="background-image:{{ item.values.imageorpattern }}">
@@ -10,11 +12,6 @@
         </div>
     </div>
 
-    <div class="box-slider">
-        <spectrum colorselected="item.values.color"></spectrum>
-        <!--<i ng-if="item.values.color != ''" ng-click="item.values.color = ''" class="icon icon-delete colorPickerDelete"></i>-->
-    </div>
-
 </div>
 
 <script type="text/ng-template" id="mediaPickerModal.html">

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html

@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.border" class="bordereditor">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider">
         <ul class="box-preview">
             <li ng-repeat="border in borderList" class="border-{{border}}" ng-class="{selected: selectedBorder.name == border}" ng-click="setselectedBorder(border)"></li>

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.less

@@ -28,31 +28,31 @@
 
 /***start-lessStyle--ALIAS-***/
 
-.all-ALIAS- () when  (@bordersize-ALIAS- > 0) {
+.all-ALIAS- () when  (isnumber(@bordersize-ALIAS-)) {
     border: @bordersize-ALIAS- + 0px;
     border-color:@bordercolor-ALIAS-;
     border-style:@bordertype-ALIAS-;
 }
 
-.left-ALIAS- () when  (@leftbordersize-ALIAS- > 0) {
+.left-ALIAS- () when  (isnumber(@leftbordersize-ALIAS-)) {
     border-left: @leftbordersize-ALIAS- + 0px;
     border-left-color:@leftbordercolor-ALIAS-;
     border-left-style:@leftbordertype-ALIAS-;
 }
 
-.right-ALIAS- () when  (@rightbordersize-ALIAS- > 0) {
+.right-ALIAS- () when  (isnumber(@rightbordersize-ALIAS-)) {
     border-right: @rightbordersize-ALIAS- + 0px;
     border-right-color:@rightbordercolor-ALIAS-;
     border-right-style:@rightbordertype-ALIAS-;
 }
 
-.top-ALIAS- () when  (@topbordersize-ALIAS- > 0) {
+.top-ALIAS- () when  (isnumber(@topbordersize-ALIAS-)) {
     border-top: @topbordersize-ALIAS- + 0px;
     border-top-color:@topbordercolor-ALIAS-;
     border-top-style:@topbordertype-ALIAS-;
 }
 
-.bottom-ALIAS- () when  (@bottombordersize-ALIAS- > 0) {
+.bottom-ALIAS- () when  (isnumber(@bottombordersize-ALIAS-)) {
     border-bottom: @bottombordersize-ALIAS- + 0px;
     border-bottom-color:@bottombordercolor-ALIAS-;
     border-bottom-style:@bottombordertype-ALIAS-;

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html

@@ -1,11 +1,7 @@
 
-<div ng-controller="Umbraco.canvasdesigner.color">
-    
-    <h5>{{item.name}}</h5>
 
     <div class="box-slider">
         <spectrum colorselected="item.values.color"></spectrum>
-        <!--<i ng-if="item.values.color != ''" ng-click="item.values.color = ''" class="icon icon-delete colorPickerDelete"></i>-->
     </div>
 
 </div>

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.html

@@ -1,13 +1,12 @@
 
 <div ng-controller="Umbraco.canvasdesigner.googlefontpicker">
 
-    <span class="field-title">{{item.name}}:</span>
     <div class="box-slider">
         <div class="fontFamilyPickerPreview" ng-click="open(item.values)" ng-style="setStyleVariant()">
             <span>Aa</span>
             {{ item.values.fontFamily }}
+            <i ng-if="item.values.fontFamily != ''" ng-click="item.values.fontFamily = ''" class="icon icon-delete fontPickerDelete"></i>
         </div>
-        <i ng-if="item.values.fontFamily != ''" ng-click="item.values.fontFamily = ''" class="icon icon-delete fontPickerDelete"></i>
     </div>
 
 </div>

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/margin.html

@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.margin">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider"> 
         <ul class="box-preview">
             <li ng-repeat="margin in marginList" class="border-{{margin}}" ng-class="{selected: selectedmargin.name == margin}" ng-click="setSelectedmargin(margin)"></li>

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/padding.html

@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.padding">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider">
         <ul class="box-preview">
             <li ng-repeat="padding in paddingList" class="border-{{padding}}" ng-class="{selected: selectedpadding.name == padding}" ng-click="setSelectedpadding(padding)"></li>

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/radius.html

@@ -1,8 +1,6 @@
 
 <div ng-controller="Umbraco.canvasdesigner.radius">
 
-    <h5>{{item.name}}</h5>
-
     <div class="box-slider">
         <ul class="box-preview">
             

src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/slider.html

@@ -1,7 +1,8 @@
 
 <div ng-controller="Umbraco.canvasdesigner.slider">
-    <h5>{{item.name}}:</h5>
+
     <div class="box-slider">
         <div ui-slider min="{{item.min}}" max="{{item.max}}" step="1" ng-model="item.values.slider"></div>
     </div>
+
 </div>

src/Umbraco.Web.UI.Client/src/tuning/editors/layout.html

@@ -0,0 +1,10 @@
+
+<div ng-controller="Umbraco.tuning.layout">
+
+    <div class="box-slider">
+        <input type="radio" ng-model="item.values.layout" value="box"> Box
+        <input type="radio" ng-model="item.values.layout" value="wide"> Wide
+        <input type="radio" ng-model="item.values.layout" value="full"> Full
+    </div>
+
+</div>

src/Umbraco.Web.UI.Client/src/tuning/editors/layout.js

@@ -0,0 +1,16 @@
+
+/*********************************************************************************************************/
+/* slider editor */
+/*********************************************************************************************************/
+
+angular.module("umbraco.tuning")
+
+.controller("Umbraco.tuning.layout", function ($scope) {
+
+    if (!$scope.item.values) {
+        $scope.item.values = {
+            layout: ""
+        }
+    }
+
+})

src/Umbraco.Web.UI.Client/src/tuning/editors/layout.less

@@ -0,0 +1,96 @@
+
+/************************************************************************/
+/* wide -ALIAS- -CSS- */ 
+/************************************************************************/
+
+/***start-lessParam--ALIAS-***/
+@layout-ALIAS-:box;
+/***end-lessParam--ALIAS-***/
+
+/***start-lessStyle--ALIAS-***/
+
+.box1200-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 1140px;
+}
+
+.box992-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 940px;
+}
+
+.box768-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 720px;
+}
+
+.boxFull-ALIAS- () when  (@layout-ALIAS- = box) {
+    width: 100%;
+}
+
+.wide1200-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 1140px;
+}
+
+.wide992-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 940px;
+}
+
+.wide768-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 720px;
+}
+
+.wideFull-ALIAS- () when  (@layout-ALIAS- = wide) {
+    width: 100% !important;
+}
+
+.fullFull-ALIAS- () when  (@layout-ALIAS- = full) {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    -SCHEMACONTAINER- {
+        .wide768-ALIAS-;
+        .boxFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 992px) {
+    -SCHEMACONTAINER- {
+        .wide992-ALIAS-;
+        .boxFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 1200px) {
+    -SCHEMACONTAINER- {
+        .wide1200-ALIAS-;
+        .boxFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 768px) {
+    -SCHEMA- {
+        .box768-ALIAS-;
+        .wideFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 992px) {
+    -SCHEMA- {
+        .box992-ALIAS-;
+        .wideFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+@media (min-width: 1200px) {
+    -SCHEMA- {
+        .box1200-ALIAS-;
+        .wideFull-ALIAS-;
+        .fullFull-ALIAS-;
+    }
+}
+
+/***end-lessStyle--ALIAS-***/