From 1cc26cce3c5cb23cbc5bf67a0e7f7551c330404e Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Mon, 22 Jan 2018 16:52:15 -0800 Subject: [PATCH 1/3] chore(button): removed dark theme from buttons --- demos/button.html | 30 ------------------------------ demos/button.scss | 15 --------------- packages/mdc-button/_mixins.scss | 13 ------------- packages/mdc-theme/_functions.scss | 1 + packages/mdc-theme/_mixins.scss | 2 ++ 5 files changed, 3 insertions(+), 58 deletions(-) diff --git a/demos/button.html b/demos/button.html index bb65ba8ff79..012ccf86083 100644 --- a/demos/button.html +++ b/demos/button.html @@ -30,14 +30,6 @@ padding-bottom: 100px; } - .demo-wrapper.mdc-theme--dark{ - background-color: #333; - } - - .demo-wrapper.mdc-theme--dark fieldset legend, .demo-wrapper.mdc-theme--dark h1 { - color: #f0f0f0; - } - fieldset { padding: 24px; padding-top: 0; @@ -102,19 +94,6 @@
-
-
- -
- - - -
-
-
- -
-
@@ -364,15 +343,6 @@

CSS Only

mdc.ripple.MDCRipple.attachTo(btn); } - var demoWrapper = document.querySelector('.demo-wrapper'); - document.getElementById('toggle-dark').addEventListener('change', function() { - if (this.checked) { - demoWrapper.classList.add('mdc-theme--dark'); - } else { - demoWrapper.classList.remove('mdc-theme--dark'); - } - }); - document.getElementById('toggle-disabled').addEventListener('change', function() { var isDisabled = this.checked; [].slice.call(document.querySelectorAll('button')).forEach(function(button) { diff --git a/demos/button.scss b/demos/button.scss index 2ea8db3b321..dc1990dec54 100644 --- a/demos/button.scss +++ b/demos/button.scss @@ -25,31 +25,16 @@ .mdc-button.secondary-text-button { @include mdc-button-ink-color($mdc-theme-secondary); @include mdc-states(secondary); - - @include mdc-theme-dark(".mdc-button") { - @include mdc-button-ink-color($mdc-theme-secondary); - @include mdc-states(secondary); - } } .mdc-button.secondary-filled-button { @include mdc-button-filled-accessible($mdc-theme-secondary); - - @include mdc-theme-dark(".mdc-button") { - @include mdc-button-filled-accessible($mdc-theme-secondary); - } } .mdc-button.secondary-stroked-button { @include mdc-button-ink-color($mdc-theme-secondary); @include mdc-button-stroke-color($mdc-theme-secondary); - @include mdc-states(secondary); - @include mdc-theme-dark(".mdc-button") { - @include mdc-button-ink-color($mdc-theme-secondary); - @include mdc-button-stroke-color($mdc-theme-secondary); - @include mdc-states(secondary); - } } .mdc-button.big-round-corner-button { diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 7df15b06ba9..a8cee7f370e 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -123,10 +123,6 @@ cursor: default; pointer-events: none; - - @include mdc-theme-dark(".mdc-button") { - @include mdc-theme-prop(color, text-disabled-on-dark); - } } } @@ -145,10 +141,6 @@ &:disabled { @include mdc-theme-prop(border-color, text-disabled-on-light); - - @include mdc-theme-dark(".mdc-button") { - @include mdc-theme-prop(border-color, text-disabled-on-dark); - } } } @@ -156,11 +148,6 @@ &:disabled { @include mdc-theme-prop(background-color, rgba(black, .12)); @include mdc-theme-prop(color, text-disabled-on-light); - - @include mdc-theme-dark(".mdc-button") { - @include mdc-theme-prop(background-color, rgba(white, .12)); - @include mdc-theme-prop(color, text-disabled-on-light); - } } } diff --git a/packages/mdc-theme/_functions.scss b/packages/mdc-theme/_functions.scss index 6f691441058..d41e9cd35ba 100644 --- a/packages/mdc-theme/_functions.scss +++ b/packages/mdc-theme/_functions.scss @@ -42,6 +42,7 @@ $_mdc-theme-tonal-offset: 7%; // Determine whether the color is "light" or "dark". @function mdc-theme-tone($color) { + // TODO: update to remove support for dark @if $color == "dark" or $color == "light" { @return $color; } diff --git a/packages/mdc-theme/_mixins.scss b/packages/mdc-theme/_mixins.scss index 65e2ab207d0..92e45906f30 100644 --- a/packages/mdc-theme/_mixins.scss +++ b/packages/mdc-theme/_mixins.scss @@ -109,6 +109,8 @@ // } // } // ``` + +// TODO: matt goo - remove this once all dark theme is removed @mixin mdc-theme-dark($root-selector: null, $compound: false) { @if ($root-selector) { @at-root { From c9a316ef64b07f568be36a3e63c364a8d7778c1e Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Tue, 23 Jan 2018 09:40:33 -0800 Subject: [PATCH 2/3] chore(package): removed todo, added todo with dark theme removal --- demos/common.scss | 1 + packages/mdc-theme/_functions.scss | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/common.scss b/demos/common.scss index 1e91179864c..2c5fc185dd8 100644 --- a/demos/common.scss +++ b/demos/common.scss @@ -47,6 +47,7 @@ fieldset { border: 0; } +// TODO mgoo: remove these dark theme when complete with removing other components .mdc-button { @include mdc-theme-dark { @include mdc-button-ink-color($dark-button-color); diff --git a/packages/mdc-theme/_functions.scss b/packages/mdc-theme/_functions.scss index d41e9cd35ba..6f691441058 100644 --- a/packages/mdc-theme/_functions.scss +++ b/packages/mdc-theme/_functions.scss @@ -42,7 +42,6 @@ $_mdc-theme-tonal-offset: 7%; // Determine whether the color is "light" or "dark". @function mdc-theme-tone($color) { - // TODO: update to remove support for dark @if $color == "dark" or $color == "light" { @return $color; } From dbac1e439a2ea581dc21adc92fa283accdc4e7d6 Mon Sep 17 00:00:00 2001 From: Matty Goo Date: Tue, 23 Jan 2018 12:13:19 -0800 Subject: [PATCH 3/3] Docs/list/new readme (#2033) --- package-lock.json | 889 ++---------------------------------- packages/mdc-list/README.md | 426 ++++------------- 2 files changed, 123 insertions(+), 1192 deletions(-) diff --git a/package-lock.json b/package-lock.json index 233be9a7066..31a2eb944c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2,6 +2,16 @@ "requires": true, "lockfileVersion": 1, "dependencies": { + "JSONStream": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz", + "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=", + "dev": true, + "requires": { + "jsonparse": "1.3.1", + "through": "2.3.8" + } + }, "abbrev": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz", @@ -273,12 +283,6 @@ "integrity": "sha1-onTthawIhJtr14R8RYB0XcUa37E=", "dev": true }, - "array-differ": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz", - "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=", - "dev": true - }, "array-filter": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz", @@ -1286,9 +1290,9 @@ "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=", "dev": true, "requires": { + "JSONStream": "1.3.1", "combine-source-map": "0.7.2", "defined": "1.0.0", - "JSONStream": "1.3.1", "through2": "2.0.3", "umd": "3.0.1" } @@ -1322,6 +1326,7 @@ "integrity": "sha512-gKfOsNQv/toWz+60nSPfYzuwSEdzvV2WdxrVPUbPD/qui44rAkB3t3muNtmmGYHqrG56FGwX9SUEQmzNLAeS7g==", "dev": true, "requires": { + "JSONStream": "1.3.1", "assert": "1.4.1", "browser-pack": "6.0.2", "browser-resolve": "1.11.2", @@ -1343,7 +1348,6 @@ "https-browserify": "1.0.0", "inherits": "2.0.3", "insert-module-globals": "7.0.1", - "JSONStream": "1.3.1", "labeled-stream-splicer": "2.0.0", "module-deps": "4.1.1", "os-browserify": "0.3.0", @@ -2039,12 +2043,6 @@ "color-name": "1.1.2" } }, - "color-diff": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/color-diff/-/color-diff-0.1.7.tgz", - "integrity": "sha1-bbeM2UgqjkWdQIIer0tQMoPcuOI=", - "dev": true - }, "color-name": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.2.tgz", @@ -2060,56 +2058,6 @@ "color-name": "1.1.2" } }, - "colorguard": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/colorguard/-/colorguard-1.2.0.tgz", - "integrity": "sha1-8/rK9cquuk71RlPZ+yW7cxd8DYQ=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "color-diff": "0.1.7", - "log-symbols": "1.0.2", - "object-assign": "4.1.1", - "pipetteur": "2.0.3", - "plur": "2.1.2", - "postcss": "5.2.17", - "postcss-reporter": "1.4.1", - "text-table": "0.2.0", - "yargs": "1.3.3" - }, - "dependencies": { - "postcss": { - "version": "5.2.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", - "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "js-base64": "2.1.9", - "source-map": "0.5.6", - "supports-color": "3.2.3" - } - }, - "postcss-reporter": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-1.4.1.tgz", - "integrity": "sha1-wTbwpbFhkV83ndN2XGEHX357mvI=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "lodash": "4.17.4", - "log-symbols": "1.0.2", - "postcss": "5.2.17" - } - }, - "yargs": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-1.3.3.tgz", - "integrity": "sha1-BU3oth8i7v23IHBZ6u+da4P7kxo=", - "dev": true - } - } - }, "colormin": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz", @@ -2506,8 +2454,8 @@ "integrity": "sha512-8od6g684Fhi5Vpp4ABRv/RBsW1AY6wSHbJHEK6FGTv+8jvAAnlABniZu/FVmX9TcirkHepaEsa1QGkRvbg0CKw==", "dev": true, "requires": { - "is-text-path": "1.0.1", "JSONStream": "1.3.1", + "is-text-path": "1.0.1", "lodash": "4.17.4", "meow": "3.7.0", "split2": "2.2.0", @@ -2756,54 +2704,6 @@ } } }, - "css-rule-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/css-rule-stream/-/css-rule-stream-1.1.0.tgz", - "integrity": "sha1-N4bnGYmD2WWibjGVfgkHjLt3BaI=", - "dev": true, - "requires": { - "css-tokenize": "1.0.1", - "duplexer2": "0.0.2", - "ldjson-stream": "1.2.1", - "through2": "0.6.5" - }, - "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true - }, - "readable-stream": { - "version": "1.0.34", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", - "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", - "dev": true, - "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "0.0.1", - "string_decoder": "0.10.31" - } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - }, - "through2": { - "version": "0.6.5", - "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz", - "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=", - "dev": true, - "requires": { - "readable-stream": "1.0.34", - "xtend": "4.0.1" - } - } - } - }, "css-selector-tokenizer": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz", @@ -2828,42 +2728,6 @@ } } }, - "css-tokenize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz", - "integrity": "sha1-RiXLHtohwUOFi3+B1oA8HSb8FL4=", - "dev": true, - "requires": { - "inherits": "2.0.3", - "readable-stream": "1.1.14" - }, - "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true - }, - "readable-stream": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", - "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", - "dev": true, - "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "0.0.1", - "string_decoder": "0.10.31" - } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - } - } - }, "cssesc": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", @@ -3276,101 +3140,6 @@ "isarray": "1.0.0" } }, - "doiuse": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/doiuse/-/doiuse-2.6.0.tgz", - "integrity": "sha1-GJLRC2Gpo1at2/K2FJM+gfi7ODQ=", - "dev": true, - "requires": { - "browserslist": "1.7.7", - "caniuse-db": "1.0.30000676", - "css-rule-stream": "1.1.0", - "duplexer2": "0.0.2", - "jsonfilter": "1.1.2", - "ldjson-stream": "1.2.1", - "lodash": "4.17.4", - "multimatch": "2.1.0", - "postcss": "5.2.17", - "source-map": "0.4.4", - "through2": "0.6.5", - "yargs": "3.10.0" - }, - "dependencies": { - "browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "requires": { - "caniuse-db": "1.0.30000676", - "electron-to-chromium": "1.3.13" - } - }, - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true - }, - "postcss": { - "version": "5.2.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", - "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "js-base64": "2.1.9", - "source-map": "0.5.6", - "supports-color": "3.2.3" - }, - "dependencies": { - "source-map": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", - "dev": true - } - } - }, - "readable-stream": { - "version": "1.0.34", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", - "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", - "dev": true, - "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "0.0.1", - "string_decoder": "0.10.31" - } - }, - "source-map": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", - "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", - "dev": true, - "requires": { - "amdefine": "1.0.1" - } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - }, - "through2": { - "version": "0.6.5", - "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz", - "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=", - "dev": true, - "requires": { - "readable-stream": "1.0.34", - "xtend": "4.0.1" - } - } - } - }, "dom-events": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-events/-/dom-events-0.1.1.tgz", @@ -3420,41 +3189,6 @@ "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=", "dev": true }, - "duplexer2": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz", - "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=", - "dev": true, - "requires": { - "readable-stream": "1.1.14" - }, - "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true - }, - "readable-stream": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", - "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", - "dev": true, - "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "0.0.1", - "string_decoder": "0.10.31" - } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - } - } - }, "duplexer3": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", @@ -5284,11 +5018,6 @@ } } }, - "string_decoder": { - "version": "0.10.31", - "bundled": true, - "dev": true - }, "string-width": { "version": "1.0.2", "bundled": true, @@ -5299,6 +5028,11 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "0.10.31", + "bundled": true, + "dev": true + }, "stringstream": { "version": "0.0.5", "bundled": true, @@ -5510,12 +5244,6 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, - "gather-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/gather-stream/-/gather-stream-1.0.0.tgz", - "integrity": "sha1-szmUr0V6gRVwDUEPMXczy+egkEs=", - "dev": true - }, "gauge": { "version": "2.7.4", "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", @@ -6384,10 +6112,10 @@ "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=", "dev": true, "requires": { + "JSONStream": "1.3.1", "combine-source-map": "0.7.2", "concat-stream": "1.5.2", "is-buffer": "1.1.5", - "JSONStream": "1.3.1", "lexical-scope": "1.2.0", "process": "0.11.10", "through2": "2.0.3", @@ -6461,12 +6189,6 @@ "integrity": "sha1-HgOlL9rYOou7KyXL9JmLTP/NPew=", "dev": true }, - "irregular-plurals": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.3.0.tgz", - "integrity": "sha512-njf5A+Mxb3kojuHd1DzISjjIl+XhyzovXEOyPPSzdQozq/Lf2tN27mOrAAsxEPZxpn6I4MGzs1oo9TxXxPFpaA==", - "dev": true - }, "is-absolute-url": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz", @@ -7015,86 +6737,6 @@ "graceful-fs": "4.1.11" } }, - "jsonfilter": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/jsonfilter/-/jsonfilter-1.1.2.tgz", - "integrity": "sha1-Ie987cdRk4E8dZMulqmL4gW6WhE=", - "dev": true, - "requires": { - "JSONStream": "0.8.4", - "minimist": "1.2.0", - "stream-combiner": "0.2.2", - "through2": "0.6.5" - }, - "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true - }, - "jsonparse": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-0.0.5.tgz", - "integrity": "sha1-MwVCrT8KZUZlt3jz6y2an6UHrGQ=", - "dev": true - }, - "JSONStream": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz", - "integrity": "sha1-kWV9/m/4V0gwZhMrRhi2Lo9Ih70=", - "dev": true, - "requires": { - "jsonparse": "0.0.5", - "through": "2.3.8" - } - }, - "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", - "dev": true - }, - "readable-stream": { - "version": "1.0.34", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", - "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", - "dev": true, - "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "0.0.1", - "string_decoder": "0.10.31" - } - }, - "stream-combiner": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz", - "integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=", - "dev": true, - "requires": { - "duplexer": "0.1.1", - "through": "2.3.8" - } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - }, - "through2": { - "version": "0.6.5", - "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz", - "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=", - "dev": true, - "requires": { - "readable-stream": "1.0.34", - "xtend": "4.0.1" - } - } - } - }, "jsonify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", @@ -7113,16 +6755,6 @@ "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=", "dev": true }, - "JSONStream": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz", - "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=", - "dev": true, - "requires": { - "jsonparse": "1.3.1", - "through": "2.3.8" - } - }, "jsprim": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz", @@ -7340,12 +6972,6 @@ "is-buffer": "1.1.5" } }, - "known-css-properties": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.2.0.tgz", - "integrity": "sha512-UTCzU28rRI9wkb8qSGoZa9pgWvxr4LjP2MEhi9XHb/1XMOJy0uTnIxaxzj8My/PORG+kQG6VzAcGvRw66eIOfA==", - "dev": true - }, "labeled-stream-splicer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-2.0.0.tgz", @@ -7404,61 +7030,6 @@ "invert-kv": "1.0.0" } }, - "ldjson-stream": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/ldjson-stream/-/ldjson-stream-1.2.1.tgz", - "integrity": "sha1-kb7O2lrE7SsX5kn7d356v6AYnCs=", - "dev": true, - "requires": { - "split2": "0.2.1", - "through2": "0.6.5" - }, - "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true - }, - "readable-stream": { - "version": "1.0.34", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", - "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", - "dev": true, - "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "0.0.1", - "string_decoder": "0.10.31" - } - }, - "split2": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/split2/-/split2-0.2.1.tgz", - "integrity": "sha1-At2smtwD7Au3jBKC7Aecpuha6QA=", - "dev": true, - "requires": { - "through2": "0.6.5" - } - }, - "string_decoder": { - "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", - "dev": true - }, - "through2": { - "version": "0.6.5", - "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz", - "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=", - "dev": true, - "requires": { - "readable-stream": "1.0.34", - "xtend": "4.0.1" - } - } - } - }, "lerna": { "version": "2.0.0-beta.36", "resolved": "https://registry.npmjs.org/lerna/-/lerna-2.0.0-beta.36.tgz", @@ -7778,15 +7349,6 @@ "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "dev": true }, - "log-symbols": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz", - "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=", - "dev": true, - "requires": { - "chalk": "1.1.3" - } - }, "log4js": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/log4js/-/log4js-2.4.1.tgz", @@ -8366,6 +7928,7 @@ "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=", "dev": true, "requires": { + "JSONStream": "1.3.1", "browser-resolve": "1.11.2", "cached-path-relative": "1.0.1", "concat-stream": "1.5.2", @@ -8373,7 +7936,6 @@ "detective": "4.7.1", "duplexer2": "0.1.4", "inherits": "2.0.3", - "JSONStream": "1.3.1", "parents": "1.0.1", "readable-stream": "2.2.9", "resolve": "1.3.3", @@ -8433,18 +7995,6 @@ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, - "multimatch": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz", - "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=", - "dev": true, - "requires": { - "array-differ": "1.0.0", - "array-union": "1.0.2", - "arrify": "1.0.1", - "minimatch": "3.0.4" - } - }, "mute-stream": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", @@ -8939,12 +8489,6 @@ "wrappy": "1.0.2" } }, - "onecolor": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/onecolor/-/onecolor-3.0.4.tgz", - "integrity": "sha1-daRvgNpseqpbTarhekcZi9llJJQ=", - "dev": true - }, "onetime": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", @@ -9358,16 +8902,6 @@ "pinkie": "2.0.4" } }, - "pipetteur": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/pipetteur/-/pipetteur-2.0.3.tgz", - "integrity": "sha1-GVV2CVno0aEcsqUOyD7sRwYz5J8=", - "dev": true, - "requires": { - "onecolor": "3.0.4", - "synesthesia": "1.0.1" - } - }, "pkg-dir": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz", @@ -9377,15 +8911,6 @@ "find-up": "1.1.2" } }, - "plur": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz", - "integrity": "sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=", - "dev": true, - "requires": { - "irregular-plurals": "1.3.0" - } - }, "pluralize": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz", @@ -9661,29 +9186,6 @@ } } }, - "postcss-less": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-0.14.0.tgz", - "integrity": "sha1-xjGwicbM5CK5oQ86lY0r7dOBkyQ=", - "dev": true, - "requires": { - "postcss": "5.2.17" - }, - "dependencies": { - "postcss": { - "version": "5.2.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", - "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "js-base64": "2.1.9", - "source-map": "0.5.6", - "supports-color": "3.2.3" - } - } - } - }, "postcss-load-config": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz", @@ -10110,32 +9612,6 @@ } } }, - "postcss-reporter": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-3.0.0.tgz", - "integrity": "sha1-CeoPN6RExWk4eGBuCbAY6+/3z48=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "lodash": "4.17.4", - "log-symbols": "1.0.2", - "postcss": "5.2.17" - }, - "dependencies": { - "postcss": { - "version": "5.2.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", - "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "js-base64": "2.1.9", - "source-map": "0.5.6", - "supports-color": "3.2.3" - } - } - } - }, "postcss-resolve-nested-selector": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", @@ -10719,15 +10195,6 @@ "graceful-fs": "4.1.11" } }, - "read-file-stdin": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz", - "integrity": "sha1-JezP86FTtoCa+ssj7hU4fbng7mE=", - "dev": true, - "requires": { - "gather-stream": "1.0.0" - } - }, "read-only-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-2.0.0.tgz", @@ -12071,15 +11538,6 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, - "string_decoder": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", - "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, "string-width": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.0.0.tgz", @@ -12101,6 +11559,15 @@ "function-bind": "1.1.0" } }, + "string_decoder": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", + "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", + "dev": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, "stringify-object-es5": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/stringify-object-es5/-/stringify-object-es5-2.5.0.tgz", @@ -12172,67 +11639,6 @@ "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=", "dev": true }, - "stylehacks": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-2.3.2.tgz", - "integrity": "sha1-ZMg+BDimjJ7fRJ6MVSp9mrYAmws=", - "dev": true, - "requires": { - "browserslist": "1.7.7", - "chalk": "1.1.3", - "log-symbols": "1.0.2", - "minimist": "1.2.0", - "plur": "2.1.2", - "postcss": "5.2.17", - "postcss-reporter": "1.4.1", - "postcss-selector-parser": "2.2.3", - "read-file-stdin": "0.2.1", - "text-table": "0.2.0", - "write-file-stdout": "0.0.2" - }, - "dependencies": { - "browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "requires": { - "caniuse-db": "1.0.30000676", - "electron-to-chromium": "1.3.13" - } - }, - "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", - "dev": true - }, - "postcss": { - "version": "5.2.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", - "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "js-base64": "2.1.9", - "source-map": "0.5.6", - "supports-color": "3.2.3" - } - }, - "postcss-reporter": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-1.4.1.tgz", - "integrity": "sha1-wTbwpbFhkV83ndN2XGEHX357mvI=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "lodash": "4.17.4", - "log-symbols": "1.0.2", - "postcss": "5.2.17" - } - } - } - }, "stylelint": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-8.2.0.tgz", @@ -12691,194 +12097,27 @@ } }, "stylelint-scss": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-1.5.1.tgz", - "integrity": "sha1-pariA/xaqrpITH0TgPKFYLbzOsA=", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-2.2.0.tgz", + "integrity": "sha512-O3jIpujSDrMHlGoXT3AYsOz2DPb49Y+0rCPGU34BHrbMBWSciwkvtm4WFrYi/cDnbpkXFemC0lHwmtspK8IQEA==", "dev": true, "requires": { "lodash": "4.17.4", "postcss-media-query-parser": "0.2.3", "postcss-resolve-nested-selector": "0.1.1", - "postcss-selector-parser": "2.2.3", - "postcss-value-parser": "3.3.0", - "stylelint": "7.13.0" + "postcss-selector-parser": "3.1.1", + "postcss-value-parser": "3.3.0" }, "dependencies": { - "autoprefixer": { - "version": "6.7.7", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz", - "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=", + "postcss-selector-parser": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz", + "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=", "dev": true, "requires": { - "browserslist": "1.7.7", - "caniuse-db": "1.0.30000676", - "normalize-range": "0.1.2", - "num2fraction": "1.2.2", - "postcss": "5.2.17", - "postcss-value-parser": "3.3.0" - } - }, - "browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "requires": { - "caniuse-db": "1.0.30000676", - "electron-to-chromium": "1.3.13" - } - }, - "chalk": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz", - "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==", - "dev": true, - "requires": { - "ansi-styles": "3.2.0", - "escape-string-regexp": "1.0.5", - "supports-color": "4.2.1" - }, - "dependencies": { - "ansi-styles": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", - "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", - "dev": true, - "requires": { - "color-convert": "1.9.0" - } - }, - "supports-color": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz", - "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==", - "dev": true, - "requires": { - "has-flag": "2.0.0" - } - } - } - }, - "get-stdin": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz", - "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=", - "dev": true - }, - "globby": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", - "dev": true, - "requires": { - "array-union": "1.0.2", - "glob": "7.1.2", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" - } - }, - "has-flag": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", - "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", - "dev": true - }, - "postcss": { - "version": "5.2.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", - "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "js-base64": "2.1.9", - "source-map": "0.5.6", - "supports-color": "3.2.3" - }, - "dependencies": { - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "2.2.1", - "escape-string-regexp": "1.0.5", - "has-ansi": "2.0.0", - "strip-ansi": "3.0.1", - "supports-color": "2.0.0" - }, - "dependencies": { - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - } - } - }, - "postcss-scss": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-0.4.1.tgz", - "integrity": "sha1-rXcbgfD3L19IRdCKpg+TVXZT1Uw=", - "dev": true, - "requires": { - "postcss": "5.2.17" - } - }, - "resolve-from": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", - "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", - "dev": true - }, - "stylelint": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-7.13.0.tgz", - "integrity": "sha1-ER+Xttpy53XICADWu29fhpmXeF0=", - "dev": true, - "requires": { - "autoprefixer": "6.7.7", - "balanced-match": "0.4.2", - "chalk": "2.0.1", - "colorguard": "1.2.0", - "cosmiconfig": "2.1.3", - "debug": "2.6.8", - "doiuse": "2.6.0", - "execall": "1.0.0", - "file-entry-cache": "2.0.0", - "get-stdin": "5.0.1", - "globby": "6.1.0", - "globjoin": "0.1.4", - "html-tags": "2.0.0", - "ignore": "3.3.3", - "imurmurhash": "0.1.4", - "known-css-properties": "0.2.0", - "lodash": "4.17.4", - "log-symbols": "1.0.2", - "mathml-tag-names": "2.0.1", - "meow": "3.7.0", - "micromatch": "2.3.11", - "normalize-selector": "0.2.0", - "pify": "2.3.0", - "postcss": "5.2.17", - "postcss-less": "0.14.0", - "postcss-media-query-parser": "0.2.3", - "postcss-reporter": "3.0.0", - "postcss-resolve-nested-selector": "0.1.1", - "postcss-scss": "0.4.1", - "postcss-selector-parser": "2.2.3", - "postcss-value-parser": "3.3.0", - "resolve-from": "3.0.0", - "specificity": "0.3.1", - "string-width": "2.0.0", - "style-search": "0.1.0", - "stylehacks": "2.3.2", - "sugarss": "0.2.0", - "svg-tags": "1.0.0", - "table": "4.0.1" + "dot-prop": "4.1.1", + "indexes-of": "1.0.1", + "uniq": "1.0.1" } } } @@ -12926,29 +12165,6 @@ } } }, - "sugarss": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-0.2.0.tgz", - "integrity": "sha1-rDQjdWMyfG/4l7ZHQr9q7BkK054=", - "dev": true, - "requires": { - "postcss": "5.2.17" - }, - "dependencies": { - "postcss": { - "version": "5.2.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", - "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", - "dev": true, - "requires": { - "chalk": "1.1.3", - "js-base64": "2.1.9", - "source-map": "0.5.6", - "supports-color": "3.2.3" - } - } - } - }, "supports-color": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", @@ -12993,23 +12209,6 @@ "integrity": "sha1-cX0izFPwzh3vVZQ2LzqJouu5EQU=", "dev": true }, - "synesthesia": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/synesthesia/-/synesthesia-1.0.1.tgz", - "integrity": "sha1-XvlepUjA1cbm+btLDQcx3/hkp3c=", - "dev": true, - "requires": { - "css-color-names": "0.0.3" - }, - "dependencies": { - "css-color-names": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.3.tgz", - "integrity": "sha1-3gzvFvTYqoIioyDVttfpu62nufY=", - "dev": true - } - } - }, "syntax-error": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.3.0.tgz", @@ -14262,12 +13461,6 @@ "slide": "1.1.6" } }, - "write-file-stdout": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/write-file-stdout/-/write-file-stdout-0.0.2.tgz", - "integrity": "sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE=", - "dev": true - }, "ws": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz", diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md index 8bb1d3e9e66..32868e68aef 100644 --- a/packages/mdc-list/README.md +++ b/packages/mdc-list/README.md @@ -33,17 +33,20 @@ MDC Lists are designed to be accessible and RTL aware. ## Installation - ``` npm install --save @material/list ``` ## Usage -### Basic Lists +### HTML Structure +#### Single-Line List A basic list consists simply of the list itself, and list items taking up one line. +List items (rows) can contain primary and secondary actions. Lists items can contain 1 supporting graphic tile and/or 1 metadata tile that are positioned at the start and end of the list item, respectively. + + ```html
  • Single-line item
    • @@ -52,390 +55,125 @@ A basic list consists simply of the list itself, and list items taking up one li
``` -#### RTL Support - -A list will flip its direction if it is _placed within an ancestor element containing a `dir` -attribute with value `"rtl"`_. This applies to all lists regardless of type. - -```html - - -
    - -
  • פריט ברשימה
    • -
- -``` - -#### Dark Mode Support - -Like other MDC Web components, lists support dark mode either when an `mdc-list--theme-dark` class is -attached to the root element, or the element has an ancestor with class `mdc-theme--dark`. - -```html - - -
    -
  • A list item on a dark background
    • -
- -``` - -#### Non-interactive lists - -By default, list items receive styles for hover, focus, and press states (including the ripple effect if -`MDCRipple` is instantiated). It is possible to opt out of these styles by adding the `mdc-list--non-interactive` -modifier to the parent list. - -> **Note**: In order to receive focus state, list items must either use a focusable element such as ``, or have an -> explicit `tabindex` attribute value. - -### "Dense" Lists - -Lists can be made more compact by using the `mdc-list--dense` modifier class. - -```html -
    - -
-``` - -### Two-Line List Items - -While in theory you can add any number of "lines" to a list item, you can use the `mdc-list--two-line` combined with -some extra markup around the text to style a list in the two-line list style as defined by -[the spec](https://material.io/guidelines/components/lists.html#lists-specs) (see "Two-line lists"). +#### Two-Line List +While in theory you can add any number of "lines" to a list item, you can use the `mdc-list--two-line` combined with some extra markup around the text to style a list in the two-line list style as defined by [the spec](https://material.io/guidelines/components/lists.html#lists-specs) (see "Two-line lists"). ```html
  • - Two-line item - Secondary text + First-line text + + Second-line text +
    • -
-``` - -### List Item Tile Elements - -As mentioned in the spec, list items (rows) can contain primary and secondary actions. They can also contain -things such as avatars, icons, interactive controls, etc. We call all of these items *tiles*. Lists items -can contain 1 **supporting graphic** tile and/or 1 **metadata** tile that are positioned at the start -and end of the list item, respectively. These tiles are correctly flipped in RTL contexts. - -> _N.B._ Please keep accessibility in mind when using things such as icons / icon fonts for tile -> elements. Font Awesome has [excellent guidelines](http://fontawesome.io/accessibility/) for this. - -#### Adding a Supporting Graphic - -You can add a supporting graphic using an element with class `mdc-list-item__graphic` class. - -```html -
    -
  • - - Wi-Fi -
    • -
  • - - Bluetooth -
    • -
  • - - Data Usage -
    • -
-``` - -#### Making a Graphic an Avatar - -You can use the `mdc-list--avatar-list` modifier class to style the graphic elements as what -the spec calls "avatars" - large, circular tiles that lend themselves well to contact images, -profile pictures, etc. - -```html -

Contacts

-
    -
  • - Picture of Janet Perkins - Janet Perkins -
  • - Picture of Mary Johnson - Mary Johnson -
    • -
  • - Picture of Peter Carlsson - Peter Carlsson -
    • -
-``` - -#### Adding Metadata - -Metadata tiles can be added in a similar way to graphics. Place an element after the text -with a `mdc-list-item__meta` class. - -```html -

Contacts

- ``` -Supporting graphics and metadata can be combined easily. Check out the list demo for many examples of how -tiles can be configured. - -> NOTE: If using controls such as a switch within a list tile, you may need to override -> the width and height styles set on the tile element. - -### Using Ink Ripples for Interactive Lists - -MDC List supports adding ripples to `mdc-list-item` elements, for example in the case of a nav menu. -To add ripples to lists, simply attach a ripple to each list item. Note that this can be easily done -via `mdc-auto-init` when using [material-components-web](../material-components-web). - -```html - - -``` - -### List Dividers - -MDC List contains an `mdc-list-divider` class which can be used as full-width or inset -subdivisions either within lists themselves, or standalone between related groups of content. - -To use within lists, simply add the `mdc-list-divider` class to a list item. - -```html -
    -
  • Item 1 - Division 1
    • -
  • Item 2 - Division 1
    • -
  • Item 3 - Division 1
    • - -
  • Item 1 - Division 2
    • -
  • Item 1 - Division 2
    • -
-``` - -> Note the `role="separator"` attribute on the list divider. It is important to include this so that -> assistive technology can be made aware that this is a presentational element and is not meant to -> be included as an item in a list. Note that `separator` is indeed a -> [valid role](https://w3c.github.io/html/grouping-content.html#the-li-element) for `li` elements. - -Dividers are designed to span the full width of the list by default (especially useful in the context of drawers and menus). -To make a divider match the padding of list items, add the `mdc-list-divider--padded` modifier class. - -Inset dividers are useful when working with lists which have graphics. -To add an inset divider, also add the `mdc-list-divider--inset` modifier class to the divider element. - -### List Groups - -Multiple related lists can be grouped together using the `mdc-list-group` class on a containing -element. `mdc-list-divider` elements can be used in these groups _between_ lists to help -differentiate them. +#### List Groups +Multiple related lists can be grouped together using the `mdc-list-group` class on a containing element. ```html

List 1

    -
  • Single-line item
    • -
  • Single-line item
    • -
  • Single-line item
    • +
  • line item
    • +
  • line item
    • +
  • line item
-
-

List 2

    -
  • Single-line item
    • -
  • Single-line item
    • -
  • Single-line item
    • +
  • line item
    • +
  • line item
    • +
  • line item
``` -### Tips/Tricks - -#### Bordered Lists - -While hinted at within the spec, **bordered lists** - where each list item has a border around -it - are not officially part of the list component spec. However, they seem to be used -often in web applications, especially those suited more for desktop. The following example shows how -to add borders to lists. +#### List Dividers +MDC List contains an `mdc-list-divider` class which can be used as full-width or inset subdivisions either within lists themselves, or standalone between related groups of content. ```html - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • +
      +
    • Item 1 - Division 1
      • +
    • Item 2 - Division 1
      • + +
    • Item 1 - Division 2
      • +
    • Item 2 - Division 2
    ``` -#### Control Tile Positions - -In some cases, you may want the supporting graphic or metadata to be positioned differently than the center. -An example of this is in [this mock][pos-mock] showing a timestamp being positioned in the top-right corner -or a list item. You can easily do this by adding an `align-self` rule to the tiles you'd like -styled this way. For example, given a `timestamp` class for metadata: - -```css -.mdc-list-item__meta.timestamp { - /* Lock to top of container. */ - align-self: flex-start; -} -``` +> NOTE: the role="separator" attribute on the list divider. It is important to include this so that assistive technology can be made aware that this is a presentational element and is not meant to be included as an item in a list. Note that separator is indeed a valid role for li elements. -[pos-mock]: https://material-design.storage.googleapis.com/publish/material_v_9/0Bx4BSt6jniD7ckJuUHNnUVlVYTQ/components_lists_content1.png - -Alternatively, if you have _multiple_ items you'd like to put into a tile, you can give it `display: flex` and -`flex-direction: column`. This will allow you to stack items within a tile, one on top of another. - -For example, let's say you're building a messaging app and, naturally, you want a list of messages -as part of your UI. Your designer wants a timestamp in the top-right corner and an "unread" -indicator below it corner. - -The HTML for this can be easily added: +OR ```html -
      -
    • - - Ali Connors - Lunch this afternoon? I was... - - - - - chat_bubble - -
      • - +
        +
      • Item 1 - List 1
        • +
      • Item 2 - List 1
        • +
      +
      +
        +
      • Item 1 - List 2
        • +
      • Item 2 - List 2
      -``` - -And the basic CSS is relatively trivial: - -```css -.msgs-list .mdc-list-item__meta { - width: auto; - height: auto; - display: inline-flex; - flex-direction: column; - align-items: flex-end; -} ``` ### CSS Classes - -#### Blocks - -CSS Class | Description ---- | --- -`mdc-list` | A container for rows (`mdc-list-item`s) -`mdc-list-group` | Wraps one or more `mdc-list` and/or `mdc-list-divider` elements -`mdc-list-item` | An individual row in an `mdc-list` -`mdc-list-divider` | Separates two rows or two lists using a horizontal bar - -#### Modifiers - -CSS Class | Description ---- | --- -`mdc-list--dense` | Increases the density of the list, making it appear more compact -`mdc-list--avatar-list` | Configures the leading tiles of each row to display images instead of icons -`mdc-list--two-line` | Increases the height of the row to give it greater visual separation from adjacent rows -`mdc-list-item--selected` | Styles the row in a selected\* state -`mdc-list-item--activated` | Styles the row in an activated\* state -`mdc-list-divider--inset` | Increases the leading margin of the divider so that it does not intersect the avatar column - -\* **Note**: the difference between _selected_ and _activated_ states: - -- _Selected_ is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos. - Multiple items in a list can be _selected_ at the same time. -- _Activated_ is more permanent within the page's lifetime. E.g., the currently highlighted destination in a nav drawer. - Only one item in a list can be _activated_ at a time. - -#### Elements - CSS Class | Description --- | --- -`mdc-list-item__graphic` | The first tile in the row (in LTR languages, the left-most) -`mdc-list-item__meta` | The last tile in the row (in LTR languages, the right-most) -`mdc-list-item__text` | Primary text for the row (displayed as the middle tile) -`mdc-list-item__secondary-text` | Secondary text for the row (displayed in the middle tile) -`mdc-list-group__subheader` | Heading text displayed above each list in a group +`mdc-list` | Mandatory, for the list element +`mdc-list--non-interactive` | Optional, disables interactivity affordances +`mdc-list--dense` | Optional, styles the density of the list, making it appear more compact +`mdc-list--avatar-list` | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger +`mdc-list--two-line` | Optional, modifier to style list with two lines (primary and secondary lines) +`mdc-list-item` | Mandatory, for the list item element +`mdc-list-item__text` | Optional, primary text for the row (displayed as middle column of the list item) +`mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text` +`mdc-list-item--selected` | Optional, styles the row in an selected* state +`mdc-list-item--activated` | Optional, styles the row in an activated* state +`mdc-list-item__graphic` | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image. +`mdc-list-item__meta` | Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image. +`mdc-list-group` | Optional, wrapper around two or more mdc-list elements to be grouped together +`mdc-list-group__subheader` | Optional, heading text displayed above each list in a group +`mdc-list-divider` | Optional, for list divider element +`mdc-list-divider--padded` | Optional, leaves gaps on each side of divider to match padding of `list-item__meta` +`mdc-list-divider--inset` | Optional, increases the leading margin of the divider so that it does not intersect the avatar column + +> NOTE: `mdc-list-divider` class can be used between list items (example 1) *OR* between two lists (example 2) + +> NOTE: the difference between selected and activated states: + +* *Selected* state should be implemented on the `.list-item` when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos. +* Multiple items can be selected at the same time when using the *selected* state +* *Activated* state is similar to selected state, however should only be implemented once within a specific list. +* *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page. ### Sass Mixins - Mixin | Description --- | --- -`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text -`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text -`mdc-list-item-graphic-fill-color($color)` | Sets the fill color of the supporting graphic -`mdc-list-item-graphic-ink-color($color)` | Sets the ink color of the supporting graphic -`mdc-list-item-meta-ink-color($color)` | Sets the ink color of the metadata element -`mdc-list-divider-color($color)` | Sets the color of the divider -`mdc-list-group-subheader-ink-color($color)` | Sets the ink color of the list group subheader +`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text of the list item +`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text of the list item +`mdc-list-item-graphic-fill-color($color)` | Sets background ink color of the graphic element within list item +`mdc-list-item-graphic-ink-color($color)` | Sets ink color of the graphic element within list item +`mdc-list-item-meta-ink-color($color)` | Sets ink color of the meta element within list item +`mdc-list-divider-color($color)` | Sets divider ink color +`mdc-list-group-subheader-ink-color($color)` | Sets ink color of subheader text within list group