Make Nested Content icons centered and same size as Block Editor

umbraco · Nov 18, 2020 · 353aaa4 · 353aaa4
1 parent c88e2be
commit 353aaa4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 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
@@ -91,9 +91,10 @@
         color:@ui-option-type-hover;
     }
 
-    i {
+    .umb-nested-content__item-icon {
         position: absolute;
-        margin-top: -1px;
+        margin-top: -3px;
+        font-size: 22px;
     }
 
     .umb-nested-content__item-name {
@@ -116,7 +117,7 @@
     transition: opacity 120ms ease-in-out;
     position: absolute;
     right: 0;
-    top: 3px;
+    top: 5px;
     padding: 5px;
     background-color: @white;
 }
@@ -167,7 +168,7 @@
 
 .umb-nested-content__icon .icon {
     display: block;
-    font-size: 16px !important;
+    font-size: 18px !important;
 }
 
 .umb-nested-content__icon--disabled {

diff --git a/...o.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.propertyeditor.html b/...o.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.propertyeditor.html
@@ -18,7 +18,7 @@
                              ng-hide="vm.singleMode"
                              umb-auto-focus="{{vm.currentNode.key === node.key ? 'true' : 'false'}}">
 
-                            <div class="umb-nested-content__heading"><i ng-if="vm.showIcons" class="icon" ng-class="vm.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-class="{'--has-icon': vm.showIcons}" ng-bind="vm.getName($index)"></span></div>
+                            <div class="umb-nested-content__heading"><i ng-if="vm.showIcons" class="icon umb-nested-content__item-icon" ng-class="vm.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-class="{'--has-icon': vm.showIcons}" ng-bind="vm.getName($index)"></span></div>
 
                             <div class="umb-nested-content__icons">
                                 <button type="button" class="umb-nested-content__icon umb-nested-content__icon--copy" title="{{vm.labels.copy_icon_title}}" ng-click="vm.clickCopy($event, node);" ng-if="vm.showCopy">