Merge pull request #14334 from IgniteUI/simeonoff/material-banner

refactor(banner): update paddings

Author: ChronosSF

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -70,9 +70,6 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'variant');
 
-    $padding: rem(8px);
-    $padding-inline-start: calc(#{$padding} * 2);
-
     %igx-banner-host {
         igx-expansion-panel-body {
             padding: 0;
@@ -99,19 +96,17 @@
         justify-content: flex-end;
         flex-wrap: wrap;
         gap: rem(8px);
-        padding: 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');
 
         @if $variant == 'indigo-design' {
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
             padding: rem(16px);
-        } @else {
-            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,

src/app/banner/banner.sample.html

@@ -1,7 +1,14 @@
-<igx-banner #bannerNoSafeConnection [animationSettings]="animationSettings" (onOpened)="onOpen($event)" (onClosed)="onClose($event)">
-    Your connections is not private!
-    <igx-icon>lock</igx-icon>
-</igx-banner>
+<div>
+    <igx-navbar actionButtonIcon="menu">
+        <button igxIconButton="flat">
+            <igx-icon>more_vert</igx-icon>
+        </button>
+    </igx-navbar>
+    <igx-banner #bannerNoSafeConnection [animationSettings]="animationSettings" (onOpened)="onOpen($event)" (onClosed)="onClose($event)">
+        Your connections is not private!
+        <igx-icon>lock</igx-icon>
+    </igx-banner>
+</div>
 <igx-banner #bannerCookies (onOpened)="onOpen($event)" (onClosed)="onClose($event)">
     <igx-icon>settings</igx-icon>
     <h5 class="ig-typography__subtitle-1">YOUR COOKIES SETTINGS</h5>

src/app/banner/banner.sample.ts

@@ -1,14 +1,14 @@
 import { Component, ViewChild } from '@angular/core';
 import { useAnimation } from '@angular/animations';
-import { IgxBannerActionsDirective, IgxBannerComponent, IgxButtonDirective, IgxFlexDirective, IgxIconComponent, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular';
+import { IgxBannerActionsDirective, IgxBannerComponent, IgxFlexDirective, IgxIconComponent, IgxLayoutDirective, IgxRippleDirective, IgxNavbarModule, IgxButtonModule } from 'igniteui-angular';
 import { growVerIn, growVerOut } from 'igniteui-angular/animations';
 
 @Component({
     selector: 'app-banner-sample',
     templateUrl: `banner.sample.html`,
     styleUrls: [`banner.sample.scss`],
     standalone: true,
-    imports: [IgxBannerComponent, IgxIconComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective]
+    imports: [IgxBannerComponent, IgxIconComponent, IgxBannerActionsDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective, IgxNavbarModule, IgxButtonModule]
 })
 export class BannerSampleComponent {
     @ViewChild('bannerNoSafeConnection', { static: true })