refactor(banner): bundle styles with component (#15467)

Author: simeonoff

projects/igniteui-angular/src/lib/banner/banner.component.scss

@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';

projects/igniteui-angular/src/lib/banner/banner.component.ts

@@ -6,7 +6,8 @@ import {
     HostBinding,
     Input,
     Output,
-    ViewChild
+    ViewChild,
+    ViewEncapsulation
 } from '@angular/core';
 
 import { IgxIconComponent } from '../icon/icon.component';
@@ -48,6 +49,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
 @Component({
     selector: 'igx-banner',
     templateUrl: 'banner.component.html',
+    styleUrl: 'banner.component.css',
+    encapsulation: ViewEncapsulation.None,
     imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class IgxBannerComponent implements IToggleView {

projects/igniteui-angular/src/lib/banner/themes/_base.scss

@@ -0,0 +1,92 @@
+@use 'igniteui-theming/sass/animations' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use 'light/tokens' as *;
+
+$theme: $material;
+
+@include layer(base) {
+    %actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-self: flex-end;
+        gap: rem(8px);
+
+        > a {
+            display: inline-flex;
+            align-items: center;
+        }
+    }
+
+    %flex-center-block {
+        display: flex;
+        align-items: center;
+    }
+
+    @include b(igx-banner-host) {
+        igx-expansion-panel-body {
+            padding: 0 !important;
+        }
+    }
+
+    @include b(igx-banner) {
+        @include sizable();
+        --component-size: var(--ig-size, var(--ig-size-large));
+
+        display: flex;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        gap: rem(8px);
+        padding: rem(16px) rem(8px);
+        min-width: rem(320px);
+        background: var-get($theme, 'banner-background');
+        box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color');
+        border-radius: var-get($theme, 'border-radius');
+
+        igc-icon,
+        igx-icon,
+        igc-button,
+        [igxButton] {
+            --component-size: var(--ig-size, var(--ig-size-large));
+        }
+
+        @include e(message) {
+            @extend %flex-center-block;
+
+            min-width: rem(150px);
+            flex: 1 0 0%;
+            gap: rem(16px);
+            padding: 0 rem(8px);
+        }
+
+        @include e(illustration) {
+            @extend %flex-center-block;
+
+            justify-content: center;
+            color: var-get($theme, 'banner-illustration-color');
+        }
+
+        @include e(text) {
+            @include type-style(body-2) {
+                margin-block: 0;
+            }
+
+            color: var-get($theme, 'banner-message-color');
+            flex: 1 0 0%;
+
+            > *:not(hr) {
+                margin-block-start: 0 !important;
+            }
+        }
+
+        @include e(actions) {
+            @extend %actions;
+
+            > igx-banner-actions {
+                @extend %actions;
+            }
+        }
+    }
+}

projects/igniteui-angular/src/lib/banner/themes/dark/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-banner, $tokens, dark);

projects/igniteui-angular/src/lib/banner/themes/dark/_tokens.scss

@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/banner' as *;
+
+$material: digest-schema($dark-material-banner);
+$bootstrap: digest-schema($dark-bootstrap-banner);
+$fluent: digest-schema($dark-fluent-banner);
+$indigo: digest-schema($dark-indigo-banner);

projects/igniteui-angular/src/lib/banner/themes/light/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-banner, $tokens, light);

projects/igniteui-angular/src/lib/banner/themes/light/_tokens.scss

@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/banner' as *;
+
+$base: digest-schema($light-banner);
+$material: digest-schema($material-banner);
+$bootstrap: digest-schema($bootstrap-banner);
+$fluent: digest-schema($fluent-banner);
+$indigo: digest-schema($indigo-banner);

projects/igniteui-angular/src/lib/banner/themes/shared/_fluent.scss

@@ -0,0 +1,11 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-banner, fluent) {
+    @include e(text) {
+        @include type-style(caption) {
+            margin-block: 0;
+        }
+    }
+}

projects/igniteui-angular/src/lib/banner/themes/shared/_index.scss

@@ -0,0 +1,2 @@
+@forward 'indigo';
+@forward 'fluent';

projects/igniteui-angular/src/lib/banner/themes/shared/_indigo.scss

@@ -0,0 +1,23 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$theme: $indigo;
+
+@include themed-block(igx-banner, indigo) {
+    box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
+    padding: rem(16px);
+
+    igc-icon,
+    igx-icon,
+    igc-button,
+    [igxButton] {
+        --component-size: var(--ig-size, var(--ig-size-medium));
+    }
+
+    @include e(message) {
+        gap: rem(8px);
+        padding: initial;
+    }
+}