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

Merge pull request #215 from jjspace/205-icon-shadow-optimization

Browse Source 
perf: icon shadow optimization
This commit is contained in:
ダーシノ
2018-12-20 10:18:24 +09:00
committed by GitHub
parent 557775fb6b 2c94ad0fbe
commit fcbed9e387
20 changed files with 209 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
scss/elements/checkboxes.scss
View File

@@ -62,22 +62,23 @@
position: absolute; position: absolute;
top: -3px; top: -3px;
left: -28px; left: -28px;
font-size: 2px;
content: ""; content: "";
} }
// prettier-ignore // prettier-ignore
& + span::before { /* stylelint-disable-line no-descending-specificity */ & + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox, $colors, 2px); @include pixelize($checkbox, $colors);
} }
// prettier-ignore // prettier-ignore
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */ &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox-focus, $colors, 2px); @include pixelize($checkbox-focus, $colors);
} }
&:checked + span::before { &:checked + span::before {
@include pixelize($checkbox-checked, $colors, 2px); @include pixelize($checkbox-checked, $colors);
} }
&:checked:focus + span::before { &:checked:focus + span::before {
@include pixelize($checkbox-checked-focus, $colors, 2px); @include pixelize($checkbox-checked-focus, $colors);
} }
} }

6
scss/elements/lists.scss
View File

@@ -28,17 +28,19 @@
position: absolute; position: absolute;
top: calc(50% - 8px); top: calc(50% - 8px);
left: -22px; left: -22px;
font-size: 2px;
content: ""; content: "";
@include pixelize($disc, $colors, 2px); @include pixelize($disc, $colors);
} }
&.is-circle li::before { &.is-circle li::before {
position: absolute; position: absolute;
top: calc(50% - 8px); top: calc(50% - 8px);
left: -22px; left: -22px;
font-size: 2px;
content: ""; content: "";
@include pixelize($circle, $colors, 2px); @include pixelize($circle, $colors);
} }
} }

5
scss/elements/radios.scss
View File

@@ -35,9 +35,10 @@
position: absolute; position: absolute;
top: -2px; top: -2px;
left: -20px; left: -20px;
font-size: 2px;
content: ""; content: "";
@include pixelize($radio, $colors, 2px); @include pixelize($radio, $colors);
} }
&:checked:hover, &:checked:hover,
@@ -48,6 +49,6 @@
} }
&:checked:focus + span::before { &:checked:focus + span::before {
@include pixelize($radio-checked-focus, $colors, 2px); @include pixelize($radio-checked-focus, $colors);
} }
} }

202
scss/icons/icons.scss
View File

