diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less index c338c4778d..acf9ef3f59 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/tree.less @@ -29,13 +29,22 @@ min-width: 100%; width: auto; } -.umb-tree li.current > div, .umb-tree div.selected { +.umb-tree li.current > div, +.umb-tree div.selected { background: @blue; } -.umb-tree li.current > div a.umb-options i, .umb-tree div.selected i { +.umb-tree li.current > div a.umb-options i, +.umb-tree div.selected i { background: #fff; border-color: @blue; + transition: opacity 120ms ease; } + +.umb-tree li.current > div a.umb-options:hover i, +.umb-tree div.selected i { + opacity: .7; +} + .umb-tree li.current > div a, .umb-tree li.current > div i.icon, .umb-tree li.current > div ins { @@ -43,13 +52,20 @@ background: @blue; border-color: @blue; } + .umb-tree li.root > div { - padding-left: 20px; + padding: 0; } - .umb-tree li.root > div h5 { - margin-top: 10px; + margin: 0; + width: 100%; +} + +.umb-tree li.root > div h5 > a { + display: block; + padding: 20px 0 20px 20px; + box-sizing: border-box; } .umb-tree * { @@ -68,9 +84,9 @@ } .umb-tree a { - vertical-align: middle; - display: inline-block; cursor:pointer; + text-decoration: none; + outline: none; } .umb-tree a:hover { @@ -78,10 +94,13 @@ } .umb-tree div { - vertical-align: middle; padding: 5px 0 5px 0; position: relative; overflow: hidden; + display: flex; + flex-wrap: nowrap; + align-items: center; + } .umb-tree a.noSpr { @@ -95,7 +114,8 @@ visibility: visible; } -.umb-tree li.root > div a, .umb-tree li.root h5, .umb-tree-header { +.umb-tree li.root > div a, +.umb-tree li.root h5, .umb-tree-header { text-transform: uppercase; color: #b3b3b3; font-weight: bold; @@ -103,14 +123,18 @@ } .umb-tree ins { - vertical-align: middle; margin: -4px 0 0 -16px; width: 16px; height: 16px; - display: inline-block; visibility: hidden; text-decoration: none; font-size: 12px; + + transition: opacity 120ms ease; +} + +.umb-tree ins:hover { + opacity: .7; } .umb-tree li:hover ins { @@ -118,12 +142,27 @@ cursor: pointer } +.umb-tree li div { + padding: 0; +} + +.umb-tree li > div a:not(.umb-options) { + padding: 6px 0; + width: 100%; + display: flex; +} + .umb-tree .icon { vertical-align: middle; - margin: 1px 13px 1px 0px; + margin: 0 13px 0 0; color: #21201C; font-size: 20px; } + +.umb-tree-icon { + cursor: pointer; +} + .umb-tree i.noSpr { display: inline-block; margin-top: 1px; @@ -166,8 +205,8 @@ a.umb-options { text-align: center; position: absolute; right: 10px; - top: 3px; - padding: 0 3px 3px 5px; + top: 2px; + padding: 0 5px 5px 5px; border: 1px solid transparent; } @@ -180,6 +219,10 @@ a.umb-options i { margin: 0 2px 0 0; } +a.umb-options i:last-child { + margin: 0; +} + a.umb-options:hover { background: @btnBackgroundHighlight; border: 1px solid @grayLight; @@ -187,7 +230,10 @@ a.umb-options:hover { } li.root > div > a.umb-options { - top: 13px; + top: 18px; + + display: flex; + padding: 10px 5px; } .hide-options a.umb-options{display: none !important} @@ -275,6 +321,7 @@ div.is-container:before{ font-size: 8px; padding-left: 13px; padding-top: 8px; + pointer-events: none; } div.locked:before{ @@ -357,7 +404,6 @@ div.locked:before{ } .umb-actions-child li .menu-label { font-size: 12px; - margin-bottom: 10px; color: #000; margin-left: 20px; }