mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-01-16 21:28:13 +01:00
Code Issues Releases Wiki Activity

feat(heart): added new heart reaction state

Browse Source 
added the `is-half` and `is-transparent` to the `heart` reaction

feat #246
This commit is contained in:
Kaylum Lally 2019-12-16 21:52:26 +00:00
parent 2dcec7b40a
commit fbe2e5c4d3
6 changed files with 90 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/script.js
View File

@ -444,6 +444,8 @@ const sampleCollection = [
code: `<section class="icon-list">
<!-- heart -->
<i class="nes-icon is-large heart"></i>
<i class="nes-icon is-large is-half heart"></i>
<i class="nes-icon is-large is-transparent heart"></i>
<i class="nes-icon is-large heart is-empty"></i>
<!-- star -->

40
scss/icons/heart.scss
View File

@ -19,6 +19,46 @@ $icon-heart: (
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);
// prettier-ignore
$icon-heart-half: (
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
(0,2,3,3,3,2,0,0,0,2,0,0,0,2,0,0),
(2,3,1,1,3,3,2,0,2,0,0,0,0,0,2,0),
(2,3,1,3,3,3,3,2,0,0,0,0,0,0,2,0),
(2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
(2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
(2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
(0,2,3,3,3,3,3,3,0,0,0,0,0,2,0,0),
(0,0,2,3,3,3,3,3,0,0,0,0,2,0,0,0),
(0,0,0,2,3,3,3,3,0,0,0,2,0,0,0,0),
(0,0,0,0,2,3,3,3,0,0,2,0,0,0,0,0),
(0,0,0,0,0,2,3,3,0,2,0,0,0,0,0,0),
(0,0,0,0,0,0,2,4,2,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);
// prettier-ignore
$icon-heart-transparent: (
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
(0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0),
(2,0,0,0,0,0,2,0,2,0,0,0,0,0,2,0),
(2,0,0,0,0,0,0,2,0,0,0,0,0,0,2,0),
(2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
(2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
(2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
(0,2,0,0,0,0,0,0,0,0,0,0,0,2,0,0),
(0,0,2,0,0,0,0,0,0,0,0,0,2,0,0,0),
(0,0,0,2,0,0,0,0,0,0,0,2,0,0,0,0),
(0,0,0,0,2,0,0,0,0,0,2,0,0,0,0,0),
(0,0,0,0,0,2,0,0,0,2,0,0,0,0,0,0),
(0,0,0,0,0,0,2,0,2,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);
$icon-heart-empty-colors: (#adafbb);
// prettier-ignore
$icon-heart-empty: (

6
scss/icons/icons.scss
View File

@ -70,6 +70,12 @@
&.heart::before {
@include pixelize($default-size, $icon-heart, $icon-heart-colors);
}
&.heart.is-half::before {
@include pixelize($default-size, $icon-heart-half, $icon-heart-colors);
}
&.heart.is-transparent::before {
@include pixelize($default-size, $icon-heart-transparent, $icon-heart-colors);
}
&.heart.is-empty::before {
@include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
}

6
story/_helpers/icons.js
View File

@ -30,6 +30,12 @@ export const Sprites = {
'snes-jp-logo': 'snes-jp-logo',
};
export const Reactions = {
heart: 'heart',
star: 'star',
like: 'like',
};
export const Size = {
default: '',
'is-small': 'is-small',

4
story/icons/icons.stories.js
View File

@ -3,8 +3,10 @@ import { withKnobs } from '@storybook/addon-knobs';
import Icons from './icons.template';
import Sprites from './sprites.template';
import Reactions from './reactions.template';
storiesOf('Icons', module)
.addDecorator(withKnobs)
.add('Icons', () => Icons())
.add('Sprites', () => Sprites());
.add('Sprites', () => Sprites())
.add('Reactions', () => Reactions());

33
story/icons/reactions.template.js Normal file
View File

@ -0,0 +1,33 @@
import { select } from '@storybook/addon-knobs';
import classNames from 'classnames';
import { Reactions } from '../_helpers/icons';
export default () => {
const reactionIcon = select('Reaction Icon', {
...Reactions,
}, 'heart');
const reactionSize = select('Size Class', {
'is-small': 'is-small',
'is-medium': 'is-medium',
'is-large': 'is-large',
}, 'is-large');
const reactionFill = select('Fill Class', {
default: '',
'is-half': 'is-half',
'is-transparent': 'is-transparent',
'is-empty': 'is-empty',
});
const reactionClasses = classNames(
'nes-icon',
reactionIcon,
reactionSize,
reactionFill,
);
return `
<i class="${reactionClasses}"></i>
`;
};