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

Merge pull request #396 from nostalgic-css/add-list-is-dark

Browse Source 
Add list is dark
This commit is contained in:
B.C.Rikko 2020-01-29 08:58:18 +09:00 committed by GitHub
commit 9af943e77a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/script.js
View File

@ -261,7 +261,27 @@ const sampleCollection = [
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>
</div>`,
</div>
<section class="nes-container is-dark">
<div class="lists">
<ul class="nes-list is-disc is-dark">
<li>Good morning.</li>
<li>Thou hast had a good night's sleep, I hope.</li>
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>
</div>
<div class="lists">
<ul class="nes-list is-circle is-dark">
<li>Good morning.</li>
<li>Thou hast had a good night's sleep, I hope.</li>
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>
</div>
</section>`,
},
{
title: 'tables',

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,
);