Add focus styles for links and buttons (#114)

Part of #104
survivejs · Oct 17, 2018 · f8646f4 · f8646f4
1 parent e5f3fd4
commit f8646f4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/styles/components/_btn.scss b/styles/components/_btn.scss
@@ -6,6 +6,7 @@
   -webkit-appearance: none;
   -webkit-appearance: normal;
   outline: none;
+  text-decoration: none;
   background-color: transparent;
   padding: 0.6em 1em;
   border-radius: 2em;
@@ -18,15 +19,21 @@
 .btn--normal {
   border: $border-width $action-color solid;
   color: darken($action-color, 30%);
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
     background-color: rgba($action-color, 0.2);
   }
 }
 
 .btn--inverted {
   border: $border-width $background-color solid;
   color: $background-color;
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
     background-color: $background-color;
     color: darken($action-color, 30%);
   }

diff --git a/styles/components/_links.scss b/styles/components/_links.scss
@@ -1,12 +1,11 @@
 a {
   color: darken($action-color, 30%);
   text-decoration: none;
-  &:hover {
-    color: darken($action-color, 20%);
-  }
-  &,
+  &:hover,
   &:focus,
   &:active {
     outline: 0;
+    color: darken($action-color, 20%);
+    text-decoration: underline;
   }
 }