[Svelte]: Fix Tab appearance (#62380)

* [Svelte]:Fix Tabs component appearance

* Fix by review comments
This commit is contained in:
Vova Kulikov 2024-05-02 14:37:21 +02:00 committed by GitHub
parent dc99398d97
commit b73d2456dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -104,23 +104,26 @@
all: unset;
cursor: pointer;
border: none;
background: none;
align-items: center;
letter-spacing: normal;
margin: 0;
min-height: 2rem;
padding: 0.25rem 0.75rem;
color: var(--text-body);
text-transform: none;
display: inline-flex;
flex-flow: row nowrap;
justify-content: center;
white-space: nowrap;
gap: 0.5rem;
position: relative;
border-bottom: 2px solid transparent;
font-weight: 500;
&::after {
content: '';
display: block;
position: absolute;
bottom: 0;
transform: translateY(50%);
width: 100%;
border-bottom: 2px solid transparent;
}
&:hover {
color: var(--text-title);
@ -128,10 +131,10 @@
}
&[aria-selected='true'] {
border-color: var(--brand-secondary);
font-weight: 500;
color: var(--text-title);
&:hover {
&::after {
border-color: var(--brand-secondary);
}
}
@ -144,7 +147,7 @@
&::before {
content: attr(data-tab-title);
display: block;
font-weight: 700;
font-weight: 500;
height: 0;
visibility: hidden;
}