mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-04-22 07:03:17 +02:00
Code Issues Releases Wiki Activity

feat(icons): add phone and smartphone icons (#131)

Browse Source 
* feat(icons): add smartphone icon

* docs(icons): add smartphone to storybook

* feat(icons): add phone icon

* docs(icons): add phone to storybook
This commit is contained in:
Igor Guastalla 2018-12-09 05:51:39 -02:00 committed by Abdullah Samman
parent abc30e1939
commit 35469c4a26
6 changed files with 102 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/icons.stories.js
View File

@ -15,6 +15,8 @@ stories.add('icon', () => {
'icon youtube': 'icon youtube',
'icon close': 'icon close',
pokeball: 'pokeball',
smartphone: 'smartphone',
phone: 'phone',
'octocat animate': 'octocat animate',
'icon trophy': 'icon trophy',
'nes-logo': 'nes-logo',

4
index.html
View File

@ -223,7 +223,7 @@
<i class="icon twitch"></i>
<i class="icon twitch is-medium"></i>
<i class="icon twitch is-large"></i>
<i class="icon reddit"></i>
<i class="icon reddit is-medium"></i>
<i class="icon reddit is-large"></i>
@ -244,6 +244,8 @@
<i class="icon trophy is-large"></i>
<i class="pokeball"></i>
<i class="smartphone"></i>
<i class="phone"></i>
</div>
</section>

6
scss/icons/icons.scss
View File

@ -89,12 +89,12 @@
&.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);
}

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

@ -7,3 +7,5 @@
@import "bcrikko.scss";
@import "octocat.scss";
@import "pokeball.scss";
@import "phone.scss";
@import "smartphone.scss";

43
scss/pixel-arts/phone.scss Normal file
View File

@ -0,0 +1,43 @@
.phone {
$px: 6px;
$phone-colors: (#596985, #3c4665, #000);
// prettier-ignore
$phone: (
(0,0,3,3,3,3,3,3),
(0,3,3,2,2,2,1,3),
(3,3,2,2,2,2,1,3),
(3,2,2,2,2,2,1,3),
(3,2,2,2,2,2,1,3),
(3,2,2,2,2,2,1,3),
(3,2,2,3,3,3,3,3),
(3,2,2,3,0,0,0,0),
(3,2,2,3,0,0,0,0),
(3,2,2,3,0,0,0,0),
(3,2,2,3,0,0,0,0),
(3,2,2,3,0,0,0,0),
(3,2,2,3,0,0,0,0),
(3,2,2,3,0,0,0,0),
(3,2,2,3,3,3,3,3),
(3,2,2,2,2,2,1,3),
(3,2,2,2,2,2,1,3),
(3,2,2,2,2,2,1,3),
(3,3,2,2,2,2,1,3),
(0,3,3,2,2,2,1,3),
(0,0,3,3,3,3,3,3)
);
position: relative;
display: inline-block;
width: $px * 8;
height: $px * 21;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
content: "";
background: transparent;
@include pixelize($phone, $phone-colors, $px);
}
}

49
scss/pixel-arts/smartphone.scss Normal file
View File

@ -0,0 +1,49 @@
.smartphone {
$px: 6px;
$smartphone-colors: (#fff, #060606);
// prettier-ignore
$smartphone: (
(0,2,2,2,2,2,2,2,2,2,2,2,2,2),
(2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
(2,1,1,1,2,2,2,2,2,2,2,1,1,1,2),
(2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
(2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
(2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
(2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
(2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
(0,2,2,2,2,2,2,2,2,2,2,2,2,2)
);
position: relative;
display: inline-block;
width: $px * 16;
height: $px * 27;
&::before {
position: absolute;
top: $px * -1;
left: $px * -1;
content: "";
background: transparent;
@include pixelize($smartphone, $smartphone-colors, $px);
}
}