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

Merge branch 'develop' into dialog

Browse Source
This commit is contained in:
soph-iest
2018-12-13 15:50:30 -05:00
committed by GitHub
parent 3a43f47722 9fd5a6f47f
commit 24a7575bd6
5 changed files with 106 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/lists.stories.js Normal file
View File

@@ -0,0 +1,20 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Lists', module);
stories.addDecorator(withKnobs);
stories.add('list', () => {
const selectedClass = radios('type', {
default: 'is-disc',
'is-circle': 'is-circle',
}, 'is-disc');
return `<ul class="nes-list ${selectedClass}">
<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>`;
});

21
index.html
View File

@@ -150,6 +150,27 @@
</div>
</section>
<section class="nes-container with-title">
<h2 class="title">Lists</h2>
<div class="lists">
<ul class="nes-list is-disc">
<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">
<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>
<section class="nes-container with-title">
<h2 class="title">Table</h2>
<div class="tables">

40
package-lock.json generated
View File

@@ -4332,7 +4332,7 @@
"dependencies": {
"domelementtype": {
"version": "1.1.3",
"resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
"dev": true
}
@@ -5092,7 +5092,7 @@
},
"expand-range": {
"version": "1.8.2",
"resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
"resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
"integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
"dev": true,
"requires": {
@@ -6456,7 +6456,7 @@
},
"get-stream": {
"version": "3.0.0",
"resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
},
@@ -6660,7 +6660,7 @@
},
"globby": {
"version": "8.0.1",
"resolved": "http://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
"resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
"integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==",
"dev": true,
"requires": {
@@ -7930,7 +7930,7 @@
},
"jest-get-type": {
"version": "22.4.3",
"resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
"integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
"dev": true
},
@@ -9092,7 +9092,7 @@
"dependencies": {
"semver": {
"version": "5.3.0",
"resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
"dev": true
}
@@ -12809,7 +12809,7 @@
},
"os-homedir": {
"version": "1.0.2",
"resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true
},
@@ -12834,7 +12834,7 @@
},
"os-tmpdir": {
"version": "1.0.2",
"resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true
},
@@ -12871,7 +12871,7 @@
},
"p-is-promise": {
"version": "1.1.0",
"resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
"resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
"integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
"dev": true
},
@@ -13056,7 +13056,7 @@
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
},
@@ -13873,7 +13873,7 @@
},
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
"dev": true
},
@@ -14496,7 +14496,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@@ -15038,7 +15038,7 @@
},
"safe-regex": {
"version": "1.1.0",
"resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
"dev": true,
"requires": {
@@ -15110,7 +15110,7 @@
"dependencies": {
"source-map": {
"version": "0.4.4",
"resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
"dev": true,
"requires": {
@@ -16313,7 +16313,7 @@
},
"staged-git-files": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
"integrity": "sha512-H89UNKr1rQJvI1c/PIR3kiAMBV23yvR7LItZiV74HWZwzt7f3YHuujJ9nJZlt58WlFox7XQsOahexwk7nTe69A==",
"dev": true
},
@@ -16462,7 +16462,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -16494,7 +16494,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -16509,7 +16509,7 @@
},
"strip-eof": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true
},
@@ -16709,7 +16709,7 @@
},
"stylelint-order": {
"version": "0.8.1",
"resolved": "http://registry.npmjs.org/stylelint-order/-/stylelint-order-0.8.1.tgz",
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-0.8.1.tgz",
"integrity": "sha512-8mp1P2wnI9XShYXVXDsxVigE2eXnc0C2O4ktbwUvTBwjCP4xZskIbUVxp1evSG3OK4R7hXVNl/2BnJCZkrcc/w==",
"dev": true,
"requires": {
@@ -16913,7 +16913,7 @@
},
"tar": {
"version": "2.2.1",
"resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
"dev": true,
"requires": {

1
scss/elements/_index.scss
View File

@@ -4,6 +4,7 @@
@import "containers.scss";
@import "radios.scss";
@import "checkboxes.scss";
@import "lists.scss";
@import "balloons.scss";
@import "tables.scss";
@import "progress.scss";

44
scss/elements/lists.scss Normal file
View File

@@ -0,0 +1,44 @@
.nes-list {
$disc: (
(0, 0, 0, 1, 1, 0, 0, 0),
(0, 0, 1, 1, 1, 1, 0, 0),
(0, 1, 1, 1, 1, 1, 1, 0),
(0, 1, 1, 1, 1, 1, 1, 0),
(0, 0, 1, 1, 1, 1, 0, 0),
(0, 0, 0, 1, 1, 0, 0, 0)
);
$circle: (
(0, 0, 0, 1, 1, 0, 0, 0),
(0, 0, 1, 1, 1, 1, 0, 0),
(0, 1, 1, 0, 0, 1, 1, 0),
(0, 1, 1, 0, 0, 1, 1, 0),
(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;
& li {
position: relative;
}
&.is-disc li::before {
position: absolute;
top: calc(50% - 8px);
left: -22px;
content: "";
@include pixelize($disc, $colors, 2px);
}
&.is-circle li::before {
position: absolute;
top: calc(50% - 8px);
left: -22px;
content: "";
@include pixelize($circle, $colors, 2px);
}
}