From e0357bc17aea6ab2305e71167ab939a528f43b0d Mon Sep 17 00:00:00 2001 From: sivanova Date: Fri, 7 Feb 2025 10:16:40 +0200 Subject: [PATCH] refactor(navbar): bundle styles with component --- .../core/styles/themes/generators/_base.scss | 14 +-- .../src/lib/navbar/navbar.component.scss | 4 + .../src/lib/navbar/navbar.component.ts | 5 +- .../src/lib/navbar/themes/_base.scss | 110 ++++++++++++++++++ .../src/lib/navbar/themes/dark/_index.scss | 6 + .../src/lib/navbar/themes/dark/_tokens.scss | 7 ++ .../src/lib/navbar/themes/light/_index.scss | 6 + .../src/lib/navbar/themes/light/_tokens.scss | 8 ++ .../lib/navbar/themes/shared/_bootstrap.scss | 26 +++++ .../src/lib/navbar/themes/shared/_fluent.scss | 18 +++ .../src/lib/navbar/themes/shared/_index.scss | 4 + .../src/lib/navbar/themes/shared/_indigo.scss | 44 +++++++ .../lib/navbar/themes/shared/_material.scss | 8 ++ 13 files changed, 252 insertions(+), 8 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/navbar/navbar.component.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss create mode 100644 projects/igniteui-angular/src/lib/navbar/themes/shared/_material.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 0e9aa7c075c..05fc267c49e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -504,13 +504,13 @@ @include label($label-theme-map); } - @if is-used('igx-navbar', $exclude) { - $navbar-theme-map: navbar-theme( - $schema: $schema, - ); - $navbar-theme-map: meta.call($theme-handler, $navbar-theme-map); - @include navbar($navbar-theme-map); - } + // @if is-used('igx-navbar', $exclude) { + // $navbar-theme-map: navbar-theme( + // $schema: $schema, + // ); + // $navbar-theme-map: meta.call($theme-handler, $navbar-theme-map); + // @include navbar($navbar-theme-map); + // } @if is-used('igx-nav-drawer', $exclude) { $navdrawer-theme-map: navdrawer-theme( diff --git a/projects/igniteui-angular/src/lib/navbar/navbar.component.scss b/projects/igniteui-angular/src/lib/navbar/navbar.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/navbar.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/navbar/navbar.component.ts b/projects/igniteui-angular/src/lib/navbar/navbar.component.ts index 3d0b21d4254..84734120faf 100644 --- a/projects/igniteui-angular/src/lib/navbar/navbar.component.ts +++ b/projects/igniteui-angular/src/lib/navbar/navbar.component.ts @@ -7,7 +7,8 @@ import { Output, Directive, ContentChild, - booleanAttribute + booleanAttribute, + ViewEncapsulation } from '@angular/core'; import { IgxIconComponent } from '../icon/icon.component'; @@ -55,6 +56,8 @@ let NEXT_ID = 0; } ` ], + styleUrl: 'navbar.component.css', + encapsulation: ViewEncapsulation.None, imports: [NgIf, IgxIconComponent] }) diff --git a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss new file mode 100644 index 00000000000..6055613f961 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss @@ -0,0 +1,110 @@ +@use 'igniteui-theming/sass/animations/easings' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'styles/themes/standalone' as *; +@use 'light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + %igx-navbar-title { + @include type-style(h6); + @include line-clamp(4, true, true); + margin: 0; + flex-grow: 1; + user-select: text; + display: flex; + flex-direction: row; + } + + %igx-navbar-icon { + display: flex; + align-items: center; + + igx-icon, + igc-icon { + --component-size: 3; + cursor: pointer; + } + + > igx-icon, + > igc-icon { + transition: color .15s $out-quad; + color: var-get($_theme, 'idle-icon-color'); + + &:hover { + color: var-get($_theme, 'hover-icon-color'); + } + + user-select: none; + } + } + + igx-navbar-action, + [igxNavbarAction] { + display: flex; + align-items: center; + } + + igx-navbar-title, + [igxNavbarTitle] { + @extend %igx-navbar-title; + + align-items: center; + } + + @include b(igx-navbar) { + display: flex; + align-items: center; + position: relative; + flex-flow: row nowrap; + gap: rem(16px); + width: 100%; + min-height: rem(56px); + max-height: rem(128px); + padding-inline: rem(16px); + background: var-get($_theme, 'background'); + color: var-get($_theme, 'text-color'); + box-shadow: var-get($_theme, 'elevation'); + z-index: 4; + overflow: hidden; + border-bottom: rem(1px) solid var-get($_theme, 'border-color'); + + igx-avatar { + --ig-size: 1; + } + + @include e(title) { + @extend %igx-navbar-title; + } + + @include e(left) { + @extend %igx-navbar-icon; + + &:not(:empty) { + margin-inline-end: rem(16px); + } + + &:empty { + display: none; + } + } + + @include e(middle) { + @extend %igx-navbar-icon; + + flex-grow: 1; + } + + @include e(right) { + @extend %igx-navbar-icon; + + gap: rem(16px); + + &:empty { + display: none; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/navbar/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/navbar/themes/dark/_index.scss new file mode 100644 index 00000000000..1987579aeff --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/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-navbar, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/navbar/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/navbar/themes/dark/_tokens.scss new file mode 100644 index 00000000000..4adb8c95d00 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/navbar' as *; + +$material: digest-schema($dark-material-navbar); +$bootstrap: digest-schema($dark-bootstrap-navbar); +$fluent: digest-schema($dark-fluent-navbar); +$indigo: digest-schema($dark-indigo-navbar); diff --git a/projects/igniteui-angular/src/lib/navbar/themes/light/_index.scss b/projects/igniteui-angular/src/lib/navbar/themes/light/_index.scss new file mode 100644 index 00000000000..8b3e5ac50b3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/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-navbar, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/navbar/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/navbar/themes/light/_tokens.scss new file mode 100644 index 00000000000..157a1ee76d6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/navbar' as *; + +$base: digest-schema($light-navbar); +$material: digest-schema($material-navbar); +$bootstrap: digest-schema($bootstrap-navbar); +$fluent: digest-schema($fluent-navbar); +$indigo: digest-schema($indigo-navbar); diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss new file mode 100644 index 00000000000..a9b3dc442be --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss @@ -0,0 +1,26 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-navbar, bootstrap) { + @include e(title) { + @include type-style(h5); + } + + igx-navbar-title, + [igxNavbarTitle] { + @include type-style(h5); + } + + igc-input, + igc-icon-button { + --ig-size: 1; + } + + [igxButton], + igc-button, + [igxIconButton], + igx-input-group { + --ig-size: 2; + } +} diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_fluent.scss new file mode 100644 index 00000000000..c82dc12c924 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_fluent.scss @@ -0,0 +1,18 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-navbar, fluent) { + @include e(title) { + @include type-style(subtitle-2); + } + + igx-navbar-title, + [igxNavbarTitle] { + @include type-style(subtitle-2); + } + + igx-input-group { + --ig-size: 2; + } +} diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss new file mode 100644 index 00000000000..38de039d7c7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss @@ -0,0 +1,44 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-navbar, indigo) { + %icon-size { + igx-icon, + igc-icon { + --component-size: 2; + + margin-inline: rem(6px); + } + } + + igx-avatar, + igc-icon-button, + [igxIconButton] { + --ig-size: 2; + } + + igx-navbar-title, + [igxNavbarTitle] { + @include type-style(h5); + } + + @include e(title) { + @extend %icon-size; + @include type-style(h5); + } + + @include e(right) { + @extend %icon-size; + + gap: rem(8px); + } + + @include e(left) { + @extend %icon-size; + + &:not(:empty) { + margin-inline-end: unset; + } + } +} diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_material.scss new file mode 100644 index 00000000000..3b42ef43b2d --- /dev/null +++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_material.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-navbar, material) { + igx-input-group { + --ig-size: 1; + } +}