material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-27 06:04:44 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into radio-ring

Browse Source
This commit is contained in:
Elliott Marquez 2019-12-04 19:07:11 +11:00 committed by GitHub
commit 999cc8288f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 90 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -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

6
packages/base/package.json
View File

@ -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"
},

2
packages/button/package.json
View File

@ -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",

45
packages/checkbox/README.md
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

BIN
packages/checkbox/images/color_0,0,0,54.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

BIN
packages/checkbox/images/color_000.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

BIN
packages/checkbox/images/color_fff.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

BIN
packages/checkbox/images/standard_disabled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
packages/checkbox/images/standard_disabled_styled.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.6 KiB

BIN
packages/checkbox/images/styled_standard_disabled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

2
packages/checkbox/package.json
View File

@ -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",

15
packages/checkbox/src/mwc-checkbox.scss
View File

@ -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}));

6
packages/dialog/package.json
View File

@ -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",

2
packages/drawer/package.json
View File

@ -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",

2
packages/fab/package.json
View File

@ -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",

2
packages/floating-label/package.json
View File

@ -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"

2
packages/formfield/package.json
View File

@ -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",

2
packages/icon-button-toggle/package.json
View File

@ -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",

2
packages/icon-button/package.json
View File

@ -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",

2
packages/line-ripple/package.json
View File

@ -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"

2
packages/linear-progress/package.json
View File

@ -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"

6
packages/notched-outline/package.json
View File

@ -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"
},

2
packages/radio/package.json
View File

@ -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"
},

4
packages/ripple/package.json
View File

@ -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"

2
packages/slider/package.json
View File

@ -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"

2
packages/snackbar/package.json
View File

@ -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"

2
packages/switch/package.json
View File

@ -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"
},

2
packages/tab-bar/package.json
View File

@ -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"
},

2
packages/tab-indicator/package.json
View File

@ -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"

4
packages/tab-scroller/package.json
View File

@ -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"
},

2
packages/tab/package.json
View File

@ -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"

2
packages/textarea/package.json
View File

@ -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
packages/textfield/package.json
View File

@ -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"

2
packages/top-app-bar-fixed/package.json
View File

@ -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"
},

2
packages/top-app-bar/package.json
View File

@ -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"