diff options
| author |   JvD_Ericsson <jeff.van.dam@est.tech> | 2023-08-16 14:43:13 +0100 |
|---|---|---|
| committer |   Michael Morris <michael.morris@est.tech> | 2023-09-22 07:43:34 +0000 |
| commit | db333a620e4b8dec6c58009162561b32c83d6bd9 (patch) | |
| tree | e1541ffd45a005c9aa190d56b55a8fcf10175e30 /catalog-ui/src/app/ng2/components | |
| parent | 035d670c792c9408493b3d729a3ac91124c2d4df (diff) | |
UI Support for operation milestones
Issue-ID: SDC-4601
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: I9088a1d004ae3a3470aee8d831066584fd26b0d4
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
3 files changed, 22 insertions, 1 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts index e0eacdc43b..8e0b0a55b3 100644 --- a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts @@ -34,6 +34,7 @@ export class Tab { @Input('tabTitle') title: string; @Input() active:boolean = false; @Input() show:boolean = true; + @Input() highlight?: string; @Input() indication?: number; } diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html index d52dccc054..d6cf69355c 100644 --- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html @@ -16,7 +16,7 @@ <div class="tabs {{tabStyle}}"> <ng-container *ngFor="let tab of tabs"> - <div class="tab" *ngIf="tab.show" (click)="selectTab(tab)" [class.active]="tab.active" [attr.data-tests-id]="tab.title"> + <div class="tab" *ngIf="tab.show" (click)="selectTab(tab)" [class.active]="tab.active" [attr.data-tests-id]="tab.title" [ngStyle]="{'color': tab.highlight}"> {{tab.title}} <div class="tab-indication" *ngIf="tab.indication" [@indicatorAnimation]="tab.indication">{{tab.indication}}</div> </div> diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less index db60be5371..d37868d987 100644 --- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less @@ -82,4 +82,24 @@ } } } + + &.basic-tabs .tab { + color: @main_color_n; + flex: 0 0 auto; + + &:after { + display:block; + content: ''; + border-bottom: 2px solid @main_color_a; + transform: scaleX(0); + transition: transform 200ms ease-in-out; + } + + &.active { + color: @main_color_a; + &:after { + transform: scaleX(1.2); + } + } + } } |