@basis-ng/styles 0.0.1-alpha.195 → 0.0.1-alpha.196
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/drawer.css +39 -33
package/package.json
CHANGED
|
@@ -1,46 +1,28 @@
|
|
|
1
1
|
b-drawer {
|
|
2
|
-
@apply fixed
|
|
3
|
-
transition:
|
|
4
|
-
transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
|
|
5
|
-
opacity 0.2s ease;
|
|
2
|
+
@apply fixed inset-0 z-999 pointer-events-none;
|
|
6
3
|
|
|
7
4
|
&.open,
|
|
8
5
|
&.dragging {
|
|
9
|
-
@apply
|
|
6
|
+
@apply pointer-events-auto;
|
|
10
7
|
}
|
|
11
8
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
&.bottom {
|
|
18
|
-
@apply bottom-2;
|
|
19
|
-
transform: translateY(100%);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&.top {
|
|
23
|
-
@apply top-2;
|
|
24
|
-
transform: translateY(-100%);
|
|
9
|
+
.drawer-backdrop {
|
|
10
|
+
@apply absolute inset-0 bg-black;
|
|
11
|
+
transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
25
12
|
}
|
|
26
13
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
&.left {
|
|
33
|
-
@apply left-2;
|
|
34
|
-
transform: translateX(-100%);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&.right {
|
|
38
|
-
@apply right-2;
|
|
39
|
-
transform: translateX(100%);
|
|
14
|
+
.drawer-panel {
|
|
15
|
+
@apply absolute flex box-border overflow-hidden rounded-2xl bg-surface text-font shadow-lg inset-ring-1 inset-ring-ring will-change-transform opacity-0 dark:bg-surface-dark dark:text-font-dark dark:inset-ring-ring-dark;
|
|
16
|
+
transition:
|
|
17
|
+
transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
|
|
18
|
+
opacity 0.2s ease;
|
|
40
19
|
}
|
|
41
20
|
|
|
21
|
+
&.open,
|
|
42
22
|
&.dragging {
|
|
43
|
-
|
|
23
|
+
.drawer-panel {
|
|
24
|
+
@apply opacity-100;
|
|
25
|
+
}
|
|
44
26
|
}
|
|
45
27
|
|
|
46
28
|
.drag-section {
|
|
@@ -56,6 +38,10 @@ b-drawer {
|
|
|
56
38
|
}
|
|
57
39
|
|
|
58
40
|
&.bottom {
|
|
41
|
+
.drawer-panel {
|
|
42
|
+
@apply left-2 right-2 bottom-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
|
|
43
|
+
}
|
|
44
|
+
|
|
59
45
|
.drag-section {
|
|
60
46
|
@apply top-0 left-0 right-0 h-10 cursor-ns-resize;
|
|
61
47
|
}
|
|
@@ -70,6 +56,10 @@ b-drawer {
|
|
|
70
56
|
}
|
|
71
57
|
|
|
72
58
|
&.top {
|
|
59
|
+
.drawer-panel {
|
|
60
|
+
@apply left-2 right-2 top-2 mx-auto max-h-[calc(100dvh-1rem)] min-h-0 h-1/2;
|
|
61
|
+
}
|
|
62
|
+
|
|
73
63
|
.drag-section {
|
|
74
64
|
@apply bottom-0 left-0 right-0 h-10 cursor-ns-resize;
|
|
75
65
|
}
|
|
@@ -84,6 +74,10 @@ b-drawer {
|
|
|
84
74
|
}
|
|
85
75
|
|
|
86
76
|
&.left {
|
|
77
|
+
.drawer-panel {
|
|
78
|
+
@apply top-2 bottom-2 left-2 max-w-[calc(100vw-1rem)] w-[320px];
|
|
79
|
+
}
|
|
80
|
+
|
|
87
81
|
.drag-section {
|
|
88
82
|
@apply top-0 right-0 bottom-0 w-5 cursor-ew-resize;
|
|
89
83
|
}
|
|
@@ -98,6 +92,10 @@ b-drawer {
|
|
|
98
92
|
}
|
|
99
93
|
|
|
100
94
|
&.right {
|
|
95
|
+
.drawer-panel {
|
|
96
|
+
@apply top-2 bottom-2 right-2 max-w-[calc(100vw-1rem)] w-[320px];
|
|
97
|
+
}
|
|
98
|
+
|
|
101
99
|
.drag-section {
|
|
102
100
|
@apply top-0 bottom-0 left-0 w-5 cursor-ew-resize;
|
|
103
101
|
}
|
|
@@ -110,8 +108,16 @@ b-drawer {
|
|
|
110
108
|
@apply pl-5;
|
|
111
109
|
}
|
|
112
110
|
}
|
|
111
|
+
|
|
112
|
+
&.dragging {
|
|
113
|
+
.drawer-backdrop,
|
|
114
|
+
.drawer-panel {
|
|
115
|
+
transition: none;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
113
118
|
}
|
|
114
119
|
|
|
115
|
-
html:has(b-drawer.open)
|
|
120
|
+
html:has(b-drawer.open),
|
|
121
|
+
html:has(b-drawer.dragging) {
|
|
116
122
|
overflow: hidden;
|
|
117
123
|
}
|