diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/tabs')
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); + } + } + } } |