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

feat(icons): empty trophy + is-small modifier (#128)

Browse Source
This commit is contained in:
Kartones 2018-12-09 09:05:01 +01:00 committed by Abdullah Samman
parent 35469c4a26
commit e7570989e3
4 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/icons.stories.js
View File

@ -26,6 +26,7 @@ stories.add('icon', () => {
}, 'icon twitter');
const selectedSize = radios('size', {
default: '',
'is-small': 'is-small',
'is-medium': 'is-medium',
'is-large': 'is-large',
}, '');

13
index.html
View File

@ -177,16 +177,19 @@
<section class="container with-title">
<h3 class="title">Reaction</h3>
<div>
<i class="icon heart is-small"></i>
<i class="icon heart"></i>
<i class="icon heart is-medium"></i>
<i class="icon heart is-large"></i>
<i class="icon heart is-empty"></i>
<i class="icon star is-small"></i>
<i class="icon star"></i>
<i class="icon star is-medium"></i>
<i class="icon star is-large"></i>
<i class="icon star is-empty"></i>
<i class="icon like is-small"></i>
<i class="icon like"></i>
<i class="icon like is-medium"></i>
<i class="icon like is-large"></i>
@ -196,34 +199,42 @@
<section class="container with-title">
<h3 class="title">SNS</h3>
<div>
<i class="icon twitter is-small"></i>
<i class="icon twitter"></i>
<i class="icon twitter is-medium"></i>
<i class="icon twitter is-large"></i>
<i class="icon facebook is-small"></i>
<i class="icon facebook"></i>
<i class="icon facebook is-medium"></i>
<i class="icon facebook is-large"></i>
<i class="icon github is-small"></i>
<i class="icon github"></i>
<i class="icon github is-medium"></i>
<i class="icon github is-large"></i>
<i class="icon youtube is-small"></i>
<i class="icon youtube"></i>
<i class="icon youtube is-medium"></i>
<i class="icon youtube is-large"></i>
<i class="icon google is-small"></i>
<i class="icon google"></i>
<i class="icon google is-medium"></i>
<i class="icon google is-large"></i>
<i class="icon medium is-small"></i>
<i class="icon medium"></i>
<i class="icon medium is-medium"></i>
<i class="icon medium is-large"></i>
<i class="icon twitch is-small"></i>
<i class="icon twitch"></i>
<i class="icon twitch is-medium"></i>
<i class="icon twitch is-large"></i>
<i class="icon reddit is-small"></i>
<i class="icon reddit"></i>
<i class="icon reddit is-medium"></i>
<i class="icon reddit is-large"></i>
@ -233,12 +244,14 @@
<section class="container with-title">
<h3 class="title">Others</h3>
<div>
<i class="icon close is-small"></i>
<i class="icon close"></i>
<i class="icon close is-medium"></i>
<i class="icon close is-large"></i>
<i class="octocat animate"></i>
<i class="icon trophy is-small"></i>
<i class="icon trophy"></i>
<i class="icon trophy is-medium"></i>
<i class="icon trophy is-large"></i>

7
scss/icons/icons.scss
View File

@ -55,6 +55,9 @@
&.trophy::before {
@include pixelize($icon-trophy, $icon-trophy-colors, $px);
}
&.trophy.is-empty::before {
@include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
}
&.like::before {
@include pixelize($icon-like, $icon-like-colors, $px);
@ -103,6 +106,10 @@
// default
@include setup(2px);
&.is-small {
@include setup(1px);
}
&.is-medium {
@include setup(3px);
}

26
scss/icons/trophy.scss
View File

@ -16,10 +16,26 @@ $icon-trophy: (
(0,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0),
(0,0,0,0,0,2,2,3,2,2,0,0,0,0,0,0),
(0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
(0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0),
(0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0)
);
// 2 black
// 3 yellow
// 1 white
// 4 orange
$icon-trophy-empty-colors: (#adafbb);
// prettier-ignore
$icon-trophy-empty: (
(0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
(0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0),
(1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
(1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
(0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0),
(0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
(0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
(0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0),
(0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
(0,0,0,0,0,1,0,0,0,1,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,1,0,1,1,0,0,0,0,0,0),
(0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
(0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0)
);