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

perf(icons): reduce size of css

Browse Source 
ref #205
This commit is contained in:
jjspace
2018-12-18 19:30:57 -05:00
parent 982a412e1e
commit ba076c9aac
17 changed files with 199 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
scss/icons/icons.scss
View File

@@ -23,119 +23,115 @@
.nes-icon {
position: relative;
display: inline-block;
width: calc(1em * 16);
height: calc(1em * 16);
@mixin setup($px) {
$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);
}
}
// font size dictates pixel size, everything will adjust
// default
@include setup(2px);
font-size: 2px;
&.is-small {
@include setup(1px);
font-size: 1px;
}
&.is-medium {
@include setup(3px);
font-size: 3px;
}
&.is-large {
@include setup(4px);
font-size: 4px;
}
&::before {
position: absolute;
top: -1em;
left: -1em;
display: block;
width: 1em;
height: 1em;
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);
}
}