Merge branch 'v8/8.7' into v8/8.8

src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less

@@ -4,6 +4,7 @@
 
 .umb-nested-content-property-container {
     position: relative;
+
     &:not(:last-child){
         margin-bottom: 12px;
     }
@@ -54,19 +55,19 @@
     visibility: visible !important;
 }
 
-.umb-nested-content__item--single > .umb-nested-content__content {
+.umb-nested-content__item--single {
     border: 0;
-}
 
-.umb-nested-content__item--single > .umb-nested-content__content > .umb-pane {
-    margin: 0;
+    > .umb-nested-content__content {
+        > .umb-pane {
+            margin: 0;
+        }
+    }
 }
 
 .umb-nested-content__header-bar {
-    
     cursor: pointer;
     background-color: @white;
-
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
@@ -78,22 +79,21 @@
             padding-right: 60px;
         }
     }
-
 }
 
 .umb-nested-content__heading {
+    display: flex;
+    padding: 15px;
     line-height: 20px;
-    position: relative;
-    padding: 15px 5px;
-    color:@ui-option-type;
+    color: @ui-option-type;
 
     &:hover {
-        color:@ui-option-type-hover;
+        color: @ui-option-type-hover;
     }
 
-    i {
-        position: absolute;
-        margin-top: -1px;
+    .umb-nested-content__item-icon {
+        margin-top: -3px;
+        font-size: 22px;
     }
 
     .umb-nested-content__item-name {
@@ -105,10 +105,9 @@
         padding-left: 5px;
 
         &.--has-icon {
-            padding-left: 30px;
+            padding-left: 10px;
         }
     }
-
 }
 
 .umb-nested-content__icons {
@@ -116,7 +115,7 @@
     transition: opacity 120ms ease-in-out;
     position: absolute;
     right: 0;
-    top: 3px;
+    top: 5px;
     padding: 5px;
     background-color: @white;
 }
@@ -124,13 +123,16 @@
 .umb-nested-content__item--active > .umb-nested-content__header-bar {
     .umb-nested-content__heading {
         background-color: @ui-active;
+
         &:hover {
-            color:@ui-option-type;
+            color: @ui-option-type;
         }
+
         .umb-nested-content__item-name {
             padding-right: 60px;
         }
     }
+
     .umb-nested-content__icons {
         background-color: @ui-active;
         &:before {
@@ -139,8 +141,6 @@
     }
 }
 
-
-
 .umb-nested-content__header-bar:hover .umb-nested-content__icons,
 .umb-nested-content__header-bar:focus .umb-nested-content__icons,
 .umb-nested-content__header-bar:focus-within .umb-nested-content__icons,
@@ -148,8 +148,6 @@
     opacity: 1;
 }
 
-
-
 .umb-nested-content__icon {
     background: transparent;
     border: 0 none;
@@ -167,7 +165,7 @@
 
 .umb-nested-content__icon .icon {
     display: block;
-    font-size: 16px !important;
+    font-size: 18px !important;
 }
 
 .umb-nested-content__icon--disabled {
@@ -179,9 +177,6 @@
     }
 }
 
-
-
-
 .umb-nested-content__footer-bar {
     margin-top: 20px;
 }
@@ -211,7 +206,6 @@
     cursor: not-allowed;
 }
 
-
 .umb-nested-content__content {
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;