@@ -23,119 +23,113 @@
.nes-icon { .nes-icon {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: calc(1em * 16);
height: calc(1em * 16);
@mixin setup($px) { // font size dictates pixel size, everything will adjust
$size: $px * 16;
width: $size;
height: $size;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
display: block;
width: $size;
height: $size;
content: "";
background: transparent;
}
&.heart::before {
@include pixelize($icon-heart, $icon-heart-colors, $px);
}
&.heart.is-empty::before {
@include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
}
&.star::before {
@include pixelize($icon-star, $icon-star-colors, $px);
}
&.star.is-empty::before {
@include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
}
&.star.is-half::before {
@include pixelize($icon-star-half, $icon-star-colors, $px);
}
&.star.is-transparent::before {
@include pixelize($icon-star-transparent, $icon-star-colors, $px);
}
&.trophy::before {
@include pixelize($icon-trophy, $icon-trophy-colors, $px);
}
&.trophy.is-empty::before {
@include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
}
&.like::before {
@include pixelize($icon-like, $icon-like-colors, $px);
}
&.like.is-empty::before {
@include pixelize($icon-like-empty, $icon-like-empty-colors, $px);
}
&.twitter::before {
@include pixelize($icon-twitter, $icon-twitter-colors, $px);
}
&.facebook::before {
@include pixelize($icon-facebook, $icon-facebook-colors, $px);
}
&.github::before {
@include pixelize($icon-github, $icon-github-colors, $px);
}
&.youtube::before {
@include pixelize($icon-youtube, $icon-youtube-colors, $px);
}
&.close::before {
@include pixelize($icon-close, $icon-close-colors, $px);
}
&.google::before {
@include pixelize($icon-google, $icon-google-colors, $px);
}
&.medium::before {
@include pixelize($icon-medium, $icon-medium-colors, $px);
}
&.twitch::before {
@include pixelize($icon-twitch, $icon-twitch-colors, $px);
}
&.reddit::before {
@include pixelize($icon-reddit, $icon-reddit-colors, $px);
}
&.whatsapp::before {
@include pixelize($icon-whatsapp, $icon-whatsapp-colors, $px);
}
&.gmail::before {
@include pixelize($icon-gmail, $icon-gmail-colors, $px);
}
&.linkedin::before {
@include pixelize($icon-linkedin, $icon-linkedin-colors, $px);
}
}
// default // default
@include setup(2px); font-size: 2px;
&.is-small { &.is-small {
@include setup(1px); font-size: 1px;
} }
&.is-medium { &.is-medium {
@include setup(3px); font-size: 3px;
} }
&.is-large { &.is-large {
@include setup(4px); font-size: 4px;
}
&::before {
position: absolute;
top: -1em;
left: -1em;
display: block;
content: "";
background: transparent;
}
&.heart::before {
@include pixelize($icon-heart, $icon-heart-colors);
}
&.heart.is-empty::before {
@include pixelize($icon-heart-empty, $icon-heart-empty-colors);
}
&.star::before {
@include pixelize($icon-star, $icon-star-colors);
}
&.star.is-empty::before {
@include pixelize($icon-star-empty, $icon-star-empty-colors);
}
&.star.is-half::before {
@include pixelize($icon-star-half, $icon-star-colors);
}
&.star.is-transparent::before {
@include pixelize($icon-star-transparent, $icon-star-colors);
}
&.trophy::before {
@include pixelize($icon-trophy, $icon-trophy-colors);
}
&.trophy.is-empty::before {
@include pixelize($icon-trophy-empty, $icon-trophy-empty-colors);
}
&.like::before {
@include pixelize($icon-like, $icon-like-colors);
}
&.like.is-empty::before {
@include pixelize($icon-like-empty, $icon-like-empty-colors);
}
&.twitter::before {
@include pixelize($icon-twitter, $icon-twitter-colors);
}
&.facebook::before {
@include pixelize($icon-facebook, $icon-facebook-colors);
}
&.github::before {
@include pixelize($icon-github, $icon-github-colors);
}
&.youtube::before {
@include pixelize($icon-youtube, $icon-youtube-colors);
}
&.close::before {
@include pixelize($icon-close, $icon-close-colors);
}
&.google::before {
@include pixelize($icon-google, $icon-google-colors);
}
&.medium::before {
@include pixelize($icon-medium, $icon-medium-colors);
}
&.twitch::before {
@include pixelize($icon-twitch, $icon-twitch-colors);
}
&.reddit::before {
@include pixelize($icon-reddit, $icon-reddit-colors);
}
&.whatsapp::before {
@include pixelize($icon-whatsapp, $icon-whatsapp-colors);
}
&.gmail::before {
@include pixelize($icon-gmail, $icon-gmail-colors);
}
&.linkedin::before {
@include pixelize($icon-linkedin, $icon-linkedin-colors);
} }
} }

12
scss/pixel-arts/ash.scss
View File

@@ -1,5 +1,4 @@
.nes-ash { .nes-ash {
$px: 6px;
// prettier-ignore // prettier-ignore
$ash-colors: (#f8f8ff, #ff614e, #007f7f, $ash-colors: (#f8f8ff, #ff614e, #007f7f,
#181818, #ffe3c5, #426adb, #4169e1); #181818, #ffe3c5, #426adb, #4169e1);
@@ -24,16 +23,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 14; width: calc(1em * 14);
height: $px * 15; height: calc(1em * 15);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($ash, $ash-colors, $px); @include pixelize($ash, $ash-colors);
} }
} }

12
scss/pixel-arts/bcrikko.scss
View File

@@ -1,5 +1,4 @@
.nes-bcrikko { .nes-bcrikko {
$px: 4px;
$bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff); $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
// prettier-ignore // prettier-ignore
@@ -24,16 +23,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 16; width: calc(1em * 16);
height: $px * 16; height: calc(1em * 16);
font-size: 4px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($bcrikko, $bcrikko-colors, $px); @include pixelize($bcrikko, $bcrikko-colors);
} }
} }

12
scss/pixel-arts/bulbasaur.scss
View File

