From ee9b54002dd2ca7cb1d43d5dcb0e47314a39f0e2 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 19 Mar 2024 00:29:07 -0700 Subject: [PATCH 1/2] fix(tabs): use border prop for bordered styling --- packages/calcite-components/src/components/tabs/tabs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss index a16d316bfa3..dbd27cb5d88 100644 --- a/packages/calcite-components/src/components/tabs/tabs.scss +++ b/packages/calcite-components/src/components/tabs/tabs.scss @@ -15,7 +15,7 @@ } :host([bordered]) { - box-shadow: inset 0 1px 0 var(--calcite-color-border-1); + box-shadow: inset 0 1px 0 var(--calcite-internal-tabs-border-color); background-color: var(--calcite-internal-tabs-background-color); ::slotted(calcite-tab-nav) { From 126c11a5db9398c3a433f95149623f7e271fca95 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 29 Mar 2024 19:21:06 -0700 Subject: [PATCH 2/2] fix styling --- .../src/components/tab-title/tab-title.scss | 3 +-- .../src/components/tabs/tabs.scss | 14 ++++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index 43a9c3eefe0..03a291a7b1a 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -228,8 +228,7 @@ } :host([selected][bordered]) .container { - border-inline-start-color: var(--calcite-color-border-1); - border-inline-end-color: var(--calcite-color-border-1); + border-inline-color: var(--calcite-internal-tabs-border-color); } :host([layout="inline"][bordered]), diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss index dbd27cb5d88..309e1b93637 100644 --- a/packages/calcite-components/src/components/tabs/tabs.scss +++ b/packages/calcite-components/src/components/tabs/tabs.scss @@ -18,16 +18,18 @@ box-shadow: inset 0 1px 0 var(--calcite-internal-tabs-border-color); background-color: var(--calcite-internal-tabs-background-color); + section { + border-color: var(--calcite-internal-tabs-border-color); + border-style: solid; + } + ::slotted(calcite-tab-nav) { margin-block-end: -1px; } } section { - @apply border-color-1 border border-solid flex - border-t - flex-grow - overflow-hidden; + @apply border flex flex-grow overflow-hidden; border-block-start-style: solid; border-block-start-color: var(--calcite-internal-tabs-border-color); @@ -35,8 +37,8 @@ section { :host([bordered][position="bottom"]) { box-shadow: - inset 0 1px 0 var(--calcite-color-border-1), - inset 0 -1px 0 var(--calcite-color-border-1); + inset 0 1px 0 var(--calcite-internal-tabs-border-color), + inset 0 -1px 0 var(--calcite-internal-tabs-border-color); ::slotted(calcite-tab-nav) { margin-block-start: -1px;