@luxfi/ui 5.5.3 → 6.0.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.
Files changed (122) hide show
  1. package/README.md +109 -0
  2. package/package.json +81 -73
  3. package/commerce/ui/conf.ts +0 -13
  4. package/commerce/ui/context.tsx +0 -123
  5. package/commerce/ui/store.ts +0 -295
  6. package/components/access-code-input.tsx +0 -71
  7. package/components/analytics.tsx +0 -23
  8. package/components/auth/auth-listener.tsx +0 -29
  9. package/components/auth/auth-token/clear-auth-token.tsx +0 -12
  10. package/components/auth/auth-token/set-auth-token.tsx +0 -16
  11. package/components/auth/common-auth-domains.ts +0 -17
  12. package/components/auth/login-panel.tsx +0 -111
  13. package/components/auth/mobile-login-button.tsx +0 -107
  14. package/components/auth/signup-panel.tsx +0 -113
  15. package/components/back-button.tsx +0 -49
  16. package/components/chat-widget.tsx +0 -85
  17. package/components/commerce/bag-button.tsx +0 -98
  18. package/components/commerce/buy-button.tsx +0 -34
  19. package/components/commerce/checkout-button.tsx +0 -129
  20. package/components/commerce/checkout-panel/cart-accordian.tsx +0 -66
  21. package/components/commerce/checkout-panel/checkout-panel-props.ts +0 -10
  22. package/components/commerce/checkout-panel/desktop-bag-carousel.tsx +0 -36
  23. package/components/commerce/checkout-panel/desktop-cp.tsx +0 -83
  24. package/components/commerce/checkout-panel/index.tsx +0 -126
  25. package/components/commerce/checkout-panel/mobile-cp.tsx +0 -67
  26. package/components/commerce/checkout-panel/policy-links.tsx +0 -29
  27. package/components/commerce/checkout-panel/steps-indicator.tsx +0 -39
  28. package/components/commerce/checkout-panel/thank-you.tsx +0 -18
  29. package/components/commerce/desktop-bag-popup.tsx +0 -78
  30. package/components/commerce/drawer/index.tsx +0 -88
  31. package/components/commerce/drawer/micro.tsx +0 -145
  32. package/components/commerce/drawer/shell.tsx +0 -85
  33. package/components/contact-dialog/contact-form.tsx +0 -116
  34. package/components/contact-dialog/disclaimer.tsx +0 -13
  35. package/components/contact-dialog/index.tsx +0 -64
  36. package/components/copyright.tsx +0 -21
  37. package/components/drawer-margin.tsx +0 -28
  38. package/components/footer.tsx +0 -78
  39. package/components/header/desktop-nav-menu.tsx +0 -204
  40. package/components/header/desktop.tsx +0 -65
  41. package/components/header/index.tsx +0 -50
  42. package/components/header/mobile-bag-drawer.tsx +0 -51
  43. package/components/header/mobile-menu-toggle-button.tsx +0 -35
  44. package/components/header/mobile-nav-menu-ai.tsx +0 -51
  45. package/components/header/mobile-nav-menu-item.tsx +0 -47
  46. package/components/header/mobile-nav-menu.tsx +0 -102
  47. package/components/header/mobile.tsx +0 -170
  48. package/components/header/theme-toggle.tsx +0 -26
  49. package/components/icons/avatar.tsx +0 -11
  50. package/components/icons/bag-icon.tsx +0 -10
  51. package/components/icons/index.ts +0 -6
  52. package/components/icons/left-arrow.tsx +0 -11
  53. package/components/icons/lux-logo.tsx +0 -10
  54. package/components/icons/right-arrow.tsx +0 -10
  55. package/components/icons/social-icon.tsx +0 -35
  56. package/components/icons/social-svg.css +0 -3
  57. package/components/index.ts +0 -26
  58. package/components/logo.tsx +0 -92
  59. package/components/main.tsx +0 -27
  60. package/components/mini-chart/index.tsx +0 -8
  61. package/components/mini-chart/mini-chart-props.ts +0 -44
  62. package/components/mini-chart/mini-chart.tsx +0 -85
  63. package/components/mini-chart/wrapper.tsx +0 -23
  64. package/components/not-found/index.tsx +0 -28
  65. package/components/not-found/not-found-content.mdx +0 -5
  66. package/components/tooltip.tsx +0 -31
  67. package/environment.d.ts +0 -6
  68. package/next/analytics/fpixel.ts +0 -16
  69. package/next/analytics/google-analytics.ts +0 -14
  70. package/next/analytics/index.ts +0 -3
  71. package/next/analytics/pixel-analytics.tsx +0 -55
  72. package/next/font/get-app-router-font-classes.ts +0 -17
  73. package/next/font/load-and-return-lux-next-fonts-on-import.ts +0 -68
  74. package/next/font/local/Druk-Wide-Bold.ttf +0 -0
  75. package/next/font/local/Druk-Wide-Medium.ttf +0 -0
  76. package/next/font/local/InterVariable-Italic.ttf +0 -0
  77. package/next/font/local/InterVariable-Italic.woff2 +0 -0
  78. package/next/font/local/InterVariable.ttf +0 -0
  79. package/next/font/local/InterVariable.woff2 +0 -0
  80. package/next/font/next-font-desc.ts +0 -28
  81. package/next/font/pages-router-font-vars.tsx +0 -18
  82. package/next/head-metadata/from-next/metadata-types.ts +0 -158
  83. package/next/head-metadata/from-next/opengraph-types.ts +0 -267
  84. package/next/head-metadata/from-next/twitter-types.ts +0 -92
  85. package/next/head-metadata/index.tsx +0 -208
  86. package/next/index.ts +0 -2
  87. package/next/middleware/determine-device-mw.ts +0 -29
  88. package/root-layout/WHY_THIS_IS_SEPARATE.txt +0 -2
  89. package/root-layout/index.tsx +0 -112
  90. package/site-def/footer/community.tsx +0 -61
  91. package/site-def/footer/company.ts +0 -37
  92. package/site-def/footer/ecosystem.ts +0 -37
  93. package/site-def/footer/index.tsx +0 -26
  94. package/site-def/footer/legal.ts +0 -28
  95. package/site-def/footer/network.ts +0 -45
  96. package/site-def/footer/svg/warpcast-logo.svg +0 -12
  97. package/site-def/index.ts +0 -4
  98. package/site-def/main-nav.tsx +0 -460
  99. package/style/cart-animation.css +0 -29
  100. package/style/checkout-animation.css +0 -23
  101. package/style/drawer-handle-overrides.css +0 -160
  102. package/style/fonts/COPY_TO_PUBLIC_FOR_NON_NEXT.txt +0 -0
  103. package/style/fonts/Druk-Wide-Bold.ttf +0 -0
  104. package/style/fonts/Druk-Wide-Medium.ttf +0 -0
  105. package/style/fonts/InterVariable-Italic.ttf +0 -0
  106. package/style/fonts/InterVariable-Italic.woff2 +0 -0
  107. package/style/fonts/InterVariable.ttf +0 -0
  108. package/style/fonts/InterVariable.woff2 +0 -0
  109. package/style/lux-colors.css +0 -85
  110. package/style/lux-fonts.css +0 -30
  111. package/style/lux-global-non-next.css +0 -52
  112. package/style/lux-global.css +0 -51
  113. package/tailwind/fontFamily.tailwind.lux.ts +0 -18
  114. package/tailwind/index.ts +0 -2
  115. package/tailwind/lux-tw-fonts.ts +0 -40
  116. package/tailwind/tailwind.config.lux-preset.ts +0 -10
  117. package/tsconfig.json +0 -15
  118. package/types/chatbot-config.ts +0 -7
  119. package/types/chatbot-suggested-question.ts +0 -7
  120. package/types/contact-info.ts +0 -11
  121. package/types/index.ts +0 -4
  122. package/types/site-def.ts +0 -46
