Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE introducing a tablist dedicated component

Browse Source
This commit is contained in:
Antoine M 2026-02-04 11:21:41 +01:00
parent 3ca2f0c851
commit b462fbfed4
2 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/css/app.css
View File

@ -34,6 +34,8 @@
@import './components/scroll-top.css'; @import './components/scroll-top.css';
@import './components/member-author-card.css'; @import './components/member-author-card.css';
@import './components/search-module.css'; @import './components/search-module.css';
@import './components/author-card.css';
@import './components/tablist.css';
/* ########### EDITOR CONTENT ############ */ /* ########### EDITOR CONTENT ############ */
@import './editor-content/entry-content.css'; @import './editor-content/entry-content.css';
@ -79,6 +81,7 @@
@import './blocks/image-stack.css'; @import './blocks/image-stack.css';
@import './blocks/highlight-timeline-step.css'; @import './blocks/highlight-timeline-step.css';
@import './blocks/highlight-timeline.css'; @import './blocks/highlight-timeline.css';
@import './blocks/press-ressources.css';
@import './blocks/wp-block-heading.css'; @import './blocks/wp-block-heading.css';
@import './blocks/wp-block-list.css'; @import './blocks/wp-block-list.css';

28
resources/css/components/tablist.css Normal file
View File

@ -0,0 +1,28 @@
.tablist {
@apply flex items-center overflow-y-visible gap-8 lg:gap-3 xl:gap-12 border-b border-primary py-0;
position: relative;
span {
@apply sr-only lg:not-sr-only;
}
button {
@apply text-base md:text-lg lg:text-lg mt-8 nunito pb-4 flex flex-col lg:flex-row items-center gap-2 lg:gap-4 text-left shrink-0;
grid-template-columns: auto 1fr;
word-break: keep-all;
.icon {
@apply w-8 h-8 block;
}
&[aria-selected='true'] {
@apply text-primary border-b-4 border-primary;
.icon {
@apply filter-primary;
}
}
&[aria-selected='false'] {
@apply text-black opacity-40;
}
}
}