forked from saadeghi/daisyui
/
drawer.css
101 lines (97 loc) · 2.32 KB
/
drawer.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
.drawer {
@apply grid overflow-hidden w-full;
height: 100vh;
height: 100dvh;
&.drawer-end {
direction: rtl;
}
&.drawer-end > * {
direction: ltr;
}
&.drawer-end > .drawer-toggle {
& ~ .drawer-side > .drawer-overlay + * {
@apply translate-x-full justify-self-end;
}
&:checked ~ .drawer-side > .drawer-overlay + * {
@apply translate-x-0;
}
}
}
:where(.drawer-toggle ~ .drawer-content) {
height: inherit;
}
.drawer-toggle {
@apply absolute h-0 w-0 appearance-none opacity-0;
& ~ .drawer-content {
@apply z-0 col-start-1 row-start-1 overflow-y-auto;
}
& ~ .drawer-side {
@apply col-start-1 row-start-1 grid max-h-screen;
& > .drawer-overlay {
@apply invisible col-start-1 row-start-1 opacity-0;
}
& > .drawer-overlay + * {
@apply z-10 col-start-1 row-start-1 -translate-x-full transform;
}
}
&:checked {
& ~ .drawer-side {
@apply overflow-y-auto;
& > .drawer-overlay {
@apply visible;
}
& > .drawer-overlay + * {
@apply translate-x-0;
}
}
}
}
[dir="rtl"] .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
@apply translate-x-full;
}
[dir="rtl"] .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
@apply translate-x-0;
}
[dir="rtl"] .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
--tw-translate-x: -100%;
}
[dir="rtl"] .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
--tw-translate-x: 0px;
}
@media (min-width: 1024px) {
.drawer-mobile {
grid-auto-columns: max-content auto;
& > .drawer-toggle {
& ~ .drawer-content {
@apply h-auto lg:col-start-2;
}
& ~ .drawer-side {
@apply overflow-y-auto;
& > .drawer-overlay {
@apply lg:visible;
}
& > .drawer-overlay + * {
@apply lg:translate-x-0;
}
}
}
}
.drawer-mobile.drawer-end {
grid-auto-columns: auto max-content;
direction: ltr;
& > .drawer-toggle {
& ~ .drawer-content {
@apply h-auto lg:col-start-1;
}
& ~ .drawer-side {
@apply overflow-y-auto lg:col-start-2;
& > .drawer-overlay {
@apply lg:visible;
}
& > .drawer-overlay + * {
@apply lg:translate-x-0;
}
}
}
}
}