diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index cf817cbca0c..22f3814dbeb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -61,23 +61,23 @@ %tabs-header { overflow: hidden; flex: 0 0 auto; - background: var-get($theme, 'item-background'); z-index: 1; - @if $bootstrap-theme { - position: relative; - - &::after { - content: ''; - position: absolute; - bottom: 0; - inset-inline-start: 0; - width: 100%; - height: rem(1px); - background: var-get($theme, 'border-color'); - z-index: 0; - } - } + @if $bootstrap-theme { + position: relative; + background: var-get($theme, 'item-background'); + + &::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 100%; + height: rem(1px); + background: var-get($theme, 'border-color'); + z-index: 0; + } + } } %tabs-header-content { @@ -204,6 +204,7 @@ @if $not-bootstrap-theme { transition: all .3s $tabs-animation-function; border: rem(1px) solid var-get($theme, 'border-color'); + border-radius: var-get($theme, 'border-radius'); &:hover, &:focus { @@ -240,7 +241,7 @@ } &:focus { - background: var-get($theme, 'item-active-background'); + background: var-get($theme, 'item-hover-background'); color: var-get($theme, 'item-hover-color'); border-bottom-color: transparent; } @@ -268,14 +269,15 @@ %tabs-header-item--selected { outline: 0; color: var-get($theme, 'item-active-color'); + background: var-get($theme, 'item-active-background'); &:hover, &:focus { - background: var-get($theme, 'item-active-background'); - color: if($variant == 'fluent', var-get($theme, 'item-hover-color'), var-get($theme, 'item-active-color')); + background: var-get($theme, 'item-active-hover-background'); + color: var-get($theme, 'item-active-hover-color'); igx-icon { - color: var-get($theme, 'item-active-icon-color'); + color: var-get($theme, 'item-active-hover-icon-color'); } } @@ -284,7 +286,6 @@ } @if $bootstrap-theme { - background: var-get($theme, 'item-active-background'); position: relative; box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); z-index: 1; @@ -310,6 +311,16 @@ &:hover { box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); + + &::before { + background: linear-gradient( + to right, + var-get($theme, 'border-color') 1px, + var-get($theme, 'item-active-hover-background') 1px, + var-get($theme, 'item-active-hover-background') calc(100% - 1px), + var-get($theme, 'border-color') calc(100% - 1px) + ); + } } } @@ -318,21 +329,15 @@ font-weight: 600; } } - - @if $indigo-theme { - &:hover, - &:focus-within { - background: var-get($theme, 'item-hover-background'); - } - } } %tabs-header-item:focus, %tabs-header-item--selected:focus { @if $bootstrap-theme { border: none; - box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color'); - border-radius: rem(4px); + box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color'); + border-bottom-left-radius: rem(4px); + border-bottom-right-radius: rem(4px); z-index: 1; &::after { diff --git a/src/app/tabs-showcase/tabs-showcase.sample.html b/src/app/tabs-showcase/tabs-showcase.sample.html index f90f445539c..bd9df358a8a 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.html +++ b/src/app/tabs-showcase/tabs-showcase.sample.html @@ -32,7 +32,7 @@ @for (contact of contacts; track contact.id) { @if(!properties.hideIcon) { - folder + } @if(!properties.hideText) { {{ contact.text }} diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts index b271789cfb2..fcf308b106f 100644 --- a/src/app/tabs-showcase/tabs-showcase.sample.ts +++ b/src/app/tabs-showcase/tabs-showcase.sample.ts @@ -20,13 +20,20 @@ import { defineComponents, IgcTabsComponent, IgcTabComponent, + IgcIconComponent, + registerIconFromText } from 'igniteui-webcomponents'; import { PropertyChangeService, Properties, } from '../properties-panel/property-change.service'; -defineComponents(IgcTabsComponent, IgcTabComponent); +defineComponents(IgcTabsComponent, IgcTabComponent, IgcIconComponent); + +registerIconFromText( + 'folder', + '' +); @Component({ selector: 'app-tabs-showcase-sample',