165 lines
3.9 KiB
SCSS
165 lines
3.9 KiB
SCSS
// reaction
|
|
@import "heart.scss";
|
|
@import "star.scss";
|
|
@import "like.scss";
|
|
|
|
// sns
|
|
@import "twitter.scss";
|
|
@import "facebook.scss";
|
|
@import "github.scss";
|
|
@import "youtube.scss";
|
|
@import "google.scss";
|
|
@import "medium.scss";
|
|
@import "twitch.scss";
|
|
@import "reddit.scss";
|
|
@import "whatsapp.scss";
|
|
@import "gmail.scss";
|
|
@import "linkedin.scss";
|
|
@import "instagram.scss";
|
|
|
|
// others
|
|
@import "close.scss";
|
|
@import "trophy.scss";
|
|
@import "coin.scss";
|
|
|
|
.nes-icon {
|
|
$default-size: 1px;
|
|
$icon-size: $default-size * 16;
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
width: $icon-size;
|
|
height: $icon-size;
|
|
margin-right: $icon-size;
|
|
margin-bottom: $icon-size;
|
|
|
|
// NOTE: Use `transform: scale()` because cannot use font-size less than 10px on Chrome
|
|
// default 2px
|
|
transform: scale(2);
|
|
transform-origin: top left;
|
|
|
|
&.is-small {
|
|
margin: 0;
|
|
// 1px
|
|
transform: scale(1);
|
|
}
|
|
|
|
&.is-medium {
|
|
margin-right: $icon-size * 2;
|
|
margin-bottom: $icon-size * 2;
|
|
// 3px
|
|
transform: scale(3);
|
|
}
|
|
|
|
&.is-large {
|
|
margin-right: $icon-size * 3;
|
|
margin-bottom: $icon-size * 3;
|
|
// 4px
|
|
transform: scale(4);
|
|
}
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: $default-size * -1;
|
|
left: $default-size * -1;
|
|
display: block;
|
|
content: "";
|
|
background: transparent;
|
|
}
|
|
|
|
&.heart::before {
|
|
@include pixelize($default-size, $icon-heart, $icon-heart-colors);
|
|
}
|
|
&.heart.is-half::before {
|
|
@include pixelize($default-size, $icon-heart-half, $icon-heart-colors);
|
|
}
|
|
&.heart.is-transparent::before {
|
|
@include pixelize($default-size, $icon-heart-transparent, $icon-heart-colors);
|
|
}
|
|
&.heart.is-empty::before {
|
|
@include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
|
|
}
|
|
|
|
&.star::before {
|
|
@include pixelize($default-size, $icon-star, $icon-star-colors);
|
|
}
|
|
&.star.is-empty::before {
|
|
@include pixelize($default-size, $icon-star-empty, $icon-star-empty-colors);
|
|
}
|
|
&.star.is-half::before {
|
|
@include pixelize($default-size, $icon-star-half, $icon-star-colors);
|
|
}
|
|
&.star.is-transparent::before {
|
|
@include pixelize($default-size, $icon-star-transparent, $icon-star-colors);
|
|
}
|
|
|
|
&.trophy::before {
|
|
@include pixelize($default-size, $icon-trophy, $icon-trophy-colors);
|
|
}
|
|
&.trophy.is-empty::before {
|
|
@include pixelize($default-size, $icon-trophy-empty, $icon-trophy-empty-colors);
|
|
}
|
|
|
|
&.like::before {
|
|
@include pixelize($default-size, $icon-like, $icon-like-colors);
|
|
}
|
|
&.like.is-empty::before {
|
|
@include pixelize($default-size, $icon-like-empty, $icon-like-empty-colors);
|
|
}
|
|
|
|
&.twitter::before {
|
|
@include pixelize($default-size, $icon-twitter, $icon-twitter-colors);
|
|
}
|
|
|
|
&.facebook::before {
|
|
@include pixelize($default-size, $icon-facebook, $icon-facebook-colors);
|
|
}
|
|
|
|
&.github::before {
|
|
@include pixelize($default-size, $icon-github, $icon-github-colors);
|
|
}
|
|
|
|
&.youtube::before {
|
|
@include pixelize($default-size, $icon-youtube, $icon-youtube-colors);
|
|
}
|
|
|
|
&.close::before {
|
|
@include pixelize($default-size, $icon-close, $icon-close-colors);
|
|
}
|
|
|
|
&.google::before {
|
|
@include pixelize($default-size, $icon-google, $icon-google-colors);
|
|
}
|
|
|
|
&.medium::before {
|
|
@include pixelize($default-size, $icon-medium, $icon-medium-colors);
|
|
}
|
|
|
|
&.twitch::before {
|
|
@include pixelize($default-size, $icon-twitch, $icon-twitch-colors);
|
|
}
|
|
|
|
&.reddit::before {
|
|
@include pixelize($default-size, $icon-reddit, $icon-reddit-colors);
|
|
}
|
|
|
|
&.whatsapp::before {
|
|
@include pixelize($default-size, $icon-whatsapp, $icon-whatsapp-colors);
|
|
}
|
|
|
|
&.gmail::before {
|
|
@include pixelize($default-size, $icon-gmail, $icon-gmail-colors);
|
|
}
|
|
|
|
&.linkedin::before {
|
|
@include pixelize($default-size, $icon-linkedin, $icon-linkedin-colors);
|
|
}
|
|
|
|
&.instagram::before {
|
|
@include pixelize($default-size, $icon-instagram, $icon-instagram-colors);
|
|
}
|
|
|
|
&.coin::before {
|
|
@include pixelize($default-size, $icon-coin, $icon-coin-colors);
|
|
}
|
|
}
|