adds better button focus styls

PREreview · Dec 10, 2019 · 6a6c421 · 6a6c421
1 parent 0dcb945
commit 6a6c421
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/src/components/button.css b/src/components/button.css
@@ -25,6 +25,9 @@ a.button {
 
   &:focus {
     outline: none;
+    & .button__contents {
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9);
+    }
   }
 
   &:hover {
@@ -36,7 +39,6 @@ a.button {
     }
   }
 
-  &:focus,
   &:active {
     & .button__contents {
       background-color: var(--button-background-focus-color);
@@ -48,9 +50,6 @@ a.button {
     }
   }
 
-  &:active {
-  }
-
   & .button__contents {
     box-sizing: border-box;
     display: flex;

diff --git a/src/components/icon-button.css b/src/components/icon-button.css
@@ -11,8 +11,7 @@
   &:focus {
     outline: none;
     & .icon-button__contents {
-      background-color: var(--ui-basic-font-color);
-      color: white;
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9);
     }
   }
 

diff --git a/src/components/preprint-card.css b/src/components/preprint-card.css
@@ -58,6 +58,7 @@
       transition: all 0.1s;
       overflow: hidden;
     }
+    &:focus,
     &:hover {
       & .preprint-card__cta-button__contents {
         background-color: var(--prereview-red);
@@ -81,15 +82,20 @@
         height: 100%;
       }
     }
-    &:active,
-    &:focus {
+    &:active {
       & .preprint-card__cta-button__contents {
         background-color: var(--prereview-black);
         & .preprint-card__count-label {
           color: var(--prereview-white);
         }
       }
     }
+    &:focus {
+      & .preprint-card__cta-button__contents {
+        background-color: var(--prereview-red);
+        box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9);
+      }
+    }
   }
   & .preprint-card__score-panel {
     box-sizing: border-box;

diff --git a/src/components/welcome-modal.css b/src/components/welcome-modal.css
@@ -77,11 +77,17 @@
     white-space: pre;
 
     margin-left: var(--lgrd);
+
     &:any-link {
       text-decoration: none;
       color: var(--button-foreground-color--primary);
     }
-    &:focus,
+
+    &:focus {
+      outline: none;
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.9);
+    }
+
     &:active {
       outline: none;
       background-color: var(--button-background-focus-color--primary);