From d1267504e7c27a9681d60c79fd4bc0ac0d372f83 Mon Sep 17 00:00:00 2001 From: Alexander Marks Date: Thu, 8 Aug 2019 20:03:30 -0700 Subject: [PATCH] Fix default action/dismiss button styles. Adds rules which apply the correct default color and icon size to and in the "action" and "dismiss" slots. Adds --mdc-snackbar-action-color to override the default color of the action button text. --- CHANGELOG.md | 3 +++ demos/snackbar.html | 9 --------- packages/snackbar/src/mwc-snackbar.scss | 11 ++++++++++- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52b0dc5551..b14331ba73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/). fonts.googleapis.com. - Fix layout issue affecting scrolling `` in Firefox. - Fix bug where `` icons did not render in IE11. +- Buttons slotted into `` 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 diff --git a/demos/snackbar.html b/demos/snackbar.html index af48dbd54f..a2fbf96e0d 100644 --- a/demos/snackbar.html +++ b/demos/snackbar.html @@ -25,15 +25,6 @@ -
diff --git a/packages/snackbar/src/mwc-snackbar.scss b/packages/snackbar/src/mwc-snackbar.scss index 5c6da6a407..028afac20d 100644 --- a/packages/snackbar/src/mwc-snackbar.scss +++ b/packages/snackbar/src/mwc-snackbar.scss @@ -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'; \ No newline at end of file +@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}; +}