mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-09-01 18:13:32 +02:00
👍 icon,twitterを追加
This commit is contained in:
3
scss/icons/_index.scss
Normal file
3
scss/icons/_index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "icons.scss";
|
43
scss/icons/icons.scss
Normal file
43
scss/icons/icons.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@import "pixelize.scss";
|
||||
@import "twitter.scss";
|
||||
|
||||
@mixin setup($pixel) {
|
||||
$size: $pixel * 16;
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
&::before {
|
||||
top: $pixel * -1;
|
||||
left: $pixel * -1;
|
||||
width: $pixel;
|
||||
height: $pixel;
|
||||
}
|
||||
|
||||
&.-twitter::before {
|
||||
@include pixelize($twitter, $pixel, #1c9ceb);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// -default
|
||||
@include setup(2px);
|
||||
|
||||
&.-medium {
|
||||
@include setup(3px);
|
||||
}
|
||||
|
||||
&.-large {
|
||||
@include setup(4px);
|
||||
}
|
||||
}
|
21
scss/icons/pixelize.scss
Normal file
21
scss/icons/pixelize.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
@mixin pixelize($matrix, $size, $color) {
|
||||
$ret: "";
|
||||
|
||||
@for $i from 1 through length($matrix) {
|
||||
$row: nth($matrix, $i);
|
||||
|
||||
@for $j from 1 through length($row) {
|
||||
$dot: nth($row, $j);
|
||||
|
||||
@if $dot != 0 {
|
||||
@if $ret != "" {
|
||||
$ret: $ret + ",";
|
||||
}
|
||||
|
||||
$ret: $ret + ($j * $size) + " " + ($i * $size) + " 0 " + $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
box-shadow: unquote($ret + ";");
|
||||
}
|
19
scss/icons/twitter.scss
Normal file
19
scss/icons/twitter.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// prettier-ignore
|
||||
$twitter: (
|
||||
( 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,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 ),
|
||||
( 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 )
|
||||
);
|
@@ -6,3 +6,4 @@
|
||||
|
||||
@import "base/_index.scss";
|
||||
@import "elements/_index.scss";
|
||||
@import "icons/_index.scss";
|
||||
|
Reference in New Issue
Block a user