diff --git a/docs/lists.stories.js b/docs/lists.stories.js new file mode 100644 index 0000000..3c8c40b --- /dev/null +++ b/docs/lists.stories.js @@ -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 ``; +}); diff --git a/index.html b/index.html index 9d65434..a62d1bf 100644 --- a/index.html +++ b/index.html @@ -150,6 +150,27 @@ +
+

Lists

+
+ +
+ +
+ +
+
+

Table

diff --git a/package-lock.json b/package-lock.json index e4ab1d1..1371fb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss index 28d7130..32059dc 100644 --- a/scss/elements/_index.scss +++ b/scss/elements/_index.scss @@ -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"; diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss new file mode 100644 index 0000000..05e6efc --- /dev/null +++ b/scss/elements/lists.scss @@ -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); + } +}