mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-02-24 01:12:31 +01:00
Merge pull request #10 from BcRikko/feature/outline
Accessibility: focus時のoutlineの調整
This commit is contained in:
ダーシノ
GitHub
commit
b5c2696111
@ -14,14 +14,18 @@ NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークで
|
||||
|
||||
```html
|
||||
<!-- minify -->
|
||||
<link href="https://bcrikko.github.io/NES.css/css/nes.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
|
||||
<!-- latest -->
|
||||
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
OR
|
||||
|
||||
```html
|
||||
<!-- non-minified -->
|
||||
<link href="https://bcrikko.github.io/NES.css/css/nes.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/nes.css@0.0.2/css/nes.css" rel="stylesheet" />
|
||||
<!-- latest -->
|
||||
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
### npm
|
||||
|
||||
29
css/nes.css
29
css/nes.css
@ -380,10 +380,7 @@ button,
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
box-shadow: inset -4px -4px #adafbc;
|
||||
@ -603,6 +600,12 @@ button,
|
||||
box-shadow: 2px 2px #212529,4px 2px #212529,2px 4px #212529,4px 4px #212529,6px 4px #212529,8px 4px #212529,2px 6px #212529,4px 6px #212529,6px 6px #212529,8px 6px #212529,10px 6px #212529,2px 8px #212529,4px 8px #212529,6px 8px #212529,8px 8px #212529,10px 8px #212529,12px 8px #212529,2px 10px #212529,4px 10px #212529,6px 10px #212529,8px 10px #212529,10px 10px #212529,2px 12px #212529,4px 12px #212529,6px 12px #212529,8px 12px #212529,2px 14px #212529,4px 14px #212529;;
|
||||
}
|
||||
|
||||
.radio:checked:focus + span::before {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
box-shadow: 2px 2px #adafbc,4px 2px #adafbc,2px 4px #adafbc,4px 4px #adafbc,6px 4px #adafbc,8px 4px #adafbc,2px 6px #adafbc,4px 6px #adafbc,6px 6px #adafbc,8px 6px #adafbc,10px 6px #adafbc,2px 8px #adafbc,4px 8px #adafbc,6px 8px #adafbc,8px 8px #adafbc,10px 8px #adafbc,12px 8px #adafbc,2px 10px #adafbc,4px 10px #adafbc,6px 10px #adafbc,8px 10px #adafbc,10px 10px #adafbc,2px 12px #adafbc,4px 12px #adafbc,6px 12px #adafbc,8px 12px #adafbc,2px 14px #adafbc,4px 14px #adafbc;;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-left: 28px;
|
||||
-webkit-appearance: none;
|
||||
@ -629,12 +632,25 @@ button,
|
||||
box-shadow: 2px 2px #212529,4px 2px #212529,6px 2px #212529,8px 2px #212529,10px 2px #212529,12px 2px #212529,14px 2px #212529,16px 2px #212529,2px 4px #212529,16px 4px #212529,2px 6px #212529,16px 6px #212529,2px 8px #212529,16px 8px #212529,2px 10px #212529,16px 10px #212529,2px 12px #212529,16px 12px #212529,2px 14px #212529,16px 14px #212529,2px 16px #212529,4px 16px #212529,6px 16px #212529,8px 16px #212529,10px 16px #212529,12px 16px #212529,14px 16px #212529,16px 16px #212529;;
|
||||
}
|
||||
|
||||
.checkbox:focus + span::before {
|
||||
/* stylelint-disable-line no-descending-specificity */
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
box-shadow: 2px 2px #adafbb,4px 2px #adafbb,6px 2px #adafbb,8px 2px #adafbb,10px 2px #adafbb,12px 2px #adafbb,14px 2px #adafbb,16px 2px #adafbb,2px 4px #adafbb,16px 4px #adafbb,2px 6px #adafbb,16px 6px #adafbb,2px 8px #adafbb,16px 8px #adafbb,2px 10px #adafbb,16px 10px #adafbb,2px 12px #adafbb,16px 12px #adafbb,2px 14px #adafbb,16px 14px #adafbb,2px 16px #adafbb,4px 16px #adafbb,6px 16px #adafbb,8px 16px #adafbb,10px 16px #adafbb,12px 16px #adafbb,14px 16px #adafbb,16px 16px #adafbb;;
|
||||
}
|
||||
|
||||
.checkbox:checked + span::before {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
box-shadow: 2px 2px #212529,4px 2px #212529,6px 2px #212529,8px 2px #212529,10px 2px #212529,12px 2px #212529,14px 2px #212529,18px 2px #212529,20px 2px #212529,2px 4px #212529,16px 4px #212529,18px 4px #212529,20px 4px #212529,2px 6px #212529,14px 6px #212529,16px 6px #212529,2px 8px #212529,4px 8px #212529,12px 8px #212529,14px 8px #212529,2px 10px #212529,4px 10px #212529,6px 10px #212529,10px 10px #212529,12px 10px #212529,16px 10px #212529,2px 12px #212529,6px 12px #212529,8px 12px #212529,10px 12px #212529,16px 12px #212529,2px 14px #212529,8px 14px #212529,16px 14px #212529,2px 16px #212529,4px 16px #212529,6px 16px #212529,8px 16px #212529,10px 16px #212529,12px 16px #212529,14px 16px #212529,16px 16px #212529;;
|
||||
}
|
||||
|
||||
.checkbox:checked:focus + span::before {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
box-shadow: 2px 2px #adafbb,4px 2px #adafbb,6px 2px #adafbb,8px 2px #adafbb,10px 2px #adafbb,12px 2px #adafbb,14px 2px #adafbb,18px 2px #212529,20px 2px #212529,2px 4px #adafbb,16px 4px #212529,18px 4px #212529,20px 4px #212529,2px 6px #212529,14px 6px #212529,16px 6px #212529,2px 8px #212529,4px 8px #212529,12px 8px #212529,14px 8px #212529,2px 10px #adafbb,4px 10px #212529,6px 10px #212529,10px 10px #212529,12px 10px #212529,16px 10px #adafbb,2px 12px #adafbb,6px 12px #212529,8px 12px #212529,10px 12px #212529,16px 12px #adafbb,2px 14px #adafbb,8px 14px #212529,16px 14px #adafbb,2px 16px #adafbb,4px 16px #adafbb,6px 16px #adafbb,8px 16px #adafbb,10px 16px #adafbb,12px 16px #adafbb,14px 16px #adafbb,16px 16px #adafbb;;
|
||||
}
|
||||
|
||||
.balloon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -702,18 +718,22 @@ button,
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 4px;
|
||||
border: none;
|
||||
outline-color: #e7e7e7;
|
||||
box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529;
|
||||
}
|
||||
|
||||
.input.is-success {
|
||||
outline-color: #108de0;
|
||||
box-shadow: 0 4px #209cee, 0 -4px #209cee, 4px 0 #209cee, -4px 0 #209cee;
|
||||
}
|
||||
|
||||
.input.is-warning {
|
||||
outline-color: #f2c409;
|
||||
box-shadow: 0 4px #f7d51d, 0 -4px #f7d51d, 4px 0 #f7d51d, -4px 0 #f7d51d;
|
||||
}
|
||||
|
||||
.input.is-error {
|
||||
outline-color: #ce372b;
|
||||
box-shadow: 0 4px #e76e55, 0 -4px #e76e55, 4px 0 #e76e55, -4px 0 #e76e55;
|
||||
}
|
||||
|
||||
@ -989,4 +1009,5 @@ button,
|
||||
box-shadow: 24px 6px #333,78px 6px #333,24px 12px #333,30px 12px #333,72px 12px #333,78px 12px #333,24px 18px #333,30px 18px #333,36px 18px #333,42px 18px #333,48px 18px #333,54px 18px #333,60px 18px #333,66px 18px #333,72px 18px #333,78px 18px #333,18px 24px #333,24px 24px #333,30px 24px #333,36px 24px #333,42px 24px #333,48px 24px #333,54px 24px #333,60px 24px #333,66px 24px #333,72px 24px #333,78px 24px #333,84px 24px #333,18px 30px #333,24px 30px #333,30px 30px #333,36px 30px #333,42px 30px #333,48px 30px #333,54px 30px #333,60px 30px #333,66px 30px #333,72px 30px #333,78px 30px #333,84px 30px #333,18px 36px #333,24px 36px #333,30px 36px #333,36px 36px #ffdec4,42px 36px #ffdec4,48px 36px #ffdec4,54px 36px #ffdec4,60px 36px #ffdec4,66px 36px #ffdec4,72px 36px #333,78px 36px #333,84px 36px #333,18px 42px #333,24px 42px #333,30px 42px #ffdec4,36px 42px #ffdec4,42px 42px #ffdec4,48px 42px #ffdec4,54px 42px #ffdec4,60px 42px #ffdec4,66px 42px #ffdec4,72px 42px #ffdec4,78px 42px #333,84px 42px #333,12px 48px #333,18px 48px #333,24px 48px #333,30px 48px #ffdec4,36px 48px #cb7066,42px 48px #ffdec4,48px 48px #ffdec4,54px 48px #ffdec4,60px 48px #ffdec4,66px 48px #cb7066,72px 48px #ffdec4,78px 48px #333,84px 48px #333,12px 54px #333,24px 54px #333,30px 54px #333,36px 54px #ffdec4,42px 54px #ffdec4,48px 54px #cb7066,54px 54px #cb7066,60px 54px #ffdec4,66px 54px #ffdec4,72px 54px #333,78px 54px #333,18px 60px #333,42px 60px #333,48px 60px #333,54px 60px #333,60px 60px #333,24px 66px #333,36px 66px #333,42px 66px #333,48px 66px #333,54px 66px #333,60px 66px #333,66px 66px #333,24px 72px #333,30px 72px #333,36px 72px #333,42px 72px #333,48px 72px #333,54px 72px #333,60px 72px #333,66px 72px #333,36px 78px #333,48px 78px #333,54px 78px #333,66px 78px #333,36px 84px #333,48px 84px #333,54px 84px #333,66px 84px #333,30px 90px #333,42px 90px #333,60px 90px #333,72px 90px #333;;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=nes.css.map */
|
||||
File diff suppressed because one or more lines are too long
4
css/nes.min.css
vendored
4
css/nes.min.css
vendored
File diff suppressed because one or more lines are too long
@ -11,7 +11,7 @@
|
||||
|
||||
<title>NES.css - NES-style CSS Framework</title>
|
||||
|
||||
<link href="./css/nes.min.css" rel="stylesheet" />
|
||||
<link href="./css/nes.css" rel="stylesheet" />
|
||||
<link href="./style.css" rel="stylesheet" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
@ -22,7 +22,30 @@
|
||||
(1,0,0,1,0,0,0,1,0,0),
|
||||
(1,1,1,1,1,1,1,1,0,0)
|
||||
);
|
||||
$colors: ($base-color);
|
||||
// prettier-ignore
|
||||
$checkbox-focus: (
|
||||
(2,2,2,2,2,2,2,2,0,0),
|
||||
(2,0,0,0,0,0,0,2,0,0),
|
||||
(2,0,0,0,0,0,0,2,0,0),
|
||||
(2,0,0,0,0,0,0,2,0,0),
|
||||
(2,0,0,0,0,0,0,2,0,0),
|
||||
(2,0,0,0,0,0,0,2,0,0),
|
||||
(2,0,0,0,0,0,0,2,0,0),
|
||||
(2,2,2,2,2,2,2,2,0,0),
|
||||
);
|
||||
|
||||
// prettier-ignore
|
||||
$checkbox-checked-focus: (
|
||||
(2,2,2,2,2,2,2,0,1,1),
|
||||
(2,0,0,0,0,0,0,1,1,1),
|
||||
(1,0,0,0,0,0,1,1,0,0),
|
||||
(1,1,0,0,0,1,1,0,0,0),
|
||||
(2,1,1,0,1,1,0,2,0,0),
|
||||
(2,0,1,1,1,0,0,2,0,0),
|
||||
(2,0,0,1,0,0,0,2,0,0),
|
||||
(2,2,2,2,2,2,2,2,0,0)
|
||||
);
|
||||
$colors: ($base-color, #adafbb);
|
||||
|
||||
margin-left: 28px;
|
||||
-webkit-appearance: none;
|
||||
@ -45,8 +68,15 @@
|
||||
& + span::before { /* stylelint-disable-line no-descending-specificity */
|
||||
@include pixelize($checkbox, $colors, 2px);
|
||||
}
|
||||
// prettier-ignore
|
||||
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */
|
||||
@include pixelize($checkbox-focus, $colors, 2px);
|
||||
}
|
||||
|
||||
&:checked + span::before {
|
||||
@include pixelize($checkbox-checked, $colors, 2px);
|
||||
}
|
||||
&:checked:focus + span::before {
|
||||
@include pixelize($checkbox-checked-focus, $colors, 2px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,17 @@
|
||||
(1,1,1,1,0,0),
|
||||
(1,1,0,0,0,0),
|
||||
);
|
||||
$colors: ($base-color);
|
||||
// prettier-ignore
|
||||
$radio-checked-focus: (
|
||||
(2,2,0,0,0,0),
|
||||
(2,2,2,2,0,0),
|
||||
(2,2,2,2,2,0),
|
||||
(2,2,2,2,2,2),
|
||||
(2,2,2,2,2,0),
|
||||
(2,2,2,2,0,0),
|
||||
(2,2,0,0,0,0),
|
||||
);
|
||||
$colors: ($base-color, #adafbc);
|
||||
|
||||
margin-right: 20px;
|
||||
-webkit-appearance: none;
|
||||
@ -29,4 +39,7 @@
|
||||
|
||||
@include pixelize($radio, $colors, 2px);
|
||||
}
|
||||
&:checked:focus + span::before {
|
||||
@include pixelize($radio-checked-focus, $colors, 2px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
.input {
|
||||
@mixin border-style($color) {
|
||||
@mixin border-style($border, $outline) {
|
||||
outline-color: $outline;
|
||||
// prettier-ignore
|
||||
box-shadow:
|
||||
0 4px $color,
|
||||
0 -4px $color,
|
||||
4px 0 $color,
|
||||
-4px 0 $color;
|
||||
0 4px $border,
|
||||
0 -4px $border,
|
||||
4px 0 $border,
|
||||
-4px 0 $border;
|
||||
}
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 4px;
|
||||
border: none;
|
||||
@include border-style($base-color);
|
||||
|
||||
@include border-style($base-color, #e7e7e7);
|
||||
|
||||
&.is-success {
|
||||
@include border-style(#209cee);
|
||||
@include border-style(#209cee, #108de0);
|
||||
}
|
||||
&.is-warning {
|
||||
@include border-style(#f7d51d);
|
||||
@include border-style(#f7d51d, #f2c409);
|
||||
}
|
||||
&.is-error {
|
||||
@include border-style(#e76e55);
|
||||
@include border-style(#e76e55, #ce372b);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user