mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-11 17:04:03 +02:00
Code Issues Releases Wiki Activity

Merge pull request #352 from nostalgic-css/fix-focus-color

Browse Source 
Fix focus color of buttons
This commit is contained in:
Igor Guastalla
2019-07-11 08:00:58 -03:00
committed by GitHub
parent 883befca3e 99b7296b44
commit 1574e56891
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/script.js
View File

@@ -11,7 +11,7 @@ const sampleCollection = [
{ {
title: 'buttons', title: 'buttons',
showCode: false, 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-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button> <button type="button" class="nes-btn is-success">Success</button>

7
scss/elements/buttons.scss
View File

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