@@ -1,460 +0,0 @@
1
- import type { LinkDef } from '@hanzo/ui/types'
2
-
3
- import {
4
- AIChatAct,
5
- AIChat,
6
- Anodized,
7
- BlogAct,
8
- Blog,
9
- BridgeAct,
10
- Bridge,
11
- ChangeLogAct,
12
- ChangeLog,
13
- Chrome,
14
- CoinsAct,
15
- Coins,
16
- CompareCardsAct,
17
- CompareCards,
18
- CreditAct,
19
- Credit,
20
- CustomersAct,
21
- Customers,
22
- CustomerSupportAct,
23
- CustomerSupport,
24
- DeveloperDocsAct,
25
- DeveloperDocs,
26
- ExchangeAct,
27
- Exchange,
28
- ExplorerAct,
29
- Explorer,
30
- FAQsAct,
31
- FAQs,
32
- GoldCard,
33
- GuidesAct,
34
- Guides,
35
- GunMetal,
36
- IntegrationAct,
37
- Integration,
38
- Irradescent,
39
- LaunchSubnetAct,
40
- LaunchSubnet,
41
- LuxFinanceAct,
42
- LuxFinance,
43
- LuxPassAct,
44
- LuxPass,
45
- LuxQuestsAct,
46
- LuxQuests,
47
- LuxWalletAct,
48
- MarketAct,
49
- Market,
50
- MirroredTitanium,
51
- MoreBenefitsAct,
52
- MoreBenefits,
53
- OpenSourceAct,
54
- OpenSource,
55
- SafeAct,
56
- Safe,
57
- ShopAct,
58
- Shop,
59
- Sterling,
60
- TemplatesAct,
61
- Templates,
62
- ValidatorsAct,
63
- Validators,
64
- ViewAllCardsAct,
65
- ViewAllCards,
66
- Wallet,
67
- } from '@luxfi/menu-icons'
68
-
69
-
70
- export interface LinkDefExtended extends LinkDef {
71
- isAIMenu?: boolean
72
- icon?: any,
73
- details?: string,
74
- childMenu?: ChildMenu[]
75
- }
76
-
77
- export interface ChildMenu extends LinkDef{
78
- groupName?:string
79
- icon_act?:any
80
- }
81
-
82
- export default [
83
- {
84
- title: "AI",
85
- icon: "",
86
- href: "https://lux.chat",
87
- newTab: false,
88
- isAIMenu: true,
89
- },
90
- {
91
- title: "Cards",
92
- icon: "",
93
- details: "Lux Credit is a part of the Lux Network ecosystem that offers a crypto credit card solution. This service allows users to easily conduct transactions using their cryptocurrency holdings. The Lux Credit card aims to bridge the gap between traditional financial systems and the growing world of digital assets, providing a seamless way to spend cryptocurrencies in everyday transactions.",
94
- href: "https://lux.credit",
95
- newTab: false,
96
- childMenu: [
97
- {
98
- groupName:'Black Card',
99
- title: "Anodized Black Titanium",
100
- icon: <Anodized />,
101
- icon_act: '',
102
- href: "https://lux.credit/cards/black?sku=LXM-CR-B-ABT",
103
- newTab: false,
104
- contents:"" //insert string to here
105
- },
106
- {
107
- groupName:'Black Card',
108
- title: "Black Gunmetal",
109
- icon: <GunMetal />,
110
- icon_act: '',
111
- href: "https://lux.credit/cards/black?sku=LXM-CR-B-GM",
112
- newTab: false,
113
- contents:"" //insert string to here
114
- },
115
- {
116
- groupName:'Founder Card',
117
- title: "Cool Chrome",
118
- icon: <Chrome />,
119
- icon_act: '',
120
- href: "https://lux.credit/cards/founder?sku=LXM-CR-F-CC",
121
- newTab: false,
122
- contents:"" //insert string to here
123
- },
124
- {
125
- groupName:'Founder Card',
126
- title: "Iridescent Chrome",
127
- icon: <Irradescent />,
128
- icon_act: '',
129
- href: "https://lux.credit/cards/founder?sku=LXM-CR-F-IC",
130
- newTab: false,
131
- contents:"" //insert string to here
132
- },
133
- {
134
- groupName:'Explore',
135
- title: "Compare cards",
136
- icon: <CompareCards width={25} height={25} />,
137
- icon_act: <CompareCardsAct width={27} height={27} />,
138
- href: "https://lux.credit/compare",
139
- newTab: false,
140
- contents:"Evaluate Lux cards"
141
- },
142
- {
143
- groupName:'Explore',
144
- title: "View all cards",
145
- icon: <ViewAllCards width={25} height={25} />,
146
- icon_act: <ViewAllCardsAct width={25} height={25}/>,
147
- href: "https://lux.credit/cards",
148
- newTab: false,
149
- contents:"General overview"
150
- },
151
- {
152
- groupName:'Explore',
153
- title: "More benefits",
154
- icon: <MoreBenefits width={25} height={25} />,
155
- icon_act: <MoreBenefitsAct width={27} height={27} />,
156
- href: "#",
157
- newTab: false,
158
- contents:"See what's truly unique"
159
- },
160
- {
161
- groupName:'Elite Card',
162
- title: "24k Gold",
163
- icon: <GoldCard />,
164
- icon_act: "",
165
- href: "https://lux.credit/cards/elite?sku=LXM-CR-E-24G",
166
- newTab: false,
167
- contents:"" //insert string to here
168
- },
169
- {
170
- groupName:'Elite Card',
171
- title: "Sterling Silver",
172
- icon: <Sterling />,
173
- icon_act: "",
174
- href: "https://lux.credit/cards/elite?sku=LXM-CR-E-SS",
175
- newTab: false,
176
- contents:"" //insert string to here
177
- },
178
- {
179
- groupName:'Sovereign Card',
180
- title: "Reflective Titanium",
181
- icon: <MirroredTitanium/>,
182
- icon_act: "",
183
- href: "https://lux.credit/cards/sovereign?sku=LXM-CR-S-RT",
184
- newTab: false,
185
- contents:"" //insert string to here
186
- },
187
- ]
188
- },
189
- {
190
- title: "Ecosystem",
191
- icon: "",
192
- details: "The Lux Ecosystem is a comprehensive suite of blockchain-based services and platforms designed to offer a wide range of functionalities, from decentralized finance (DeFi) to asset management and secure transactions.",
193
- href: "https://lux.link",
194
- newTab: false,
195
- childMenu: [
196
- {
197
- groupName:'Blockchain',
198
- title: "AI Chat",
199
- icon: <AIChat width={25} height={25} />,
200
- icon_act: <AIChatAct width={27} height={27}/>,
201
- href: "https://lux.chat",
202
- newTab: false,
203
- contents:"Ask anything, literally"
204
- },
205
- {
206
- groupName:'Blockchain',
207
- title: "Exchange",
208
- icon: <Exchange width={25} height={25} />,
209
- icon_act: <ExchangeAct width={27} height={27} />,
210
- href: "https://lux.exchange",
211
- newTab: false,
212
- contents:"Buy, sell, trade, swap..."
213
- },
214
- {
215
- groupName:'Blockchain',
216
- title: "Market",
217
- icon: <Market width={25} height={25} />,
218
- icon_act: <MarketAct width={27} height={27}/>,
219
- href: "https://lux.market",
220
- newTab: false,
221
- contents:"Digital collectibles & more"
222
- },
223
- {
224
- groupName:'Blockchain',
225
- title: "Shop",
226
- icon: <Shop width={25} height={25} />,
227
- icon_act: <ShopAct width={27} height={27}/>,
228
- href: "https://lux.market",
229
- newTab: false,
230
- contents:"Find any Lux product for sale"
231
- },
232
- {
233
- groupName:'Real World',
234
- title: "Credit",
235
- icon: <Credit width={25} height={25} />,
236
- icon_act: <CreditAct width={27} height={27}/>,
237
- href: "https://lux.credit",
238
- newTab: false,
239
- contents:"Risk free loans"
240
- },
241
- {
242
- groupName:'Real World',
243
- title: "Lux Finance",
244
- icon: <LuxFinance width={25} height={25} />,
245
- icon_act: <LuxFinanceAct width={27} height={27}/>,
246
- href: "https://lux.finance",
247
- newTab: false,
248
- contents:"Financial arbitrage"
249
- },
250
- {
251
- groupName:'More',
252
- title: "Lux Quest",
253
- icon: <LuxQuests width={25} height={25} />,
254
- icon_act: <LuxQuestsAct width={27} height={27}/>,
255
- href: "https://lux.quest",
256
- newTab: false,
257
- contents:"Go above and beyond"
258
- }
259
- ]
260
- },
261
- {
262
- title: "Network",
263
- icon: "",
264
- details: "Lux Network is a scalable, quantum-safe blockchain designed to offer high throughput and low latency. It is part of a broader ecosystem that includes various platforms and services aimed at integrating traditional finance (TradFi) with decentralized finance (DeFi), providing secure and efficient solutions for asset management, trading, and more.",
265
- href: "https://lux.network/",
266
- newTab: false,
267
- childMenu: [
268
- {
269
- groupName:'Defi Tools',
270
- title: "Bridge",
271
- icon: <Bridge width={25} height={25} />,
272
- icon_act: <BridgeAct width={27} height={27}/>,
273
- href: "https://bridge.lux.network/",
274
- newTab: false,
275
- contents:"Teleport assets"
276
- },
277
- {
278
- groupName:'Defi Tools',
279
- title: "Explorer",
280
- icon: <Explorer width={25} height={25} />,
281
- icon_act: <ExplorerAct width={27} height={27}/>,
282
- href: "https://explorer.lux.network/",
283
- newTab: false,
284
- contents:"All transactions"
285
- },
286
- {
287
- groupName:'Defi Tools',
288
- title: "Launch Subnet",
289
- icon: <LaunchSubnet width={25} height={25} />,
290
- icon_act: <LaunchSubnetAct width={27} height={27}/>,
291
- href: "https://docs.lux.network/build/subnet/hello-subnet",
292
- newTab: false,
293
- contents:"Easy, free, and superior"
294
- },
295
- {
296
- groupName:'Earn',
297
- title: "Coins",
298
- icon: <Coins width={25} height={25} />,
299
- icon_act: <CoinsAct width={27} height={27}/>,
300
- href: "https://lux.network/coin",
301
- newTab: false,
302
- contents:"Be part of the ecosystem"
303
- },
304
- {
305
- groupName:'Earn',
306
- title: "Safe",
307
- icon: <Safe width={25} height={25} />,
308
- icon_act: <SafeAct width={27} height={27} />,
309
- href: "https://safe.lux.network",
310
- newTab: false,
311
- contents:"Multi-signature wallet"
312
- },
313
- {
314
- groupName:'Earn',
315
- title: "Lux Wallet",
316
- icon: <Wallet width={25} height={25} />,
317
- icon_act: <LuxWalletAct width={27} height={27}/>,
318
- href: "https://wallet.lux.network",
319
- newTab: false,
320
- contents:"Safe and quantum secure"
321
- },
322
- {
323
- groupName:'Earn',
324
- title: "Validators",
325
- icon: <Validators width={25} height={25} />,
326
- icon_act: <ValidatorsAct width={27} height={27}/>,
327
- href: "https://lux.market/validator",
328
- newTab: false,
329
- contents:"Own a part of the network"
330
- },
331
- {
332
- groupName:'Get Access',
333
- title: "Developer docs",
334
- icon: <DeveloperDocs width={25} height={25} />,
335
- icon_act: <DeveloperDocsAct width={27} height={27}/>,
336
- href: "#",
337
- newTab: false,
338
- contents:"Software explained"
339
- },
340
- {
341
- groupName:'Get Access',
342
- title: "Open Source",
343
- icon: <OpenSource width={25} height={25} />,
344
- icon_act: <OpenSourceAct width={27} height={27}/>,
345
- href: "#",
346
- newTab: false,
347
- contents:"Accessible for everyone"
348
- },
349
- {
350
- groupName:'Get Access',
351
- title: "Lux Pass",
352
- icon: <LuxPass width={25} height={25} />,
353
- icon_act: <LuxPassAct width={27} height={27}/>,
354
- href: "#",
355
- newTab: false,
356
- contents:"All access pass to network"
357
- },
358
- ]
359
- },
360
- {
361
- title: "Resources",
362
- icon: '',
363
- href: "",
364
- newTab: false,
365
- details: "",
366
- childMenu: [
367
- {
368
- groupName:'Tools',
369
- title: "Resource Center",
370
- icon: <AIChat width={25} height={25} />,
371
- icon_act: <AIChatAct width={27} height={27}/>,
372
- href: "#",
373
- newTab: false,
374
- contents:"Dynamic solutions"
375
- },
376
- {
377
- groupName:'Tools',
378
- title: "Integrations",
379
- icon: <Integration width={25} height={25} />,
380
- icon_act: <IntegrationAct width={27} height={27}/>,
381
- href: "#",
382
- newTab: false,
383
- contents:"Simplified onboarding"
384
- },
385
- {
386
- groupName:'Tools',
387
- title: "Templates",
388
- icon: <Templates width={25} height={25} />,
389
- icon_act: <TemplatesAct width={27} height={27}/>,
390
- href: "#",
391
- newTab: false,
392
- contents:"Speedy app development"
393
- },
394
- {
395
- groupName:'Tools',
396
- title: "Guides",
397
- icon: <Guides width={25} height={25} />,
398
- icon_act: <GuidesAct width={27} height={27}/>,
399
- href: "#",
400
- newTab: false,
401
- contents:"Find help quickly"
402
- },
403
- {
404
- groupName:'Company',
405
- title: "Customers",
406
- icon: <Customers width={25} height={25} />,
407
- icon_act: <CustomersAct width={27} height={27}/>,
408
- href: "#",
409
- newTab: false,
410
- contents:"Trusted by the best teams"
411
- },
412
- {
413
- groupName:'Company',
414
- title: "Blog",
415
- icon: <Blog width={25} height={25} />,
416
- icon_act: <BlogAct width={27} height={27}/>,
417
- href: "#",
418
- newTab: false,
419
- contents:"Latest posts and changes"
420
- },
421
- {
422
- groupName:'Company',
423
- title: "Changelog",
424
- icon: <ChangeLog width={25} height={25} />,
425
- icon_act: <ChangeLogAct width={27} height={27} />,
426
- href: "#",
427
- newTab: false,
428
- contents:"Manage deployments"
429
- },
430
- {
431
- groupName:'More',
432
- title: "Developer docs",
433
- icon: <DeveloperDocs width={25} height={25} />,
434
- icon_act: <DeveloperDocsAct width={25} height={25}/>,
435
- href: "#",
436
- newTab: false,
437
- contents:"Software explained"
438
- },
439
- {
440
- groupName:'More',
441
- title: "Customer Support",
442
- icon: <CustomerSupport width={25} height={25} />,
443
- icon_act: <CustomerSupportAct width={27} height={27}/>,
444
- href: "#",
445
- newTab: false,
446
- contents:"Dedicated help, 24/7"
447
- },
448
- {
449
- groupName:'More',
450
- title: "FAQs",
451
- icon: <FAQs width={25} height={25} />,
452
- icon_act: <FAQsAct width={27} height={27}/>,
453
- href: "#",
454
- newTab: false,
455
- contents:"Common queries"
456
- }
457
- ]
458
- },
459
- ] satisfies LinkDefExtended[]
460
-
@@ -1,29 +0,0 @@
1
- @keyframes wiggle-larger {
2
- 0% { transform: rotate(0deg); }
3
- 18% { transform: rotate(10deg) scale(0.9); }
4
- 32% { transform: rotate(0deg) scale(1.05);; }
5
- 50% { transform: rotate(-10deg) scale(1.05); }
6
- 68% { transform: rotate(0deg) scale(1.1); }
7
- 84% { transform: rotate(10deg) scale(1); }
8
- 100% { transform: rotate(0deg) scale(1);}
9
- }
10
-
11
- @keyframes wiggle-smaller {
12
- 0% { transform: rotate(0deg); }
13
- 18% { transform: rotate(10deg) scale(1.05); }
14
- 32% { transform: rotate(0deg) scale(0.9);; }
15
- 50% { transform: rotate(-10deg) scale(0.9); }
16
- 68% { transform: rotate(0deg) scale(0.85); }
17
- 84% { transform: rotate(10deg) scale(1); }
18
- 100% { transform: rotate(0deg) scale(1);}
19
- }
20
-
21
- .wiggle-larger-animation,
22
- .item-added-to-cart-animation {
23
- animation: wiggle-larger 350ms;
24
- }
25
-
26
- .wiggle-smaller-animation,
27
- .item-removed-from-cart-animation {
28
- animation: wiggle-smaller 300ms;
29
- }
@@ -1,23 +0,0 @@
1
- @keyframes checkout-widget-fade-in {
2
- 0% { transform: scale(0.5); opacity: 0; }
3
- 100% { transform: scale(1); opacity: 1;}
4
- }
5
-
6
- .checkout-widget-appears {
7
- animation-name: checkout-widget-fade-in;
8
- animation-duration: 200ms;
9
- }
10
-
11
- .checkout-widget-disappears {
12
- animation-name: checkout-widget-fade-in;
13
- animation-duration: 200ms;
14
- animation-direction: reverse;
15
- animation-fill-mode: forwards;
16
- }
17
-
18
- .checkout-widget-appears-after-buy-drawer-closes {
19
- animation-fill-mode: backwards;
20
- /* Drawer is hardcoded to open in 0.5s. We can start slightly sooner. */
21
- animation-delay: 400ms;
22
- }
23
-
@@ -1,160 +0,0 @@
1
- [vaul-drawer] {
2
- touch-action: none;
3
- transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
4
- }
5
-
6
- [vaul-drawer][vaul-drawer-direction='bottom'] {
7
- transform: translate3d(0, 100%, 0);
8
- }
9
-
10
- [vaul-drawer][vaul-drawer-direction='top'] {
11
- transform: translate3d(0, -100%, 0);
12
- }
13
-
14
- [vaul-drawer][vaul-drawer-direction='left'] {
15
- transform: translate3d(-100%, 0, 0);
16
- }
17
-
18
- [vaul-drawer][vaul-drawer-direction='right'] {
19
- transform: translate3d(100%, 0, 0);
20
- }
21
-
22
- .vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
23
- overflow-y: hidden !important;
24
- }
25
- .vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
26
- overflow-y: hidden !important;
27
- }
28
-
29
- .vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
30
- overflow-x: hidden !important;
31
- }
32
-
33
- .vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
34
- overflow-x: hidden !important;
35
- }
36
-
37
- [vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
38
- transform: translate3d(0, var(--snap-point-height, 0), 0);
39
- }
40
-
41
- [vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
42
- transform: translate3d(0, var(--snap-point-height, 0), 0);
43
- }
44
-
45
- [vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
46
- transform: translate3d(var(--snap-point-height, 0), 0, 0);
47
- }
48
-
49
- [vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
50
- transform: translate3d(var(--snap-point-height, 0), 0, 0);
51
- }
52
-
53
- [vaul-overlay] {
54
- opacity: 0;
55
- transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
56
- }
57
-
58
- [vaul-overlay][vaul-drawer-visible='true'] {
59
- opacity: 1;
60
- }
61
-
62
- [vaul-drawer]::after {
63
- content: '';
64
- position: absolute;
65
- background: inherit;
66
- background-color: inherit;
67
- }
68
-
69
- [vaul-drawer][vaul-drawer-direction='top']::after {
70
- top: initial;
71
- bottom: 100%;
72
- left: 0;
73
- right: 0;
74
- height: 200%;
75
- }
76
-
77
- [vaul-drawer][vaul-drawer-direction='bottom']::after {
78
- top: 100%;
79
- bottom: initial;
80
- left: 0;
81
- right: 0;
82
- height: 200%;
83
- }
84
-
85
- [vaul-drawer][vaul-drawer-direction='left']::after {
86
- left: initial;
87
- right: 100%;
88
- top: 0;
89
- bottom: 0;
90
- width: 200%;
91
- }
92
-
93
- [vaul-drawer][vaul-drawer-direction='right']::after {
94
- left: 100%;
95
- right: initial;
96
- top: 0;
97
- bottom: 0;
98
- width: 200%;
99
- }
100
-
101
- [vaul-handle] {
102
- /* opacity: 0.8; */
103
- touch-action: pan-y;
104
- cursor: grab;
105
- }
106
-
107
-
108
-
109
- /* [vaul-handle]:hover, */
110
- [vaul-handle]:active {
111
- opacity: 1;
112
- }
113
-
114
- [vaul-handle]:active {
115
- cursor: grabbing;
116
- }
117
-
118
- [vaul-handle]:focus-visible {
119
- outline: none;
120
- }
121
-
122
- [vaul-handle-hitarea] {
123
- position: absolute;
124
- left: 50%;
125
- top: 50%;
126
- transform: translate(-50%, -50%);
127
- width: max(100%, 2.75rem); /* 44px */
128
- height: max(100%, 2.75rem); /* 44px */
129
- touch-action: inherit;
130
- }
131
-
132
- [vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
133
- opacity: 0;
134
- }
135
-
136
- [vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
137
- opacity: 1;
138
- }
139
-
140
- /* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
141
- @keyframes fake-animation {
142
- from {
143
- }
144
- to {
145
- }
146
- }
147
-
148
- @media (pointer: fine) {
149
- [vaul-handle-hitarea] {
150
- width: 100%;
151
- height: 100%;
152
- }
153
- }
154
-
155
- @media (hover: hover) and (pointer: fine) {
156
- [vaul-drawer] {
157
- user-select: none;
158
- }
159
- }
160
-
File without changes
Binary file
Binary file
Binary file
Binary file