@stackflow/plugin-basic-ui 1.2.2 → 1.3.0
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/dist/basicUIPlugin.css.d.ts +4 -0
- package/dist/components/AppBar.css.d.ts +1 -1
- package/dist/components/AppBar.d.ts +5 -1
- package/dist/index.css +39 -15
- package/dist/index.css.map +3 -3
- package/dist/index.js +9 -1
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +9 -1
- package/dist/index.mjs.map +2 -2
- package/package.json +5 -4
- package/src/basicUIPlugin.css.ts +12 -3
- package/src/components/AppBar.css.ts +45 -8
- package/src/components/AppBar.tsx +16 -0
|
@@ -6,13 +6,17 @@ export declare const globalVars: MapLeafNodes<{
|
|
|
6
6
|
computedTransitionDuration: string;
|
|
7
7
|
appBar: {
|
|
8
8
|
borderColor: string;
|
|
9
|
+
borderColorTransitionDuration: string;
|
|
9
10
|
borderSize: string;
|
|
10
11
|
height: string;
|
|
11
12
|
heightTransitionDuration: string;
|
|
12
13
|
minHeight: string;
|
|
13
14
|
iconColor: string;
|
|
15
|
+
iconColorTransitionDuration: string;
|
|
14
16
|
textColor: string;
|
|
17
|
+
textColorTransitionDuration: string;
|
|
15
18
|
backgroundColor: string;
|
|
19
|
+
backgroundColorTransitionDuration: string;
|
|
16
20
|
overflow: string;
|
|
17
21
|
};
|
|
18
22
|
bottomSheet: {
|
|
@@ -9,7 +9,7 @@ export declare const appBar: import("@vanilla-extract/recipes/dist/declarations/
|
|
|
9
9
|
selectors: {
|
|
10
10
|
[x: string]: {
|
|
11
11
|
transform: "translate3d(0, 100vh, 0)";
|
|
12
|
-
transition:
|
|
12
|
+
transition: string;
|
|
13
13
|
} | {
|
|
14
14
|
transform: "translate3d(0, 0, 0)";
|
|
15
15
|
transition?: undefined;
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare const AppBar: import("react").ForwardRefExoticComponent<Partial<Pick<{
|
|
3
3
|
borderColor: string;
|
|
4
|
+
borderColorTransitionDuration: string;
|
|
4
5
|
borderSize: string;
|
|
5
6
|
height: string;
|
|
6
7
|
heightTransitionDuration: string;
|
|
7
8
|
minHeight: string;
|
|
8
9
|
iconColor: string;
|
|
10
|
+
iconColorTransitionDuration: string;
|
|
9
11
|
textColor: string;
|
|
12
|
+
textColorTransitionDuration: string;
|
|
10
13
|
backgroundColor: string;
|
|
14
|
+
backgroundColorTransitionDuration: string;
|
|
11
15
|
overflow: string;
|
|
12
|
-
}, "height" | "backgroundColor" | "borderColor" | "overflow" | "borderSize" | "heightTransitionDuration" | "iconColor" | "textColor">> & {
|
|
16
|
+
}, "height" | "backgroundColor" | "borderColor" | "overflow" | "borderColorTransitionDuration" | "borderSize" | "heightTransitionDuration" | "iconColor" | "iconColorTransitionDuration" | "textColor" | "textColorTransitionDuration" | "backgroundColorTransitionDuration">> & {
|
|
13
17
|
title?: React.ReactNode;
|
|
14
18
|
appendLeft?: (() => React.ReactNode) | undefined;
|
|
15
19
|
appendRight?: (() => React.ReactNode) | undefined;
|
package/dist/index.css
CHANGED
|
@@ -1,33 +1,41 @@
|
|
|
1
|
-
/* vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+
|
|
1
|
+
/* vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U3UrEMBCF7/cpAt4omNJW60J9GEmTaTu7bSbmZ10U393sYvFml9pWEHFJLiZhvpkDmZzkKXt+UJt8k7K3FWOcOy/ktu7ohZsuNKh5JRxKHjAGcttYClpxSR3Zkl3Vdf04QinsT5C2qcR1ess+d5IVN2OFvBXaoUfSXAUrDkHJUjeGSepN8KDm8sKYeLC8IqvAntOfrkf1nyr0Q6IcvkLJMrP/LtcCNq0v2V1SWOinUUs19/FyXn+UseUwenkW1/10dKl8D3s/U8QXuvjdZ33Fc/RSNbQDe0goWYtKgR7jKvKeeu5aAD+MsBUKg4tDfJyH91Uy+FJ28aU/7ktpUkx3pjxZ/641TRRw8aZ/6E3F0ZsMofYxDXagfUzTpCGmfQBJ9o9OWgkAAA== */
|
|
2
2
|
._1q6dj2j0 {
|
|
3
3
|
--stackflow-plugin-basic-ui-background-color: #fff;
|
|
4
4
|
--stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);
|
|
5
|
-
--stackflow-plugin-basic-ui-transition-duration:
|
|
6
|
-
--stackflow-plugin-basic-ui-computed-transition-duration:
|
|
5
|
+
--stackflow-plugin-basic-ui-transition-duration: 0s;
|
|
6
|
+
--stackflow-plugin-basic-ui-computed-transition-duration: 0s;
|
|
7
7
|
--stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);
|
|
8
|
+
--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;
|
|
8
9
|
--stackflow-plugin-basic-ui-app-bar-border-size: 1px;
|
|
9
10
|
--stackflow-plugin-basic-ui-app-bar-height: 3.5rem;
|
|
10
|
-
--stackflow-plugin-basic-ui-app-bar-height-transition-duration:
|
|
11
|
+
--stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;
|
|
11
12
|
--stackflow-plugin-basic-ui-app-bar-min-height: 3.5rem;
|
|
12
13
|
--stackflow-plugin-basic-ui-app-bar-icon-color: #212124;
|
|
14
|
+
--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;
|
|
13
15
|
--stackflow-plugin-basic-ui-app-bar-text-color: #212124;
|
|
16
|
+
--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;
|
|
14
17
|
--stackflow-plugin-basic-ui-app-bar-background-color: #fff;
|
|
18
|
+
--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;
|
|
15
19
|
--stackflow-plugin-basic-ui-app-bar-overflow: hidden;
|
|
16
20
|
--stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;
|
|
17
21
|
}
|
|
18
22
|
._1q6dj2j1 {
|
|
19
23
|
--stackflow-plugin-basic-ui-background-color: #fff;
|
|
20
24
|
--stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);
|
|
21
|
-
--stackflow-plugin-basic-ui-transition-duration:
|
|
22
|
-
--stackflow-plugin-basic-ui-computed-transition-duration:
|
|
25
|
+
--stackflow-plugin-basic-ui-transition-duration: 0s;
|
|
26
|
+
--stackflow-plugin-basic-ui-computed-transition-duration: 0s;
|
|
23
27
|
--stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);
|
|
28
|
+
--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;
|
|
24
29
|
--stackflow-plugin-basic-ui-app-bar-border-size: 0.5px;
|
|
25
30
|
--stackflow-plugin-basic-ui-app-bar-height: 2.75rem;
|
|
26
|
-
--stackflow-plugin-basic-ui-app-bar-height-transition-duration:
|
|
31
|
+
--stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;
|
|
27
32
|
--stackflow-plugin-basic-ui-app-bar-min-height: 2.75rem;
|
|
28
33
|
--stackflow-plugin-basic-ui-app-bar-icon-color: #212124;
|
|
34
|
+
--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;
|
|
29
35
|
--stackflow-plugin-basic-ui-app-bar-text-color: #212124;
|
|
36
|
+
--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;
|
|
30
37
|
--stackflow-plugin-basic-ui-app-bar-background-color: #fff;
|
|
38
|
+
--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;
|
|
31
39
|
--stackflow-plugin-basic-ui-app-bar-overflow: hidden;
|
|
32
40
|
--stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;
|
|
33
41
|
}
|
|
@@ -170,7 +178,7 @@
|
|
|
170
178
|
height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));
|
|
171
179
|
}
|
|
172
180
|
|
|
173
|
-
/* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#
|
|
181
|
+
/* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1XyW7bMBC95yt4KWAXpkB5SVL51kNvPfUDCkqibMYUqYr0lqL/XoraSMmS7SCnIIYPFjkznnnzZpH32z/vFni5QuDvAwAp5XBL6GarAnDA+QRCqXC0S5g4woztN/o6xJJGcE8hzjL9kMNWZ7p++Pfg1RZ9Y1EcSF6o326v1nCtzY21UCtvcrHnMYwEE/ntVrua2joAr5DymJxqK7/9mCXLxXJpLo+UMRhtMd+QAKgcc5mIPJ0BkeGIqnMhYk6pooIHPdfe7BlsrcJ4n+Pix3QGQnGCcotjcbzdsshjko9YrRD+8xi/zF980AE7E3VsOJSC7RXpy5eAhV3VBq4KOYYVWcQTH6EvM4D0d/oR4Ju1cQIkHXBQF5GKNQFA62F8NDI+ykn6EQFySwxNm0Lq3RRA6uDrj4tpKfTNgnd2RRZbsq2okxN/PCcVYa1utCi7UQNZACiXRAGUnUCEWTSBPvh6L46SvpLpFKA34T9Yy8uxgjSEQ4ftJ+EsElk08i9Sbjm7Km2RbmkLj+fCJtpYk/3M6U05bfBaGbzqxSYSXLvF1UTihECcEwxN9UIlMoNYLUj4YUDGsv3o2L416mZhcvNTHt9pZWy0lz4+lfMcxzHlGz2CAPJWesy4MgFJMw1kIRlTmTGsGyMXnDhSz+b+zt2LasStrcsOuE7fAqFUzsB9pGztDkBQLHGx2gZg7s3LgNtMzb2nHgbPAY4UPZDOxPbmQ26j9/fZcic0flQhuARfmejuzIMiJzWQh/cj3r2AtE5dX1GtrcrBptgri4he9lLR5KzNcUW4TnLCyKnwIVfrtgAgI4m+8ytCJFrYzF595PnPTzVRGOWkeRnyvVUje6zOQsHidb0G0FdTWlU300dD8zgc3K2tuiv8Lg4woxsOqSKp1H1Lh0Tyi3G2VwZOo2afGr8TnFKmjRfQMwLlWapi1fyuA939xNEv8/xDS/YifUSoi1QNkoFyVcJ/aSBNoL50uupbWqTIbmjbRupKz+7xKLJbY8UM5C36vSE2gk68LTma7jIOQYpPsKJsrdBptSPlfplOsduwQyaineN32cwMLdp3ccIYzSSVnaxSviU57ee/ObfsJkMzpQgzLzJaYoX3SriKVwZNL0UD/1T80Cr/AYNQizfCEAAA */
|
|
174
182
|
._1yk3a450 {
|
|
175
183
|
min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);
|
|
176
184
|
}
|
|
@@ -181,18 +189,26 @@
|
|
|
181
189
|
background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);
|
|
182
190
|
z-index: var(--_1dlf4344);
|
|
183
191
|
will-change: transform, opacity;
|
|
192
|
+
transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration);
|
|
184
193
|
}
|
|
185
194
|
._1q6dj2j1 ._1yk3a452 {
|
|
186
195
|
position: absolute;
|
|
187
196
|
}
|
|
188
197
|
._1q6dj2j1 ._1dlf434b ._1yk3a452 {
|
|
189
198
|
transform: translate3d(100%, 0, 0);
|
|
190
|
-
transition:
|
|
199
|
+
transition:
|
|
200
|
+
background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration),
|
|
201
|
+
box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration),
|
|
202
|
+
transform 0s;
|
|
191
203
|
}
|
|
192
204
|
._1q6dj2j0 ._1yk3a452 {
|
|
193
205
|
opacity: 0;
|
|
194
206
|
transform: translate3d(0, 10rem, 0);
|
|
195
|
-
transition:
|
|
207
|
+
transition:
|
|
208
|
+
background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration),
|
|
209
|
+
box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration),
|
|
210
|
+
transform var(--_1dlf4340),
|
|
211
|
+
opacity var(--_1dlf4340);
|
|
196
212
|
}
|
|
197
213
|
._1q6dj2j0 ._1dlf4349 ._1yk3a452,
|
|
198
214
|
._1q6dj2j0 ._1dlf434a ._1yk3a452 {
|
|
@@ -204,7 +220,11 @@
|
|
|
204
220
|
}
|
|
205
221
|
._1q6dj2j1 ._1yk3a454 {
|
|
206
222
|
transform: translate3d(0, 100vh, 0);
|
|
207
|
-
transition:
|
|
223
|
+
transition:
|
|
224
|
+
background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration),
|
|
225
|
+
box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration),
|
|
226
|
+
transform var(--_1dlf4340),
|
|
227
|
+
opacity var(--_1dlf4340);
|
|
208
228
|
}
|
|
209
229
|
._1q6dj2j1 ._1dlf4349 ._1yk3a454,
|
|
210
230
|
._1q6dj2j1 ._1dlf434a ._1yk3a454 {
|
|
@@ -212,7 +232,11 @@
|
|
|
212
232
|
}
|
|
213
233
|
._1q6dj2j1 ._1dlf434b ._1yk3a454 {
|
|
214
234
|
transform: translate3d(0, 100vh, 0);
|
|
215
|
-
transition:
|
|
235
|
+
transition:
|
|
236
|
+
background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration),
|
|
237
|
+
box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration),
|
|
238
|
+
transform var(--_1dlf4340),
|
|
239
|
+
opacity var(--_1dlf4340);
|
|
216
240
|
}
|
|
217
241
|
._1yk3a455 {
|
|
218
242
|
height: constant(safe-area-inset-top);
|
|
@@ -230,18 +254,18 @@
|
|
|
230
254
|
}
|
|
231
255
|
._1yk3a458 {
|
|
232
256
|
color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);
|
|
233
|
-
transition: opacity 300ms;
|
|
257
|
+
transition: opacity 300ms, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);
|
|
234
258
|
width: 2.25rem;
|
|
235
259
|
height: 2.75rem;
|
|
236
260
|
}
|
|
237
261
|
._1yk3a458:active {
|
|
238
262
|
opacity: 0.2;
|
|
239
|
-
transition: opacity 0s;
|
|
263
|
+
transition: opacity 0s, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);
|
|
240
264
|
}
|
|
241
265
|
._1yk3a45b {
|
|
242
266
|
width: var(--_1dlf4345);
|
|
243
267
|
color: var(--stackflow-plugin-basic-ui-app-bar-text-color);
|
|
244
|
-
transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);
|
|
268
|
+
transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration), color var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration);
|
|
245
269
|
}
|
|
246
270
|
._1q6dj2j0 ._1yk3a45b {
|
|
247
271
|
width: 100%;
|
package/dist/index.css.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+
|
|
4
|
-
"sourcesContent": ["._1q6dj2j0 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-size: 1px;\n --stackflow-plugin-basic-ui-app-bar-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-app-bar-min-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j1 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-size: 0.5px;\n --stackflow-plugin-basic-ui-app-bar-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-app-bar-min-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j5 {\n pointer-events: none;\n}", ".dhthxq0 {\n width: 100%;\n}\n.dhthxq1 {\n height: 100%;\n}\n.dhthxq2 {\n top: 0;\n}\n.dhthxq3 {\n left: 0;\n}\n.dhthxq4 {\n position: absolute;\n}\n.dhthxq5 {\n position: relative;\n}\n.dhthxq7 {\n display: flex;\n}\n.dhthxq8 {\n flex: 1;\n}\n.dhthxq9 {\n align-items: center;\n}\n.dhthxqa {\n align-items: flex-end;\n}\n.dhthxqb {\n justify-content: center;\n}\n.dhthxqc {\n overflow: hidden;\n}\n.dhthxqd {\n white-space: nowrap;\n}\n.dhthxqe {\n text-align: center;\n}\n.dhthxqf {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.dhthxqg {\n box-sizing: border-box;\n}\n.dhthxqh {\n box-sizing: content-box;\n}\n.dhthxqi {\n appearance: none;\n border: 0;\n padding: 0;\n background: none;\n}", "._1dlf4346 {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n}\n._1dlf4347 {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n}\n._1dlf4348 {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1dlf434c {\n transform: translate3d(100%, 0, 0);\n}\n._1dlf434i {\n opacity: 0;\n z-index: var(--_1dlf4341);\n will-change: opacity;\n}\n._1q6dj2j0 ._1dlf434i {\n height: 10rem;\n background: linear-gradient(var(--stackflow-plugin-basic-ui-dim-background-color), rgba(0, 0, 0, 0));\n}\n\n ._1dlf4349 ._1dlf434i,\n ._1dlf434a ._1dlf434i\n {\n opacity: 1;\n}\n\n ._1dlf434b ._1dlf434i,\n ._1dlf434c ._1dlf434i\n {\n opacity: 0;\n}\n._1dlf434j {\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n z-index: var(--_1dlf4342);\n will-change: transform;\n}\n._1dlf434j::-webkit-scrollbar {\n display: none;\n}\n._1q6dj2j1 ._1dlf434j {\n transform: translate3d(100%, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j1 ._1dlf434a ._1dlf434j\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j0 ._1dlf434j {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j0 ._1dlf434a ._1dlf434j\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1dlf434k {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340), padding-top var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + constant(safe-area-inset-top));\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + env(safe-area-inset-top));\n}\n._1q6dj2j1 ._1dlf434l {\n transform: translate3d(0, 100%, 0);\n}\n._1dlf434m {\n width: 1.25rem;\n z-index: var(--_1dlf4343);\n}\n._1dlf434n {\n top: var(--stackflow-plugin-basic-ui-app-bar-height);\n height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));\n}", "._1yk3a450 {\n min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);\n}\n._1yk3a451 {\n overflow: var(--stackflow-plugin-basic-ui-app-bar-overflow);\n}\n._1yk3a452 {\n background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);\n z-index: var(--_1dlf4344);\n will-change: transform, opacity;\n}\n._1q6dj2j1 ._1yk3a452 {\n position: absolute;\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a452 {\n transform: translate3d(100%, 0, 0);\n transition: 0s;\n}\n._1q6dj2j0 ._1yk3a452 {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1yk3a452,\n ._1q6dj2j0 ._1dlf434a ._1yk3a452\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1yk3a453 {\n box-shadow: inset 0px calc(-1 * var(--stackflow-plugin-basic-ui-app-bar-border-size)) 0 var(--stackflow-plugin-basic-ui-app-bar-border-color);\n}\n._1q6dj2j1 ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1yk3a454,\n ._1q6dj2j1 ._1dlf434a ._1yk3a454\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1yk3a455 {\n height: constant(safe-area-inset-top);\n height: env(safe-area-inset-top);\n}\n._1yk3a456 {\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n}\n._1yk3a457 {\n padding: 0 0.5rem;\n}\n._1yk3a457:empty {\n display: none;\n}\n._1yk3a458 {\n color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);\n transition: opacity 300ms;\n width: 2.25rem;\n height: 2.75rem;\n}\n._1yk3a458:active {\n opacity: 0.2;\n transition: opacity 0s;\n}\n._1yk3a45b {\n width: var(--_1dlf4345);\n color: var(--stackflow-plugin-basic-ui-app-bar-text-color);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n}\n._1q6dj2j0 ._1yk3a45b {\n width: 100%;\n justify-content: flex-start;\n padding-left: 1rem;\n font-size: 1.1875rem;\n line-height: 1.5;\n font-weight: bold;\n box-sizing: border-box;\n}\n._1q6dj2j1 ._1yk3a45b {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: -apple-system, BlinkMacSystemFont;\n font-weight: 600;\n font-size: 1rem;\n left: 50%;\n transform: translate(-50%);\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n top: constant(safe-area-inset-top);\n top: env(safe-area-inset-top);\n}\n._1q6dj2j0 ._1yk3a45c {\n padding-left: 0.375rem;\n}\n._1yk3a45d {\n left: 50%;\n height: 1.25rem;\n transform: translate(-50%);\n max-width: 5rem;\n display: none;\n width: var(--_1dlf4345);\n}\n._1q6dj2j1 ._1yk3a45d {\n display: block;\n}\n._1yk3a45e {\n text-overflow: ellipsis;\n font-size: inherit;\n font-weight: inherit;\n}\n._1yk3a45f {\n padding: 0 0.5rem;\n margin-left: auto;\n}\n._1yk3a45f:empty {\n display: none;\n}\n._1q6dj2j0 ._1yk3a45f {\n padding: 0 0.5rem 0 0;\n}", "._1ht38h03 {\n transition: var(--_1ht38h00);\n}\n._1ht38h07 {\n transform: translate3d(100%, 0, 0);\n}\n._1ht38h0d {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_1ht38h01);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0d, ._1ht38h05 ._1ht38h0d {\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0d, ._1ht38h07 ._1ht38h0d {\n opacity: 0;\n}\n._1ht38h0e {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) 0 0;\n will-change: transform, opacity;\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0e, ._1ht38h05 ._1ht38h0e {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0e, ._1ht38h07 ._1ht38h0e {\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}", "._5ozg8c3 {\n transition: var(--_5ozg8c0);\n}\n._5ozg8c7 {\n transform: translate3d(100%, 0, 0);\n}\n._5ozg8cd {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_5ozg8c1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8cd, ._5ozg8c5 ._5ozg8cd {\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8cd, ._5ozg8c7 ._5ozg8cd {\n opacity: 0;\n}\n._5ozg8ce {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n margin: 0 2.5rem;\n box-shadow: 0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1);\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius);\n will-change: transform, opacity;\n transform: scale(1.1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8ce, ._5ozg8c5 ._5ozg8ce {\n transform: scale(1);\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8ce, ._5ozg8c7 ._5ozg8ce {\n transform: scale(1.1);\n opacity: 0;\n}"],
|
|
5
|
-
"mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;
|
|
3
|
+
"sources": ["vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U3UrEMBCF7/cpAt4omNJW60J9GEmTaTu7bSbmZ10U393sYvFml9pWEHFJLiZhvpkDmZzkKXt+UJt8k7K3FWOcOy/ktu7ohZsuNKh5JRxKHjAGcttYClpxSR3Zkl3Vdf04QinsT5C2qcR1ess+d5IVN2OFvBXaoUfSXAUrDkHJUjeGSepN8KDm8sKYeLC8IqvAntOfrkf1nyr0Q6IcvkLJMrP/LtcCNq0v2V1SWOinUUs19/FyXn+UseUwenkW1/10dKl8D3s/U8QXuvjdZ33Fc/RSNbQDe0goWYtKgR7jKvKeeu5aAD+MsBUKg4tDfJyH91Uy+FJ28aU/7ktpUkx3pjxZ/641TRRw8aZ/6E3F0ZsMofYxDXagfUzTpCGmfQBJ9o9OWgkAAA==", "vanilla-extract-css-ns:src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=", "vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE62U3Y6jIBSA7/sU3GxSs9JgOzu7Qx9mg0AVS8FBbPcn++6LqK3UVtvJGC8gh/Od/7P6mTC5e9m8vIK/CwBSQveZ0bVikGqpDQZHYpYQVtYJdlKfYCnrTCiYkkpQWAvIxAFea0Xbxb/Fqid//yB5mvrDU60hqhJWaIXb806bQ0fuX6IoBrokVNjfI0mApBdkg+mIkli+YcsEoS8xQO4PlYRX6vgYoK27/YFCMf4LX5lLokZ4ElJCmhOVcdzrdcT3V1asCwSu4DkXWW4xSJDhh22QSwykUJwYmBnCBFd2+aF6xcBkKVmiNsAmRh+kM9V+Z4feBr7FYzEZiHtpkJ7kNjadxtI5LApKUrTCIzc+A05eUaOlbFIHTzzdCwvP0lYkVObKrWuaT9RvPa7fuVlCBzDu7bT4lBjvExNVKYlzSGnFg6In4Mr9x9rwnCufrRFqUK4innk7qF1xeTrhCgrHYdS8xY3JuI/yzT0VFnoiLPRIWMOmfDTIFrT/lN0Tg5Iw5joPWl3ObkNSlu5iYLsM4MU4ZLUhzcF35wCJASWSzi6EEByBr4Bq5Z67XVKRHYfEcOLmoeK2gUafZoWr4z0Dt+dCzjRjNxphqQ5e6SSYzV2hV+tv3Qq9M+KbUFu1JpsonwxwO9jbPkGNdwA+i2nc+Q8mrUFDowcAAA==", "vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1XyW7bMBC95yt4KWAXpkB5SVL51kNvPfUDCkqibMYUqYr0lqL/XoraSMmS7SCnIIYPFjkznnnzZpH32z/vFni5QuDvAwAp5XBL6GarAnDA+QRCqXC0S5g4woztN/o6xJJGcE8hzjL9kMNWZ7p++Pfg1RZ9Y1EcSF6o326v1nCtzY21UCtvcrHnMYwEE/ntVrua2joAr5DymJxqK7/9mCXLxXJpLo+UMRhtMd+QAKgcc5mIPJ0BkeGIqnMhYk6pooIHPdfe7BlsrcJ4n+Pix3QGQnGCcotjcbzdsshjko9YrRD+8xi/zF980AE7E3VsOJSC7RXpy5eAhV3VBq4KOYYVWcQTH6EvM4D0d/oR4Ju1cQIkHXBQF5GKNQFA62F8NDI+ykn6EQFySwxNm0Lq3RRA6uDrj4tpKfTNgnd2RRZbsq2okxN/PCcVYa1utCi7UQNZACiXRAGUnUCEWTSBPvh6L46SvpLpFKA34T9Yy8uxgjSEQ4ftJ+EsElk08i9Sbjm7Km2RbmkLj+fCJtpYk/3M6U05bfBaGbzqxSYSXLvF1UTihECcEwxN9UIlMoNYLUj4YUDGsv3o2L416mZhcvNTHt9pZWy0lz4+lfMcxzHlGz2CAPJWesy4MgFJMw1kIRlTmTGsGyMXnDhSz+b+zt2LasStrcsOuE7fAqFUzsB9pGztDkBQLHGx2gZg7s3LgNtMzb2nHgbPAY4UPZDOxPbmQ26j9/fZcic0flQhuARfmejuzIMiJzWQh/cj3r2AtE5dX1GtrcrBptgri4he9lLR5KzNcUW4TnLCyKnwIVfrtgAgI4m+8ytCJFrYzF595PnPTzVRGOWkeRnyvVUje6zOQsHidb0G0FdTWlU300dD8zgc3K2tuiv8Lg4woxsOqSKp1H1Lh0Tyi3G2VwZOo2afGr8TnFKmjRfQMwLlWapi1fyuA939xNEv8/xDS/YifUSoi1QNkoFyVcJ/aSBNoL50uupbWqTIbmjbRupKz+7xKLJbY8UM5C36vSE2gk68LTma7jIOQYpPsKJsrdBptSPlfplOsduwQyaineN32cwMLdp3ccIYzSSVnaxSviU57ee/ObfsJkMzpQgzLzJaYoX3SriKVwZNL0UD/1T80Cr/AYNQizfCEAAA", "vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTsKICBvcGFjaXR5OiAxOwp9Ci5fMWh0MzhoMDYgLl8xaHQzOGgwZSwgLl8xaHQzOGgwNyAuXzFodDM4aDBlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0=", "vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogc2NhbGUoMS4xKTsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjNCAuXzVvemc4Y2UsIC5fNW96ZzhjNSAuXzVvemc4Y2UgewogIHRyYW5zZm9ybTogc2NhbGUoMSk7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNlLCAuXzVvemc4YzcgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQ=="],
|
|
4
|
+
"sourcesContent": ["._1q6dj2j0 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0s;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-size: 1px;\n --stackflow-plugin-basic-ui-app-bar-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-min-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j1 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0s;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-size: 0.5px;\n --stackflow-plugin-basic-ui-app-bar-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-min-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j5 {\n pointer-events: none;\n}", ".dhthxq0 {\n width: 100%;\n}\n.dhthxq1 {\n height: 100%;\n}\n.dhthxq2 {\n top: 0;\n}\n.dhthxq3 {\n left: 0;\n}\n.dhthxq4 {\n position: absolute;\n}\n.dhthxq5 {\n position: relative;\n}\n.dhthxq7 {\n display: flex;\n}\n.dhthxq8 {\n flex: 1;\n}\n.dhthxq9 {\n align-items: center;\n}\n.dhthxqa {\n align-items: flex-end;\n}\n.dhthxqb {\n justify-content: center;\n}\n.dhthxqc {\n overflow: hidden;\n}\n.dhthxqd {\n white-space: nowrap;\n}\n.dhthxqe {\n text-align: center;\n}\n.dhthxqf {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.dhthxqg {\n box-sizing: border-box;\n}\n.dhthxqh {\n box-sizing: content-box;\n}\n.dhthxqi {\n appearance: none;\n border: 0;\n padding: 0;\n background: none;\n}", "._1dlf4346 {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n}\n._1dlf4347 {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n}\n._1dlf4348 {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1dlf434c {\n transform: translate3d(100%, 0, 0);\n}\n._1dlf434i {\n opacity: 0;\n z-index: var(--_1dlf4341);\n will-change: opacity;\n}\n._1q6dj2j0 ._1dlf434i {\n height: 10rem;\n background: linear-gradient(var(--stackflow-plugin-basic-ui-dim-background-color), rgba(0, 0, 0, 0));\n}\n\n ._1dlf4349 ._1dlf434i,\n ._1dlf434a ._1dlf434i\n {\n opacity: 1;\n}\n\n ._1dlf434b ._1dlf434i,\n ._1dlf434c ._1dlf434i\n {\n opacity: 0;\n}\n._1dlf434j {\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n z-index: var(--_1dlf4342);\n will-change: transform;\n}\n._1dlf434j::-webkit-scrollbar {\n display: none;\n}\n._1q6dj2j1 ._1dlf434j {\n transform: translate3d(100%, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j1 ._1dlf434a ._1dlf434j\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j0 ._1dlf434j {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j0 ._1dlf434a ._1dlf434j\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1dlf434k {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340), padding-top var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + constant(safe-area-inset-top));\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + env(safe-area-inset-top));\n}\n._1q6dj2j1 ._1dlf434l {\n transform: translate3d(0, 100%, 0);\n}\n._1dlf434m {\n width: 1.25rem;\n z-index: var(--_1dlf4343);\n}\n._1dlf434n {\n top: var(--stackflow-plugin-basic-ui-app-bar-height);\n height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));\n}", "._1yk3a450 {\n min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);\n}\n._1yk3a451 {\n overflow: var(--stackflow-plugin-basic-ui-app-bar-overflow);\n}\n._1yk3a452 {\n background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);\n z-index: var(--_1dlf4344);\n will-change: transform, opacity;\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration);\n}\n._1q6dj2j1 ._1yk3a452 {\n position: absolute;\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a452 {\n transform: translate3d(100%, 0, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform 0s;\n}\n._1q6dj2j0 ._1yk3a452 {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1yk3a452,\n ._1q6dj2j0 ._1dlf434a ._1yk3a452\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1yk3a453 {\n box-shadow: inset 0px calc(-1 * var(--stackflow-plugin-basic-ui-app-bar-border-size)) 0 var(--stackflow-plugin-basic-ui-app-bar-border-color);\n}\n._1q6dj2j1 ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1yk3a454,\n ._1q6dj2j1 ._1dlf434a ._1yk3a454\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1yk3a455 {\n height: constant(safe-area-inset-top);\n height: env(safe-area-inset-top);\n}\n._1yk3a456 {\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n}\n._1yk3a457 {\n padding: 0 0.5rem;\n}\n._1yk3a457:empty {\n display: none;\n}\n._1yk3a458 {\n color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);\n transition: opacity 300ms, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);\n width: 2.25rem;\n height: 2.75rem;\n}\n._1yk3a458:active {\n opacity: 0.2;\n transition: opacity 0s, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);\n}\n._1yk3a45b {\n width: var(--_1dlf4345);\n color: var(--stackflow-plugin-basic-ui-app-bar-text-color);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration), color var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration);\n}\n._1q6dj2j0 ._1yk3a45b {\n width: 100%;\n justify-content: flex-start;\n padding-left: 1rem;\n font-size: 1.1875rem;\n line-height: 1.5;\n font-weight: bold;\n box-sizing: border-box;\n}\n._1q6dj2j1 ._1yk3a45b {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: -apple-system, BlinkMacSystemFont;\n font-weight: 600;\n font-size: 1rem;\n left: 50%;\n transform: translate(-50%);\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n top: constant(safe-area-inset-top);\n top: env(safe-area-inset-top);\n}\n._1q6dj2j0 ._1yk3a45c {\n padding-left: 0.375rem;\n}\n._1yk3a45d {\n left: 50%;\n height: 1.25rem;\n transform: translate(-50%);\n max-width: 5rem;\n display: none;\n width: var(--_1dlf4345);\n}\n._1q6dj2j1 ._1yk3a45d {\n display: block;\n}\n._1yk3a45e {\n text-overflow: ellipsis;\n font-size: inherit;\n font-weight: inherit;\n}\n._1yk3a45f {\n padding: 0 0.5rem;\n margin-left: auto;\n}\n._1yk3a45f:empty {\n display: none;\n}\n._1q6dj2j0 ._1yk3a45f {\n padding: 0 0.5rem 0 0;\n}", "._1ht38h03 {\n transition: var(--_1ht38h00);\n}\n._1ht38h07 {\n transform: translate3d(100%, 0, 0);\n}\n._1ht38h0d {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_1ht38h01);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0d, ._1ht38h05 ._1ht38h0d {\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0d, ._1ht38h07 ._1ht38h0d {\n opacity: 0;\n}\n._1ht38h0e {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) 0 0;\n will-change: transform, opacity;\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0e, ._1ht38h05 ._1ht38h0e {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0e, ._1ht38h07 ._1ht38h0e {\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}", "._5ozg8c3 {\n transition: var(--_5ozg8c0);\n}\n._5ozg8c7 {\n transform: translate3d(100%, 0, 0);\n}\n._5ozg8cd {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_5ozg8c1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8cd, ._5ozg8c5 ._5ozg8cd {\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8cd, ._5ozg8c7 ._5ozg8cd {\n opacity: 0;\n}\n._5ozg8ce {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n margin: 0 2.5rem;\n box-shadow: 0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1);\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius);\n will-change: transform, opacity;\n transform: scale(1.1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8ce, ._5ozg8c5 ._5ozg8ce {\n transform: scale(1);\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8ce, ._5ozg8c7 ._5ozg8ce {\n transform: scale(1.1);\n opacity: 0;\n}"],
|
|
5
|
+
"mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;ACzCF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;;;ACxDF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGM;AAAA;AAGN;AAAA;AAGM;AAAA;AAGN;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGQ;AAAA;AAGR;AAAA;AAEF;AACE;AACA;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAEF;AACE;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;AC5EF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGU;AAAA;AAGV;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;;;AChIF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;;;AC/BF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.js
CHANGED
|
@@ -107,7 +107,7 @@ var import_react = require("react");
|
|
|
107
107
|
|
|
108
108
|
// src/basicUIPlugin.css.ts
|
|
109
109
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
110
|
-
var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", computedTransitionDuration: "var(--stackflow-plugin-basic-ui-computed-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
|
|
110
|
+
var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", computedTransitionDuration: "var(--stackflow-plugin-basic-ui-computed-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", iconColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", textColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", backgroundColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
|
|
111
111
|
var stackWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1q6dj2j2", variantClassNames: { theme: { android: "_1q6dj2j0", cupertino: "_1q6dj2j1" }, loading: { true: "_1q6dj2j5" } }, defaultVariants: {}, compoundVariants: [] });
|
|
112
112
|
|
|
113
113
|
// src/utils/compact.ts
|
|
@@ -635,13 +635,17 @@ var AppBar = (0, import_react7.forwardRef)(
|
|
|
635
635
|
border = true,
|
|
636
636
|
modalPresentationStyle,
|
|
637
637
|
iconColor,
|
|
638
|
+
iconColorTransitionDuration,
|
|
638
639
|
textColor,
|
|
640
|
+
textColorTransitionDuration,
|
|
639
641
|
borderColor,
|
|
642
|
+
borderColorTransitionDuration,
|
|
640
643
|
borderSize,
|
|
641
644
|
height,
|
|
642
645
|
heightTransitionDuration,
|
|
643
646
|
overflow,
|
|
644
647
|
backgroundColor,
|
|
648
|
+
backgroundColorTransitionDuration,
|
|
645
649
|
onTopClick
|
|
646
650
|
}, ref) => {
|
|
647
651
|
var _a, _b;
|
|
@@ -765,13 +769,17 @@ var AppBar = (0, import_react7.forwardRef)(
|
|
|
765
769
|
style: (0, import_dynamic2.assignInlineVars)(
|
|
766
770
|
compactMap({
|
|
767
771
|
[globalVars.appBar.iconColor]: iconColor,
|
|
772
|
+
[globalVars.appBar.iconColorTransitionDuration]: iconColorTransitionDuration,
|
|
768
773
|
[globalVars.appBar.textColor]: textColor,
|
|
774
|
+
[globalVars.appBar.textColorTransitionDuration]: textColorTransitionDuration,
|
|
769
775
|
[globalVars.appBar.borderColor]: borderColor,
|
|
776
|
+
[globalVars.appBar.borderColorTransitionDuration]: borderColorTransitionDuration,
|
|
770
777
|
[globalVars.appBar.borderSize]: borderSize,
|
|
771
778
|
[globalVars.appBar.height]: height,
|
|
772
779
|
[globalVars.appBar.heightTransitionDuration]: heightTransitionDuration,
|
|
773
780
|
[globalVars.appBar.overflow]: overflow,
|
|
774
781
|
[globalVars.appBar.backgroundColor]: backgroundColor || globalVars.backgroundColor,
|
|
782
|
+
[globalVars.appBar.backgroundColorTransitionDuration]: backgroundColorTransitionDuration,
|
|
775
783
|
[vars.appBar.center.mainWidth]: `${maxWidth}px`
|
|
776
784
|
})
|
|
777
785
|
),
|