diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less index dc862d7bc3..e2a35c5fb5 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less @@ -75,7 +75,7 @@ display: flex; align-items: center; border-bottom: 1px solid @gray-9; - padding: 10px 15px; + padding: 10px 15px 10px 10px; } .umb-group-builder__group-title { @@ -112,7 +112,7 @@ input.umb-group-builder__group-title-input { } input.umb-group-builder__group-title-input:disabled:hover { - border: none; + border-color: transparent; } .umb-group-builder__group-title-input:hover { @@ -163,6 +163,7 @@ input.umb-group-builder__group-title-input:disabled:hover { list-style: none; margin: 0; padding: 15px; + padding-right: 5px; min-height: 35px; // the height of a sortable property } @@ -250,6 +251,9 @@ input.umb-group-builder__group-title-input:disabled:hover { overflow: hidden; border-color: transparent; background: transparent; + &:focus { + border-color: @inputBorderFocus; + } } .umb-group-builder__property-meta-label textarea.ng-invalid { @@ -269,6 +273,9 @@ input.umb-group-builder__group-title-input:disabled:hover { overflow: hidden; border-color: transparent; background: transparent; + &:focus { + border-color: @inputBorderFocus; + } } .umb-group-builder__property-preview { @@ -287,21 +294,17 @@ input.umb-group-builder__group-title-input:disabled:hover { bottom: 0; left: 0; right: 0; - background: rgba(0,0,0,0.1); + background: rgba(225,225,225,.5); transition: opacity 120ms; } } .umb-group-builder__property-preview:not(.-not-clickable):hover { &::after { - opacity: .8; + opacity: .66; } } -.umb-group-builder__property-preview:focus { - outline: none; -} - .umb-group-builder__property-preview.-not-clickable { cursor: auto; } @@ -335,26 +338,42 @@ input.umb-group-builder__group-title-input:disabled:hover { border: none; &:focus { outline:0; + border: 1px solid @inputBorderFocus; } } .umb-group-builder__property-actions { - flex: 0 0 30px; + flex: 0 0 44px; text-align: right; - margin-top: 9px; + margin-top: 7px; } .umb-group-builder__property-action { - margin: 10px 0 10px 0; - display: block; - font-size: 18px; - position: relative; - cursor: pointer; - color: @ui-icon; -} - -.umb-group-builder__property-action:hover { - color: @ui-icon-hover; + + position: relative; + margin: 5px 0; + + > button { + border: none; + + font-size: 18px; + position: relative; + cursor: pointer; + color: @ui-icon; + + margin: 0; + padding: 5px 10px; + width: auto; + overflow: visible; + background: transparent; + line-height: normal; + outline: 0; + -webkit-appearance: none; + + &:hover, &:focus { + color: @ui-icon-hover; + } + } } .umb-group-builder__property-tags { @@ -476,7 +495,7 @@ input.umb-group-builder__group-sort-value { font-size: 14px; color: @ui-action-type; - &:hover { + &:hover{ text-decoration: none; color:@ui-action-type-hover; border-color:@ui-action-border-hover;