style updates

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;