diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss index dccff6569..ccb74cffb 100644 --- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss +++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss @@ -31,12 +31,25 @@ $theme: $bootstrap; } [part='tab-header'] { + border: none; + &:hover { + border: none; + background: var-get($theme, 'item-background');; + &::before { box-shadow: inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color--hover'), /* Top */ inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color--hover'), /* Left */ - inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover'), /* Right */ + inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover'); /* Right */ + + background: var-get($theme, 'item-hover-background'); + } + + &:hover:focus-within { + &::before { + box-shadow: none; + } } } @@ -54,8 +67,7 @@ $theme: $bootstrap; position: absolute; width: 100%; height: 100%; - box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color'); - border-radius: var-get($theme, 'border-radius'); + box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color'); z-index: 2; } } @@ -64,25 +76,47 @@ $theme: $bootstrap; :host([selected]) { [part='tab-header'] { position: relative; + background: var-get($theme, 'item-background'); &::before { box-shadow: inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color'), /* Top */ inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color'), /* Left */ - inset var(--_border-size) 0 0 0 var-get($theme, 'border-color'), /* Right */ + inset var(--_border-size) 0 0 0 var-get($theme, 'border-color'); /* Right */ + + background: var-get($theme, 'item-active-background'); + border-start-start-radius: var-get($theme, 'border-radius'); + border-start-end-radius: var-get($theme, 'border-radius'); } &:hover { border-top-color: var-get($theme, 'border-color'); border-inline-color: var-get($theme, 'border-color'); border-bottom-color: var-get($theme, 'item-background'); + background: var-get($theme, 'item-background'); + + &::before { + background: var-get($theme, 'item-active-hover-background'); + } } &:focus, - &:focus-within - { - background: var-get($theme, 'item-hover-background'); - z-index: 1; + &:focus-within { + border: none; + background: var-get($theme, 'item-background'); + + &::after{ + border-radius: var-get($theme, 'border-radius') var-get($theme, 'border-radius') rem(4px) rem(4px); + } + } + + &:focus-within { + &::before { + box-shadow: none; + border-bottom-left-radius: rem(4px); + border-bottom-right-radius: rem(4px); + background: var-get($theme, 'item-active-hover-background'); + } } } } diff --git a/src/components/tabs/themes/shared/tab/tab.common.scss b/src/components/tabs/themes/shared/tab/tab.common.scss index fb73b5ba7..910bfc9d7 100644 --- a/src/components/tabs/themes/shared/tab/tab.common.scss +++ b/src/components/tabs/themes/shared/tab/tab.common.scss @@ -7,6 +7,7 @@ $theme: $material; color: var-get($theme, 'item-text-color'); background: var-get($theme, 'item-background'); border-radius: var-get($theme, 'border-radius'); + border: rem(1px) solid var-get($theme, 'border-color'); ::slotted(igc-icon) { color: var-get($theme, 'item-icon-color'); @@ -16,6 +17,7 @@ $theme: $material; &:focus-within { color: var-get($theme, 'item-hover-color'); background: var-get($theme, 'item-hover-background'); + border: rem(1px) solid var-get($theme, 'border-color--hover'); ::slotted(igc-icon) { color: var-get($theme, 'item-hover-icon-color'); @@ -26,6 +28,7 @@ $theme: $material; :host([selected]) { [part='tab-header'] { color: var-get($theme, 'item-active-color'); + background: var-get($theme, 'item-active-background'); ::slotted(igc-icon) { color: var-get($theme, 'item-active-icon-color'); @@ -33,10 +36,11 @@ $theme: $material; &:hover, &:focus-within { - color: var-get($theme, 'item-active-color'); + color: var-get($theme, 'item-active-hover-color'); + background: var-get($theme, 'item-active-hover-background'); ::slotted(igc-icon) { - color: var-get($theme, 'item-active-icon-color'); + color: var-get($theme, 'item-active-hover-icon-color'); } } } diff --git a/src/components/tabs/themes/shared/tab/tab.fluent.scss b/src/components/tabs/themes/shared/tab/tab.fluent.scss index 247bda866..c2c222ec7 100644 --- a/src/components/tabs/themes/shared/tab/tab.fluent.scss +++ b/src/components/tabs/themes/shared/tab/tab.fluent.scss @@ -16,15 +16,4 @@ $theme: $fluent; [part='content'] { font-weight: 700; } - - [part='tab-header'] { - &:hover, - &:focus-within { - color: var-get($theme, 'item-hover-color'); - - ::slotted(igc-icon) { - color: var-get($theme, 'item-hover-icon-color'); - } - } - } } diff --git a/src/components/tabs/themes/shared/tab/tab.indigo.scss b/src/components/tabs/themes/shared/tab/tab.indigo.scss index 8da76773e..5f78fcb6c 100644 --- a/src/components/tabs/themes/shared/tab/tab.indigo.scss +++ b/src/components/tabs/themes/shared/tab/tab.indigo.scss @@ -13,10 +13,19 @@ $theme: $indigo; [part='tab-header'] { padding: pad-block(rem(12px)) pad-inline(rem(16px)); + border-top: rem(1px) solid transparent; + border-inline: none; + + &:hover, + &:focus-within { + border-top: rem(1px) solid transparent; + border-inline: none; + border-bottom: rem(1px) solid var-get($theme, 'border-color--hover'); + } } [part='content'] { @include type-style('subtitle-2'); text-transform: uppercase; -} +} \ No newline at end of file diff --git a/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss b/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss index ce199de98..a664c440b 100644 --- a/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss @@ -7,6 +7,10 @@ $theme: $bootstrap; --header-min-height: #{rem(48px)}; } +[part~='inner'] { + flex-grow: 1; +} + :host([alignment='start']) { [part~='inner']:not([part~='scrollable']) { &::after { diff --git a/src/components/tabs/themes/shared/tabs/tabs.common.scss b/src/components/tabs/themes/shared/tabs/tabs.common.scss index ab17ee2e3..d9a234d4e 100644 --- a/src/components/tabs/themes/shared/tabs/tabs.common.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.common.scss @@ -15,7 +15,7 @@ $theme: $material; --active-background: #{var-get($theme, 'button-hover-background')}; --border-color: #{var-get($theme, 'button-background')}; --disabled-foreground: #{var-get($theme, 'button-disabled-color')}; - --disabled-background: #{var-get($theme, 'item-background')}; + --disabled-background: #{var-get($theme, 'button-background')}; [part~='base'] { transition: all 0ms; diff --git a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss index 3799e9e91..92319fbba 100644 --- a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss @@ -8,6 +8,7 @@ $theme: $indigo; :host { --header-min-height: #{rem(40px)}; --scroll-btn-size: #{rem(40px)}; + --nav-btn-border-color: #{var-get($theme, 'border-color')}; } [part='selected-indicator'] { @@ -27,7 +28,6 @@ $theme: $indigo; position: absolute; width: 100%; height: $indicator-height; - background-color: var-get($theme, 'border-color'); inset-block-end: 100%; } } @@ -45,11 +45,12 @@ $theme: $indigo; } igc-icon-button:hover::part(base) { + background-color: var-get($theme, 'button-hover-background'); + &::after { content: ''; position: absolute; inset: 0; - background-color: var-get($theme, 'button-hover-background'); z-index: 1; } } @@ -58,6 +59,11 @@ igc-icon-button::part(base) { overflow: hidden; } +igc-icon-button[disabled]::part(base), +igc-icon-button:disabled::part(base) { + border-bottom: rem(1px) solid var(--nav-btn-border-color); +} + igc-icon-button::part(icon) { --size: #{rem(16px)}; diff --git a/src/components/tabs/themes/shared/tabs/tabs.material.scss b/src/components/tabs/themes/shared/tabs/tabs.material.scss index 52893229d..bc6935f21 100644 --- a/src/components/tabs/themes/shared/tabs/tabs.material.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.material.scss @@ -18,3 +18,7 @@ $theme: $material; background: var-get($theme, 'indicator-color'); } } + +igc-icon-button:hover::part(icon) { + color: var(--hover-foreground); +} \ No newline at end of file diff --git a/src/components/tabs/themes/tabs.base.scss b/src/components/tabs/themes/tabs.base.scss index d07b6d173..2a56a7520 100644 --- a/src/components/tabs/themes/tabs.base.scss +++ b/src/components/tabs/themes/tabs.base.scss @@ -43,7 +43,6 @@ grid-template-rows: minmax(var(--header-min-height), auto) auto 1fr; align-items: center; position: relative; - flex-grow: 1; ::slotted(igc-tab) { display: contents;