From 72701960bc90560232213729f336895d65e7f55e Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 26 Jul 2024 15:45:16 -0700 Subject: [PATCH 1/4] fix(tab-title): Adjust hover styling for `bordered` Tab Title --- .../src/components/tab-title/tab-title.scss | 78 +++++++++++++------ 1 file changed, 54 insertions(+), 24 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 9be58245133..d8587b4a277 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -104,13 +104,33 @@ inline-size: calc(100% + var(--calcite-spacing-base)); } +:host([bordered]) .container:not(.container--bottom) { + border-block-end: 1px solid transparent; +} + +:host([bordered]:not([selected]):hover) .container:not(.container--bottom) { + border-block-end: 1px solid var(--calcite-color-border-1); +} + +:host([bordered]:not([selected]):hover:not(:focus)) { + .selected-indicator { + background-color: var(--calcite-color-foreground-2); + } + .container:not(.container--bottom) .selected-indicator { + box-shadow: inset 0 1px var(--calcite-color-border-1); + } + .container.container--bottom .selected-indicator { + box-shadow: inset 0 -1px var(--calcite-color-border-1); + } +} + :host([bordered][selected]) .container::after { @apply absolute block w-full h-0.5 transition-default; - inset-block-end: 0; + inset-block-end: -1px; inset-inline-start: 0; inset-inline-end: 0; inline-size: 100%; @@ -209,7 +229,7 @@ .close-button { @apply appearance-none - bg-foreground-1 + bg-transparent border-none content-center cursor-pointer @@ -221,17 +241,10 @@ self-center text-color-3 transition-default; - background-color: var(--calcite-button-transparent-1); - // compensate for the added border on parent and ensure focus alignment + margin-inline-start: var(--calcite-spacing-sm); margin-inline-end: var(--calcite-spacing-px); - box-shadow: - var(--calcite-spacing-px) 0 0 0 transparent, - 0 var(--calcite-spacing-xxs) 0 0 transparent; block-size: calc(100% - var(--calcite-spacing-xxs)); - &:hover { - box-shadow: var(--calcite-spacing-px) 0 0 0 var(--calcite-color-foreground-3); - } &:focus { @apply focus-normal; } @@ -260,36 +273,53 @@ } // bordered styles -:host([bordered]) { - margin-inline-end: 0; +:host([bordered]) .container { + &:not(.container--bottom) .close-button { + block-size: calc(100% - var(--calcite-spacing-px)); + margin-block-start: -1px; + } + .close-button { + box-shadow: 0 2px 0 0 transparent; + & calcite-icon { + margin-block-start: var(--calcite-spacing-px); + } + + &:focus, + &:hover, + &:active { + box-shadow: 0 2px 0 0 var(--calcite-color-foreground-3); + } + } + + &.container--bottom .close-button { + box-shadow: 0 -2px 0 0 transparent; + & calcite-icon { + margin-block-end: var(--calcite-spacing-px); + } + &:focus, + &:hover, + &:active { + box-shadow: 0 -2px 0 0 var(--calcite-color-foreground-3); + } + } } :host([bordered][selected]) { box-shadow: inset 0 -1px var(--calcite-color-foreground-1); } -:host([bordered][selected][position="bottom"]) { - box-shadow: inset 0 var(--calcite-spacing-base) 0 var(--calcite-color-foreground-1); -} - :host([bordered]:hover) { .container { background-color: var(--calcite-color-foreground-2); } } -:host([closable]) .container, :host([bordered]) .container { - border-inline-start: var(--calcite-spacing-px) solid transparent; - border-inline-end: var(--calcite-spacing-px) solid transparent; - .close-button { - margin-inline-start: var(--calcite-spacing-sm); - } + border-inline: var(--calcite-spacing-px) solid transparent; } :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-color-border-1); } :host([layout="inline"][bordered]), From 581074acf244b5f54cb93827f181e6019139d64a Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 26 Jul 2024 15:48:03 -0700 Subject: [PATCH 2/4] Clean up --- .../src/components/tab-title/tab-title.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 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 d8587b4a277..ae7940c6cae 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -276,12 +276,12 @@ :host([bordered]) .container { &:not(.container--bottom) .close-button { block-size: calc(100% - var(--calcite-spacing-px)); - margin-block-start: -1px; + margin-block-start: var(--calcite-spacing-px); } .close-button { box-shadow: 0 2px 0 0 transparent; & calcite-icon { - margin-block-start: var(--calcite-spacing-px); + margin-block-start: var(--calcite-spacing-xxs); } &:focus, @@ -294,7 +294,7 @@ &.container--bottom .close-button { box-shadow: 0 -2px 0 0 transparent; & calcite-icon { - margin-block-end: var(--calcite-spacing-px); + margin-block-end: var(--calcite-spacing-xxs); } &:focus, &:hover, From 7890b913250ced952aa2dca06425d56eaa187bfc Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 26 Jul 2024 15:53:37 -0700 Subject: [PATCH 3/4] Clean up --- .../src/components/tab-title/tab-title.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 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 ae7940c6cae..d8587b4a277 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -276,12 +276,12 @@ :host([bordered]) .container { &:not(.container--bottom) .close-button { block-size: calc(100% - var(--calcite-spacing-px)); - margin-block-start: var(--calcite-spacing-px); + margin-block-start: -1px; } .close-button { box-shadow: 0 2px 0 0 transparent; & calcite-icon { - margin-block-start: var(--calcite-spacing-xxs); + margin-block-start: var(--calcite-spacing-px); } &:focus, @@ -294,7 +294,7 @@ &.container--bottom .close-button { box-shadow: 0 -2px 0 0 transparent; & calcite-icon { - margin-block-end: var(--calcite-spacing-xxs); + margin-block-end: var(--calcite-spacing-px); } &:focus, &:hover, From 133165247b7b468122fb1756316258c2c2f27875 Mon Sep 17 00:00:00 2001 From: Adam Date: Mon, 29 Jul 2024 09:45:15 -0700 Subject: [PATCH 4/4] Clean up --- .../src/components/tab-title/tab-title.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 d8587b4a277..0c0b3870512 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -279,7 +279,6 @@ margin-block-start: -1px; } .close-button { - box-shadow: 0 2px 0 0 transparent; & calcite-icon { margin-block-start: var(--calcite-spacing-px); } @@ -308,6 +307,10 @@ box-shadow: inset 0 -1px var(--calcite-color-foreground-1); } +:host([bordered]:not([selected])) .container .close-button { + box-shadow: 0 2px 0 0 transparent; +} + :host([bordered]:hover) { .container { background-color: var(--calcite-color-foreground-2);