Merge branch 'master' into radio-ring
@ -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
|
||||
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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",
|
||||
|
@ -40,9 +40,9 @@ npm install @material/mwc-checkbox
|
||||
</script>
|
||||
```
|
||||
|
||||
### Standard, disabled, and custom styles
|
||||
### Standard, disabled
|
||||
|
||||
<img src="images/standard_disabled_styled.png" width="132px" height="123px">
|
||||
<img src="images/standard_disabled.png" height="80px">
|
||||
|
||||
```html
|
||||
<div>
|
||||
@ -56,16 +56,36 @@ npm install @material/mwc-checkbox
|
||||
<mwc-checkbox disabled checked></mwc-checkbox>
|
||||
<mwc-checkbox disabled indeterminate></mwc-checkbox>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Styled standard, disabled
|
||||
|
||||
<img src="images/styled_standard_disabled.png" height="80px">
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #363636;
|
||||
|
||||
--mdc-theme-secondary: #ff2929;
|
||||
--mdc-checkbox-unchecked-color: white;
|
||||
/* Required for unchecked focus ripple */
|
||||
--mdc-theme-on-surface: white;
|
||||
--mdc-checkbox-disabled-color: #adadad;
|
||||
--mdc-checkbox-mark-color: #363636;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<style>
|
||||
mwc-checkbox.pink {
|
||||
--mdc-theme-secondary: #e91e63;
|
||||
}
|
||||
</style>
|
||||
<mwc-checkbox class="pink"></mwc-checkbox>
|
||||
<mwc-checkbox class="pink" checked></mwc-checkbox>
|
||||
<mwc-checkbox class="pink" indeterminate></mwc-checkbox>
|
||||
<mwc-checkbox></mwc-checkbox>
|
||||
<mwc-checkbox checked></mwc-checkbox>
|
||||
<mwc-checkbox indeterminate></mwc-checkbox>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mwc-checkbox disabled></mwc-checkbox>
|
||||
<mwc-checkbox disabled checked></mwc-checkbox>
|
||||
<mwc-checkbox disabled indeterminate></mwc-checkbox>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -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
|
||||
|
||||
|
BIN
packages/checkbox/images/color_0,0,0,38.png
Normal file
After Width: | Height: | Size: 82 B |
BIN
packages/checkbox/images/color_0,0,0,54.png
Normal file
After Width: | Height: | Size: 82 B |
BIN
packages/checkbox/images/color_000.png
Normal file
After Width: | Height: | Size: 82 B |
BIN
packages/checkbox/images/color_fff.png
Normal file
After Width: | Height: | Size: 82 B |
BIN
packages/checkbox/images/standard_disabled.png
Normal file
After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 8.6 KiB |
BIN
packages/checkbox/images/styled_standard_disabled.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
@ -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",
|
||||
|
@ -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}));
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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"
|
||||
|