@@ -1,5 +1,4 @@
.nes-bulbasaur { .nes-bulbasaur {
$px: 6px;
// prettier-ignore // prettier-ignore
$bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1, $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
#3fc3b5, #fdfdf5, #ca242a); #3fc3b5, #fdfdf5, #ca242a);
@@ -26,16 +25,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 20; width: calc(1em * 20);
height: $px * 17; height: calc(1em * 17);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($bulbasaur, $bulbasaur-colors, $px); @include pixelize($bulbasaur, $bulbasaur-colors);
} }
} }

12
scss/pixel-arts/charmander.scss
View File

@@ -1,5 +1,4 @@
.nes-charmander { .nes-charmander {
$px: 6px;
// prettier-ignore // prettier-ignore
$charmander-colors: (#000202, #f77702, #eb2010, $charmander-colors: (#000202, #f77702, #eb2010,
#fdfcff, #e5d70a, #e7d70e); #fdfcff, #e5d70a, #e7d70e);
@@ -27,16 +26,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 21; width: calc(1em * 21);
height: $px * 18; height: calc(1em * 18);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($charmander, $charmander-colors, $px); @include pixelize($charmander, $charmander-colors);
} }
} }

12
scss/pixel-arts/kirby.scss
View File

@@ -1,5 +1,4 @@
.nes-kirby { .nes-kirby {
$px: 6px;
$kirby-colors: (#000, #ffaccc, #ff5478); $kirby-colors: (#000, #ffaccc, #ff5478);
// prettier-ignore // prettier-ignore
$kirby: ( $kirby: (
@@ -23,16 +22,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 16; width: calc(1em * 16);
height: $px * 16; height: calc(1em * 16);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($kirby, $kirby-colors, $px); @include pixelize($kirby, $kirby-colors);
} }
} }

12
scss/pixel-arts/mario.scss
View File

@@ -1,5 +1,4 @@
.nes-mario { .nes-mario {
$px: 6px;
// prettier-ignore // prettier-ignore
$mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
#1560ad, #aeaeac, #fef102); #1560ad, #aeaeac, #fef102);
@@ -25,16 +24,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 14; width: calc(1em * 14);
height: $px * 16; height: calc(1em * 16);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($mario, $mario-colors, $px); @include pixelize($mario, $mario-colors);
} }
} }

12
scss/pixel-arts/nes-icon.scss
View File

@@ -1,5 +1,4 @@
.nes-logo { .nes-logo {
$px: 3px;
$logo-colors: (#3e3634, #c3c3c3, #787973, #bf1710); $logo-colors: (#3e3634, #c3c3c3, #787973, #bf1710);
// prettier-ignore // prettier-ignore
@@ -18,16 +17,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 16; width: calc(1em * 16);
height: $px * 11; height: calc(1em * 11);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($logo, $logo-colors, $px); @include pixelize($logo, $logo-colors);
} }
} }

12
scss/pixel-arts/nes-jp-icon.scss
View File

@@ -1,5 +1,4 @@
.nes-jp-logo { .nes-jp-logo {
$px: 3px;
$logo-colors: (#333, #871f37, #dfd3b9); $logo-colors: (#333, #871f37, #dfd3b9);
// prettier-ignore // prettier-ignore
@@ -18,16 +17,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 16; width: calc(1em * 16);
height: $px * 11; height: calc(1em * 11);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($logo, $logo-colors, $px); @include pixelize($logo, $logo-colors);
} }
} }

16
scss/pixel-arts/octocat.scss
View File

