mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-06 14:36:31 +02:00
feat(heart): added new heart reaction state
added the `is-half` and `is-transparent` to the `heart` reaction feat #246
This commit is contained in:
@@ -444,6 +444,8 @@ const sampleCollection = [
|
|||||||
code: `<section class="icon-list">
|
code: `<section class="icon-list">
|
||||||
<!-- heart -->
|
<!-- heart -->
|
||||||
<i class="nes-icon is-large heart"></i>
|
<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>
|
<i class="nes-icon is-large heart is-empty"></i>
|
||||||
|
|
||||||
<!-- star -->
|
<!-- star -->
|
||||||
|
@@ -19,6 +19,46 @@ $icon-heart: (
|
|||||||
(0,0,0,0,0,0,0,0,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-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);
|
$icon-heart-empty-colors: (#adafbb);
|
||||||
// prettier-ignore
|
// prettier-ignore
|
||||||
$icon-heart-empty: (
|
$icon-heart-empty: (
|
||||||
|
@@ -70,6 +70,12 @@
|
|||||||
&.heart::before {
|
&.heart::before {
|
||||||
@include pixelize($default-size, $icon-heart, $icon-heart-colors);
|
@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 {
|
&.heart.is-empty::before {
|
||||||
@include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
|
@include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
|
||||||
}
|
}
|
||||||
|
@@ -30,6 +30,12 @@ export const Sprites = {
|
|||||||
'snes-jp-logo': 'snes-jp-logo',
|
'snes-jp-logo': 'snes-jp-logo',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const Reactions = {
|
||||||
|
heart: 'heart',
|
||||||
|
star: 'star',
|
||||||
|
like: 'like',
|
||||||
|
};
|
||||||
|
|
||||||
export const Size = {
|
export const Size = {
|
||||||
default: '',
|
default: '',
|
||||||
'is-small': 'is-small',
|
'is-small': 'is-small',
|
||||||
|
@@ -3,8 +3,10 @@ import { withKnobs } from '@storybook/addon-knobs';
|
|||||||
|
|
||||||
import Icons from './icons.template';
|
import Icons from './icons.template';
|
||||||
import Sprites from './sprites.template';
|
import Sprites from './sprites.template';
|
||||||
|
import Reactions from './reactions.template';
|
||||||
|
|
||||||
storiesOf('Icons', module)
|
storiesOf('Icons', module)
|
||||||
.addDecorator(withKnobs)
|
.addDecorator(withKnobs)
|
||||||
.add('Icons', () => Icons())
|
.add('Icons', () => Icons())
|
||||||
.add('Sprites', () => Sprites());
|
.add('Sprites', () => Sprites())
|
||||||
|
.add('Reactions', () => Reactions());
|
||||||
|
33
story/icons/reactions.template.js
Normal file
33
story/icons/reactions.template.js
Normal 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>
|
||||||
|
`;
|
||||||
|
};
|
Reference in New Issue
Block a user