From 560367debe0a8b9e40a8731aaa5b52bea4985d85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 19 Mar 2019 16:15:01 +0100
Subject: [PATCH 1/4] hover state for umb-table item

---
 .../src/less/components/umb-table.less                | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
index 15cb007a01..bd79e88a2b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
@@ -102,6 +102,17 @@ input.umb-table__input {
     &:hover {
         //background-color: @ui-option-hover;
         
+        &::before {
+            content: "";
+            position: absolute;
+            z-index:1;
+            top: 1px;
+            left: 1px;
+            right: 1px;
+            bottom: 1px;
+            border: 2px solid rgba(@ui-selected-border, .33);
+            pointer-events: none;
+        }
     }
 }
 

From bd8f950ba1e05fb3c98d2792c9a81740e01a2de9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 19 Mar 2019 16:30:18 +0100
Subject: [PATCH 2/4] hover state for umb-table and umb-mini-list-view

---
 .../src/less/components/umb-table.less        | 51 +++++++++----------
 .../less/components/users/umb-user-cards.less | 16 ++++--
 .../views/components/umb-mini-list-view.html  |  2 +-
 .../src/views/components/umb-table.html       |  2 +-
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
index bd79e88a2b..6674e01475 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
@@ -96,22 +96,33 @@ input.umb-table__input {
     min-height: 52px;
 }
 .umb-table-body .umb-table-row.-selectable {
-    
     cursor: pointer;
-    
+}
+.umb-table-row.-selected, 
+.umb-table-body .umb-table-row.-selectable:hover {
+    &::before {
+        content: "";
+        position: absolute;
+        z-index:1;
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        border: 2px solid @ui-selected-border;
+        pointer-events: none;
+    }
+}
+.umb-table-body .umb-table-row.-selectable {
     &:hover {
-        //background-color: @ui-option-hover;
-        
         &::before {
-            content: "";
-            position: absolute;
-            z-index:1;
-            top: 1px;
-            left: 1px;
-            right: 1px;
-            bottom: 1px;
-            border: 2px solid rgba(@ui-selected-border, .33);
-            pointer-events: none;
+            opacity:.33;
+        }
+    }
+}
+.umb-table-body .umb-table-row.-selected.-selectable {
+    &:hover {
+        &::before {
+            opacity:.66;
         }
     }
 }
@@ -187,7 +198,7 @@ input.umb-table__input {
 }
 
 // Show checkmark when checked, hide file icon
