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

feat(list): add list is-dark storybook and classes

Browse Source
This commit is contained in:
Igor Guastalla 2020-01-28 07:34:35 -03:00
parent 775027138a
commit 2316c07c3a
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
scss/elements/lists.scss
View File

@ -1,3 +1,18 @@
@mixin list-before(
$class,
$disc-or-circle,
$colors: ($base-color, map-get($default-colors, "shadow"))
) {
&.is-#{$class} li::before {
position: absolute;
top: calc(50% - 8px);
left: -22px;
content: "";
@include pixelize(2px, $disc-or-circle, $colors);
}
}
.nes-list {
// prettier-ignore
$disc: (
@ -18,7 +33,6 @@
(0,0,1,1,1,1,0,0),
(0,0,0,1,1,0,0,0)
);
$colors: ($base-color, map-get($default-colors, "shadow"));
list-style-type: none;
@ -26,21 +40,16 @@
position: relative;
}
&.is-disc li::before {
position: absolute;
top: calc(50% - 8px);
left: -22px;
content: "";
@include list-before("disc", $disc);
@include list-before("circle", $circle);
@include pixelize(2px, $disc, $colors);
}
&.is-dark {
$dark-colors: ($background-color, $base-color);
@include list-before("disc", $disc, $dark-colors);
@include list-before("circle", $circle, $dark-colors);
&.is-circle li::before {
position: absolute;
top: calc(50% - 8px);
left: -22px;
content: "";
@include pixelize(2px, $circle, $colors);
li {
color: $color-white;
}
}
}

6
story/lists/lists.template.js
View File

@ -1,7 +1,8 @@
import { radios } from '@storybook/addon-knobs';
import { radios, boolean } from '@storybook/addon-knobs';
import classNames from 'classnames';
export default () => {
const isDark = boolean('is-dark', false);
const listOptions = radios('List Type', {
'is-disc': 'is-disc',
'is-circle': 'is-circle',
@ -9,6 +10,9 @@ export default () => {
const listClasses = classNames(
'nes-list',
{
'is-dark': isDark,
},
listOptions,
);