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