diff --git a/src/components/toolbar/toolbar-theme.scss b/src/components/toolbar/toolbar-theme.scss index e8ca6fe787d..cc34687abca 100644 --- a/src/components/toolbar/toolbar-theme.scss +++ b/src/components/toolbar/toolbar-theme.scss @@ -4,12 +4,23 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) { md-icon { color: '{{primary-contrast}}'; + fill: '{{primary-contrast}}'; } &.md-accent { background-color: '{{accent-color}}'; color: '{{accent-contrast}}'; + + .md-ink-ripple { + color: '{{accent-contrast}}'; + } + + md-icon { + color: '{{accent-contrast}}'; + fill: '{{accent-contrast}}'; + } } + &.md-warn { background-color: '{{warn-color}}'; color: '{{warn-contrast}}'; diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index 8de1d50112a..0e40407c976 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -30,6 +30,9 @@ md-toolbar { min-height: $baseline-grid * 8; width: 100%; + transition: $swift-ease-in-out; + transition-property: background-color, fill, color; + &.md-whiteframe-z1-add, &.md-whiteframe-z1-remove { transition: box-shadow $swift-ease-in-out-duration linear; } @@ -111,6 +114,11 @@ md-toolbar { .md-button { margin-top: 0; margin-bottom: 0; + + &, &.md-icon-button md-icon { + transition: $swift-ease-in-out; + transition-property: background-color, fill, color; + } } &> .md-button:first-child { margin-left: $icon-button-margin-offset;