Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE handling mobile scrollbar behaviour
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2025-10-21 15:10:34 +02:00
parent ca6b73d615
commit dfb177eb99
1 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/css/components/article-revues-toolbar.css
View File

@ -4,8 +4,42 @@
.tablist {
@apply flex items-center overflow-x-scroll lg:overflow-x-visible gap-4 md:gap-8 lg:gap-12 border-b border-primary;
position: relative;
@media screen and (max-width: 1024px) {
border-bottom: none;
padding-bottom: 1em;
/* Ligne de 1px à 5px du bord du bas */
background: linear-gradient(
to right,
var(--wp--preset--color--primary, #136f63),
var(--wp--preset--color--primary, #136f63)
)
bottom 2em center / 100% 1px no-repeat;
&::-webkit-scrollbar {
width: 2em;
height: 1em;
}
&::-webkit-scrollbar-track {
background: #cef9ee;
border-radius: 100vw;
margin-block: 0.5em;
}
&::-webkit-scrollbar-thumb {
@apply bg-primary;
border-radius: 100vw;
}
&::-webkit-scrollbar-thumb:hover {
background: hsl(120 100% 10% / 1);
}
}
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;
@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;
/* white-space: normal;
word-wrap: break-word; */