Skip to content

Commit

Permalink
fix(tab-title): Adjust hover styling for bordered Tab Title (#9867)
Browse files Browse the repository at this point in the history
**Related Issue:** #9854 

## Summary
Adjusts some styling for the Tab Titles to ensure the correct visual are
applied in `bordered` mode. When we look at updating Tabs component to
use less "sub components" I think this setup can be adjusted - right now
the "tab border" for bordered comes from styling external to Tab Title.

@ashetland @SkyeSeitz I changed the way some of the border are
implemented, can you give this a look?
  • Loading branch information
macandcheese authored Jul 29, 2024
1 parent feab834 commit 2c62917
Showing 1 changed file with 55 additions and 22 deletions.
77 changes: 55 additions & 22 deletions packages/calcite-components/src/components/tab-title/tab-title.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -209,7 +229,7 @@

.close-button {
@apply appearance-none
bg-foreground-1
bg-transparent
border-none
content-center
cursor-pointer
Expand All @@ -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;
}
Expand Down Expand Up @@ -260,16 +273,42 @@
}

// 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 {
& 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]:not([selected])) .container .close-button {
box-shadow: 0 2px 0 0 transparent;
}

:host([bordered]:hover) {
Expand All @@ -278,18 +317,12 @@
}
}

: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]),
Expand Down

0 comments on commit 2c62917

Please sign in to comment.