-.umb-table-row--selected {
+.umb-table-row.-selected {
     
     .umb-table-body__fileicon {
         display: none;
@@ -196,18 +207,6 @@ input.umb-table__input {
         display: inline-block;
     }
     
-    &::before {
-        content: "";
-        position: absolute;
-        z-index:1;
-        top: 1px;
-        left: 1px;
-        right: 1px;
-        bottom: 1px;
-        border: 2px solid @ui-selected-border;
-        box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%);
-        pointer-events: none;
-    }
 }
 
 // Table Row Styles
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
index 190f977880..a0ee49a621 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
@@ -21,7 +21,7 @@
 .umb-user-card.-selectable {
     cursor: pointer;
 }
-.umb-user-card.-selected {
+.umb-user-card.-selected, .umb-user-card.-selectable:hover {
     &::before {
         content: "";
         position: absolute;
@@ -30,10 +30,20 @@
         left: -2px;
         right: -2px;
         bottom: -2px;
-        border: 2px solid @ui-selected-border;
         border-radius: 5px;
-        box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
         pointer-events: none;
+        border: 2px solid @ui-selected-border;
+        box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
+    }
+}
+.umb-user-card.-selectable:hover {
+    &::before {
+        opacity: .33;
+    }
+}
+.umb-user-card.-selected:hover {
+    &::before {
+        opacity: .66;
     }
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
index 317b0f9684..55d7bd0744 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
@@ -63,7 +63,7 @@
                 <div class="umb-table-row"
                     ng-repeat="child in miniListView.children"
                     ng-click="selectNode(child)"
-                    ng-class="{'umb-table-row--selected':child.selected, 'not-allowed':!child.allowed}">
+                    ng-class="{'-selected':child.selected, 'not-allowed':!child.allowed}">
                     <div class="umb-table-cell umb-table-cell--auto-width" ng-class="{'umb-table-cell--faded':child.published === false}">
                         <div class="flex items-center">
                             <ins class="icon-navigation-right umb-table__row-expand" ng-click="openNode($event, child)" ng-class="{'umb-table__row-expand--hidden': child.metaData.hasChildren !== true}">&nbsp;</ins>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
index 63b9c5b787..befdd8ee78 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
@@ -31,7 +31,7 @@
         <div class="umb-table-body">
             <div class="umb-table-row -selectable"
                  ng-repeat="item in vm.items track by $index"
-                 ng-class="{'umb-table-row--selected':item.selected, '-light':!item.published && item.updater != null}"
+                 ng-class="{'-selected':item.selected, '-light':!item.published && item.updater != null}"
                  ng-click="vm.selectItem(item, $index, $event)">
 
                 <div class="umb-table-cell">

From fa042194b7752fe1aa6b07a416f91414526c15eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 19 Mar 2019 16:50:05 +0100
Subject: [PATCH 3/4] hover state for umb-content-grid-item

---
 .../src/less/components/umb-content-grid.less | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
index 2a4a3be2e4..561e6c2b6a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
@@ -15,21 +15,35 @@
    border-radius: 3px;
 }
 
-.umb-content-grid__item.-selected {    
-    &::before {
-        content: "";
-        position: absolute;
-        z-index:2;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
-        border: 2px solid @ui-selected-border;
-        border-radius: 5px;
-        box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
-        pointer-events: none;
+.umb-content-grid__item {
+    &.-selected, &:hover {
+        &::before {
+            content: "";
+            position: absolute;
+            z-index: 2;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid @ui-selected-border;
+            border-radius: 5px;
+            box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
+            pointer-events: none;
+        }
+        
+    }
+}
+
+
+.umb-content-grid__item:hover {    
+    &::before {
+        opacity: .33;
+    }
+}
+.umb-content-grid__item.-selected:hover {    
+    &::before {
+        opacity: .66;
     }
-    
 }
 
 .umb-content-grid__icon-container {

From 30eb097f9c2189d39a94df366a2b86a61ee7591a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 19 Mar 2019 19:03:02 +0100
Subject: [PATCH 4/4] hover state for media grid + corrected hover state
 opacity + rounded corner for media info tooltip

---
 .../less/components/tooltip/umb-tooltip.less  |  1 +
 .../src/less/components/umb-content-grid.less |  2 +-
 .../src/less/components/umb-folder-grid.less  | 19 ++++++++++---
 .../src/less/components/umb-media-grid.less   | 27 ++++++++++++-------
 .../less/components/users/umb-user-cards.less |  2 +-
 5 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less
index 77eba94b6d..5158d32304 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less
@@ -11,4 +11,5 @@
    animation: fadeIn;
    margin-top: 15px;
    pointer-events: none;
+   border-radius: 3px;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
index 561e6c2b6a..84cfe04263 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
@@ -42,7 +42,7 @@
 }
 .umb-content-grid__item.-selected:hover {    
     &::before {
-        opacity: .66;
+        opacity: .75;
     }
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
index ffdd4d9322..6a93a10e9f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
@@ -27,7 +27,12 @@
 
 .umb-folder-grid__folder.-selected {
     color:@ui-selected-type;
-    
+    &:hover {
+        color:@ui-selected-type-hover;
+    }
+}
+
+.umb-folder-grid__folder.-selected, .umb-folder-grid__folder:hover {
     &::before {
         content: "";
         position: absolute;
@@ -41,9 +46,15 @@
         box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
         pointer-events: none;
     }
-    
-    &:hover {
-        color:@ui-selected-type-hover;
+}
+.umb-folder-grid__folder:hover {
+    &::before {
+        opacity: .33;
+    }
+}
+.umb-folder-grid__folder.-selected:hover {
+    &::before {
+        opacity: .75;
     }
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
index 7a6cd043a4..83692d468f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -38,12 +38,12 @@
 }
 
 .umb-media-grid__item.-selected {
-    
-    //background: @ui-selected;
     color:@ui-selected-type;
-    //border-color: @ui-selected-border;
-    //box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20);
-    
+    .umb-media-grid__item-overlay {
+        color: @ui-selected-type;
+    }
+}
+.umb-media-grid__item.-selected, .umb-media-grid__item:hover {
     &::before {
         content: "";
         position: absolute;
@@ -57,12 +57,16 @@
         box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20);
         pointer-events: none;
     }
-    
-    .umb-media-grid__item-overlay {
-        color: @ui-selected-type;
-        //background: @ui-selected-border;
+}
+.umb-media-grid__item:hover {
+    &::before {
+        opacity: .33;
+    }
+}
+.umb-media-grid__item.-selected:hover {
+    &::before {
+        opacity: .75;
     }
-    
 }
 
 .umb-media-grid__item-file-icon > span {
@@ -158,6 +162,9 @@
 
 .umb-media-grid__item:hover .umb-media-grid__item-overlay {
    opacity: 1;
+   i {
+       text-decoration: none;
+   }
 }
 
 .umb-media-grid__item-name {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
index a0ee49a621..3bc431e01f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
@@ -43,7 +43,7 @@
 }
 .umb-user-card.-selected:hover {
     &::before {
-        opacity: .66;
+        opacity: .75;
     }
 }