From 73bea4a692d6d776b50ecbf87ca72d0bf05fb352 Mon Sep 17 00:00:00 2001
From: Kuldeep M <crudetoaster@gmail.com>
Date: Tue, 15 Jan 2019 12:48:52 +0000
Subject: [PATCH] [design] improve link focus with keybaord navigation

---
 css/link.css | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/css/link.css b/css/link.css
index eb3aec7a..3b25db16 100644
--- a/css/link.css
+++ b/css/link.css
@@ -42,6 +42,7 @@
   transition: all var(--animation-speed-fast) ease-in-out;
 }
 
+.link-item:focus-within,
 .link-item:focus,
 .link-item:hover {
   transform: scale(1.06);
@@ -77,13 +78,16 @@
   justify-content: flex-start;
 }
 
+.link-panel-front:hover,
 .link-panel-front:focus {
   background-color: var(--gray-03);
   outline: 0;
+  text-decoration: none;
 }
 
-.link-item:hover .link-panel-front,
-.link-item:focus .link-panel-front {
+.link-item:focus .link-panel-front,
+.link-item:focus-within .link-panel-front,
+.link-item:hover .link-panel-front {
   text-decoration: none;
   outline: 0;
   background-color: var(--gray-03);
@@ -177,8 +181,9 @@
   justify-content: flex-start;
 }
 
-.link-item:hover .link-url,
-.link-item:focus .link-url {
+.link-item:focus-within .link-url,
+.link-item:focus .link-url,
+.link-item:hover .link-url {
   height: var(--url-height);
 }
 
@@ -198,6 +203,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: all var(--animation-speed-fast) ease-in-out;
 }
 
 .is-link-block .link-letter {
@@ -219,6 +225,10 @@
   color: var(--white);
 }
 
+.link-panel-front:focus .link-letter {
+  color: var(--white);
+}
+
 .link-name {
   margin: 0;
   font-size: 0.9em;
@@ -228,6 +238,16 @@
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;
+  transition: all var(--animation-speed-fast) ease-in-out;
+}
+
+.link-item:hover .link-name,
+.link-item:focus .link-name {
+  color: var(--white);
+}
+
+.link-panel-front:focus .link-name {
+  color: var(--white);
 }
 
 .link-empty {
@@ -244,13 +264,6 @@
   text-align: center;
 }
 
-.is-link-list .link-name {}
-
-.link-item:hover .link-name,
-.link-item:focus .link-name {
-  color: var(--white);
-}
-
 .is-edit .link-panel-front,
 .is-edit .link-item:hover .link-panel-front,
 .is-edit .link-item:focus .link-panel-front {