@@ -1,5 +1,4 @@
.nes-octocat { .nes-octocat {
$px: 6px;
$octocat-colors: (#333, #ffdec4, #cb7066); $octocat-colors: (#333, #ffdec4, #cb7066);
// prettier-ignore // prettier-ignore
$octocat-1: ( $octocat-1: (
@@ -40,17 +39,18 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 14; width: calc(1em * 14);
height: $px * 15; height: calc(1em * 15);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($octocat-1, $octocat-colors, $px); @include pixelize($octocat-1, $octocat-colors);
} }
&.animate::before { &.animate::before {
@@ -59,10 +59,10 @@
@keyframes wave { @keyframes wave {
0% { 0% {
@include pixelize($octocat-1, $octocat-colors, $px); @include pixelize($octocat-1, $octocat-colors);
} }
50% { 50% {
@include pixelize($octocat-2, $octocat-colors, $px); @include pixelize($octocat-2, $octocat-colors);
} }
} }
} }

12
scss/pixel-arts/phone.scss
View File

@@ -1,5 +1,4 @@
.nes-phone { .nes-phone {
$px: 6px;
$phone-colors: (#596985, #3c4665, #000); $phone-colors: (#596985, #3c4665, #000);
// prettier-ignore // prettier-ignore
$phone: ( $phone: (
@@ -28,16 +27,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 8; width: calc(1em * 8);
height: $px * 21; height: calc(1em * 21);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($phone, $phone-colors, $px); @include pixelize($phone, $phone-colors);
} }
} }

12
scss/pixel-arts/pokeball.scss
View File

@@ -1,5 +1,4 @@
.nes-pokeball { .nes-pokeball {
$px: 6px;
$pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1); $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
// prettier-ignore // prettier-ignore
$pokeball: ( $pokeball: (
@@ -23,16 +22,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 14; width: calc(1em * 14);
height: $px * 14; height: calc(1em * 14);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($pokeball, $pokeball-colors, $px); @include pixelize($pokeball, $pokeball-colors);
} }
} }

12
scss/pixel-arts/smartphone.scss
View File

@@ -1,5 +1,4 @@
.nes-smartphone { .nes-smartphone {
$px: 6px;
$smartphone-colors: (#fff, #060606); $smartphone-colors: (#fff, #060606);
// prettier-ignore // prettier-ignore
$smartphone: ( $smartphone: (
@@ -34,16 +33,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 16; width: calc(1em * 16);
height: $px * 27; height: calc(1em * 27);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($smartphone, $smartphone-colors, $px); @include pixelize($smartphone, $smartphone-colors);
} }
} }

12
scss/pixel-arts/snes-icon.scss
View File

@@ -1,5 +1,4 @@
.snes-logo { .snes-logo {
$px: 3px;
$logo-colors: (#333, #d7d7d7, #8932e5, #ad6df0); $logo-colors: (#333, #d7d7d7, #8932e5, #ad6df0);
// prettier-ignore // prettier-ignore
@@ -18,16 +17,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 16; width: calc(1em * 16);
height: $px * 11; height: calc(1em * 11);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($logo, $logo-colors, $px); @include pixelize($logo, $logo-colors);
} }
} }

11
scss/pixel-arts/snes-jp-icon.scss
View File

@@ -18,16 +18,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 16; width: calc(1em * 16);
height: $px * 11; height: calc(1em * 11);
font-size: 3px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($logo, $logo-colors, $px); @include pixelize($logo, $logo-colors);
} }
} }

12
scss/pixel-arts/squirtle.scss
View File

@@ -1,5 +1,4 @@
.nes-squirtle { .nes-squirtle {
$px: 6px;
// prettier-ignore // prettier-ignore
$squirtle-colors: (#000, #9cf, #cb6633, $squirtle-colors: (#000, #9cf, #cb6633,
#9fa1a1, #fff, #f89934, #ff3); #9fa1a1, #fff, #f89934, #ff3);
@@ -26,16 +25,17 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: $px * 21; width: calc(1em * 21);
height: $px * 17; height: calc(1em * 17);
font-size: 6px;
&::before { &::before {
position: absolute; position: absolute;
top: $px * -1; top: -1em;
left: $px * -1; left: -1em;
content: ""; content: "";
background: transparent; background: transparent;
@include pixelize($squirtle, $squirtle-colors, $px); @include pixelize($squirtle, $squirtle-colors);
} }
} }

14
scss/utilities/icon-mixin.scss
View File

@@ -1,4 +1,4 @@
@mixin pixelize($matrix, $colors, $size, $default-color: null) { @mixin pixelize($matrix, $colors, $default-color: null) {
$ret: ""; $ret: "";
$moz: ""; $moz: "";
@if ($default-color == null) { @if ($default-color == null) {
@@ -37,18 +37,18 @@
$color: nth($colors, $dot); $color: nth($colors, $dot);
@if $color == $default-color { @if $color == $default-color {
$ret: $ret + ($j * $size) + " " + ($i * $size); $ret: $ret + $j + "em " + $i + "em";
$moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em"; $moz: $moz + $j + "em " + $i + "em 0 0.020em";
} @else { } @else {
$ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color; $ret: $ret + $j + "em " + $i + "em " + $color;
$moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em " + $color; $moz: $moz + $j + "em " + $i + "em 0 0.020em " + $color;
} }
} }
} }
} }
width: $size; width: 1em;
height: $size; height: 1em;
color: $default-color; color: $default-color;
box-shadow: unquote($ret); box-shadow: unquote($ret);
@-moz-document url-prefix() { @-moz-document url-prefix() {