yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nested content UI fixes (#9384)

Browse Source 
* Fixing spacing of nested content header + icon

* Removing border from single Nested Content properties

* fix overlapping icon on nested content with multiple items

Co-authored-by: Sebastiaan Janssen <sebastiaan@umbraco.com>
Co-authored-by: Mads Rasmussen <madsr@hey.com>
(cherry picked from commit 0fdd599596)

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
This commit is contained in:
Callum Whyte
2021-01-13 14:11:50 +00:00
committed by Sebastiaan Janssen
parent cfe5028dd0
commit 4dd554172b
1 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}
@@ -208,10 +203,9 @@
.umb-nested-content__add-content.--disabled:hover {
color: @gray-7;
border-color: @gray-7;
cursor: default;
cursor: not-allowed;
}
.umb-nested-content__content {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;