From 5f025406681815f192083139f9d18b19d4e49936 Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Fri, 22 Jan 2021 12:56:11 +0100
Subject: [PATCH] feat: improve focus styles

---
 app/assets/stylesheets/_editor.scss       |  8 ++++++++
 app/assets/stylesheets/_notes.scss        |  6 ------
 app/assets/stylesheets/_stylekit-sub.scss | 13 ++++++++++++-
 app/assets/stylesheets/_tags.scss         |  1 +
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/_editor.scss b/app/assets/stylesheets/_editor.scss
index 5ae221361..18ac1d6a3 100644
--- a/app/assets/stylesheets/_editor.scss
+++ b/app/assets/stylesheets/_editor.scss
@@ -64,6 +64,9 @@ $heading-height: 75px;
       &:disabled {
         color: var(--sn-stylekit-editor-foreground-color);
       }
+      &:focus {
+        box-shadow: none;
+      }
     }
   }
 
@@ -117,6 +120,7 @@ $heading-height: 75px;
 
       &:focus {
         outline: 0;
+        box-shadow: none;
       }
     }
   }
@@ -182,3 +186,7 @@ $heading-height: 75px;
     }
   }
 }
+
+#note-text-editor:focus {
+  box-shadow: none;
+}
diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
index 38a22d8a7..72ba2f762 100644
--- a/app/assets/stylesheets/_notes.scss
+++ b/app/assets/stylesheets/_notes.scss
@@ -67,12 +67,6 @@
       border-color: transparent;
       width: 100%;
       position: relative;
-
-      &:focus {
-        outline: 0;
-        border-color: var(--sn-stylekit-info-color);
-        border-width: 1px;
-      }
     }
 
     #search-clear-button {
diff --git a/app/assets/stylesheets/_stylekit-sub.scss b/app/assets/stylesheets/_stylekit-sub.scss
index 70dc79d8f..2a500e677 100644
--- a/app/assets/stylesheets/_stylekit-sub.scss
+++ b/app/assets/stylesheets/_stylekit-sub.scss
@@ -49,6 +49,7 @@
 .sk-panel {
   .sk-panel-header {
     .close-button {
+      border-radius: var(--sn-stylekit-general-border-radius);
       &:hover {
         text-decoration: none;
       }
@@ -88,5 +89,15 @@ button.sk-a {
 }
 
 *:focus {
-  outline: solid var(--sn-stylekit-info-color) 2px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);
+}
+
+input:focus {
+  box-shadow: 0 0 0 1px var(--sn-stylekit-info-color);
+}
+
+.sk-button:focus, button:focus {
+  box-shadow: 0 0 0 2px var(--sn-stylekit-background-color),
+    0 0 0 4px var(--sn-stylekit-info-color);
 }
diff --git a/app/assets/stylesheets/_tags.scss b/app/assets/stylesheets/_tags.scss
index d0669405f..95060e799 100644
--- a/app/assets/stylesheets/_tags.scss
+++ b/app/assets/stylesheets/_tags.scss
@@ -91,6 +91,7 @@
 
         &:focus {
           outline: 0;
+          box-shadow: 0;
         }
 
         pointer-events: none;