diff --git a/CHANGELOG.md b/CHANGELOG.md index ef24e5461..8ea65b080 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ### Added - Added custom properties to style `mwc-radio`'s colors +- Added custom properties to style `mwc-checkbox`'s colors ### Fixed @@ -19,6 +20,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - **BREAKING** `mwc-tab` can now only have slotted content via the `hasImageIcon` flag. +- **BREAKING:VISUAL** `mwc-checkbox` default display is changed from inline to inline-block. ## [0.11.1] - 2019-11-26 diff --git a/packages/base/package.json b/packages/base/package.json index 97b02cf74..d851efff7 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -9,9 +9,9 @@ }, "license": "Apache-2.0", "dependencies": { - "@material/base": "=5.0.0-canary.f978109c3.0", - "@material/dom": "=5.0.0-canary.f978109c3.0", - "@material/ripple": "=5.0.0-canary.f978109c3.0", + "@material/base": "=5.0.0-canary.a5dbd8a2a.0", + "@material/dom": "=5.0.0-canary.a5dbd8a2a.0", + "@material/ripple": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "tslib": "^1.10.0" }, diff --git a/packages/button/package.json b/packages/button/package.json index bbf64bb45..9d235059e 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -15,7 +15,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/button": "=5.0.0-canary.f978109c3.0", + "@material/button": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "@material/mwc-icon": "^0.11.1", "@material/mwc-ripple": "^0.11.1", diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md index a3c5d06c4..9ea645434 100644 --- a/packages/checkbox/README.md +++ b/packages/checkbox/README.md @@ -40,9 +40,9 @@ npm install @material/mwc-checkbox ``` -### Standard, disabled, and custom styles +### Standard, disabled - + ```html
@@ -56,16 +56,36 @@ npm install @material/mwc-checkbox
+``` + +### Styled standard, disabled + + + +```html +
- - - - + + + +
+ +
+ + +
``` @@ -133,6 +153,11 @@ Name | Type | Default | Description | Name | Default | Description | | ----------------------- | --------- | ----------------------------------- | | `--mdc-theme-secondary` | ![](images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo. +| `--mdc-theme-on-surface` | ![](images/color_000.png) `#000` | Color of the unchecked focus ripple. +| `--mdc-checkbox-mark-color` | ![](images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled). +| `--mdc-checkbox-unchecked-color` | ![](images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box. +| `--mdc-checkbox-disabled-color` | ![](images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled. + ## Additional references diff --git a/packages/checkbox/images/color_0,0,0,38.png b/packages/checkbox/images/color_0,0,0,38.png new file mode 100644 index 000000000..96a8734c5 Binary files /dev/null and b/packages/checkbox/images/color_0,0,0,38.png differ diff --git a/packages/checkbox/images/color_0,0,0,54.png b/packages/checkbox/images/color_0,0,0,54.png new file mode 100644 index 000000000..7872de775 Binary files /dev/null and b/packages/checkbox/images/color_0,0,0,54.png differ diff --git a/packages/checkbox/images/color_000.png b/packages/checkbox/images/color_000.png new file mode 100644 index 000000000..7b190bd82 Binary files /dev/null and b/packages/checkbox/images/color_000.png differ diff --git a/packages/checkbox/images/color_fff.png b/packages/checkbox/images/color_fff.png new file mode 100644 index 000000000..66473cd4e Binary files /dev/null and b/packages/checkbox/images/color_fff.png differ diff --git a/packages/checkbox/images/standard_disabled.png b/packages/checkbox/images/standard_disabled.png new file mode 100644 index 000000000..4b8581b23 Binary files /dev/null and b/packages/checkbox/images/standard_disabled.png differ diff --git a/packages/checkbox/images/standard_disabled_styled.png b/packages/checkbox/images/standard_disabled_styled.png deleted file mode 100644 index e04257c14..000000000 Binary files a/packages/checkbox/images/standard_disabled_styled.png and /dev/null differ diff --git a/packages/checkbox/images/styled_standard_disabled.png b/packages/checkbox/images/styled_standard_disabled.png new file mode 100644 index 000000000..593e5c458 Binary files /dev/null and b/packages/checkbox/images/styled_standard_disabled.png differ diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index ed9334864..455921010 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -15,7 +15,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/checkbox": "=5.0.0-canary.f978109c3.0", + "@material/checkbox": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "@material/mwc-ripple": "^0.11.1", "lit-element": "^2.2.1", diff --git a/packages/checkbox/src/mwc-checkbox.scss b/packages/checkbox/src/mwc-checkbox.scss index 6eeca642c..bdbc8d77f 100644 --- a/packages/checkbox/src/mwc-checkbox.scss +++ b/packages/checkbox/src/mwc-checkbox.scss @@ -21,4 +21,19 @@ limitations under the License. :host { outline: none; + display: inline-block; } + +.mdc-checkbox { + .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before { + background-color: var(--mdc-checkbox-unchecked-color, #{$mdc-checkbox-border-color}); + } +} + +@include mdc-checkbox-disabled-container-colors( + $unmarked-stroke-color: var(--mdc-checkbox-disabled-color, #{$mdc-checkbox-disabled-color}), + $marked-fill-color: var(--mdc-checkbox-disabled-color, #{$mdc-checkbox-disabled-color}), +); +@include mdc-checkbox-container-colors($unmarked-stroke-color: var(--mdc-checkbox-unchecked-color, #{$mdc-checkbox-border-color})); +@include mdc-checkbox-ink-color(var(--mdc-checkbox-mark-color, #{$mdc-checkbox-mark-color})); +@include mdc-checkbox-disabled-ink-color(var(--mdc-checkbox-mark-color, #{$mdc-checkbox-mark-color})); diff --git a/packages/dialog/package.json b/packages/dialog/package.json index 937a3392a..04579a0fe 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -15,10 +15,10 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/dialog": "=5.0.0-canary.f978109c3.0", - "@material/dom": "=5.0.0-canary.f978109c3.0", + "@material/dialog": "=5.0.0-canary.a5dbd8a2a.0", + "@material/dom": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", - "@material/touch-target": "=5.0.0-canary.f978109c3.0", + "@material/touch-target": "=5.0.0-canary.a5dbd8a2a.0", "blocking-elements": "^0.1.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", diff --git a/packages/drawer/package.json b/packages/drawer/package.json index cd7d3f9b1..bbfc3e952 100644 --- a/packages/drawer/package.json +++ b/packages/drawer/package.json @@ -16,7 +16,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/drawer": "=5.0.0-canary.f978109c3.0", + "@material/drawer": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "blocking-elements": "^0.1.0", "lit-element": "^2.2.1", diff --git a/packages/fab/package.json b/packages/fab/package.json index d13985630..689fa4eff 100644 --- a/packages/fab/package.json +++ b/packages/fab/package.json @@ -15,7 +15,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/fab": "=5.0.0-canary.f978109c3.0", + "@material/fab": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "@material/mwc-icon": "^0.11.1", "@material/mwc-ripple": "^0.11.1", diff --git a/packages/floating-label/package.json b/packages/floating-label/package.json index afb882a9a..d103ea6dc 100644 --- a/packages/floating-label/package.json +++ b/packages/floating-label/package.json @@ -12,7 +12,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/floating-label": "=5.0.0-canary.f978109c3.0", + "@material/floating-label": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/formfield/package.json b/packages/formfield/package.json index b67d25b30..abdf3188f 100644 --- a/packages/formfield/package.json +++ b/packages/formfield/package.json @@ -15,7 +15,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/form-field": "=5.0.0-canary.f978109c3.0", + "@material/form-field": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "lit-element": "^2.2.1", "lit-html": "^1.1.2", diff --git a/packages/icon-button-toggle/package.json b/packages/icon-button-toggle/package.json index 0c3e0008d..36f3079f8 100644 --- a/packages/icon-button-toggle/package.json +++ b/packages/icon-button-toggle/package.json @@ -15,7 +15,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/icon-button": "=5.0.0-canary.f978109c3.0", + "@material/icon-button": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "@material/mwc-icon": "^0.11.1", "@material/mwc-icon-button": "^0.11.1", diff --git a/packages/icon-button/package.json b/packages/icon-button/package.json index 09a24ec5f..287ffde76 100644 --- a/packages/icon-button/package.json +++ b/packages/icon-button/package.json @@ -15,7 +15,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/icon-button": "=5.0.0-canary.f978109c3.0", + "@material/icon-button": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "@material/mwc-icon": "^0.11.1", "@material/mwc-ripple": "^0.11.1", diff --git a/packages/line-ripple/package.json b/packages/line-ripple/package.json index 83e6d93b5..249dd700e 100644 --- a/packages/line-ripple/package.json +++ b/packages/line-ripple/package.json @@ -12,7 +12,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/line-ripple": "=5.0.0-canary.f978109c3.0", + "@material/line-ripple": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/linear-progress/package.json b/packages/linear-progress/package.json index 1725a2db2..aab22d3f0 100644 --- a/packages/linear-progress/package.json +++ b/packages/linear-progress/package.json @@ -15,7 +15,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/linear-progress": "=5.0.0-canary.f978109c3.0", + "@material/linear-progress": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "lit-element": "^2.2.1", "tslib": "^1.10.0" diff --git a/packages/notched-outline/package.json b/packages/notched-outline/package.json index 3b3276518..e235b30ac 100644 --- a/packages/notched-outline/package.json +++ b/packages/notched-outline/package.json @@ -16,9 +16,9 @@ "license": "Apache-2.0", "dependencies": { "@material/mwc-base": "^0.11.1", - "@material/notched-outline": "=5.0.0-canary.f978109c3.0", - "@material/shape": "=5.0.0-canary.f978109c3.0", - "@material/theme": "=5.0.0-canary.f978109c3.0", + "@material/notched-outline": "=5.0.0-canary.a5dbd8a2a.0", + "@material/shape": "=5.0.0-canary.a5dbd8a2a.0", + "@material/theme": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "tslib": "^1.10.0" }, diff --git a/packages/radio/package.json b/packages/radio/package.json index 91650b378..ce8cc43c2 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -17,7 +17,7 @@ "dependencies": { "@material/mwc-base": "^0.11.1", "@material/mwc-ripple": "^0.11.1", - "@material/radio": "=5.0.0-canary.f978109c3.0", + "@material/radio": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "tslib": "^1.10.0" }, diff --git a/packages/ripple/package.json b/packages/ripple/package.json index 39bad4b2b..8f991a7ff 100644 --- a/packages/ripple/package.json +++ b/packages/ripple/package.json @@ -15,9 +15,9 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/dom": "=5.0.0-canary.f978109c3.0", + "@material/dom": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", - "@material/ripple": "=5.0.0-canary.f978109c3.0", + "@material/ripple": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/slider/package.json b/packages/slider/package.json index a223f95b8..9e7a1ccae 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -16,7 +16,7 @@ "license": "Apache-2.0", "dependencies": { "@material/mwc-base": "^0.11.1", - "@material/slider": "=5.0.0-canary.f978109c3.0", + "@material/slider": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/snackbar/package.json b/packages/snackbar/package.json index 9fe3b6693..2a502c07b 100644 --- a/packages/snackbar/package.json +++ b/packages/snackbar/package.json @@ -16,7 +16,7 @@ "license": "Apache-2.0", "dependencies": { "@material/mwc-base": "^0.11.1", - "@material/snackbar": "=5.0.0-canary.f978109c3.0", + "@material/snackbar": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/switch/package.json b/packages/switch/package.json index e869f212d..c06d29a49 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -14,7 +14,7 @@ "dependencies": { "@material/mwc-base": "^0.11.1", "@material/mwc-ripple": "^0.11.1", - "@material/switch": "=5.0.0-canary.f978109c3.0", + "@material/switch": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "tslib": "^1.10.0" }, diff --git a/packages/tab-bar/package.json b/packages/tab-bar/package.json index 9ae91afe2..c2182ba7f 100644 --- a/packages/tab-bar/package.json +++ b/packages/tab-bar/package.json @@ -19,7 +19,7 @@ "@material/mwc-base": "^0.11.1", "@material/mwc-tab": "^0.11.1", "@material/mwc-tab-scroller": "^0.11.1", - "@material/tab-bar": "=5.0.0-canary.f978109c3.0", + "@material/tab-bar": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "tslib": "^1.10.0" }, diff --git a/packages/tab-indicator/package.json b/packages/tab-indicator/package.json index 133da17d1..e7c28a3fc 100644 --- a/packages/tab-indicator/package.json +++ b/packages/tab-indicator/package.json @@ -17,7 +17,7 @@ "license": "Apache-2.0", "dependencies": { "@material/mwc-base": "^0.11.1", - "@material/tab-indicator": "=5.0.0-canary.f978109c3.0", + "@material/tab-indicator": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/tab-scroller/package.json b/packages/tab-scroller/package.json index 3f919130b..7e5ddf1db 100644 --- a/packages/tab-scroller/package.json +++ b/packages/tab-scroller/package.json @@ -16,9 +16,9 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/dom": "=5.0.0-canary.f978109c3.0", + "@material/dom": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", - "@material/tab-scroller": "=5.0.0-canary.f978109c3.0", + "@material/tab-scroller": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "tslib": "^1.10.0" }, diff --git a/packages/tab/package.json b/packages/tab/package.json index 14c32c9c4..2ad0292ff 100644 --- a/packages/tab/package.json +++ b/packages/tab/package.json @@ -20,7 +20,7 @@ "@material/mwc-icon": "^0.11.1", "@material/mwc-ripple": "^0.11.1", "@material/mwc-tab-indicator": "^0.11.1", - "@material/tab": "=5.0.0-canary.f978109c3.0", + "@material/tab": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/textarea/package.json b/packages/textarea/package.json index 48f35dd5c..533bf051b 100644 --- a/packages/textarea/package.json +++ b/packages/textarea/package.json @@ -12,7 +12,7 @@ "dependencies": { "@material/mwc-base": "^0.11.1", "@material/mwc-textfield": "^0.11.1", - "@material/textfield": "=5.0.0-canary.f978109c3.0", + "@material/textfield": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/textfield/package.json b/packages/textfield/package.json index cca6562b8..4fec0d940 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -10,16 +10,16 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "@material/floating-label": "=5.0.0-canary.f978109c3.0", - "@material/line-ripple": "=5.0.0-canary.f978109c3.0", + "@material/floating-label": "=5.0.0-canary.a5dbd8a2a.0", + "@material/line-ripple": "=5.0.0-canary.a5dbd8a2a.0", "@material/mwc-base": "^0.11.1", "@material/mwc-floating-label": "^0.11.1", "@material/mwc-icon": "^0.11.1", "@material/mwc-line-ripple": "^0.11.1", "@material/mwc-notched-outline": "^0.11.1", - "@material/shape": "=5.0.0-canary.f978109c3.0", - "@material/textfield": "=5.0.0-canary.f978109c3.0", - "@material/theme": "=5.0.0-canary.f978109c3.0", + "@material/shape": "=5.0.0-canary.a5dbd8a2a.0", + "@material/textfield": "=5.0.0-canary.a5dbd8a2a.0", + "@material/theme": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0" diff --git a/packages/top-app-bar-fixed/package.json b/packages/top-app-bar-fixed/package.json index 202b9fb84..c90e5645d 100644 --- a/packages/top-app-bar-fixed/package.json +++ b/packages/top-app-bar-fixed/package.json @@ -18,7 +18,7 @@ "dependencies": { "@material/mwc-base": "^0.11.1", "@material/mwc-top-app-bar": "^0.11.1", - "@material/top-app-bar": "=5.0.0-canary.f978109c3.0", + "@material/top-app-bar": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "tslib": "^1.10.0" }, diff --git a/packages/top-app-bar/package.json b/packages/top-app-bar/package.json index 830cde80a..60294771b 100644 --- a/packages/top-app-bar/package.json +++ b/packages/top-app-bar/package.json @@ -17,7 +17,7 @@ "license": "Apache-2.0", "dependencies": { "@material/mwc-base": "^0.11.1", - "@material/top-app-bar": "=5.0.0-canary.f978109c3.0", + "@material/top-app-bar": "=5.0.0-canary.a5dbd8a2a.0", "lit-element": "^2.2.1", "lit-html": "^1.1.2", "tslib": "^1.10.0"