Fixes: U4-7638 Make larger area of tree node clickable

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;
 }