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.
- Fix layout issue affecting scrolling `<mwc-tab-bar>` in Firefox.
- 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
- 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/mwc-icon.js"></script>
<link rel="stylesheet" href="demo-component.css">
<style>
#actionButton {
--mdc-theme-on-primary: black;
--mdc-theme-primary: #bb86fc;
}
#iconButton {
color: white;
}
</style>
</head>
<body class="unresolved">
<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
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};
}