opensourcemirror
/
daisyui
mirror of https://github.com/saadeghi/daisyui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: use CSS scrollbar-gutter for drawer. close #2622, close #2483, close #2782, close #2142

This commit is contained in:
Pouya Saadeghi 2024-02-12 23:50:21 +03:00
parent a795f48cab
commit 863afaf44b
3 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/styled/drawer.css
View File

@ -1,7 +1,6 @@
.drawer {
width: 100%;
&-side {
@apply overflow-x-hidden;
& > .drawer-overlay {
@apply cursor-pointer bg-transparent transition-colors duration-200 ease-out;
}

4
src/components/unstyled/drawer.css
View File

@ -5,7 +5,7 @@
@apply col-start-2 row-start-1 min-w-0;
}
&-side {
@apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-y-auto overscroll-contain;
@apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-x-hidden overflow-y-hidden overscroll-contain;
height: 100vh;
height: 100dvh;
& > .drawer-overlay {
@ -26,7 +26,7 @@
@apply fixed h-0 w-0 appearance-none opacity-0;
&:checked {
& ~ .drawer-side {
@apply pointer-events-auto visible;
@apply pointer-events-auto visible overflow-y-auto;
& > *:not(.drawer-overlay) {
transform: translateX(0%);
}

32
src/utilities/unstyled/drawer.css
View File

@ -1,15 +1,29 @@
.drawer-open > .drawer-toggle {
@apply hidden;
& ~ .drawer-side {
@apply pointer-events-auto visible sticky block w-auto overscroll-auto;
& > *:not(.drawer-overlay) {
transform: translateX(0%);
[dir="rtl"] & {
.drawer-open {
& > .drawer-toggle {
@apply hidden;
& ~ .drawer-side {
@apply pointer-events-auto visible sticky block w-auto overscroll-auto;
& > *:not(.drawer-overlay) {
transform: translateX(0%);
[dir="rtl"] & {
transform: translateX(0%);
}
}
}
&:checked ~ .drawer-side {
@apply pointer-events-auto visible;
}
}
&:checked ~ .drawer-side {
@apply pointer-events-auto visible;
& > .drawer-side {
@apply overflow-y-auto;
}
}
/* these two should have the same specificity */
html:has(.drawer-toggle:checked) {
@apply overflow-y-hidden;
scrollbar-gutter: stable;
}
html:has(.drawer-open.drawer-open) {
@apply overflow-y-auto;
scrollbar-gutter: auto;
}