fix(buttons.scss): fix focus color of buttons

fix #74
nostalgic-css · Jul 7, 2019 · 99b7296 · 99b7296
1 parent 883befc
commit 99b7296
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/docs/script.js b/docs/script.js
@@ -11,7 +11,7 @@ const sampleCollection = [
   {
     title: 'buttons',
     showCode: false,
-    code: `<a class="nes-btn">Normal</a>
+    code: `<a class="nes-btn" href="#">Normal</a>
 
 <button type="button" class="nes-btn is-primary">Primary</button>
 <button type="button" class="nes-btn is-success">Success</button>

diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
@@ -12,8 +12,7 @@
     box-shadow: inset -4px -4px $shadow;
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: inherit;
     text-decoration: none;
     background-color: $hover-background;
@@ -23,6 +22,10 @@
     }
   }
 
+  &:focus {
+    box-shadow: 0 0 0 6px rgba($shadow, 0.3);
+  }
+
   &:active:not(.is-disabled)::after {
     box-shadow: inset 4px 4px $shadow;
   }