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