From 363562f3e63eb7a9a96eee8268d2d1e1f8fd6dd7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 22 Aug 2017 23:07:33 +0200 Subject: [PATCH] fix(snack-bar): align theming with spec (#6506) --- src/lib/core/theming/_all-theme.scss | 4 +-- src/lib/core/typography/_all-typography.scss | 4 +-- .../snack-bar/_simple-snack-bar-theme.scss | 21 ------------ src/lib/snack-bar/_snack-bar-theme.scss | 34 +++++++++++++++++++ src/lib/snack-bar/simple-snack-bar.scss | 2 -- src/lib/snack-bar/snack-bar-container.scss | 5 +-- src/lib/snack-bar/snack-bar-container.ts | 5 ++- 7 files changed, 43 insertions(+), 32 deletions(-) delete mode 100644 src/lib/snack-bar/_simple-snack-bar-theme.scss create mode 100644 src/lib/snack-bar/_snack-bar-theme.scss diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss index f442ef708e0..4f808fca5ef 100644 --- a/src/lib/core/theming/_all-theme.scss +++ b/src/lib/core/theming/_all-theme.scss @@ -26,7 +26,7 @@ @import '../../tabs/tabs-theme'; @import '../../toolbar/toolbar-theme'; @import '../../tooltip/tooltip-theme'; -@import '../../snack-bar/simple-snack-bar-theme'; +@import '../../snack-bar/snack-bar-theme'; @import '../../form-field/form-field-theme'; @@ -60,5 +60,5 @@ @include mat-tabs-theme($theme); @include mat-toolbar-theme($theme); @include mat-tooltip-theme($theme); - @include mat-simple-snack-bar-theme($theme); + @include mat-snack-bar-theme($theme); } diff --git a/src/lib/core/typography/_all-typography.scss b/src/lib/core/typography/_all-typography.scss index 35e77fd257e..4935de608bd 100644 --- a/src/lib/core/typography/_all-typography.scss +++ b/src/lib/core/typography/_all-typography.scss @@ -25,7 +25,7 @@ @import '../../tabs/tabs-theme'; @import '../../toolbar/toolbar-theme'; @import '../../tooltip/tooltip-theme'; -@import '../../snack-bar/simple-snack-bar-theme'; +@import '../../snack-bar/snack-bar-theme'; @import '../option/option-theme'; @import '../option/optgroup-theme'; @import '../../form-field/form-field-theme'; @@ -67,5 +67,5 @@ @include mat-list-typography($config); @include mat-option-typography($config); @include mat-optgroup-typography($config); - @include mat-simple-snack-bar-typography($config); + @include mat-snack-bar-typography($config); } diff --git a/src/lib/snack-bar/_simple-snack-bar-theme.scss b/src/lib/snack-bar/_simple-snack-bar-theme.scss deleted file mode 100644 index 78ed2c8dd81..00000000000 --- a/src/lib/snack-bar/_simple-snack-bar-theme.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import '../core/typography/typography-utils'; - -@mixin mat-simple-snack-bar-theme($theme) { } - -@mixin mat-simple-snack-bar-typography($config) { - .mat-simple-snackbar { - font: { - family: mat-font-family($config, body-1); - size: mat-font-size($config, body-1); - } - } - - .mat-simple-snackbar-action { - line-height: 1; - font: { - family: inherit; - size: inherit; - weight: mat-font-weight($config, button); - } - } -} diff --git a/src/lib/snack-bar/_snack-bar-theme.scss b/src/lib/snack-bar/_snack-bar-theme.scss new file mode 100644 index 00000000000..d24ee5785bc --- /dev/null +++ b/src/lib/snack-bar/_snack-bar-theme.scss @@ -0,0 +1,34 @@ +@import '../core/typography/typography-utils'; +@import '../core/theming/palette'; + +@mixin mat-snack-bar-theme($theme) { + $is-dark-theme: map-get($theme, is-dark); + $accent: map-get($theme, accent); + + .mat-snack-bar-container { + background: if($is-dark-theme, map-get($mat-grey, 50), #323232); + color: if($is-dark-theme, $black-87-opacity, white); + } + + .mat-simple-snackbar-action { + color: if($is-dark-theme, inherit, mat-color($accent)); + } +} + +@mixin mat-snack-bar-typography($config) { + .mat-simple-snackbar { + font: { + family: mat-font-family($config, body-1); + size: mat-font-size($config, body-1); + } + } + + .mat-simple-snackbar-action { + line-height: 1; + font: { + family: inherit; + size: inherit; + weight: mat-font-weight($config, button); + } + } +} diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss index c4a29cd4c73..f052fe4d29f 100644 --- a/src/lib/snack-bar/simple-snack-bar.scss +++ b/src/lib/snack-bar/simple-snack-bar.scss @@ -7,7 +7,6 @@ $mat-snack-bar-button-margin: 48px !default; .mat-simple-snackbar { display: flex; justify-content: space-between; - color: white; line-height: 20px; } @@ -15,7 +14,6 @@ $mat-snack-bar-button-margin: 48px !default; @include mat-button-reset; background: none; - color: inherit; flex-shrink: 0; margin-left: $mat-snack-bar-button-margin; diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss index 3617296df81..0ffe0b93b79 100644 --- a/src/lib/snack-bar/snack-bar-container.scss +++ b/src/lib/snack-bar/snack-bar-container.scss @@ -1,4 +1,3 @@ -@import '../core/style/elevation'; @import '../core/a11y/a11y'; $mat-snack-bar-padding: 14px 24px !default; @@ -6,9 +5,7 @@ $mat-snack-bar-min-width: 288px !default; $mat-snack-bar-max-width: 568px !default; -:host { - @include mat-elevation(6); - background: #323232; +.mat-snack-bar-container { border-radius: 2px; box-sizing: content-box; display: block; diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts index da5c2d1df69..9ae28dc0cfb 100644 --- a/src/lib/snack-bar/snack-bar-container.ts +++ b/src/lib/snack-bar/snack-bar-container.ts @@ -15,7 +15,8 @@ import { OnDestroy, Renderer2, ElementRef, - ChangeDetectionStrategy + ChangeDetectionStrategy, + ViewEncapsulation, } from '@angular/core'; import { trigger, @@ -53,8 +54,10 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)'; templateUrl: 'snack-bar-container.html', styleUrls: ['snack-bar-container.css'], changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, host: { 'role': 'alert', + 'class': 'mat-snack-bar-container', '[@state]': 'animationState', '(@state.done)': 'onAnimationEnd($event)' },