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

feat: coin-icon

Browse Source
This commit is contained in:
Mati
2019-02-09 13:56:07 +01:00
parent 913487e061
commit a0aed6a61a
3 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/icons.stories.js
View File

@@ -32,6 +32,7 @@ stories.add('icon', () => {
'nes-jp-logo': 'nes-jp-logo', 'nes-jp-logo': 'nes-jp-logo',
'snes-logo': 'snes-logo', 'snes-logo': 'snes-logo',
'snes-jp-logo': 'snes-jp-logo', 'snes-jp-logo': 'snes-jp-logo',
'nes-coin': 'nes-coin',
}, 'nes-icon twitter'); }, 'nes-icon twitter');
const selectedSize = radios('size', { const selectedSize = radios('size', {
default: '', default: '',

1
scss/pixel-arts/_index.scss
View File

@@ -15,3 +15,4 @@
@import "mario.scss"; @import "mario.scss";
@import "kirby.scss"; @import "kirby.scss";
@import "octocat.scss"; @import "octocat.scss";
@import "coin.scss";

36
scss/pixel-arts/coin.scss Normal file
View File

@@ -0,0 +1,36 @@
.nes-coin {
$coin-colors: (#060606,#ffd700, #daa520);
// prettier-ignore
$coin: (
(0,0,0,0,0,1,1,1,1,0,0,0,0,0),
(0,0,0,1,1,2,2,2,2,1,1,0,0,0),
(0,0,1,2,2,1,1,1,1,2,2,1,0,0),
(0,1,2,1,1,3,3,3,3,1,2,1,1,0),
(0,1,2,1,3,3,3,3,3,3,1,2,1,0),
(1,2,1,3,3,3,3,3,3,3,3,1,2,1),
(1,2,1,3,3,3,3,3,3,3,3,1,2,1),
(1,2,1,3,3,3,3,3,3,3,3,1,2,1),
(1,2,1,3,3,3,3,3,3,3,3,1,2,1),
(0,1,2,1,3,3,3,3,3,3,1,2,1,0),
(0,1,2,1,1,3,3,3,3,1,2,2,1,0),
(0,0,1,2,2,1,1,1,1,2,2,1,0,0),
(0,0,0,1,1,2,2,2,2,1,1,0,0,0),
(0,0,0,0,0,1,1,1,1,0,0,0,0,0),
);
$size: 6px;
position: relative;
display: inline-block;
width: $size * length(nth($coin, 1));
height: $size * length($coin);
&::before {
position: absolute;
top: -$size;
left: -$size;
content: "";
background: transparent;
@include pixelize($size, $coin, $coin-colors);
}
}