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

🎉 各種アイコンを追加

Browse Source
This commit is contained in:
BcRikko
2018-11-26 17:16:07 +09:00
parent 8217642e9f
commit 658c51436e
15 changed files with 389 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
scss/elements/balloons.scss
View File

@@ -3,6 +3,7 @@
display: inline-block;
padding: 1rem 1.5rem;
margin: 8px;
margin-bottom: 30px;
// prettier-ignore
box-shadow:
@@ -30,8 +31,6 @@
}
&.from-left {
margin-bottom: 30px;
&::before,
&::after {
left: 2rem;

3
scss/icons/_index.scss Normal file
View File

@@ -0,0 +1,3 @@
@charset "utf-8";
@import "icons.scss";

20
scss/icons/facebook.scss Normal file
View File

@@ -0,0 +1,20 @@
$icon-facebook-colors: (#4566ae);
// prettier-ignore
$icon-facebook: (
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0),
( 1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1),
( 1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1),
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1),
( 1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1),
( 0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,0)
);

20
scss/icons/github.scss Normal file
View File

@@ -0,0 +1,20 @@
$icon-github-colors: (#333);
// prettier-ignore
$icon-github: (
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
( 1,1,1,1,0,1,1,1,1,1,1,1,1,0,1,1 ),
( 1,1,1,1,0,0,1,1,1,1,1,1,0,0,1,1 ),
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
( 1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1 ),
( 1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1 ),
( 1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1 ),
( 1,0,0,1,1,1,1,0,0,0,0,1,1,1,1,1 ),
( 1,1,1,0,1,1,0,0,0,0,0,0,1,1,1,1 ),
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
( 1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1 ),
( 1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1 ),
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
);

20
scss/icons/heart.scss Normal file
View File

@@ -0,0 +1,20 @@
$icon-heart-colors: (#333, #f11416, #831200);
// prettier-ignore
$icon-heart: (
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0),
(0,1,2,2,2,1,0,0,0,1,2,2,3,1,0,0),
(1,2,0,0,2,2,1,0,1,2,2,2,2,3,1,0),
(1,2,0,2,2,2,2,1,2,2,2,2,2,3,1,0),
(1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0),
(1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0),
(1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0),
(0,1,2,2,2,2,2,2,2,2,2,2,3,1,0,0),
(0,0,1,2,2,2,2,2,2,2,2,3,1,0,0,0),
(0,0,0,1,2,2,2,2,2,2,3,1,0,0,0,0),
(0,0,0,0,1,2,2,2,2,3,1,0,0,0,0,0),
(0,0,0,0,0,1,2,2,3,1,0,0,0,0,0,0),
(0,0,0,0,0,0,1,3,1,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);

67
scss/icons/icons.scss Normal file
View File

@@ -0,0 +1,67 @@
// reaction
@import "heart.scss";
@import "star.scss";
@import "like.scss";
// sns
@import "twitter.scss";
@import "facebook.scss";
@import "github.scss";
.icon {
position: relative;
display: inline-block;
@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);
}
&.star::before {
@include pixelize($icon-star, $icon-star-colors, $px);
}
&.like::before {
@include pixelize($icon-like, $icon-like-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);
}
}
// default
@include setup(2px);
&.is-medium {
@include setup(3px);
}
&.is-large {
@include setup(4px);
}
}

20
scss/icons/like.scss Normal file
View File

@@ -0,0 +1,20 @@
$icon-like-colors: (#333, #1e77be);
// prettier-ignore
$icon-like: (
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0),
(0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0),
(0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0),
(0,0,0,0,0,0,1,0,0,1,1,1,1,1,1,0),
(0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1),
(0,1,1,1,0,1,0,0,0,0,0,0,0,0,0,1),
(1,2,2,2,1,0,0,0,0,0,0,0,0,0,0,1),
(1,2,2,2,1,0,0,0,0,0,0,0,0,0,1,0),
(1,2,2,2,1,0,0,0,0,0,0,0,0,0,1,0),
(1,2,2,2,1,0,0,0,0,0,0,0,0,0,1,0),
(1,2,2,2,1,0,0,0,0,0,0,0,0,1,0,0),
(1,2,2,2,1,0,0,0,0,0,0,0,0,1,0,0),
(0,1,1,1,0,1,1,1,1,1,1,1,1,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);

20
scss/icons/star.scss Normal file
View File

@@ -0,0 +1,20 @@
$icon-star-colors: (#333, #ebe517, #f59f54);
// prettier-ignore
$icon-star: (
(0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0),
(0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0),
(0,0,0,0,0,1,2,2,2,1,0,0,0,0,0,0),
(0,0,0,0,0,1,0,0,2,1,0,0,0,0,0,0),
(1,1,1,1,1,1,0,2,2,2,1,1,1,1,1,0),
(1,2,2,2,0,0,2,2,2,2,2,2,2,2,1,0),
(0,1,2,2,0,2,2,2,2,2,2,2,3,1,0,0),
(0,0,1,2,2,2,2,2,2,2,3,3,1,0,0,0),
(0,0,0,1,2,2,2,2,2,2,2,1,0,0,0,0),
(0,0,1,2,2,2,2,3,2,2,2,2,1,0,0,0),
(0,0,1,2,2,2,3,3,3,2,2,2,1,0,0,0),
(0,1,2,2,3,3,3,1,3,3,3,2,2,1,0,0),
(0,1,2,3,3,1,1,0,1,1,3,3,2,1,0,0),
(1,3,3,1,1,0,0,0,0,0,1,1,3,3,1,0),
(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0)
);

20
scss/icons/twitter.scss Normal file
View File

@@ -0,0 +1,20 @@
$icon-twitter-colors: (#1c9ceb);
// prettier-ignore
$icon-twitter: (
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 ),
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
( 1,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1 ),
( 1,0,0,0,1,1,1,1,0,0,0,0,0,1,1,1 ),
( 1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1 ),
( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
( 1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1 ),
( 1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1 ),
( 1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1 ),
( 1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1 ),
( 1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1 ),
( 1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1 ),
( 1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1 ),
( 1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1 ),
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 ),
( 0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0 )
);

1
scss/nes.scss
View File

@@ -7,3 +7,4 @@
@import "base/_index.scss";
@import "utilities/_index.scss";
@import "elements/_index.scss";
@import "icons/_index.scss";