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

refactor: add visually-hidden util

Browse Source
This commit is contained in:
BcRikko
2019-07-03 17:49:55 +09:00
parent 1574e56891
commit c40598341e
5 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/elements/buttons.scss
View File

@@ -13,7 +13,7 @@
} }
&:hover { &:hover {
color: inherit; color: $color;
text-decoration: none; text-decoration: none;
background-color: $hover-background; background-color: $hover-background;

7
scss/form/checkboxes.scss
View File

@@ -53,10 +53,8 @@
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background: $color-white; @include visually-hidden();
width: 1px;
height: 1px;
border: 0;
& + span { & + span {
position: relative; position: relative;
cursor: $cursor-click-url, pointer; cursor: $cursor-click-url, pointer;
@@ -86,7 +84,6 @@
@include pixelize(2px, $checkbox-checked-focus, $colors); @include pixelize(2px, $checkbox-checked-focus, $colors);
} }
&.is-dark { &.is-dark {
background: $base-color;
+ span { + span {
color: $color-white; color: $color-white;
} }

6
scss/form/radios.scss
View File

@@ -27,10 +27,7 @@
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background: $color-white; @include visually-hidden();
width: 1px;
height: 1px;
border: 0;
& + span { & + span {
position: relative; position: relative;
@@ -57,7 +54,6 @@
@include pixelize(2px, $radio-checked-focus, $colors); @include pixelize(2px, $radio-checked-focus, $colors);
} }
&.is-dark { &.is-dark {
background: $base-color;
+ span { + span {
color: $color-white; color: $color-white;
} }

1
scss/utilities/_index.scss
View File

@@ -3,3 +3,4 @@
@import "animations.scss"; @import "animations.scss";
@import "icon-mixin.scss"; @import "icon-mixin.scss";
@import "rounded-corners-mixin.scss"; @import "rounded-corners-mixin.scss";
@import "visually-hidden.scss";

13
scss/utilities/visually-hidden.scss Normal file
View File

@@ -0,0 +1,13 @@
/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
@mixin visually-hidden() {
// position: absolute;
// margin: -1px;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
clip-path: inset(50%);
}