feat: improve focus styles

standardnotes · Jan 22, 2021 · 5f02540 · 5f02540
1 parent 611ca2f
commit 5f02540
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -91,6 +91,7 @@
 
         &:focus {
           outline: 0;
+          box-shadow: 0;
         }
 
         pointer-events: none;