From ee4b2adbd46ba4f0402387e3a46e97d39373f654 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 15 Aug 2018 11:59:06 +0200
Subject: [PATCH 1/2] prefix all nested content css classes with "umb"

---
 .../less/components/umb-nested-content.less   | 114 +++++++-----------
 .../nestedcontent/nestedcontent.controller.js |   6 +-
 .../nestedcontent.doctypepicker.html          |   6 +-
 .../nestedcontent/nestedcontent.editor.html   |   4 +-
 .../nestedcontent/nestedcontent.html          |  30 ++---
 5 files changed, 66 insertions(+), 94 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index e2a8c8fc81..dfbb2b5481 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -1,16 +1,13 @@
-.nested-content
-{
+.umb-nested-content {
     text-align: center;
 }
 
-.nested-content--not-supported
-{
+.umb-nested-content--not-supported {
     opacity: 0.3;
     pointer-events: none;
 }
 
-.nested-content-overlay
-{
+.umb-nested-content-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -19,23 +16,18 @@
     z-index: 1000;
 }
 
-.nested-content__item
-{
+.umb-nested-content__item {
     position: relative;
     text-align: left;
     border-top: solid 1px transparent;
     background: white;
-
-
 }
 
-.nested-content__item--active:not(.nested-content__item--single)
-{
+.umb-nested-content__item--active:not(.umb-nested-content__item--single) {
     background: #f8f8f8;
 }
 
-.nested-content__item.ui-sortable-placeholder
-{
+.umb-nested-content__item.ui-sortable-placeholder {
     background: #f8f8f8;
     border: 1px dashed #d9d9d9;
     visibility: visible !important;
@@ -43,18 +35,15 @@
     margin-top: -1px;
 }
 
-.nested-content__item--single > .nested-content__content
-{
+.umb-nested-content__item--single > .umb-nested-content__content {
     border: 0;
 }
 
-.nested-content__item--single > .nested-content__content > .umb-pane
-{
+.umb-nested-content__item--single > .umb-nested-content__content > .umb-pane {
     margin: 0;
 }
 
-.nested-content__header-bar
-{
+.umb-nested-content__header-bar {
     padding: 15px 20px;
     border-bottom: 1px dashed #e0e0e0;
     text-align: right;
@@ -67,24 +56,21 @@
     -o-user-select: none;
 }
 
-.nested-content__heading {
+.umb-nested-content__heading {
     line-height: 20px;
     position: relative;
 
-    &.-with-icon
-    {
+    &.-with-icon {
         padding-left: 20px;
     }
 
-    i
-    {
+    i {
         color: #999; /* same icon color as the icons in the item type picker */
         position: absolute;
         left: 0;
     }
 
-    .nested-content__item-name
-    {
+    .umb-nested-content__item-name {
         max-height: 20px;
         text-align: left;
         white-space: nowrap;
@@ -94,22 +80,16 @@
     }
 }
 
-.nested-content__icons
-{
+.umb-nested-content__icons {
     opacity: 0;
-
     transition: opacity .15s ease-in-out;
-   -moz-transition: opacity .15s ease-in-out;
-   -webkit-transition: opacity .15s ease-in-out;
-
     position: absolute;
     right: 0px;
     top: 2px;
     background-color: white;
     padding: 5px;
 
-    &:before
-    {
+    &:before {
         content: ' ';
         position: absolute;
         display: block;
@@ -117,22 +97,18 @@
         left: -30px;
         top: 0;
         bottom: 0;
-        background: -webkit-linear-gradient(90deg, rgba(255,255,255,0), white);
-        background: -moz-linear-gradient(90deg, rgba(255,255,255,0), white);
         background: linear-gradient(90deg, rgba(255,255,255,0), white);
     }
 }
 
 
-.nested-content__header-bar:hover .nested-content__icons,
-.nested-content__item--active > .nested-content__header-bar .nested-content__icons
-{
+.umb-nested-content__header-bar:hover .umb-nested-content__icons,
+.umb-nested-content__item--active > .umb-nested-content__header-bar .umb-nested-content__icons {
     opacity: 1;
 }
 
-.nested-content__icon,
-.nested-content__icon.nested-content__icon--disabled:hover
-{
+.umb-nested-content__icon,
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
     display: inline-block;
     padding: 4px 6px;
     margin: 2px;
@@ -143,8 +119,8 @@
     text-decoration: none !important;
 }
 
-.nested-content__icon:hover,
-.nested-content__icon--active
+.umb-nested-content__icon:hover,
+.umb-nested-content__icon--active
 {
     color: white;
     background: #2e8aea;
@@ -152,48 +128,41 @@
     text-decoration: none;
 }
 
-.nested-content__icon .icon,
-.nested-content__icon.nested-content__icon--disabled:hover .icon
-{
+.umb-nested-content__icon .icon,
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover .icon {
     display: block;
     font-size: 16px !important;
     color: #5f5f5f;
 }
 
-.nested-content__icon:hover .icon,
-.nested-content__icon--active .icon
-{
+.umb-nested-content__icon:hover .icon,
+.umb-nested-content__icon--active .icon {
     color: white;
 }
 
-.nested-content__icon--disabled
-{
+.umb-nested-content__icon--disabled {
     opacity: 0.3;
 }
 
 
-.nested-content__footer-bar
-{
+.umb-nested-content__footer-bar {
     text-align: center;
     padding-top: 20px;
 }
 
-.nested-content__content
-{
+.umb-nested-content__content {
     border-bottom: 1px dashed #e0e0e0;
 }
 
-.nested-content__content .umb-control-group {
+.umb-nested-content__content .umb-control-group {
     padding-bottom: 0;
 }
 
-.nested-content__item.ui-sortable-helper .nested-content__content
-{
+.umb-nested-content__item.ui-sortable-helper .umb-nested-content__content {
     display: none !important;
 }
 
-.nested-content__help-text
-{
+.umb-nested-content__help-text {
     display: inline-block;
     padding: 10px 20px 10px 20px;
     clear: both;
@@ -203,40 +172,43 @@
     border-radius: 15px;
 }
 
-.nested-content__doctypepicker table input, .nested-content__doctypepicker table select {
+.umb-nested-content__doctypepicker table input, 
+.umb-nested-content__doctypepicker table select {
     width: 100%;
     padding-right: 0;
 }
 
-.nested-content__doctypepicker table td.icon-navigation, .nested-content__doctypepicker i.nested-content__help-icon {
+.umb-nested-content__doctypepicker table td.icon-navigation, 
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
     vertical-align: middle;
     color: #CCC;
 }
 
-.nested-content__doctypepicker table td.icon-navigation:hover, .nested-content__doctypepicker i.nested-content__help-icon:hover {
+.umb-nested-content__doctypepicker table td.icon-navigation:hover, 
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
     color: #343434;
 }
 
-.nested-content__doctypepicker i.nested-content__help-icon {
+.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
     margin-left: 10px;
 }
 
-.form-horizontal .nested-content--narrow .controls-row
+.form-horizontal .umb-nested-content--narrow .controls-row
 {
     margin-left: 40% !important;
 }
 
-.form-horizontal .nested-content--narrow .controls-row .umb-textstring,
-.form-horizontal .nested-content--narrow .controls-row .umb-textarea
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-textstring,
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-textarea
 {
     width: 95%;
 }
 
-.form-horizontal .nested-content--narrow .controls-row .umb-dropdown {
+.form-horizontal .umb-nested-content--narrow .controls-row .umb-dropdown {
     width: 99%;
 }
 
-.usky-grid.nested-content__node-type-picker .cell-tools-menu {
+.usky-grid.umb-nested-content__node-type-picker .cell-tools-menu {
     position: relative;
     transform: translate(-50%, -25%);
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
index efafb9066d..0a44a9fcaa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
@@ -229,10 +229,10 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
         $scope.sortableOptions = {
             axis: 'y',
             cursor: "move",
-            handle: ".nested-content__icon--move",
+            handle: ".umb-nested-content__icon--move",
             start: function (ev, ui) {
                 // Yea, yea, we shouldn't modify the dom, sue me
-                $("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
+                $("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
                     tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                     $(this).css("visibility", "hidden");
                 });
@@ -244,7 +244,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
                 $scope.setDirty();
             },
             stop: function (ev, ui) {
-                $("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
+                $("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
                     tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
                     $(this).css("visibility", "visible");
                 });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
index 4b43df9c93..0617331682 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
@@ -1,4 +1,4 @@
-<div id="{{model.alias}}" class="nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
+<div id="{{model.alias}}" class="umb-nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
     <div>
         <table class="table table-striped">
             <thead>
@@ -45,11 +45,11 @@
             <a class="btn" ng-click="add()">
                 <localize key="general_add">Add</localize>
             </a>
-            <i class="icon icon-help-alt medium nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
+            <i class="icon icon-help-alt medium umb-nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
         </div>
     </div>
     <br/>
-    <div class="nested-content__help-text" ng-show="showHelpText">
+    <div class="umb-nested-content__help-text" ng-show="showHelpText">
         <p>
             <b><localize key="editcontenttype_tab">Tab</localize>:</b><br/>
             Select the tab who's properties should be displayed. If left blank, the first tab on the doc type will be used.
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html
index 29d8c882d1..5d89da51b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html
@@ -1,11 +1,11 @@
 <div class="umb-pane">
   <div ng-repeat="property in tab.properties" style="position: relative;">
 
-    <umb-property property="property" ng-class="{'nested-content--not-supported': property.notSupported}">
+    <umb-property property="property" ng-class="{'umb-nested-content--not-supported': property.notSupported}">
       <umb-editor model="property"></umb-editor>
     </umb-property>
 
-    <div ng-if="property.notSupported" class="nested-content-overlay"></div>
+    <div ng-if="property.notSupported" class="umb-nested-content-overlay"></div>
 
     <p ng-if="property.notSupported">{{property.notSupportedMessage}}</p>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
index 03dc7d47ab..9a5d75ae92 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
@@ -1,48 +1,48 @@
-<div id="nested-content--{{model.id}}" class="nested-content"
+<div id="umb-nested-content--{{model.id}}" class="umb-nested-content"
      ng-controller="Umbraco.PropertyEditors.NestedContent.PropertyEditorController"
-     ng-class="{'nested-content--narrow':!wideMode, 'nested-content--wide':wideMode}">
+     ng-class="{'umb-nested-content--narrow':!wideMode, 'umb-nested-content--wide':wideMode}">
     <ng-form>
 
-        <div class="nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
+        <div class="umb-nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
 
-            <div class="nested-content__item" ng-repeat="node in nodes" ng-class="{ 'nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'nested-content__item--single' : $parent.singleMode }">
+            <div class="umb-nested-content__item" ng-repeat="node in nodes" ng-class="{ 'umb-nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'umb-nested-content__item--single' : $parent.singleMode }">
 
-                <div class="nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
+                <div class="umb-nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
 
-                    <div class="nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
+                    <div class="umb-nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
 
-                    <div class="nested-content__icons">
-                        <a class="nested-content__icon nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>
+                    <div class="umb-nested-content__icons">
+                        <a class="umb-nested-content__icon umb-nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'umb-nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>
                             <i class="icon icon-edit"></i>
                         </a>
-                        <a class="nested-content__icon nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
+                        <a class="umb-nested-content__icon umb-nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
                             <i class="icon icon-navigation"></i>
                         </a>
-                        <a class="nested-content__icon nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
+                        <a class="umb-nested-content__icon umb-nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'umb-nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
                             <i class="icon icon-trash"></i>
                         </a>
                     </div>
 
                 </div>
 
-                <div class="nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
+                <div class="umb-nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
                     <umb-nested-content-editor ng-model="node" tab-alias="ncTabAlias" />
                 </div>
             </div>
 
         </div>
 
-        <div class="nested-content__help-text" ng-show="nodes.length == 0">
+        <div class="umb-nested-content__help-text" ng-show="nodes.length == 0">
             <localize key="grid_addElement"></localize>
         </div>
 
-        <div class="nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
-            <a class="nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
+        <div class="umb-nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
+            <a class="umb-nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
                 <i class="icon icon-add"></i>
             </a>
         </div>
 
-        <div class="usky-grid nested-content__node-type-picker" ng-if="overlayMenu.show">
+        <div class="usky-grid umb-nested-content__node-type-picker" ng-if="overlayMenu.show">
             <div class="cell-tools-menu" ng-style="overlayMenu.style" style="margin: 0;" delayed-mouseleave="closeNodeTypePicker()" on-delayed-mouseleave="closeNodeTypePicker()">
                 <h5>
                     <localize key="grid_insertControl" />

From 8ce93055eff9723b4ff1db6484f74e43e8ac1d5c Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 15 Aug 2018 13:00:40 +0200
Subject: [PATCH 2/2] update colors to use variables and match the new color
 scheme

---
 .../less/components/umb-nested-content.less   | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index dfbb2b5481..d1ad8ee8ff 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -20,16 +20,16 @@
     position: relative;
     text-align: left;
     border-top: solid 1px transparent;
-    background: white;
+    background: @white;
 }
 
 .umb-nested-content__item--active:not(.umb-nested-content__item--single) {
-    background: #f8f8f8;
+    background: @gray-10;
 }
 
 .umb-nested-content__item.ui-sortable-placeholder {
-    background: #f8f8f8;
-    border: 1px dashed #d9d9d9;
+    background: @gray-10;
+    border: 1px dashed @gray-8;
     visibility: visible !important;
     height: 55px;
     margin-top: -1px;
@@ -45,10 +45,10 @@
 
 .umb-nested-content__header-bar {
     padding: 15px 20px;
-    border-bottom: 1px dashed #e0e0e0;
+    border-bottom: 1px dashed @gray-8;
     text-align: right;
     cursor: pointer;
-    background-color: white;
+    background-color: @white;
 
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -65,7 +65,7 @@
     }
 
     i {
-        color: #999; /* same icon color as the icons in the item type picker */
+        color: @gray-2;
         position: absolute;
         left: 0;
     }
@@ -86,7 +86,7 @@
     position: absolute;
     right: 0px;
     top: 2px;
-    background-color: white;
+    background-color: @white;
     padding: 5px;
 
     &:before {
@@ -113,8 +113,8 @@
     padding: 4px 6px;
     margin: 2px;
     cursor: pointer;
-    background: #fff;
-    border: 1px solid #b6b6b6;
+    background: @white;
+    border: 1px solid @gray-7;
     border-radius: 200px;
     text-decoration: none !important;
 }
@@ -122,9 +122,9 @@
 .umb-nested-content__icon:hover,
 .umb-nested-content__icon--active
 {
-    color: white;
-    background: #2e8aea;
-    border-color: #2e8aea;
+    color: @white;
+    background: @turquoise-d1;
+    border-color: @turquoise-d1;
     text-decoration: none;
 }
 
@@ -132,12 +132,12 @@
 .umb-nested-content__icon.umb-nested-content__icon--disabled:hover .icon {
     display: block;
     font-size: 16px !important;
-    color: #5f5f5f;
+    color: @gray-3;
 }
 
 .umb-nested-content__icon:hover .icon,
 .umb-nested-content__icon--active .icon {
-    color: white;
+    color: @white;
 }
 
 .umb-nested-content__icon--disabled {
@@ -151,7 +151,7 @@
 }
 
 .umb-nested-content__content {
-    border-bottom: 1px dashed #e0e0e0;
+    border-bottom: 1px dashed @gray-8;
 }
 
 .umb-nested-content__content .umb-control-group {
@@ -167,8 +167,8 @@
     padding: 10px 20px 10px 20px;
     clear: both;
     font-size: 14px;
-    color: #555;
-    background: #f8f8f8;
+    color: @gray-3;
+    background: @gray-10;
     border-radius: 15px;
 }
 
@@ -181,12 +181,12 @@
 .umb-nested-content__doctypepicker table td.icon-navigation, 
 .umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
     vertical-align: middle;
-    color: #CCC;
+    color: @gray-7;
 }
 
 .umb-nested-content__doctypepicker table td.icon-navigation:hover, 
 .umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
-    color: #343434;
+    color: @gray-2;
 }
 
 .umb-nested-content__doctypepicker i.umb-nested-content__help-icon {