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 a7ae64159e7..bc525ebf1f4 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 @@ -608,13 +608,13 @@ @include tabs($tabs-theme-map); } - @if is-used('igx-stepper', $exclude) { - $stepper-theme-map: stepper-theme( - $schema: $schema, - ); - $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map); - @include stepper($stepper-theme-map); - } + //@if is-used('igx-stepper', $exclude) { + // $stepper-theme-map: stepper-theme( + // $schema: $schema, + // ); + // $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map); + // @include stepper($stepper-theme-map); + //} // @if is-used('igx-toast', $exclude) { // $toast-theme-map: toast-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index b90f24283a9..9c7d890c1cd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -107,7 +107,7 @@ header-hour: 'h4', selected-time: 'h4' )); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index c5cff3ac778..88ff180a935 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -111,7 +111,7 @@ label: 'body-2' )); @include time-picker-typography(); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography($categories: ( // text: 'caption' // )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index f3a0b819b4b..046805d1289 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -112,12 +112,12 @@ header-hour: 'h5', selected-time: 'h6' )); - @include stepper-typography($categories: ( - title: 'body-2', - subtitle: 'caption', - indicator: 'button', - body-content: 'body-2' - )); + //@include stepper-typography($categories: ( + // title: 'body-2', + // subtitle: 'caption', + // indicator: 'button', + // body-content: 'body-2' + //)); // @include toast-typography(); @include tooltip-typography($categories: ( tooltip-text: 'subtitle-2' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 28a8f1630ce..e04237aef6b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -62,7 +62,7 @@ @include switch-typography(); @include tabs-typography(); @include time-picker-typography(); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.html b/projects/igniteui-angular/src/lib/stepper/step/step.component.html index 48dd55aed14..9703d5d731b 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.html +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.html @@ -23,22 +23,23 @@ -
+
@if (isIndicatorVisible) { -
+
} -
+
@if (!isHorizontal) { -
+
} diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.scss b/projects/igniteui-angular/src/lib/stepper/step/step.component.scss new file mode 100644 index 00000000000..b8f7e512fe8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.scss @@ -0,0 +1,2 @@ +@use 'themes/base'; +@use 'themes/shared'; diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts index dc439b3f026..a19cd3acc06 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts @@ -15,7 +15,8 @@ import { Output, Renderer2, TemplateRef, - ViewChild + ViewChild, + ViewEncapsulation } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Direction, IgxSlideComponentBase } from '../../carousel/carousel-base'; @@ -54,6 +55,8 @@ let NEXT_ID = 0; @Component({ selector: 'igx-step', templateUrl: 'step.component.html', + styleUrl: 'step.component.css', + encapsulation: ViewEncapsulation.None, providers: [ { provide: IGX_STEP_COMPONENT, useExisting: IgxStepComponent } ], @@ -121,7 +124,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, * ``` */ @Input({ transform: booleanAttribute }) - @HostBinding('class.igx-stepper__step--completed') + @HostBinding('class.igx-step--completed') public completed = false; /** @@ -215,11 +218,17 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } /** @hidden @internal */ - @HostBinding('class.igx-stepper__step') + @HostBinding('class.igx-step') public cssClass = true; /** @hidden @internal */ - @HostBinding('class.igx-stepper__step--disabled') + @HostBinding('class.igx-step--vertical') + public get isVertical(): boolean { + return this.stepper.orientation === 'vertical'; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--disabled') public get generalDisabled(): boolean { return this.disabled || this.linearDisabled; } @@ -228,10 +237,35 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, @HostBinding('class') public get titlePositionTop(): string { if (this.stepper.stepType !== IgxStepType.Full) { - return 'igx-stepper__step--simple'; + return 'igx-step--simple'; } - return `igx-stepper__step--${this.titlePosition}`; + return `igx-step--${this.titlePosition}`; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--current') + public get isActive(): boolean { + return this.active; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--invalid') + public get isInvalid(): boolean { + return !this.isValid + && this.stepperService.visitedSteps.has(this) + && !this.active + && this.isAccessible; + } + + /** @hidden @internal */ + public get stepHeaderClasses(): { [key: string]: boolean } { + return { + 'igx-step-header--invalid': this.isInvalid, + 'igx-step-header--disabled': this.disabled || this.linearDisabled, + 'igx-step-header--current': this.active, + 'igx-step-header--completed': this.completed, + }; } /** @@ -317,6 +351,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } /** @hidden @internal */ + @HostBinding('class.igx-step--horizontal') public get isHorizontal(): boolean { return this.stepper.orientation === IgxStepperOrientation.Horizontal; } @@ -360,17 +395,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } } - /** @hidden @internal */ - public get stepHeaderClasses(): any { - return { - 'igx-stepper__step--optional': this.optional, - 'igx-stepper__step-header--current': this.active, - 'igx-stepper__step-header--invalid': !this.isValid - && this.stepperService.visitedSteps.has(this) && !this.active && this.isAccessible - }; - } - - /** @hidden @internal */ +/** @hidden @internal */ public get nativeElement(): HTMLElement { return this.element.nativeElement; } diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss new file mode 100644 index 00000000000..94282c576cc --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss @@ -0,0 +1,537 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../../themes/light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-step) { + $this: bem--selector-to-string(&); + + display: flex; + position: relative; + flex-direction: column; + align-content: center; + justify-content: center; + + &:first-of-type { + @include e(header) { + &::before { + visibility: hidden; + } + } + } + + &:last-of-type { + @include e(header) { + &::after { + visibility: hidden; + } + } + + @include e(content-wrapper) { + &::before { + display: none; + } + } + } + + &:focus { + outline: none; + + @include e(title) { + color: var-get($theme, 'title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'subtitle-focus-color'); + } + + @include e(header) { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + } + } + + @include m(current, $not: ('horizontal')) { + @include e(content-wrapper) { + padding: rem(16px); + } + } + + @include m(invalid) { + &:focus { + @include e(header) { + background: var-get($theme, 'invalid-step-focus-background'); + } + + @include e(title) { + color: var-get($theme, 'invalid-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-focus-color'); + } + } + } + + @include m(current) { + &:focus { + @include e(header) { + background: var-get($theme, 'current-step-focus-background') !important; + } + + @include e(title) { + color: var-get($theme, 'current-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'current-subtitle-focus-color'); + } + } + } + + @include e(title-wrapper) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + min-width: rem(32px); + + &:empty { + display: none; + } + + > * { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + + @include e(content-wrapper) { + @include type-style(body-2) { + margin-block: 0; + }; + + position: relative; + + &::before { + content: ''; + position: absolute; + } + } + + @include m(completed) { + + #{$this} { + &::before { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + + #{elem($this, header)} { + /* stylelint-disable max-nesting-depth */ + &::before { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + /* stylelint-enable max-nesting-depth */ + } + } + + &:focus { + @include e(header) { + background: var-get($theme, 'complete-step-focus-background'); + } + + @include e(title) { + color: var-get($theme, 'complete-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-focus-color'); + } + } + } + + @include m(simple) { + @include e(indicator) { + width: initial; + height: initial; + + div > igx-icon, + div > igx-avatar, + div > igx-circular-bar { + max-width: initial; + max-height: initial; + } + } + } + + @include m(horizontal) { + overflow: hidden; + flex-direction: row; + flex: 1; + + &::before { + content: ''; + width: auto; + flex: 1; + position: relative; + z-index: -1; + } + + &:first-of-type { + flex-grow: 0; + min-width: max-content; + + &::before { + display: none; + } + } + + @include e(title-wrapper) { + width: 100%; + } + + @include e(header) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &::before, + &::after { + content: ''; + position: absolute; + z-index: -1; + flex: 1; + min-width: rem(4px); + } + + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + } + + @include e(content) { + flex-grow: 1; + + &:focus { + outline: none; + } + + &::before { + display: none; + } + } + } + + @include m(start) { + @include e(header) { + flex-direction: row; + align-items: center; + } + + @include e(title-wrapper) { + order: -1; + } + } + + @include mx(horizontal, start) { + &:first-of-type { + min-width: auto; + } + } + + @include mx(horizontal, end) { + &:first-of-type { + flex-grow: initial; + min-width: auto; + } + } + + @include m(end) { + @include e(header) { + flex-direction: row; + align-items: center; + } + } + + @include m(top) { + @include e(title-wrapper) { + order: -1; + } + } + + @include mx(horizontal, simple) { + text-align: center; + + @include e(header) { + align-self: center; + height: auto; + + &::before, + &::after { + display: none; + } + } + } + + @include mx(horizontal, ('not': 'simple')) { + @include e(header) { + min-width: rem(100px); + } + } + + @include mx(horizontal, top) { + @include e(header) { + flex-direction: column; + justify-content: flex-end; + } + + @include e(title-wrapper) { + text-align: center; + } + } + + @include mx(horizontal, bottom) { + @include e(header) { + flex-direction: column; + justify-content: flex-start; + } + + @include e(title-wrapper) { + text-align: center; + } + } + + @include mx(horizontal, start) { + @include e(title-wrapper) { + text-align: end; + } + + @include e(indicator) { + flex: 1 0 auto; + } + + @include e(header) { + &::before, + &::after { + display: none; + } + } + } + + @include mx(horizontal, end) { + @include e(indicator) { + flex: 1 0 auto; + } + + @include e(header) { + &::before, + &::after { + display: none; + } + } + } + + @include m(disabled) { + color: var-get($theme, 'disabled-title-color'); + pointer-events: none; + cursor: default; + + @include e(indicator) { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'disabled-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'disabled-subtitle-color'); + } + } + } + + @include b(igx-step-header) { + display: flex; + padding: rem(8px); + position: relative; + line-height: normal; + flex-direction: column; + align-items: flex-start; + gap: rem(8px); + cursor: pointer; + color: var-get($theme, 'title-color'); + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + overflow: hidden; + + @include e(indicator) { + display: flex; + align-items: center; + justify-content: center; + position: relative; + font-size: rem(12px); + white-space: nowrap; + border-radius: var-get($theme, 'border-radius-indicator'); + color: var-get($theme, 'indicator-color'); + background: var-get($theme, 'indicator-background'); + } + + @include e(title) { + @include type-style(body-2) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'title-color'); + } + + @include e(subtitle) { + @include type-style(caption) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'subtitle-color'); + } + + &:hover { + background: var-get($theme, 'step-hover-background'); + + @include e(title) { + color: var-get($theme, 'title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'subtitle-hover-color'); + } + } + + @include m(invalid) { + background: var-get($theme, 'invalid-step-background'); + color: var-get($theme, 'invalid-title-color'); + + @include e(indicator) { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'invalid-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-color'); + } + + &:hover { + @include e(title) { + color: var-get($theme, 'invalid-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-hover-color'); + } + } + } + + @include m(completed) { + background: var-get($theme, 'complete-step-background'); + + &::after { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + + @include e(indicator) { + color: var-get($theme, 'complete-indicator-color'); + background: var-get($theme, 'complete-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'complete-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-color'); + } + + &:hover { + background: var-get($theme, 'complete-step-hover-background'); + + @include e(title) { + color: var-get($theme, 'complete-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-hover-color'); + } + } + } + + @include m(current) { + background: var-get($theme, 'current-step-background') !important; + color: var-get($theme, 'current-title-color'); + + @include e(indicator) { + color: var-get($theme, 'current-indicator-color') !important; + background: var-get($theme, 'current-indicator-background') !important; + } + + @include e(title) { + color: var-get($theme, 'current-title-color'); + + // TODO See if we need this in all themes + font-weight: 600; + } + + @include e(indicator) { + color: var-get($theme, 'current-subtitle-color'); + } + + &:hover { + background: var-get($theme, 'current-step-hover-background') !important; + + @include e(title) { + color: var-get($theme, 'current-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'current-subtitle-hover-color'); + } + } + } + + @include m(disabled) { + color: var-get($theme, 'disabled-title-color'); + pointer-events: none; + cursor: default; + + @include e(indicator) { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'disabled-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'disabled-subtitle-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..a33b64cd354 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss @@ -0,0 +1,179 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-step, bootstrap) { + $indicator-size: rem(40px); + $separator-size: rem(8px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{$indicator-size} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + &:focus { + @include e(header) { + box-shadow: inset 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + } + } + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$indicator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$indicator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: rem(24px); + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } + + @include m(disabled) { + @include e(header) { + box-shadow: none; + } + } +} + +@include themed-block(igx-step-header, bootstrap) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss new file mode 100644 index 00000000000..31dd16ee9aa --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss @@ -0,0 +1,161 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-step, fluent) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{rem(24px)} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{rem(24px)} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{rem(24px)} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + color: inherit; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } +} + +@include themed-block(igx-step-header, fluent) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss new file mode 100644 index 00000000000..a010f103ed8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss @@ -0,0 +1,168 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-step, indigo) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{rem(8px)} - (#{rem(1px)} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{rem(8px)} + (#{rem(1px)} / 2))); + $v-line-indent: calc(#{rem(8px)} + (#{$indicator-size} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + @include m(simple) { + @include e(indicator) { + min-width: rem(24px); + min-height: rem(24px); + } + } + + @include m(horizontal) { + &::before { + min-width: rem(40px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-block: rem(16px); + padding-inline-end: rem(16px); + padding-inline-start: $v-line-indent; + } + } + + [aria-selected='false'] { + @include e(content-wrapper) { + padding-block: 0; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: #{var(--igx-icon--size, #{rem(14px)})}; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } +} + +@include themed-block(igx-step-header, indigo) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss new file mode 100644 index 00000000000..8c6599363c2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss @@ -0,0 +1,156 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../../../themes/light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-step, material) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{$indicator-size} / 2)); + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + color: inherit; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } +} + +@include themed-block(igx-step-header, material) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.common.ts b/projects/igniteui-angular/src/lib/stepper/stepper.common.ts index fbcef0f488e..5345e97a0eb 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.common.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.common.ts @@ -92,8 +92,6 @@ export interface IgxStep extends ToggleAnimationPlayer { /** @hidden @internal */ contentClasses: any; /** @hidden @internal */ - stepHeaderClasses: any; - /** @hidden @internal */ nativeElement: HTMLElement; /** @hidden @internal */ previous: boolean; diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.scss b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/stepper.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/stepper/stepper.component.spec.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts index 86509db32a8..a763a806de7 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts @@ -27,14 +27,13 @@ const STEPPER_CLASS = 'igx-stepper'; const STEPPER_HEADER = 'igx-stepper__header'; const STEPPER_BODY = 'igx-stepper__body'; const STEP_TAG = 'IGX-STEP'; -const STEP_HEADER = 'igx-stepper__step-header'; -const STEP_INDICATOR_CLASS = 'igx-stepper__step-indicator'; -const STEP_TITLE_CLASS = 'igx-stepper__step-title'; -const STEP_SUBTITLE_CLASS = 'igx-stepper__step-subtitle'; -const INVALID_CLASS = 'igx-stepper__step-header--invalid'; -const DISABLED_CLASS = 'igx-stepper__step--disabled'; -const COMPLETED_CLASS = 'igx-stepper__step--completed'; -const CURRENT_CLASS = 'igx-stepper__step-header--current'; +const STEP_INDICATOR_CLASS = 'igx-step__indicator'; +const STEP_TITLE_CLASS = 'igx-step__title'; +const STEP_SUBTITLE_CLASS = 'igx-step__subtitle'; +const INVALID_CLASS = 'igx-step--invalid'; +const DISABLED_CLASS = 'igx-step--disabled'; +const COMPLETED_CLASS = 'igx-step--completed'; +const CURRENT_CLASS = 'igx-step--current'; const getHeaderElements = (stepper: IgxStepperComponent, stepIndex: number): Map => { const elementsMap = new Map(); @@ -116,7 +115,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); tick(); - expect(stepper.steps[1].nativeElement).toHaveClass('igx-stepper__step--disabled'); + expect(stepper.steps[1].nativeElement).toHaveClass('igx-step--disabled'); stepper.next(); fix.detectChanges(); @@ -338,14 +337,14 @@ describe('Rendering Tests', () => { }); it('should indicate the currently active step', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); - const step1Header = stepper.steps[1].nativeElement.querySelector(`.${STEP_HEADER}`); + const step0 = stepper.steps[0].nativeElement; + const step1 = stepper.steps[1].nativeElement; const serviceExpandSpy = spyOn((stepper as any).stepperService, 'expand').and.callThrough(); stepper.steps[0].active = true; fix.detectChanges(); - expect(step0Header).toHaveClass(CURRENT_CLASS); + expect(step0).toHaveClass(CURRENT_CLASS); stepper.steps[1].active = true; stepper.steps[1].nativeElement.focus(); @@ -354,8 +353,8 @@ describe('Rendering Tests', () => { UIInteractions.triggerKeyDownEvtUponElem(' ', stepper.steps[1].nativeElement); fix.detectChanges(); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); - expect(step1Header).toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); + expect(step1).toHaveClass(CURRENT_CLASS); expect(serviceExpandSpy).toHaveBeenCalledOnceWith(stepper.steps[1]); }); @@ -378,7 +377,7 @@ describe('Rendering Tests', () => { }); it('should indicate that a step is invalid', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); + const step0Header = stepper.steps[0].nativeElement; stepper.steps[0].isValid = true; fix.detectChanges(); @@ -463,7 +462,7 @@ describe('Rendering Tests', () => { for (const step of stepper.steps) { expect(step.titlePosition).toBe(stepper._defaultTitlePosition); expect(step.titlePosition).toBe(IgxStepperTitlePosition.Bottom); - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${stepper._defaultTitlePosition}`); + expect(step.nativeElement).toHaveClass(`igx-step--${stepper._defaultTitlePosition}`); } const positions = getStepperPositions(); @@ -472,7 +471,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); for (const step of stepper.steps) { - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${pos}`); + expect(step.nativeElement).toHaveClass(`igx-step--${pos}`); } }); @@ -484,7 +483,7 @@ describe('Rendering Tests', () => { for (const step of stepper.steps) { expect(step.titlePosition).toBe(stepper._defaultTitlePosition); expect(step.titlePosition).toBe(IgxStepperTitlePosition.End); - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${stepper._defaultTitlePosition}`); + expect(step.nativeElement).toHaveClass(`igx-step--${stepper._defaultTitlePosition}`); } positions.forEach((pos: IgxStepperTitlePosition) => { @@ -492,7 +491,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); for (const step of stepper.steps) { - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${pos}`); + expect(step.nativeElement).toHaveClass(`igx-step--${pos}`); } }); }); @@ -517,11 +516,11 @@ describe('Rendering Tests', () => { }); it('should allow overriding the default invalid, completed and active indicators', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); - let indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + const step0 = stepper.steps[0].nativeElement; + let indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).not.toHaveClass(INVALID_CLASS); - expect(step0Header).toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(INVALID_CLASS); + expect(step0).toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).not.toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('edit'); @@ -531,10 +530,10 @@ describe('Rendering Tests', () => { stepper.steps[1].active = true; fix.detectChanges(); - indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).toHaveClass(INVALID_CLASS); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); + expect(step0).toHaveClass(INVALID_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).not.toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('error'); @@ -543,10 +542,10 @@ describe('Rendering Tests', () => { stepper.steps[0].completed = true; fix.detectChanges(); - indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).not.toHaveClass(INVALID_CLASS); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(INVALID_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('check'); diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts index 3c5329a1821..6e9203f4255 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts @@ -3,7 +3,7 @@ import { NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Inject, Input, OnChanges, OnDestroy, - OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute + OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -69,6 +69,8 @@ import { fadeIn, growVerIn, growVerOut } from 'igniteui-angular/animations'; @Component({ selector: 'igx-stepper', templateUrl: 'stepper.component.html', + styleUrl: 'stepper.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxStepperService, { provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent }, diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts index 9e5e334272b..1c0335f8183 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts @@ -7,7 +7,7 @@ import { IgxStepperService } from './stepper.service'; * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -28,7 +28,7 @@ export class IgxStepActiveIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -49,7 +49,7 @@ export class IgxStepCompletedIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -70,7 +70,7 @@ export class IgxStepInvalidIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -91,7 +91,7 @@ export class IgxStepIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -106,8 +106,11 @@ export class IgxStepIndicatorDirective { } standalone: true }) export class IgxStepTitleDirective { - @HostBinding('class.igx-stepper__step-title') + @HostBinding('class.igx-step__title') public defaultClass = true; + + @HostBinding('class.igx-step-header__title') + public headerElementClass = true; } /** @@ -115,7 +118,7 @@ export class IgxStepTitleDirective { * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -130,8 +133,11 @@ export class IgxStepTitleDirective { standalone: true }) export class IgxStepSubtitleDirective { - @HostBinding('class.igx-stepper__step-subtitle') - public defaultClass = true; + @HostBinding('class.igx-step__subtitle') + public elementClass = true; + + @HostBinding('class.igx-step-header__subtitle') + public headerElementClass = true; } /** @@ -139,7 +145,7 @@ export class IgxStepSubtitleDirective { * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example diff --git a/projects/igniteui-angular/src/lib/stepper/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/themes/_base.scss new file mode 100644 index 00000000000..b52304ca66c --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/_base.scss @@ -0,0 +1,79 @@ +@use 'sass:map'; +@use 'sass:meta'; +@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) { + @include b(igx-stepper) { + display: flex; + flex-direction: column; + width: 100%; + overflow: hidden; + + @include e(header) { + display: flex; + white-space: nowrap; + flex-direction: column; + width: 100%; + flex: none; + } + + @include e(body) { + display: flex; + color: var-get($theme, 'content-foreground'); + position: relative; + flex-direction: column; + flex: 1 1 auto; + overflow: hidden; + } + + @include m(horizontal) { + @include e(header) { + flex-direction: row; + } + + @include e(body-content) { + display: flex; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + z-index: -1; + padding: rem(16px); + + @include type-style(body-2) { + margin-top: 0; + margin-bottom: 0; + } + } + + @include e(body-content, $m: active) { + z-index: 1; + position: relative; + } + + @include e(step-content) { + flex-grow: 1; + + &:focus { + outline: none; + } + + &::before { + display: none; + } + } + + @include e(step-content-wrapper) { + text-align: center; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss new file mode 100644 index 00000000000..02f9fac8abf --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/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-stepper, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss new file mode 100644 index 00000000000..1caebf64811 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/stepper' as *; + +$base: digest-schema($base-stepper); +$material: digest-schema($dark-material-stepper); +$bootstrap: digest-schema($dark-bootstrap-stepper); +$fluent: digest-schema($dark-fluent-stepper); +$indigo: digest-schema($dark-indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss new file mode 100644 index 00000000000..3b73043d778 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/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-stepper, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss new file mode 100644 index 00000000000..b7fddea3c31 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/stepper' as *; + +$base: digest-schema($light-stepper); +$material: digest-schema($material-stepper); +$bootstrap: digest-schema($bootstrap-stepper); +$fluent: digest-schema($fluent-stepper); +$indigo: digest-schema($indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..86f61b7bbce --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-stepper, bootstrap) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss new file mode 100644 index 00000000000..8d56a722db4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, fluent) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss new file mode 100644 index 00000000000..1dd5b995d6a --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, indigo) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss new file mode 100644 index 00000000000..6988a8e224a --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, material) { + +}