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

Fix <mwc-snackbar> default action/dismiss button styles.

Browse Source 
Adds rules which apply the correct default color and icon size to
<mwc-button> and <mwc-icon-button> in the "action" and "dismiss" slots.

Adds --mdc-snackbar-action-color to override the default color of the
action button text.
This commit is contained in:
Alexander Marks 2019-08-08 20:03:30 -07:00
parent dad4d1456f
commit d1267504e7
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
fonts.googleapis.com. fonts.googleapis.com.
- Fix layout issue affecting scrolling `<mwc-tab-bar>` in Firefox. - Fix layout issue affecting scrolling `<mwc-tab-bar>` in Firefox.
- Fix bug where `<mwc-icon>` icons did not render in IE11. - Fix bug where `<mwc-icon>` icons did not render in IE11.
- Buttons slotted into `<mwc-snackbar>` now render with correct default styles.
Add `--mdc-snackbar-action-color` CSS custom property to override default
action button color.
## [0.6.0] - 2019-06-05 ## [0.6.0] - 2019-06-05
- Upgrade lerna to 3.x - Upgrade lerna to 3.x

9
demos/snackbar.html
View File

@ -25,15 +25,6 @@ limitations under the License.
<script type="module" src="../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script> <script type="module" src="../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script> <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
<link rel="stylesheet" href="demo-component.css"> <link rel="stylesheet" href="demo-component.css">
<style>
#actionButton {
--mdc-theme-on-primary: black;
--mdc-theme-primary: #bb86fc;
}
#iconButton {
color: white;
}
</style>
</head> </head>
<body class="unresolved"> <body class="unresolved">
<header> <header>

11
packages/snackbar/src/mwc-snackbar.scss
View File

@ -14,4 +14,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
@import '@material/snackbar/mdc-snackbar.scss'; @import '@material/snackbar/mdc-snackbar.scss';
slot[name=action]::slotted(mwc-button) {
--mdc-theme-primary: var(--mdc-snackbar-action-color, #{$mdc-snackbar-action-ink-color});
}
slot[name=dismiss]::slotted(mwc-icon-button) {
--mdc-icon-size: #{$mdc-snackbar-dismiss-icon-size};
color: #{$mdc-snackbar-dismiss-ink-color};
}