studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Update Tabs component: add data-icon and update style

Browse source
This commit is contained in:
Timothée Goguely 2024-09-10 15:43:40 +02:00
parent 6cb010c921
commit 97b4a77299
1 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/components/Tabs.vue
View file

@ -4,12 +4,13 @@
<button
v-for="tab in tabs"
:key="tab.label"
:id="slugify(tab.label) + '-label'"
:id="slugify(tab.label, {lower: true}) + '-label'"
type="button"
role="tab"
:data-icon="tab.icon ?? null"
:aria-selected="tab.isActive"
:aria-controls="slugify(tab.label)"
:tabindex="tab.isActive ? '-1' : false"
:aria-controls="slugify(tab.label, {lower: true})"
:tabindex="tab.isActive ? '-1' : null"
@click="changeTab(tab.id)"
>
<span class="label">{{ tab.label }}</span>
@ -39,20 +40,23 @@ function changeTab(tabId) {
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0 auto var(--space-12);
border-radius: var(--rounded-full);
height: 3.75rem; /* 60px */
margin: 0 auto var(--space-32);
border-radius: var(--rounded-lg);
background-color: var(--color-grey-200);
}
[role="tab"] {
--tab-height: 2.5rem;
--tab-py: var(--space-12);
--tab-px: var(--space-16);
--tab-h: 2.5rem;
--tab-min-w: 15rem; /* 240px */
--tab-py: var(--space-8);
--tab-px: var(--space-12);
--tab-border-w: 4px;
position: relative;
display: inline-flex;
display: flex;
align-items: center;
font-size: var(--text-md);
border-radius: var(--rounded-full);
text-align: left;
border-radius: var(--rounded-md);
background-color: var(--background, var(--color-background));
color: var(--color, var(--color-text));
z-index: 2;
@ -60,39 +64,50 @@ function changeTab(tabId) {
margin: 0;
cursor: pointer;
gap: var(--space-16);
height: var(--tab-height);
min-width: var(--tab-min-w);
height: var(--tab-h);
border: var(--tab-border-w) solid var(--color-grey-200);
}
[role="tab"]:focus,
[role="tab"]:hover {
background-color: var(--color-white-70);
}
[role="tab"]:focus-visible {
z-index: 20;
}
[role="tab"] .label {
flex-grow: 1;
font-family: var(--font-serif);
margin-top: 0.1em;
}
[role="tab"] .count {
font-size: var(--text-sm);
font-weight: 500;
margin-top: -0.1em;
}
[role="tab"] + [role="tab"] {
margin-left: calc(var(--tab-border-w) / -2);
}
[role="tab"][aria-selected="true"] {
--background: var(--color-background);
z-index: 10;
}
[role="tab"][aria-selected="true"]:hover {
background-color: var(--color-white-100);
}
[role="tab"][aria-selected="false"] {
--background: var(--color-grey-200);
--color: var(--color-grey-700);
}
[role="tab"][aria-selected="true"] + [aria-selected="false"]::before {
content: "";
display: inline-block;
height: var(--tab-height);
width: calc(var(--tab-px) * 2);
position: absolute;
left: calc(var(--tab-px) * -1);
background-color: var(--color-grey-200);
z-index: -1;
[role="tab"][data-icon="favorite"]::before {
--icon-color: var(--color-grey-400);
}
[role="tab"][data-icon="favorite"][aria-selected="true"]::before {
--icon-color: var(--color-brand);
}
[role="tabpanel"] {
width: 100%;