Squashed commit of the following:
commit dac58bbbcd5e5883da0ec765441b0788bafc7915 Merge: 6e2287306e6eda4e4997Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sun Nov 12 01:06:22 2023 +0330 Merge branch 'master' into v4 commit 6e2287306ee36f44955b60270b692f777a84c207 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sun Nov 12 01:01:47 2023 +0330 working on theme-generator commit 87e83108c70e207a0cd15705afb6f0f894a082cb Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 17:57:49 2023 +0330 docs cleanup commit f0b74c34ef112f3dd2b185ff527a2c44aca5e560 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 17:57:41 2023 +0330 docs cleanup commit 2ec5fc043b10419910e66731bc519a12d3d4ef6a Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 16:40:52 2023 +0330 docs cleanup commit a1e2d375c77ec103812cac73977ed3e93cc552ab Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 16:40:45 2023 +0330 docs cleanup commit b825810d042e6e7880aab5467b54b6bb18ff4919 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 16:20:55 2023 +0330 store commit 8593e836cdd1d3f2c6dc4d960d12d3d0d54c699b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 15:55:16 2023 +0330 store commit 15f74de9ef4a573db0b4c6ad9dea7e506410fe06 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 04:50:59 2023 +0330 docs commit f46c9bdca7f0d5969a2aa0d3e39fa34da61c4f45 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 04:48:26 2023 +0330 docs commit 6e61ed4f66f0dac820558337218ecbfb0dc6154e Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 04:45:06 2023 +0330 blog commit 6050fa116350f44d8161ff93577b954a280cb140 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 04:41:53 2023 +0330 docs: update deps commit 13f7f8f8f8e480efb036c7f1550d7944fd932c9b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 04:34:59 2023 +0330 blog commit 5591aafbad7ab5ddc8c897d69a389a5a488f563d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 03:23:24 2023 +0330 version commit b37d5abee9e2753374909b4b838d4fd57cee94a3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 11 02:51:33 2023 +0330 docs commit ab8c78ffd8d0b52287de7f363b7e9dd79ec0211d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 19:05:27 2023 +0330 docs: show browser support data on components with new CSS rules commit bb24d775bdd8c7b12f194f44baa484cc33a72088 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 17:15:47 2023 +0330 docs commit a8f62a68484be437ed6828f5a07de51ded2daefd Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 16:41:12 2023 +0330 fix: #1622 commit 5ca85803b21f6064902ed13a5cf12e7f6ea8264b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 16:30:09 2023 +0330 prettier commit d4b7ea3c0f50e1b60c7d220f90778a8294c444e6 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 14:18:03 2023 +0330 bump version commit 11a52421be8a3b7455bb9a0e876635689e06a88c Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 14:17:47 2023 +0330 fix homepage overscroll commit 3e5556df2d9a658d385b73de57229d4d3b348de0 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 14:14:40 2023 +0330 improve themes commit f3a923cdabe34429f543cf6a9dabc271d9413cda Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 14:07:20 2023 +0330 docs commit 3f801e79296b19fe35e09fc0d90f910ae175dce2 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 14:07:14 2023 +0330 improve themes commit 8de4734b050f0d13ba65066d6adb46397ccd1678 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 14:07:07 2023 +0330 fix input font size commit cbbf997c05b5da26460281de7d9c8408c9eca2be Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 14:07:00 2023 +0330 improve tab commit affd734c3e4854b04b37df97b5cd7e0e33d2e137 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 05:17:11 2023 +0330 bump alpha commit 7f2ab939f93c7a72352e1c732df2053b516ec7a5 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 05:02:26 2023 +0330 fix: #2445 commit 8fc67972326016e1ccf198ef18e39ffa2def7ea1 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 04:41:29 2023 +0330 improve tab gradient commit c444216dbdb91118565b5bc9316e5849c778b3ec Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 03:56:26 2023 +0330 fix form input size bug commit d6a46bd549a045c953fb7cd045e6b249cfac3844 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 03:51:56 2023 +0330 update themes commit 833ae5f5d38373a0621690503d0ea4e563710254 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 03:00:17 2023 +0330 update readme commit ad7b4e3b3e924c5ac7100d0f37af8370346a53b2 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 02:48:57 2023 +0330 docs commit 9a762af9c99def2f80c96b1a09f98efa182ec9da Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 02:40:36 2023 +0330 docs commit bcd1338d755b0b9c291a7f12b8b56ff2c08d2cff Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 02:40:28 2023 +0330 improve compatibility with `@tailwindcss/forms` commit 0c203fed18bab2b52ad6110872056621a1bb698d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 01:33:21 2023 +0330 cleanup button styles commit e6c099ce7016362d027a40ab896c4c30b0553c42 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 10 01:20:25 2023 +0330 oklch fallbacks commit 0e24805f43416a9c8fc8f9afc1ce5092a0ca56b1 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 16:50:36 2023 +0330 cleanup color values in components (use theme() instead of raw color) commit a8d8d2f48f745ece66e757ea4bfde48236d34a39 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 16:49:59 2023 +0330 docs commit 586e534daea2ebde979cbac4297f3e57a74f319c Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 15:46:13 2023 +0330 feat: new theme: sunset commit c914f039e32f5b57a6268408dddcb679e2bead70 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 15:18:32 2023 +0330 improve nord theme commit e76821cf2165d526443581d7791ddc0fd149bb4b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 15:15:17 2023 +0330 improve theme colors commit 35672bba3101939aa51c97c34a3b19a1f3753085 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 15:14:59 2023 +0330 feat: new themes: dim, nord commit 80da3b19af29b46a77f36628a147181e9bb76a10 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 15:14:16 2023 +0330 tests commit 3dc55a9b9b4d626195182cacbd44d493f6dd4478 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 15:14:07 2023 +0330 docs commit 2d76a62ad0e663e7f2157e43204d23f2a6075b22 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 12:54:08 2023 +0330 remove unused function commit a9bfce28eaba03bf68e176da4461f6c37ef698a1 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 12:48:36 2023 +0330 increase oklch convert accuracy commit 0055d359489e87ba4ad364aa4e766e76317aee33 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 12:44:52 2023 +0330 docs commit cb9474ae13a10f9f95d6b4984f7b052e2266845b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 12:43:35 2023 +0330 feat: remove --btn-text-case CSS variable commit 3fc34514a97f3fb23fc2f9da4ef05a505505b969 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 12:42:20 2023 +0330 feat: Reduce tab class name repetition Removed tab-lifted, tab-bordered, tab-lg, tab-md, tab-sm, tab-xs modifier classes for 'tab' item. Added tabs-lifted, tabs-bordered, tabs-lg, tabs-md, tabs-sm, tabs-xs classes for the parent 'tabs' class instead. commit 9703e8c867522fbd9b37fefc90be3d6c15b48daf Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 03:00:02 2023 +0330 workflows commit 4bd202cf6bd39d21164dc268ab330dd3350212db Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 02:53:33 2023 +0330 docs commit 383794f5ce43cc57fe6c798c1fb2924f8ba61e81 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 02:53:29 2023 +0330 fix drawer transition commit db5a2bef1b75596d7f4f2164ca0bc08d6e81cc28 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 02:09:19 2023 +0330 bump alpha version commit ce0109a115bf69d05ce7e1d5c288d5eacdff34e1 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 02:08:30 2023 +0330 docs commit d80154170829d24c4d0b998f8fd02e57aed385d9 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 02:05:03 2023 +0330 docs commit a4ef8683f7c389b5ffa11366db4085e9e60ea265 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 9 01:46:29 2023 +0330 feat: add new `theme-controller` component commit d565c06a9b2be2e346ab15ba745d08a97f8c8a0b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 8 20:22:44 2023 +0330 docs commit a7108f54a9dbc8a1cfc0e2909736d593ab5858bf Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 8 20:06:11 2023 +0330 bump alpha version commit 231046ac4c5b8bd6485d6f3d2ee364fea1c80dac Merge: 492b4e10b9ad23d6f966Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 8 17:12:32 2023 +0330 Merge branch 'master' into v4 commit 492b4e10b95ccddd154ec24882bae0b70ae4b1fa Merge: faf0e5c6e0bdfcd3fa54Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 8 16:34:25 2023 +0330 Merge branch 'master' into v4 # Conflicts: # src/docs/src/routes/(docs)/+page.svelte commit faf0e5c6e0d02120a21824229513857172934a76 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 8 16:30:08 2023 +0330 set timeout-minutes for workflows commit 4ba55c628e6b36fc6ef81026609b11e14786bde6 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Tue Nov 7 11:19:13 2023 +0300 docs: inert drawer-content when drawer is open commit b2561c2571088afc1864f31dab1366c9fde76cde Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Tue Nov 7 11:16:29 2023 +0300 feat: button text is normal-case now by default commit cbee20384563c7cf5bde71129f859e166487c169 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Tue Nov 7 11:10:15 2023 +0300 feat: add color modifier and position modifier classes for `divider` commit 8f477df37e54a67e867705d3053615015c7424f9 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Nov 4 14:20:34 2023 +0300 update deps commit a5d8ff442de21d3509fab03988b5e5aa18d49e71 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 04:43:37 2023 +0300 alpha release commit 4664ac00be05421db3a605d06b6cc1c6598ea534 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 04:42:31 2023 +0300 update themes and tests commit dafe73dee588c23c36b6ad39fbf0b3e47570f0f3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 04:26:18 2023 +0300 update package.json commit 9cd508f298a6ab414f6568e02d76e5589c5b64b2 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 04:26:11 2023 +0300 fix test files commit 9f8e08cb6849fad5a9b329303de562be1c9198b4 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 03:29:30 2023 +0300 prettier commit f86000f14d37e5b52eb89b62f6faa4431b617a99 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 03:23:42 2023 +0300 fix sveltekit warnings commit 00a3e35e16685808c55a9640114afb0f50fe6ee9 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 02:18:55 2023 +0300 docs commit 90670e4829af6f11b40d832c910b4801dd3befd9 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Nov 3 01:21:26 2023 +0300 fix timeline bugs commit 17a9f0768dafac64fc705ae22819e7ea1bab25f1 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 21:47:28 2023 +0300 fix theme-generator commit 39f57f3fd5bd29096745154967e78cee52849e03 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 20:52:28 2023 +0300 fix theme-generator func commit 7d0cb79af378d619e5cb73ebec7d17d2cf33389f Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 20:14:19 2023 +0300 fix ghost btn border color commit 47a7d2fca551af599a2966274a1aefc3b813c47f Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 20:08:33 2023 +0300 docs: improve font loading commit 57eafa019fe5d8e78072bbcf1d854dbb1a368b57 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 12:59:57 2023 +0300 bump alpha ver commit 8e2887a09bc3d8bfc4f0315d6edf38a034ed0c66 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 12:59:10 2023 +0300 improve button style commit 5ec73219cdf35143719acf2bb789d60f6d49b929 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 12:17:53 2023 +0300 feat: removed `primary-focus`, `secondary-focus`, `accent-focus`, `neutral-focus`, color names. Darker colors are now generated using CSS color-mix() under the hood commit 60bfc507168f4b44c37320c829cb0dacaf7affff Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 10:49:15 2023 +0300 docs commit c7601b5d5355e8fb076995653122d927ea790eab Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 10:38:03 2023 +0300 docs commit 9c6d797882db0e3704395bd8360790624a322a07 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 09:50:59 2023 +0300 bump alpha version commit f31075105e31af4d14e708d446cf440815f0ce77 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 09:50:26 2023 +0300 docs commit 1954b3cbcca6255e0eb71e535bdc1dc416592acb Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 09:47:18 2023 +0300 feat: new `diff` component commit 96592292856d84ac134cbef81c3fbf23da22a916 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 07:19:52 2023 +0300 docs commit 8b8ddb2d22f4856008a86828cb092373d7011b4c Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 05:59:22 2023 +0300 update readme commit 3f846c86f1d3bcc3ad1863b7f478ebf020862095 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 05:57:00 2023 +0300 docs commit 0696343f461408aeda3d89bb0b367e02ca0f96cd Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 05:53:01 2023 +0300 docs: auto set lang direction commit 257fbab83ae9e289bdaa128834d2f32381de982f Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 05:52:43 2023 +0300 docs: add farsi translation commit 45bbfc041111a3c951c4dbbc437598445922405b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 05:52:25 2023 +0300 fix tab RTL issue commit 45e883812152b5bda1e1ea4fc0145f664ac8f498 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 05:52:14 2023 +0300 add direction to translation files commit 2c3a03e7bda7f80e280b73d93e894d2f2db13432 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 03:43:11 2023 +0300 docs: add /docs/roadmap/ commit f2c24ac1d701a070d11794d33a83c44ff4610710 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Nov 2 03:42:54 2023 +0300 update timeline style commit 34c53a5c269202b523b5b6bc065cd0e11220b865 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 23:30:42 2023 +0300 bump alpha version commit 82e865981d665a0644b08f3588da7e5ff37397b5 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 23:30:06 2023 +0300 feat: add `timeline-snap-icon` modifier for timeline commit 2b2fb03fa8aceb9fc72c1213e9ba6cf679020434 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 22:35:17 2023 +0300 bump alpha version commit d6cd24117c347f90ac19ceb12d1586761b3ebcdd Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 22:34:39 2023 +0300 fix color issue commit d47e0575d24bd0022d84bf57c59c733d279b23fe Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 22:23:09 2023 +0300 feat: add `skeleton` class commit 31dbb41e2dfb7c5ad165393ac5eed832d2dc08d7 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 20:33:11 2023 +0300 feat: remove `btn-group` and `input-group`. (use `join` instead) commit dca160edcb792906bf6805860195dd3eb841e17e Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 19:29:59 2023 +0300 docs commit 9073d3ab611b85881f5476718eb770e7fe7dfc92 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 18:32:24 2023 +0300 docs commit 52fcdf4cc6ac18eb78666e2f961648c81214909f Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 18:32:18 2023 +0300 update deps commit 488228f8c2d8b6aa5855c509250cbc80b174d7e1 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 18:20:11 2023 +0300 remove `randomcolor` commit c26541954771cdc37524e0769fcc5be546efcc0f Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 18:19:19 2023 +0300 docs: update deps, remove `colord`, fix theme generator commit 27625d7cbab5320e2d47a89ce1f57d992e2e237f Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 04:46:20 2023 +0300 bump alpha version commit 7b0da321c5ba1da7ca41fa53f3f0000e70ea2a61 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 04:45:09 2023 +0300 docs: add missing thumbnail commit bcc07666b767f068c8872f5f8050283e4369fca5 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 04:41:36 2023 +0300 fix drawer overlay color commit 4795afdc1bb18e1e54cfe8ab6d70a6f893dd1044 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 04:39:09 2023 +0300 cleanup build log commit ce5c4d4c00dbc449b2fbe31548f8af08cc6be3f9 Merge: 6320c0dde0ed5ff0efc0Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 04:15:21 2023 +0300 Merge branch 'master' into v4 # Conflicts: # src/docs/src/lib/data.js commit 6320c0dde06eea386783bcb6a6ac9865e0acdda9 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 03:56:48 2023 +0300 feat: add new `timeline` component commit b2dc0701c8d8b8980b29cdc666b3af0e1614e22d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Nov 1 00:15:58 2023 +0300 feat: empty tab tag now fills the free space commit 867ddfabf1e82b638030d8a8704886184a19da89 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Tue Oct 31 01:04:10 2023 +0300 feat: add new `tab-content` class. allows showing content based on checked radio input commit 539915ea77d2e3d6c1fc9fda0c65539c1ea6b831 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Mon Oct 30 23:40:19 2023 +0300 feat: improve tab-lifted style feat: use only one pseudo element for tab-lifted corners feat: improve tab-lifted focus-visible style commit 2b54cfb1564bff7decde684618cbbe6e414c3e52 Merge: be930bad396e9b52932eAuthor: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sun Oct 29 02:34:46 2023 +0300 Merge branch 'master' into v4 # Conflicts: # .github/workflows/deploy-docs.yml # package.json commit be930bad391d1e0f8aee944c68f09d6f0f2e1da5 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Oct 27 12:22:57 2023 +0300 color functions commit 3d5038802a37eab61d536e7540f33e1825fe2ab3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Oct 27 01:12:41 2023 +0300 docs commit 8d40b870cb31f93c1282e4287c7f581742c5e7b8 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 21:32:37 2023 +0300 color functions commit 2ff3df60b6fa0fd54daa4b6487785570ef8818db Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 02:45:14 2023 +0300 bump alpha version commit 58acde67565c40ad733031ab46507a91f76d3b73 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 02:44:13 2023 +0300 use oklch in dark theme commit c44a4246711bfa1c2c2f91b212ff81afccd269a5 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 02:41:47 2023 +0300 fix isDark func commit 2695de8ab1fa3fae943be47e2c81c9d8e5a2d663 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 02:41:36 2023 +0300 use oklch in docs commit 5029881442753c9959b002859040928af5a84938 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 02:28:45 2023 +0300 use oklch in components commit e27192153ba588495eeee9b709c30fe2235a932c Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 02:28:36 2023 +0300 use oklch in light theme commit 36bcf69920f4022ae5d254d51459798c039ac8fe Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 26 02:28:29 2023 +0300 use oklch in functions commit 574bd943e3ebbbadfd26264a6986f424dedaa6b3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 14:25:48 2023 +0300 cleanup readme commit e94dd831762593b025eebf1504a7b7487914e0d4 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 14:14:30 2023 +0300 docs commit 9942c7e995d00ea9b29ff2a32cf856985eaa4189 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 13:31:59 2023 +0300 docs commit 3b294675245d79fa5f9bb5666d54364342166aad Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 12:36:19 2023 +0300 docs commit 3675ffaee2b79e702241758d768006d8723e9a15 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 12:34:15 2023 +0300 docs commit d54900b984829d934bc5da5a2a6e4c41df5545ae Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 12:21:11 2023 +0300 docs commit 2e922c3607a04be2487837126d9dd17aebd23720 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 03:35:42 2023 +0300 docs commit faac6bff84a1f27bbf014962a5371fe5e5a51c71 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 02:29:02 2023 +0300 docs commit f8cfa08b6aef2762b75339b6635f688fdc111ea0 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 02:27:42 2023 +0300 docs commit 987d22df7d0d1684b4edc39cb0757bbb2bd4ed24 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 01:05:54 2023 +0300 docs commit 29c192568708d228f0dc116c3c4d724a45468f36 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 00:54:03 2023 +0300 docs commit c9f681091ca702198f8c7c5d8d9a064ae977c12c Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 00:44:35 2023 +0300 docs commit e26dc2fd45f5b6b102b9000f5e5f93bd1a6e89d3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 25 00:18:50 2023 +0300 docs commit 5ef2b39971d617e7a204344f7a4f5497f03aa87d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Tue Oct 24 20:29:25 2023 +0300 test commit 75facf4d13e09cc463ff68b9955bd8b39061499b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sun Oct 22 10:53:37 2023 +0300 docs commit 17b287a3eacf895f3cb57bcaceee051d4399775d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sun Oct 22 10:35:49 2023 +0300 docs commit c1b7ccd0beb92fe56f7bf5e4438b0a5a595ea2ca Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sun Oct 22 08:54:15 2023 +0300 docs commit edb78a07bcee6924e2e5b57a3d2bd25be83393aa Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sun Oct 22 01:16:12 2023 +0300 docs: resources commit d945b94281c9b8f5518766ac5d317961433ed7a5 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Oct 21 13:06:23 2023 +0300 docs cleanup commit 9e7e3377e6eb70828fed5c810b5c40e0ae1b71bb Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Sat Oct 21 10:44:31 2023 +0300 docs commit f4861ae570e26456ad9d5b15e89439300da6cd16 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Fri Oct 20 09:18:35 2023 +0300 doc: new sidebar. lots of improvements commit da028aa1560e0c18f528cac42d8fed15be47bea0 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:57:14 2023 +0300 docs commit 5df00e48233e1146892f69bbefb60f1169975487 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:49:46 2023 +0300 Squashed commit of the following: commit76b4fb727eAuthor: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:49:09 2023 +0300 workflows commit7082c77247Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:04:07 2023 +0300 workflows commit74178c6e5eAuthor: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 15:39:46 2023 +0300 workflows commit2da5b2c7c3Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 05:25:44 2023 +0300 update issue template commit d61aa25b71dedac96747269748ab17a643ad7f70 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:46:12 2023 +0300 docs commit d601b17cba297089da0859f3b1b09a4f2aa9bd5c Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:30:16 2023 +0300 docs commit 174f1fadf87ad9171accc40be20fd9c7957ec4ac Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:05:17 2023 +0300 Squashed commit of the following: commit7082c77247Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 21:04:07 2023 +0300 workflows commit74178c6e5eAuthor: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 15:39:46 2023 +0300 workflows commit2da5b2c7c3Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 05:25:44 2023 +0300 update issue template commit 969f726b6afbb97cc51b8eaacf019549bb493b7f Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 20:26:27 2023 +0300 docs commit 458c0a465e184aaa2c0ad2006cceedeccac0de6b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 19:55:32 2023 +0300 add store page commit fec60db6463db304a1ace12dd7c19366d63275e1 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 17:33:46 2023 +0300 docs commit 35e88ce1fff706b049765ceba360ed58a30048c2 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 17:33:39 2023 +0300 fix mockup window commit 5d8300826a37f02c4f25a6c9cfa37b1eef4a1d60 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 16:38:06 2023 +0300 feat: deprecate RTL config commit 50648302964adfb1eef3bb4d555d7765d20c0a59 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 15:45:35 2023 +0300 Squashed commit of the following: commit74178c6e5eAuthor: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 15:39:46 2023 +0300 workflows commit2da5b2c7c3Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 05:25:44 2023 +0300 update issue template commit ec6ad62e41a047f0af76eb4e0cfc9d5646c6c9c8 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 14:02:11 2023 +0300 docs: load data on server commit ec590ce5ebbf1473c343f1b392be24228f73e0e3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 03:29:21 2023 +0300 docs commit c5894dc9a92fc944095f8f54f149c619daab629b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 03:29:17 2023 +0300 docs: add Farsi translation draft commit 8bd94315bc13f7022fa93a2d415c469fafc8c05c Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Thu Oct 19 02:07:02 2023 +0300 docs RTL commit aee2feb29e94a748ec7af4e8291538c26d52bb1a Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 10:14:58 2023 +0300 docs commit d016f52d9041a9c047a22bb01a612dea5342c532 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 10:14:51 2023 +0300 mockup RTL style commit d6c447c746d5357dd57c08a264b229801f681765 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 09:43:45 2023 +0300 Use logical properties for components feat: use logical properties for `mockup`, `steps`, `tab` commit a95c5f512b9229e72cf4508eaba0b90c903dba18 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 08:34:39 2023 +0300 docs commit 9700f3ec7183b3efd82855716988754ecb3d0e17 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 08:34:31 2023 +0300 fix radio button width commit 931fe928cf6d93a1bfee09f1d2908beebc9fa757 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 08:29:01 2023 +0300 Use logical properties for components feat: use logical properties for `breadcrumbs`, `checkbox`, `join`, `menu`, `table`, `alert`, `drawer`, `file-input`, `mask`, `indicator`, `toast` commit 742c676ee44f27b084d1f43df1e3c0c28c91a1c3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 05:27:03 2023 +0300 Squashed commit of the following: commit2da5b2c7c3Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 05:25:44 2023 +0300 update issue template commit b9dfef91b989001656890d3748451a13dcc64f1b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 04:07:44 2023 +0300 docs commit 2327a1f1dfb5189634ee8d5830c8d5749e4c7254 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 04:03:08 2023 +0300 use gap instead of space-* for table examples commit 3f7169352e876aa15fbc081e5e290d05e7f6f9c3 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 04:02:44 2023 +0300 feat: use logical properties for `stats` commit c08e3d7cd9eb1cc67a308e537257d2c743cc0852 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 04:02:17 2023 +0300 use automatic utility generation instead of using raw CSS commit 34fd6bf230124c9246b110a9fb554e116fabe027 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 03:20:35 2023 +0300 feat: use logical properties for `avatar` examples commit 763a4f20c894d1b4b4aadea93c50f2ac66203751 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 03:20:24 2023 +0300 feat: use logical properties for `collapse` commit fbe15dd5287247dfcd3c895f952fda7dbf69e95d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 03:07:58 2023 +0300 feat: use logical properties for `dropdown` commit f556f4077b5dfc66ce68c329a1fa3031734140b9 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 03:01:25 2023 +0300 feat: use logical properties for `chat` commit f667d221d2afc041484e8ab963427f1e2e6b512a Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 02:58:21 2023 +0300 add `tailwindcss` to dev dependencies commit fd6fa3b1b49f01ed545254b6e47973a976ee99c2 Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 02:57:45 2023 +0300 add autoprefixer to playground commit e8db053f5f222c0091c41740e45647e59b482def Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 02:36:38 2023 +0300 typo commit d2b1c78e8ef2a6ee63b7387180fc9c026e7158dd Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 02:30:27 2023 +0300 logs commit 7e85e6100053427199f37bc97803702a2a0c8e8d Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 02:28:53 2023 +0300 logs commit 2855b19fa7334864e021274cfdbd45d76c31008b Author: Pouya Saadeghi <pouya.saadeghi@gmail.com> Date: Wed Oct 18 02:18:48 2023 +0300 Clean up dependencies and logs feat: remove `tailwindcss` and `postcss` dependencies. feat: use `picocolors` for logs fix: update prettier plugin
This commit is contained in:
Pouya Saadeghi
parent
2fa42730ba
commit
81d1748da8
|
|
@ -6,17 +6,10 @@ on:
|
|||
runtime:
|
||||
type: choice
|
||||
description: JS runtime
|
||||
default: "bun"
|
||||
default: "npm"
|
||||
options:
|
||||
- "bun"
|
||||
- "npm"
|
||||
npm-tag:
|
||||
type: choice
|
||||
description: Version of daisyUI to install
|
||||
default: "latest"
|
||||
options:
|
||||
- "latest"
|
||||
- "alpha"
|
||||
workflow_call:
|
||||
push:
|
||||
branches:
|
||||
|
|
@ -31,11 +24,12 @@ on:
|
|||
|
||||
jobs:
|
||||
deploy-docs:
|
||||
timeout-minutes: 10
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
runtime: ${{ github.event.inputs.runtime || 'bun'}}
|
||||
npm-tag: ${{ github.event.inputs.npm-tag || 'latest'}}
|
||||
runtime: ${{ github.event.inputs.runtime || 'npm'}}
|
||||
LEMONSQUEEZY_API_KEY: ${{ secrets.LEMONSQUEEZY_API_KEY }}
|
||||
YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
|
||||
if: |
|
||||
github.event_name == 'workflow_dispatch' ||
|
||||
github.event_name == 'workflow_call' ||
|
||||
|
|
@ -65,15 +59,20 @@ jobs:
|
|||
- name: Install docs dependencies
|
||||
run: cd src/docs && ${{ env.runtime }} install
|
||||
|
||||
- name: Install daisyUI fixed tag if production
|
||||
- name: Install daisyUI latest version if production
|
||||
if: github.repository == 'saadeghi/daisyui'
|
||||
run: cd src/docs && ${{ env.runtime }} i daisyui@${{ env.npm-tag }}
|
||||
run: cd src/docs && ${{ env.runtime }} i daisyui@latest
|
||||
|
||||
- name: Install daisyUI newest version if staging
|
||||
- name: Install daisyUI newest tag if staging
|
||||
if: github.repository == 'daisyui/daisyui.github.io'
|
||||
run: cd src/docs && ${{ env.runtime }} i daisyui@$([[ $(npm view daisyui version) > $(npm view daisyui dist-tags.alpha) ]] && echo "latest" || echo "alpha")
|
||||
|
||||
- name: Add robots.txt if staging repo
|
||||
- name: Set daisyUI version in env file if staging
|
||||
if: github.repository == 'daisyui/daisyui.github.io'
|
||||
run: |
|
||||
echo 'VITE_DAISYUI_VERSION=ALPHA' > src/docs/.env
|
||||
|
||||
- name: Add robots.txt if not main repo
|
||||
if: github.repository != 'saadeghi/daisyui'
|
||||
run: |
|
||||
echo 'User-agent: *
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ on:
|
|||
|
||||
jobs:
|
||||
release:
|
||||
timeout-minutes: 10
|
||||
if: github.repository == 'saadeghi/daisyui'
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ on:
|
|||
- "src/theming/**"
|
||||
jobs:
|
||||
release:
|
||||
timeout-minutes: 10
|
||||
name: "Build"
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
|
|
|||
187
README.md
187
README.md
|
|
@ -2,58 +2,22 @@
|
|||
|
||||
[![][logo-url]][docs-url]
|
||||
|
||||
**The most popular, free and open-source Tailwind CSS component library**
|
||||
**The most popular, free and open-source component library for Tailwind CSS**
|
||||
|
||||
[ [See all components](https://daisyui.com/components/) ]
|
||||
|
||||
[![][tweet]][tweet-url]
|
||||
[![][build]][build-url] [![][npm]][npm-url] [![][license]][license-url]
|
||||
[![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]
|
||||
|
||||
</div>
|
||||
|
||||
[![][banner-url]][docs-url]
|
||||
# daisyUI 4
|
||||
|
||||
# daisyUI 3.0
|
||||
### 🌼 [Official website →](https://daisyui.com/)
|
||||
|
||||
[![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][license]][license-url]
|
||||
[![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]
|
||||
### 🌼 [See all components →](https://daisyui.com/components/)
|
||||
|
||||
- [Official website →](https://daisyui.com/)
|
||||
- [See all components →](https://daisyui.com/components/)
|
||||
- [How to use →](https://daisyui.com/docs/install/)
|
||||
### 🌼 [How to use →](https://daisyui.com/docs/install/)
|
||||
|
||||
## 🌼 Features
|
||||
|
||||
- A plugin for Tailwind CSS
|
||||
- Faster development
|
||||
- Cleaner HTML
|
||||
- Customizable and themeable
|
||||
- Pure CSS. Works on all frameworks
|
||||
|
||||
## 📀 Install now!
|
||||
|
||||
```bash
|
||||
npm i -D daisyui@latest
|
||||
```
|
||||
|
||||
Then add daisyUI to your `tailwind.config.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [require("daisyui")],
|
||||
}
|
||||
```
|
||||
|
||||
[ [Read more →][docs-url-install] ]
|
||||
|
||||
## 🚀 Use
|
||||
|
||||
[[See all components →](https://daisyui.com/components/)]
|
||||
|
||||
## 📘 Documents + Examples
|
||||
|
||||
See the official site: [ [daisyui.com →](https://daisyui.com/)]
|
||||
|
||||
## 🤝 Support daisyUI
|
||||
## Sponsors
|
||||
|
||||
| | |
|
||||
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
|
|
@ -61,139 +25,6 @@ See the official site: [ [daisyui.com →](https://daisyui.com/)]
|
|||
| **Backers** <br /> Thank you to all our backers! <br /> [[Become a backer](https://opencollective.com/daisyui)] | <a href="https://opencollective.com/daisyui" target="_blank"><img src="https://opencollective.com/daisyui/backers.svg?button=false&width=500&avatarHeight=46"><img src="https://opencollective.com/daisyui/organizations.svg?button=false&width=500&avatarHeight=46"></a> |
|
||||
| **Contributors** <br /> This project exists thanks to all the people who contribute. <br /> [[Contribute](https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md)] | <a href="https://github.com/saadeghi/daisyui/graphs/contributors" target="_blank"><img src="https://contrib.rocks/image?repo=saadeghi/daisyui&columns=14&anon=1&max=300" width="500"></a> |
|
||||
|
||||
Tweet about daisyUI: [![][tweet]][tweet-url]
|
||||
|
||||
## 📁 List of components
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
show / hide
|
||||
</summary>
|
||||
|
||||
- Actions
|
||||
|
||||
- [x] Button
|
||||
- [x] Dropdown
|
||||
- [x] Modal
|
||||
- [x] Swap
|
||||
|
||||
- Data display
|
||||
|
||||
- [x] Alert
|
||||
- [x] Avatar
|
||||
- [x] Badge
|
||||
- [ ] Banner
|
||||
- [ ] Calendar
|
||||
- [x] Card
|
||||
- [x] Carousel
|
||||
- [x] Chat bubble
|
||||
- [x] Collapse
|
||||
- [x] Countdown
|
||||
- [ ] Empty placeholder
|
||||
- [x] Kbd
|
||||
- [x] Loading
|
||||
- [x] Progress
|
||||
- [x] Radial progress
|
||||
- [x] Stat
|
||||
- [x] Table
|
||||
- [ ] Tag
|
||||
- [ ] Timeline
|
||||
- [x] Toast
|
||||
- [x] Tooltip
|
||||
- [x] Treeview
|
||||
|
||||
- Data input
|
||||
- [x] Checkbox
|
||||
- [x] File input
|
||||
- [x] Text input
|
||||
- [x] Radio
|
||||
- [x] Range
|
||||
- [x] Rating
|
||||
- [x] Select
|
||||
- [x] Textarea
|
||||
- [x] Toggle
|
||||
- Layout
|
||||
|
||||
- [x] Artboard
|
||||
- [x] Button group
|
||||
- [x] Divider
|
||||
- [x] Drawer
|
||||
- [x] Footer
|
||||
- [x] Join
|
||||
- [x] Hero
|
||||
- [x] Indicator
|
||||
- [x] Input group
|
||||
- [x] Mask
|
||||
- [x] Stack
|
||||
|
||||
- Navigation
|
||||
|
||||
- [x] Bottom Navigation
|
||||
- [x] Breadcrumbs
|
||||
- [x] Link
|
||||
- [x] Menu
|
||||
- [x] Navbar
|
||||
- [x] Pagination
|
||||
- [x] Steps
|
||||
- [x] Tab
|
||||
|
||||
- Mockup
|
||||
- [x] Browser
|
||||
- [x] Code
|
||||
- [x] Phone
|
||||
- [x] Window
|
||||
|
||||
</details>
|
||||
|
||||
## 📰 Featured on:
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
show / hide
|
||||
</summary>
|
||||
|
||||
- Blogs
|
||||
- [Logrocket](https://blog.logrocket.com/daisyui-tailwind-components-react-apps/)
|
||||
- [GraphCMS](https://graphcms.com/blog/build-a-personal-timeline-with-graphcms-and-sveltekit)
|
||||
- [wweb.dev](https://wweb.dev/weekly/85/)
|
||||
- [flaming.codes](https://flaming.codes/posts/boostrap-tailwind-alternative-with-daisy-ui)
|
||||
- [rockyourcode](https://www.rockyourcode.com/how-to-setup-react-typescript-with-snowpack-and-daisyui/)
|
||||
- [HackerNews](https://news.ycombinator.com/item?id=28004515)
|
||||
- [Product Hunt](https://www.producthunt.com/posts/daisyui)
|
||||
- [Siecle Digital](https://siecledigital.fr/2021/05/29/daisyui-plugin-gratuit-avec-composants-tailwind-css-a/)
|
||||
- [speckyboy](https://speckyboy.com/weekly-news-for-designers-594/)
|
||||
- [dailydev](https://app.daily.dev/posts/-4OPGw0te)
|
||||
- [Future Tech Blog (Japanese)](https://future-architect.github.io/articles/20211124a/)
|
||||
- [Adding Tailwind and Daisy UI to SvelteKit](https://dev.to/brewhousedigital/adding-tailwind-and-daisy-ui-to-sveltekit-2hk5)
|
||||
- Youtube videos
|
||||
- [Supabase & Sveltekit - Build Twitter in 75 minutes](https://www.youtube.com/watch?v=mPQyckogDYc)
|
||||
- [Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI](https://www.youtube.com/watch?v=mEBPN_9jTAE)
|
||||
- [Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI](https://www.youtube.com/watch?v=Hpjq0D1vcpM)
|
||||
- [SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes](https://www.youtube.com/watch?v=zH2qG9YwN3s)
|
||||
- [DaisyUI : Worth a try or skip on by?](https://www.youtube.com/watch?v=hM9fENyAquM)
|
||||
- [How to use daisyUI in SvelteKit?](https://www.youtube.com/watch?v=haKnkk6ds20)
|
||||
- [DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)](https://www.youtube.com/watch?v=Wm2g6FWec34)
|
||||
- [Next.js - Tailwind - DeisyUI Setup](https://www.youtube.com/watch?v=uXQgJbUj3PQ)
|
||||
- [Svelte Setup with Vite, Tailwind, DaisyUI. Custom Themes!](https://www.youtube.com/watch?v=5lF5PxBJoso)
|
||||
- [Build a blog with Svelte](https://www.youtube.com/watch?v=u9jtHBE6NL8)
|
||||
- [Building a product in less than 10 minutes: Laravel, InertiaJS, VueJS, TailwindCSS, DaisyUI](https://www.youtube.com/watch?v=XR1rS-CCfx0)
|
||||
- [Infinite scrolling with MERN | ReactJS, TailwindCSS v3, DaisyUI | NodeJs, Express, MongoDB](https://www.youtube.com/watch?v=y7LYoRGRqRI)
|
||||
- [How to install TailwindCSS v3 and DaisyUI to your React app](https://www.youtube.com/watch?v=XBYvzPe7skc)
|
||||
- [Laravel: DaisyUI Agiliza Tus Desarrollos Con TailwindCSS + Select2 Tailwind Style (Spanish)](https://www.youtube.com/watch?v=28db3jojTgo)
|
||||
- [Build a Responsive Landing Page using DaisyUI, ReactJS and Tailwind CSS](https://www.youtube.com/watch?v=37gtpvy-k9U)
|
||||
- Courses
|
||||
- [Building with SvelteKit and GraphCMS](https://explorers.netlify.com/learn/building-with-sveltekit-and-graphcms)
|
||||
- [Svelte for Beginners by Mike Karan](https://www.udemy.com/course/svelte-for-beginners/)
|
||||
- [React Front To Back 2022 by Brad Traversy](https://www.udemy.com/course/react-front-to-back-2022/)
|
||||
- [Build Instagram profile page UI clone w/Next.js TailwindCSS](https://www.udemy.com/course/build-instagram-profile-page-ui-clone-nextjs-tailwindcss/)
|
||||
- [Instagram UI Clone Login Page w/ NextJS & TailwindCSS](https://www.udemy.com/course/instagram-ui-clone-login-page-w-nextjs-tailwindcss/)
|
||||
- [Build your Developer Portfolio and Blog from Scratch with Svelte and GraphCMS](https://www.freecodecamp.org/news/build-your-developer-portfolio-from-scratch-with-sveltekit-and-graphcms/)
|
||||
- Starters
|
||||
- [Vite-Boot](https://github.com/kirklin/vite-boot) Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + daisyUI Template.
|
||||
- [Nuxtwind Daisy](https://nuxtwind-daisy.ossph.org) Nuxt 3 + Tailwind CSS + daisyUI Template and more pre-installed configurations like fonts, icons, animations, etc.
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
|
|
@ -224,7 +55,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
|
|||
[jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
|
||||
[build-url]: https://github.com/saadeghi/daisyui/actions
|
||||
[tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
|
||||
[number-of-components]: https://badgen.net/badge/total%20components/53/green
|
||||
[number-of-components]: https://badgen.net/badge/total%20components/55/green
|
||||
[docs-url-install]: https://daisyui.com/docs/install
|
||||
[docs-url]: https://daisyui.com/
|
||||
[logo-url]: https://raw.githubusercontent.com/saadeghi/daisyui/master/src/docs/static/images/daisyui-logo/favicon-192.png
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -38,7 +38,6 @@
|
|||
"src/lib/**/*.js",
|
||||
"dist/*.js",
|
||||
"dist/{themes,styled,unstyled,full}.css",
|
||||
"!dist/*.rtl.css",
|
||||
"src/index.js",
|
||||
"src/theming/*.js",
|
||||
"src/theming/*.d.ts",
|
||||
|
|
@ -57,13 +56,11 @@
|
|||
]
|
||||
},
|
||||
"scripts": {
|
||||
"init": "npm install && npm run build && cd src/docs && npm install && cd src/experiments/playground && npm install",
|
||||
"init": "npm install && npm run build && cd src/docs && npm install && npm run get-json --silent && cd src/experiments/playground && npm install",
|
||||
"prettier": "prettier --write '**/*.{js,svelte,md,json,html,css}' --config src/.prettierrc.yaml --ignore-path src/.prettierignore",
|
||||
"build": "node src/build",
|
||||
"build:skipfullcss": "node src/build --skipfullcss",
|
||||
"dev": "cd src/docs && npm run dev",
|
||||
"add": "touch src/components/unstyled/$npm_config_name.css && touch src/components/styled/$npm_config_name.css",
|
||||
"postadd": "open src/components/unstyled/$npm_config_name.css && open src/components/styled/$npm_config_name.css",
|
||||
"playground": "cd src/experiments/playground && npm run dev",
|
||||
"release": "rm -f package-lock.json && standard-version",
|
||||
"release:patch": "rm -f package-lock.json && standard-version --release-as patch",
|
||||
|
|
@ -77,15 +74,14 @@
|
|||
"prejss-cli": "0.3.3",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-svelte": "^3.0.3",
|
||||
"prettier-plugin-tailwindcss": "^0.5.5",
|
||||
"rtlcss": "4.1.1",
|
||||
"standard-version": "^9.5.0"
|
||||
"prettier-plugin-tailwindcss": "^0.5.6",
|
||||
"standard-version": "^9.5.0",
|
||||
"tailwindcss": "^3.3.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"colord": "^2.9",
|
||||
"css-selector-tokenizer": "^0.8",
|
||||
"postcss": "^8",
|
||||
"postcss-js": "^4",
|
||||
"tailwindcss": "^3.1"
|
||||
"culori": "^3",
|
||||
"picocolors": "^1",
|
||||
"postcss-js": "^4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,56 @@
|
|||
:root,
|
||||
[data-theme] {
|
||||
background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
|
||||
color: hsl(var(--bc) / var(--tw-text-opacity, 1));
|
||||
background-color: theme(colors.base-100);
|
||||
color: theme(colors.base-content);
|
||||
}
|
||||
/* @supports (color: lch(0 0 0)) {
|
||||
:root,
|
||||
[data-theme] {
|
||||
background-color: lch(var(--b1) / var(--tw-bg-opacity, 1));
|
||||
color: lch(var(--bc) / var(--tw-text-opacity, 1));
|
||||
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--fallback-p: #491eff;
|
||||
--fallback-pc: #d4dbff;
|
||||
--fallback-s: #ff41c7;
|
||||
--fallback-sc: #fff9fc;
|
||||
--fallback-a: #00cfbd;
|
||||
--fallback-ac: #00100d;
|
||||
--fallback-n: #2b3440;
|
||||
--fallback-nc: #d7dde4;
|
||||
--fallback-b1: #ffffff;
|
||||
--fallback-b2: #e5e6e6;
|
||||
--fallback-b3: #e5e6e6;
|
||||
--fallback-bc: #1f2937;
|
||||
--fallback-in: #00b3f0;
|
||||
--fallback-inc: #000000;
|
||||
--fallback-su: #00ca92;
|
||||
--fallback-suc: #000000;
|
||||
--fallback-wa: #ffc22d;
|
||||
--fallback-wac: #000000;
|
||||
--fallback-er: #ff6f70;
|
||||
--fallback-erc: #000000;
|
||||
}
|
||||
} */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--fallback-p: #7582ff;
|
||||
--fallback-pc: #050617;
|
||||
--fallback-s: #ff71cf;
|
||||
--fallback-sc: #190211;
|
||||
--fallback-a: #00c7b5;
|
||||
--fallback-ac: #000e0c;
|
||||
--fallback-n: #2a323c;
|
||||
--fallback-nc: #a6adbb;
|
||||
--fallback-b1: #1d232a;
|
||||
--fallback-b2: #191e24;
|
||||
--fallback-b3: #15191e;
|
||||
--fallback-bc: #a6adbb;
|
||||
--fallback-in: #00b3f0;
|
||||
--fallback-inc: #000000;
|
||||
--fallback-su: #00ca92;
|
||||
--fallback-suc: #000000;
|
||||
--fallback-wa: #ffc22d;
|
||||
--fallback-wac: #000000;
|
||||
--fallback-er: #ff6f70;
|
||||
--fallback-erc: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
src/build.js
15
src/build.js
|
|
@ -9,12 +9,14 @@ execSync(
|
|||
execSync("cat dist/utilities/global/*.css > dist/utilities.css")
|
||||
execSync("node_modules/.bin/prejss-cli dist/utilities.css --format commonjs")
|
||||
execSync(
|
||||
"node_modules/.bin/postcss --config src/utilities/unstyled src/utilities/unstyled/*.css --base src --dir dist"
|
||||
"node_modules/.bin/postcss --config src/utilities/unstyled src/utilities/unstyled/*.css --base src --dir dist",
|
||||
{ stdio: [] }
|
||||
)
|
||||
execSync("cat dist/utilities/unstyled/*.css > dist/utilities-unstyled.css")
|
||||
execSync("node_modules/.bin/prejss-cli dist/utilities-unstyled.css --format commonjs")
|
||||
execSync(
|
||||
"node_modules/.bin/postcss --config src/utilities/styled src/utilities/styled/*.css --base src --dir dist"
|
||||
"node_modules/.bin/postcss --config src/utilities/styled src/utilities/styled/*.css --base src --dir dist",
|
||||
{ stdio: [] }
|
||||
)
|
||||
execSync("cat dist/utilities/styled/*.css > dist/utilities-styled.css")
|
||||
execSync("node_modules/.bin/prejss-cli dist/utilities-styled.css --format commonjs")
|
||||
|
|
@ -23,11 +25,10 @@ execSync(
|
|||
)
|
||||
execSync("cat dist/components/unstyled/*.css > dist/unstyled.css")
|
||||
execSync("cat dist/components/unstyled/*.css dist/components/styled/*.css > dist/styled.css")
|
||||
execSync(
|
||||
"node_modules/.bin/rtlcss dist/unstyled.css -s && node_modules/.bin/rtlcss dist/styled.css -s"
|
||||
)
|
||||
execSync("node_modules/.bin/prejss-cli dist/{unstyled,styled}{,.rtl}.css --format commonjs")
|
||||
execSync("node_modules/.bin/postcss src/themes/index.css -o dist/themes.css --config src/themes")
|
||||
execSync("node_modules/.bin/prejss-cli dist/{unstyled,styled}.css --format commonjs")
|
||||
execSync("node_modules/.bin/postcss src/themes/index.css -o dist/themes.css --config src/themes", {
|
||||
stdio: [],
|
||||
})
|
||||
if (!process.argv.includes("--skipfullcss")) {
|
||||
execSync("node_modules/.bin/postcss src/full/index.css -o dist/full.css --config src/full")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
.alert {
|
||||
@apply rounded-box text-base-content border-base-200 border p-4;
|
||||
--alert-bg: hsl(var(--b2));
|
||||
--alert-bg-mix: hsl(var(--b1));
|
||||
--alert-bg: theme(colors.base-200);
|
||||
--alert-bg-mix: theme(colors.base-100);
|
||||
background-color: var(--alert-bg);
|
||||
/* @supports (background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix))) {
|
||||
background-color: color-mix(in srgb, var(--alert-bg) 50%, var(--alert-bg-mix));
|
||||
} */
|
||||
&-info {
|
||||
@apply text-info-content border-info/20;
|
||||
--alert-bg: hsl(var(--in));
|
||||
--alert-bg-mix: hsl(var(--b1));
|
||||
--alert-bg: theme(colors.info);
|
||||
--alert-bg-mix: theme(colors.base-100);
|
||||
}
|
||||
&-success {
|
||||
@apply text-success-content border-success/20;
|
||||
--alert-bg: hsl(var(--su));
|
||||
--alert-bg-mix: hsl(var(--b1));
|
||||
--alert-bg: theme(colors.success);
|
||||
--alert-bg-mix: theme(colors.base-100);
|
||||
}
|
||||
&-warning {
|
||||
@apply text-warning-content border-warning/20;
|
||||
--alert-bg: hsl(var(--wa));
|
||||
--alert-bg-mix: hsl(var(--b1));
|
||||
--alert-bg: theme(colors.warning);
|
||||
--alert-bg-mix: theme(colors.base-100);
|
||||
}
|
||||
&-error {
|
||||
@apply text-error-content border-error/20;
|
||||
--alert-bg: hsl(var(--er));
|
||||
--alert-bg-mix: hsl(var(--b1));
|
||||
--alert-bg: theme(colors.error);
|
||||
--alert-bg-mix: theme(colors.base-100);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,5 +25,5 @@
|
|||
|
||||
[dir="rtl"] .breadcrumbs > ul > li + *:before,
|
||||
[dir="rtl"] .breadcrumbs > ol > li + *:before {
|
||||
--tw-rotate: -45deg;
|
||||
--tw-rotate: -135deg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.btn {
|
||||
@apply gap-2 font-semibold no-underline;
|
||||
@apply gap-2 font-semibold no-underline duration-200 ease-out;
|
||||
border-width: var(--border-btn, 1px);
|
||||
animation: button-pop var(--animation-btn, 0.25s) ease-out;
|
||||
text-transform: var(--btn-text-case, uppercase);
|
||||
transition-property: color, background-color, border-color, opacity, box-shadow, transform;
|
||||
&:active:hover,
|
||||
&:active:focus {
|
||||
animation: button-pop 0s ease-out;
|
||||
|
|
@ -11,14 +11,43 @@
|
|||
|
||||
/* default btn */
|
||||
& {
|
||||
@apply border-base-200 bg-base-200 text-base-content outline-base-content no-underline;
|
||||
@apply text-base-content outline-base-content no-underline shadow-sm;
|
||||
background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1));
|
||||
border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1));
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
background-color: var(--btn-color, var(--fallback-b2));
|
||||
border-color: var(--btn-color, var(--fallback-b2));
|
||||
}
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-base-300 bg-base-300;
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)) 90%,
|
||||
black
|
||||
);
|
||||
border-color: color-mix(
|
||||
in oklab,
|
||||
oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)) 90%,
|
||||
black
|
||||
);
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
background-color: var(--btn-color, var(--fallback-b2));
|
||||
border-color: var(--btn-color, var(--fallback-b2));
|
||||
}
|
||||
}
|
||||
}
|
||||
&-active {
|
||||
@apply border-base-300 bg-base-300;
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
oklch(var(--btn-color, var(--b3)) / var(--tw-bg-opacity)) 90%,
|
||||
black
|
||||
);
|
||||
border-color: color-mix(
|
||||
in oklab,
|
||||
oklch(var(--btn-color, var(--b3)) / var(--tw-border-opacity)) 90%,
|
||||
black
|
||||
);
|
||||
}
|
||||
&:focus-visible {
|
||||
@apply outline outline-2 outline-offset-2;
|
||||
|
|
@ -26,93 +55,77 @@
|
|||
}
|
||||
/* brand colors */
|
||||
&-primary {
|
||||
@apply border-primary bg-primary text-primary-content outline-primary;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-primary-focus bg-primary-focus;
|
||||
}
|
||||
@apply text-primary-content outline-primary;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--p);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-primary-focus bg-primary-focus;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-p);
|
||||
}
|
||||
}
|
||||
&-secondary {
|
||||
@apply border-secondary bg-secondary text-secondary-content outline-secondary;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-secondary-focus bg-secondary-focus;
|
||||
}
|
||||
@apply text-secondary-content outline-secondary;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--s);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-secondary-focus bg-secondary-focus;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-s);
|
||||
}
|
||||
}
|
||||
&-accent {
|
||||
@apply border-accent bg-accent text-accent-content outline-accent;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-accent-focus bg-accent-focus;
|
||||
}
|
||||
@apply text-accent-content outline-accent;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--a);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-accent-focus bg-accent-focus;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-a);
|
||||
}
|
||||
}
|
||||
&-neutral {
|
||||
@apply border-neutral bg-neutral text-neutral-content outline-neutral;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-neutral-focus bg-neutral-focus;
|
||||
}
|
||||
@apply text-neutral-content outline-neutral;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--n);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-neutral-focus bg-neutral-focus;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-n);
|
||||
}
|
||||
}
|
||||
|
||||
/* btn with state colors */
|
||||
&-info {
|
||||
@apply border-info bg-info text-info-content outline-info;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-info bg-info;
|
||||
}
|
||||
@apply text-info-content outline-info;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--in);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-info bg-info;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-in);
|
||||
}
|
||||
}
|
||||
&-success {
|
||||
@apply border-success bg-success text-success-content outline-success;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-success bg-success;
|
||||
}
|
||||
@apply text-success-content outline-success;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--su);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-success bg-success;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-su);
|
||||
}
|
||||
}
|
||||
&-warning {
|
||||
@apply border-warning bg-warning text-warning-content outline-warning;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-warning bg-warning;
|
||||
}
|
||||
@apply text-warning-content outline-warning;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--wa);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-warning bg-warning;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-wa);
|
||||
}
|
||||
}
|
||||
&-error {
|
||||
@apply border-error bg-error text-error-content outline-error;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-error bg-error;
|
||||
}
|
||||
@apply text-error-content outline-error;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--er);
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-error bg-error;
|
||||
@supports not (color: oklch(0 0 0)) {
|
||||
--btn-color: var(--fallback-er);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,11 +149,14 @@
|
|||
@apply border border-transparent bg-transparent text-current shadow-none outline-current;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply bg-base-content border-opacity-0 bg-opacity-20;
|
||||
@apply border-transparent;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
@apply bg-base-content/20;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply bg-base-content border-opacity-0 bg-opacity-20;
|
||||
@apply bg-base-content/20 border-transparent;
|
||||
}
|
||||
}
|
||||
&-link {
|
||||
|
|
@ -170,77 +186,105 @@
|
|||
@apply text-primary;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-primary-focus bg-primary-focus text-primary-content;
|
||||
@apply text-primary-content;
|
||||
background-color: color-mix(in oklab, theme(colors.primary) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.primary) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-primary-focus bg-primary-focus text-primary-content;
|
||||
@apply text-primary-content;
|
||||
background-color: color-mix(in oklab, theme(colors.primary) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.primary) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
@apply text-secondary;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-secondary-focus bg-secondary-focus text-secondary-content;
|
||||
@apply text-secondary-content;
|
||||
background-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-secondary-focus bg-secondary-focus text-secondary-content;
|
||||
@apply text-secondary-content;
|
||||
background-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.secondary) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-accent {
|
||||
@apply text-accent;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-accent-focus bg-accent-focus text-accent-content;
|
||||
@apply text-accent-content;
|
||||
background-color: color-mix(in oklab, theme(colors.accent) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.accent) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-accent-focus bg-accent-focus text-accent-content;
|
||||
@apply text-accent-content;
|
||||
background-color: color-mix(in oklab, theme(colors.accent) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.accent) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-success {
|
||||
@apply text-success;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-success bg-success text-success-content;
|
||||
@apply text-success-content;
|
||||
background-color: color-mix(in oklab, theme(colors.success) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.success) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-success bg-success text-success-content;
|
||||
@apply text-success-content;
|
||||
background-color: color-mix(in oklab, theme(colors.success) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.success) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-info {
|
||||
@apply text-info;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-info bg-info text-info-content;
|
||||
@apply text-info-content;
|
||||
background-color: color-mix(in oklab, theme(colors.info) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.info) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-info bg-info text-info-content;
|
||||
@apply text-info-content;
|
||||
background-color: color-mix(in oklab, theme(colors.info) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.info) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-warning {
|
||||
@apply text-warning;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-warning bg-warning text-warning-content;
|
||||
@apply text-warning-content;
|
||||
background-color: color-mix(in oklab, theme(colors.warning) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.warning) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-warning bg-warning text-warning-content;
|
||||
@apply text-warning-content;
|
||||
background-color: color-mix(in oklab, theme(colors.warning) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.warning) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-error {
|
||||
@apply text-error;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-error bg-error text-error-content;
|
||||
@apply text-error-content;
|
||||
background-color: color-mix(in oklab, theme(colors.error) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.error) 90%, black);
|
||||
}
|
||||
}
|
||||
&.btn-active {
|
||||
@apply border-error bg-error text-error-content;
|
||||
@apply text-error-content;
|
||||
background-color: color-mix(in oklab, theme(colors.error) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.error) 90%, black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -259,16 +303,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
/* group */
|
||||
.btn-group {
|
||||
& > input[type="radio"]:checked.btn,
|
||||
& > .btn-active {
|
||||
@apply border-primary bg-primary text-primary-content;
|
||||
&:focus-visible {
|
||||
@apply outline-primary outline outline-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* radio input and checkbox as button */
|
||||
.btn:is(input[type="checkbox"]:checked),
|
||||
|
|
@ -276,7 +310,8 @@
|
|||
@apply border-primary bg-primary text-primary-content;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
@apply border-primary-focus bg-primary-focus;
|
||||
background-color: color-mix(in oklab, theme(colors.primary) 90%, black);
|
||||
border-color: color-mix(in oklab, theme(colors.primary) 90%, black);
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
|
|
|
|||
|
|
@ -36,16 +36,16 @@
|
|||
}
|
||||
|
||||
&-start .chat-bubble {
|
||||
@apply rounded-bl-none;
|
||||
@apply rounded-es-none;
|
||||
&:before {
|
||||
left: -0.749rem;
|
||||
inset-inline-start: -0.749rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-end .chat-bubble {
|
||||
@apply rounded-br-none;
|
||||
@apply rounded-ee-none;
|
||||
&:before {
|
||||
left: 99.9%;
|
||||
inset-inline-start: 99.9%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
.checkbox {
|
||||
--chkbg: var(--bc);
|
||||
--chkfg: var(--b1);
|
||||
[type="checkbox"].checkbox {
|
||||
--chkbg: theme(colors.base-content);
|
||||
--chkfg: theme(colors.base-100);
|
||||
@apply border-base-content rounded-btn h-6 w-6 cursor-pointer appearance-none border border-opacity-20;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
&:focus-visible {
|
||||
@apply outline-base-content outline outline-2 outline-offset-2;
|
||||
}
|
||||
|
|
@ -10,34 +13,28 @@
|
|||
&[aria-checked="true"] {
|
||||
@apply bg-base-content bg-no-repeat;
|
||||
animation: checkmark var(--animation-input, 0.2s) ease-out;
|
||||
background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
|
||||
linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
|
||||
linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
|
||||
background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
|
||||
linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
|
||||
linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
hsl(var(--chkbg)) 30%,
|
||||
hsl(var(--chkfg)) 30.99%,
|
||||
hsl(var(--chkfg)) 40%,
|
||||
var(--chkbg) 30%,
|
||||
var(--chkfg) 30.99%,
|
||||
var(--chkfg) 40%,
|
||||
transparent 40.99%
|
||||
),
|
||||
linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
|
||||
linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
|
||||
}
|
||||
&:indeterminate {
|
||||
@apply bg-base-content bg-no-repeat;
|
||||
animation: checkmark var(--animation-input, 0.2s) ease-out;
|
||||
background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%),
|
||||
linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%),
|
||||
linear-gradient(
|
||||
0deg,
|
||||
hsl(var(--chkbg)) 43%,
|
||||
hsl(var(--chkfg)) 43%,
|
||||
hsl(var(--chkfg)) 57%,
|
||||
hsl(var(--chkbg)) 57%
|
||||
);
|
||||
background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%),
|
||||
linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
|
||||
linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
|
||||
}
|
||||
&-primary {
|
||||
--chkbg: var(--p);
|
||||
--chkfg: var(--pc);
|
||||
--chkbg: theme(colors.primary);
|
||||
--chkfg: theme(colors.primary-content);
|
||||
@apply border-primary [@media(hover:hover)]:hover:border-primary;
|
||||
&:focus-visible {
|
||||
@apply outline-primary;
|
||||
|
|
@ -49,8 +46,8 @@
|
|||
}
|
||||
}
|
||||
&-secondary {
|
||||
--chkbg: var(--s);
|
||||
--chkfg: var(--sc);
|
||||
--chkbg: theme(colors.secondary);
|
||||
--chkfg: theme(colors.secondary-content);
|
||||
@apply border-secondary [@media(hover:hover)]:hover:border-secondary;
|
||||
&:focus-visible {
|
||||
@apply outline-secondary;
|
||||
|
|
@ -62,8 +59,8 @@
|
|||
}
|
||||
}
|
||||
&-accent {
|
||||
--chkbg: var(--a);
|
||||
--chkfg: var(--ac);
|
||||
--chkbg: theme(colors.accent);
|
||||
--chkfg: theme(colors.accent-content);
|
||||
@apply border-accent [@media(hover:hover)]:hover:border-accent;
|
||||
&:focus-visible {
|
||||
@apply outline-accent;
|
||||
|
|
@ -75,8 +72,8 @@
|
|||
}
|
||||
}
|
||||
&-success {
|
||||
--chkbg: var(--su);
|
||||
--chkfg: var(--suc);
|
||||
--chkbg: theme(colors.success);
|
||||
--chkfg: theme(colors.success-content);
|
||||
@apply border-success [@media(hover:hover)]:hover:border-success;
|
||||
&:focus-visible {
|
||||
@apply outline-success;
|
||||
|
|
@ -88,8 +85,8 @@
|
|||
}
|
||||
}
|
||||
&-warning {
|
||||
--chkbg: var(--wa);
|
||||
--chkfg: var(--wac);
|
||||
--chkbg: theme(colors.warning);
|
||||
--chkfg: theme(colors.warning-content);
|
||||
@apply border-warning [@media(hover:hover)]:hover:border-warning;
|
||||
&:focus-visible {
|
||||
@apply outline-warning;
|
||||
|
|
@ -101,8 +98,8 @@
|
|||
}
|
||||
}
|
||||
&-info {
|
||||
--chkbg: var(--in);
|
||||
--chkfg: var(--inc);
|
||||
--chkbg: theme(colors.info);
|
||||
--chkfg: theme(colors.info-content);
|
||||
@apply border-info [@media(hover:hover)]:hover:border-info;
|
||||
&:focus-visible {
|
||||
@apply outline-info;
|
||||
|
|
@ -114,8 +111,8 @@
|
|||
}
|
||||
}
|
||||
&-error {
|
||||
--chkbg: var(--er);
|
||||
--chkfg: var(--erc);
|
||||
--chkbg: theme(colors.error);
|
||||
--chkfg: theme(colors.error-content);
|
||||
@apply border-error [@media(hover:hover)]:hover:border-error;
|
||||
&:focus-visible {
|
||||
@apply outline-error;
|
||||
|
|
@ -147,23 +144,3 @@
|
|||
.checkbox-mark {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
.checkbox {
|
||||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
|
||||
linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
|
||||
linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
hsl(var(--chkbg)) 30%,
|
||||
hsl(var(--chkfg)) 30.99%,
|
||||
hsl(var(--chkfg)) 40%,
|
||||
transparent 40.99%
|
||||
),
|
||||
linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,19 +26,16 @@ details.collapse summary {
|
|||
@apply absolute block h-2 w-2 translate-y-[-100%] rotate-[45deg] transition-all ease-out;
|
||||
transition-duration: 0.2s;
|
||||
top: 50%;
|
||||
right: 1.4rem;
|
||||
inset-inline-end: 1.4rem;
|
||||
content: "";
|
||||
transform-origin: 75% 75%;
|
||||
box-shadow: 2px 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
[dir="rtl"] .collapse-arrow > .collapse-title:after {
|
||||
--tw-rotate: -45deg;
|
||||
}
|
||||
.collapse-plus > .collapse-title:after {
|
||||
@apply absolute block h-2 w-2 transition-all duration-300 ease-out;
|
||||
top: 0.9rem;
|
||||
right: 1.4rem;
|
||||
inset-inline-end: 1.4rem;
|
||||
content: "+";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -61,7 +58,7 @@ details.collapse summary {
|
|||
.collapse-title,
|
||||
:where(.collapse > input[type="checkbox"]),
|
||||
:where(.collapse > input[type="radio"]) {
|
||||
@apply w-full p-4 pr-12;
|
||||
@apply w-full p-4 pe-12;
|
||||
min-height: 3.75rem;
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
|
|
@ -91,15 +88,6 @@ details.collapse summary {
|
|||
.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
|
||||
@apply translate-y-[-50%] rotate-[225deg];
|
||||
}
|
||||
[dir="rtl"] .collapse[open].collapse-arrow > .collapse-title:after,
|
||||
[dir="rtl"] .collapse-open.collapse-arrow > .collapse-title:after,
|
||||
[dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
|
||||
[dir="rtl"]
|
||||
.collapse-arrow:not(.collapse-close)
|
||||
input[type="checkbox"]:checked
|
||||
~ .collapse-title:after {
|
||||
--tw-rotate: 135deg;
|
||||
}
|
||||
.collapse[open].collapse-plus > .collapse-title:after,
|
||||
.collapse-open.collapse-plus > .collapse-title:after,
|
||||
.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
.diff-item-1:after {
|
||||
@apply bg-base-100/50 border-base-100 outline-base-content/5 rounded-full border-2 shadow-sm outline outline-offset-[-3px] backdrop-blur;
|
||||
translate: 50% -50%;
|
||||
}
|
||||
.diff-item-2 {
|
||||
@apply border-base-100 border-r-2;
|
||||
}
|
||||
|
|
@ -1,12 +1,42 @@
|
|||
.divider {
|
||||
@apply my-4 h-4 whitespace-nowrap;
|
||||
&:before {
|
||||
@apply bg-base-content bg-opacity-10;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
@apply bg-base-content bg-opacity-10;
|
||||
@apply bg-base-300;
|
||||
}
|
||||
&:not(:empty) {
|
||||
@apply gap-4;
|
||||
}
|
||||
&-neutral:before,
|
||||
&-neutral:after {
|
||||
@apply bg-neutral;
|
||||
}
|
||||
&-primary:before,
|
||||
&-primary:after {
|
||||
@apply bg-primary;
|
||||
}
|
||||
&-secondary:before,
|
||||
&-secondary:after {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
&-accent:before,
|
||||
&-accent:after {
|
||||
@apply bg-accent;
|
||||
}
|
||||
&-success:before,
|
||||
&-success:after {
|
||||
@apply bg-success;
|
||||
}
|
||||
&-warning:before,
|
||||
&-warning:after {
|
||||
@apply bg-warning;
|
||||
}
|
||||
&-info:before,
|
||||
&-info:after {
|
||||
@apply bg-info;
|
||||
}
|
||||
&-error:before,
|
||||
&-error:after {
|
||||
@apply bg-error;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
&-toggle {
|
||||
&:checked ~ .drawer-side {
|
||||
& > .drawer-overlay {
|
||||
background-color: hsl(0 0% 0%/0.4);
|
||||
background-color: #00000066;
|
||||
}
|
||||
}
|
||||
&:focus-visible ~ .drawer-content label.drawer-button {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
@apply border-neutral bg-neutral text-neutral-content font-semibold uppercase no-underline;
|
||||
border-width: var(--border-btn, 1px);
|
||||
animation: button-pop var(--animation-btn, 0.25s) ease-out;
|
||||
text-transform: var(--btn-text-case, uppercase);
|
||||
}
|
||||
&-bordered {
|
||||
@apply border-opacity-20;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.input {
|
||||
@apply border-base-content bg-base-100 rounded-btn border border-opacity-0 text-base;
|
||||
.input,
|
||||
input.input {
|
||||
@apply bg-base-100 rounded-btn border border-transparent text-base;
|
||||
input:focus {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
|
@ -7,11 +8,12 @@
|
|||
line-height: 1em;
|
||||
}
|
||||
&-bordered {
|
||||
@apply border-opacity-20;
|
||||
@apply border-base-content/20;
|
||||
}
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-base-content/20 outline outline-2 outline-offset-2;
|
||||
box-shadow: none;
|
||||
@apply border-base-content/20 outline-base-content/20 outline outline-2 outline-offset-2;
|
||||
}
|
||||
&-ghost {
|
||||
@apply bg-opacity-5;
|
||||
|
|
@ -25,55 +27,55 @@
|
|||
@apply border-primary;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-primary;
|
||||
@apply outline-primary border-primary;
|
||||
}
|
||||
}
|
||||
&-secondary {
|
||||
@apply border-secondary;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-secondary;
|
||||
@apply outline-secondary border-secondary;
|
||||
}
|
||||
}
|
||||
&-accent {
|
||||
@apply border-accent;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-accent;
|
||||
@apply outline-accent border-accent;
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
@apply border-info;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-info;
|
||||
@apply outline-info border-info;
|
||||
}
|
||||
}
|
||||
&-success {
|
||||
@apply border-success;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-success;
|
||||
@apply outline-success border-success;
|
||||
}
|
||||
}
|
||||
&-warning {
|
||||
@apply border-warning;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-warning;
|
||||
@apply outline-warning border-warning;
|
||||
}
|
||||
}
|
||||
&-error {
|
||||
@apply border-error;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@apply outline-error;
|
||||
@apply outline-error border-error;
|
||||
}
|
||||
}
|
||||
&-disabled,
|
||||
&:disabled,
|
||||
&[disabled] {
|
||||
@apply border-base-200 bg-base-200 placeholder-base-content cursor-not-allowed text-opacity-20 placeholder-opacity-20;
|
||||
@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 cursor-not-allowed placeholder-opacity-20;
|
||||
}
|
||||
/* &::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.join {
|
||||
@apply rounded-btn;
|
||||
& > :where(*:not(:first-child)) {
|
||||
@apply my-0 -ml-px;
|
||||
@apply my-0 -ms-px;
|
||||
}
|
||||
&-item:focus {
|
||||
@apply isolate;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
.link {
|
||||
&-primary {
|
||||
@apply text-primary [@media(hover:hover)]:hover:text-primary-focus;
|
||||
@apply text-primary [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.primary)_80%,black)];
|
||||
}
|
||||
&-secondary {
|
||||
@apply text-secondary [@media(hover:hover)]:hover:text-secondary-focus;
|
||||
@apply text-secondary [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.secondary)_80%,black)];
|
||||
}
|
||||
&-accent {
|
||||
@apply text-accent [@media(hover:hover)]:hover:text-accent-focus;
|
||||
@apply text-accent [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.accent)_80%,black)];
|
||||
}
|
||||
&-neutral {
|
||||
@apply text-neutral [@media(hover:hover)]:hover:text-neutral-focus;
|
||||
@apply text-neutral [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.neutral)_80%,black)];
|
||||
}
|
||||
&-success {
|
||||
@apply text-success [@media(hover:hover)]:hover:text-success;
|
||||
@apply text-success [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.success)_80%,black)];
|
||||
}
|
||||
&-info {
|
||||
@apply text-info [@media(hover:hover)]:hover:text-info;
|
||||
@apply text-info [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.info)_80%,black)];
|
||||
}
|
||||
&-warning {
|
||||
@apply text-warning [@media(hover:hover)]:hover:text-warning;
|
||||
@apply text-warning [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.warning)_80%,black)];
|
||||
}
|
||||
&-error {
|
||||
@apply text-error [@media(hover:hover)]:hover:text-error;
|
||||
@apply text-error [@media(hover:hover)]:hover:text-[color-mix(in_oklab,theme(colors.error)_80%,black)];
|
||||
}
|
||||
&:focus {
|
||||
@apply outline-none;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
height: 1px;
|
||||
}
|
||||
.menu :where(li ul) {
|
||||
@apply ml-4 pl-2;
|
||||
@apply ms-4 ps-2;
|
||||
&:before {
|
||||
@apply bg-base-content/10 absolute bottom-3 left-0 top-3 w-px;
|
||||
@apply bg-base-content/10 absolute bottom-3 start-0 top-3 w-px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
|
||||
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
||||
@apply rounded-btn px-4 py-2 text-left transition duration-200 ease-out;
|
||||
@apply rounded-btn px-4 py-2 text-start transition duration-200 ease-out;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,10 @@
|
|||
}
|
||||
@media (hover: hover) {
|
||||
&:not(.active):hover {
|
||||
@apply bg-base-content/10 text-base-content cursor-pointer outline-none;
|
||||
@apply text-base-content cursor-pointer outline-none;
|
||||
@supports (color: oklch(0 0 0)) {
|
||||
@apply bg-base-content/10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.mockup {
|
||||
&-code {
|
||||
@apply bg-neutral text-neutral-content rounded-box min-w-[18rem] py-5;
|
||||
direction: ltr;
|
||||
&:before {
|
||||
content: "";
|
||||
@apply mb-4 block h-3 w-3 rounded-full opacity-30;
|
||||
|
|
@ -24,10 +25,10 @@
|
|||
}
|
||||
}
|
||||
&-window {
|
||||
@apply rounded-box pt-5;
|
||||
@apply rounded-box flex flex-col pt-5;
|
||||
&:before {
|
||||
content: "";
|
||||
@apply mb-4 block aspect-square h-3 rounded-full opacity-30;
|
||||
@apply mb-4 block aspect-square h-3 shrink-0 self-start rounded-full opacity-30 rtl:self-end;
|
||||
box-shadow:
|
||||
1.4em 0,
|
||||
2.8em 0,
|
||||
|
|
@ -84,7 +85,7 @@
|
|||
&-browser {
|
||||
@apply rounded-box;
|
||||
.mockup-browser-toolbar {
|
||||
@apply my-3 inline-flex w-full items-center pr-[1.4em];
|
||||
@apply my-3 inline-flex w-full items-center pr-[1.4em] rtl:flex-row-reverse;
|
||||
&:before {
|
||||
content: "";
|
||||
@apply mr-[4.8rem] inline-block aspect-square h-3 rounded-full opacity-30;
|
||||
|
|
@ -95,6 +96,7 @@
|
|||
}
|
||||
.input {
|
||||
@apply bg-base-200 relative mx-auto block h-7 w-96 overflow-hidden text-ellipsis whitespace-nowrap pl-8;
|
||||
direction: ltr;
|
||||
&:before {
|
||||
content: "";
|
||||
@apply absolute left-2 top-1/2 aspect-square h-3 -translate-y-1/2 rounded-full border-2 border-current opacity-60;
|
||||
|
|
|
|||
|
|
@ -26,28 +26,28 @@
|
|||
}
|
||||
|
||||
&:indeterminate {
|
||||
--progress-color: hsl(var(--bc));
|
||||
--progress-color: theme(colors.base-content);
|
||||
}
|
||||
&-primary:indeterminate {
|
||||
--progress-color: hsl(var(--p));
|
||||
--progress-color: theme(colors.primary);
|
||||
}
|
||||
&-secondary:indeterminate {
|
||||
--progress-color: hsl(var(--s));
|
||||
--progress-color: theme(colors.secondary);
|
||||
}
|
||||
&-accent:indeterminate {
|
||||
--progress-color: hsl(var(--a));
|
||||
--progress-color: theme(colors.accent);
|
||||
}
|
||||
&-info:indeterminate {
|
||||
--progress-color: hsl(var(--in));
|
||||
--progress-color: theme(colors.info);
|
||||
}
|
||||
&-success:indeterminate {
|
||||
--progress-color: hsl(var(--su));
|
||||
--progress-color: theme(colors.success);
|
||||
}
|
||||
&-warning:indeterminate {
|
||||
--progress-color: hsl(var(--wa));
|
||||
--progress-color: theme(colors.warning);
|
||||
}
|
||||
&-error:indeterminate {
|
||||
--progress-color: hsl(var(--er));
|
||||
--progress-color: theme(colors.error);
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
.radio {
|
||||
[type="radio"].radio {
|
||||
--chkbg: var(--bc);
|
||||
@apply border-base-content h-6 w-6 cursor-pointer appearance-none rounded-full border border-opacity-20;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
&:focus-visible {
|
||||
@apply outline-base-content outline outline-2 outline-offset-2;
|
||||
}
|
||||
&:checked,
|
||||
&[aria-checked="true"] {
|
||||
@apply bg-base-content;
|
||||
background-image: none;
|
||||
animation: radiomark var(--animation-input, 0.2s) ease-out;
|
||||
box-shadow:
|
||||
0 0 0 4px hsl(var(--b1)) inset,
|
||||
0 0 0 4px hsl(var(--b1)) inset;
|
||||
0 0 0 4px theme(colors.base-100) inset,
|
||||
0 0 0 4px theme(colors.base-100) inset;
|
||||
}
|
||||
&-primary {
|
||||
--chkbg: var(--p);
|
||||
|
|
@ -97,18 +101,18 @@
|
|||
@keyframes radiomark {
|
||||
0% {
|
||||
box-shadow:
|
||||
0 0 0 12px hsl(var(--b1)) inset,
|
||||
0 0 0 12px hsl(var(--b1)) inset;
|
||||
0 0 0 12px theme(colors.base-100) inset,
|
||||
0 0 0 12px theme(colors.base-100) inset;
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 0 3px hsl(var(--b1)) inset,
|
||||
0 0 0 3px hsl(var(--b1)) inset;
|
||||
0 0 0 3px theme(colors.base-100) inset,
|
||||
0 0 0 3px theme(colors.base-100) inset;
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
0 0 0 4px hsl(var(--b1)) inset,
|
||||
0 0 0 4px hsl(var(--b1)) inset;
|
||||
0 0 0 4px theme(colors.base-100) inset,
|
||||
0 0 0 4px theme(colors.base-100) inset;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.range {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
--range-shdw: var(--bc);
|
||||
--range-shdw: theme(colors.base-content);
|
||||
@apply rounded-box overflow-hidden bg-transparent;
|
||||
&:focus-visible::-webkit-slider-thumb {
|
||||
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
|
||||
--focus-shadow: 0 0 0 6px theme(colors.base-100) inset, 0 0 0 2rem var(--range-shdw) inset;
|
||||
}
|
||||
&:focus-visible::-moz-range-thumb {
|
||||
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
|
||||
--focus-shadow: 0 0 0 6px theme(colors.base-100) inset, 0 0 0 2rem var(--range-shdw) inset;
|
||||
}
|
||||
&::-webkit-slider-runnable-track {
|
||||
@apply rounded-box bg-base-content/10 h-2 w-full;
|
||||
|
|
@ -20,45 +20,45 @@
|
|||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
top: 50%;
|
||||
color: hsl(var(--range-shdw));
|
||||
color: var(--range-shdw);
|
||||
transform: translateY(-50%);
|
||||
--filler-size: 100rem;
|
||||
--filler-offset: 0.6rem;
|
||||
box-shadow:
|
||||
0 0 0 3px hsl(var(--range-shdw)) inset,
|
||||
0 0 0 3px var(--range-shdw) inset,
|
||||
var(--focus-shadow, 0 0),
|
||||
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
@apply rounded-box bg-base-100 relative h-6 w-6 border-none;
|
||||
top: 50%;
|
||||
color: hsl(var(--range-shdw));
|
||||
color: var(--range-shdw);
|
||||
--filler-size: 100rem;
|
||||
--filler-offset: 0.5rem;
|
||||
box-shadow:
|
||||
0 0 0 3px hsl(var(--range-shdw)) inset,
|
||||
0 0 0 3px var(--range-shdw) inset,
|
||||
var(--focus-shadow, 0 0),
|
||||
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
||||
}
|
||||
&-primary {
|
||||
--range-shdw: var(--p);
|
||||
--range-shdw: theme(colors.primary);
|
||||
}
|
||||
&-secondary {
|
||||
--range-shdw: var(--s);
|
||||
--range-shdw: theme(colors.secondary);
|
||||
}
|
||||
&-accent {
|
||||
--range-shdw: var(--a);
|
||||
--range-shdw: theme(colors.accent);
|
||||
}
|
||||
&-success {
|
||||
--range-shdw: var(--su);
|
||||
--range-shdw: theme(colors.success);
|
||||
}
|
||||
&-warning {
|
||||
--range-shdw: var(--wa);
|
||||
--range-shdw: theme(colors.warning);
|
||||
}
|
||||
&-info {
|
||||
--range-shdw: var(--in);
|
||||
--range-shdw: theme(colors.info);
|
||||
}
|
||||
&-error {
|
||||
--range-shdw: var(--er);
|
||||
--range-shdw: theme(colors.error);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
& .rating-hidden {
|
||||
@apply w-2 bg-transparent;
|
||||
}
|
||||
input[type="radio"]:checked {
|
||||
background-image: none;
|
||||
}
|
||||
input:checked ~ input,
|
||||
input[aria-checked="true"] ~ input {
|
||||
@apply bg-opacity-20;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
.select {
|
||||
@apply border-base-content bg-base-100 rounded-btn border border-opacity-0 pr-10;
|
||||
.select,
|
||||
select.select {
|
||||
@apply bg-base-100 rounded-btn border border-transparent pr-10;
|
||||
&-bordered {
|
||||
@apply border-opacity-20;
|
||||
@apply border-base-content/20;
|
||||
}
|
||||
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
|
||||
linear-gradient(135deg, currentColor 50%, transparent 50%);
|
||||
|
|
@ -13,7 +14,8 @@
|
|||
4px 4px;
|
||||
background-repeat: no-repeat;
|
||||
&:focus {
|
||||
@apply outline-base-content/20 outline outline-2 outline-offset-2;
|
||||
box-shadow: none;
|
||||
@apply border-base-content/20 outline-base-content/20 outline outline-2 outline-offset-2;
|
||||
}
|
||||
&-ghost {
|
||||
@apply bg-opacity-5;
|
||||
|
|
@ -24,43 +26,43 @@
|
|||
&-primary {
|
||||
@apply border-primary;
|
||||
&:focus {
|
||||
@apply outline-primary;
|
||||
@apply outline-primary border-primary;
|
||||
}
|
||||
}
|
||||
&-secondary {
|
||||
@apply border-secondary;
|
||||
&:focus {
|
||||
@apply outline-secondary;
|
||||
@apply outline-secondary border-secondary;
|
||||
}
|
||||
}
|
||||
&-accent {
|
||||
@apply border-accent;
|
||||
&:focus {
|
||||
@apply outline-accent;
|
||||
@apply outline-accent border-accent;
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
@apply border-info;
|
||||
&:focus {
|
||||
@apply outline-info;
|
||||
@apply outline-info border-info;
|
||||
}
|
||||
}
|
||||
&-success {
|
||||
@apply border-success;
|
||||
&:focus {
|
||||
@apply outline-success;
|
||||
@apply outline-success border-success;
|
||||
}
|
||||
}
|
||||
&-warning {
|
||||
@apply border-warning;
|
||||
&:focus {
|
||||
@apply outline-warning;
|
||||
@apply outline-warning border-warning;
|
||||
}
|
||||
}
|
||||
&-error {
|
||||
@apply border-error;
|
||||
&:focus {
|
||||
@apply outline-error;
|
||||
@apply outline-error border-error;
|
||||
}
|
||||
}
|
||||
&-disabled,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
.skeleton {
|
||||
@apply bg-base-300 rounded-box;
|
||||
will-change: background-position;
|
||||
animation: skeleton 2.5s ease-in-out infinite;
|
||||
background-image: linear-gradient(
|
||||
105deg,
|
||||
transparent 0%,
|
||||
transparent 40%,
|
||||
theme(colors.base-100) 50%,
|
||||
transparent 60%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: -50%;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
.skeleton {
|
||||
animation-duration: 15s;
|
||||
}
|
||||
}
|
||||
@keyframes skeleton {
|
||||
from {
|
||||
background-position: 150%;
|
||||
}
|
||||
to {
|
||||
background-position: -50%;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,9 @@
|
|||
:where(.stats) {
|
||||
@apply divide-x divide-y-0 overflow-x-auto;
|
||||
}
|
||||
:is([dir="rtl"] .stats > :not([hidden]) ~ :not([hidden])) {
|
||||
--tw-divide-x-reverse: 1;
|
||||
}
|
||||
.stat {
|
||||
@apply border-base-content gap-x-4 border-opacity-10 px-6 py-4;
|
||||
&-title {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
&:before {
|
||||
@apply bg-base-300 text-base-content top-0 col-start-1 row-start-1 h-2 w-full transform;
|
||||
content: "";
|
||||
margin-left: -100%;
|
||||
margin-inline-start: -100%;
|
||||
}
|
||||
}
|
||||
/* } */
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
.tabs-lifted .tab:focus-visible {
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
.tab {
|
||||
@apply text-opacity-50 [@media(hover:hover)]:hover:text-opacity-100;
|
||||
--tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
|
||||
--tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
|
||||
--tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
|
||||
--tab-color: theme(colors.base-content);
|
||||
--tab-bg: theme(colors.base-100);
|
||||
--tab-border-color: theme(colors.base-300);
|
||||
color: var(--tab-color);
|
||||
padding-left: var(--tab-padding, 1rem);
|
||||
padding-right: var(--tab-padding, 1rem);
|
||||
&.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
padding-inline-start: var(--tab-padding, 1rem);
|
||||
padding-inline-end: var(--tab-padding, 1rem);
|
||||
&.tab-active:not(.tab-disabled):not([disabled]),
|
||||
&:is(input:checked) {
|
||||
@apply border-base-content border-opacity-100 text-opacity-100;
|
||||
}
|
||||
&:focus {
|
||||
|
|
@ -14,11 +19,7 @@
|
|||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: -3px;
|
||||
&.tab-lifted {
|
||||
border-bottom-right-radius: var(--tab-radius, 0.5rem);
|
||||
border-bottom-left-radius: var(--tab-radius, 0.5rem);
|
||||
}
|
||||
outline-offset: -5px;
|
||||
}
|
||||
/* disabled */
|
||||
&-disabled,
|
||||
|
|
@ -32,80 +33,88 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.tab-bordered {
|
||||
.tabs-bordered .tab {
|
||||
@apply border-base-content border-opacity-20;
|
||||
border-style: solid;
|
||||
border-bottom-width: calc(var(--tab-border, 1px) + 1px);
|
||||
}
|
||||
.tab-lifted {
|
||||
.tabs-lifted .tab {
|
||||
border: var(--tab-border, 1px) solid transparent;
|
||||
border-width: 0 0 var(--tab-border, 1px) 0;
|
||||
border-top-left-radius: var(--tab-radius, 0.5rem);
|
||||
border-top-right-radius: var(--tab-radius, 0.5rem);
|
||||
border-start-start-radius: var(--tab-radius, 0.5rem);
|
||||
border-start-end-radius: var(--tab-radius, 0.5rem);
|
||||
border-bottom-color: var(--tab-border-color);
|
||||
padding-left: var(--tab-padding, 1rem);
|
||||
padding-right: var(--tab-padding, 1rem);
|
||||
padding-inline-start: var(--tab-padding, 1rem);
|
||||
padding-inline-end: var(--tab-padding, 1rem);
|
||||
padding-top: var(--tab-border, 1px);
|
||||
&.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
&.tab-active:not(.tab-disabled):not([disabled]),
|
||||
&:is(input:checked) {
|
||||
background-color: var(--tab-bg);
|
||||
border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
|
||||
border-left-color: var(--tab-border-color);
|
||||
border-right-color: var(--tab-border-color);
|
||||
border-inline-start-color: var(--tab-border-color);
|
||||
border-inline-end-color: var(--tab-border-color);
|
||||
border-top-color: var(--tab-border-color);
|
||||
padding-left: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
padding-right: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
padding-bottom: var(--tab-border, 1px);
|
||||
padding-top: 0;
|
||||
&:before,
|
||||
&:after {
|
||||
&:before {
|
||||
z-index: 1;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: var(--tab-radius, 0.5rem);
|
||||
width: calc(100% + var(--tab-radius, 0.5rem) * 2);
|
||||
height: var(--tab-radius, 0.5rem);
|
||||
bottom: 0;
|
||||
--tab-grad: calc(68% - var(--tab-border, 1px));
|
||||
--tab-corner-bg: radial-gradient(
|
||||
circle at var(--circle-pos),
|
||||
background-size: var(--tab-radius, 0.5rem);
|
||||
background-position:
|
||||
top left,
|
||||
top right;
|
||||
background-repeat: no-repeat;
|
||||
--tab-grad: calc(69% - var(--tab-border, 1px));
|
||||
--radius-start: radial-gradient(
|
||||
circle at top left,
|
||||
transparent var(--tab-grad),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
||||
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
|
||||
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
|
||||
);
|
||||
--radius-end: radial-gradient(
|
||||
circle at top right,
|
||||
transparent var(--tab-grad),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
||||
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
|
||||
);
|
||||
background-image: var(--radius-start), var(--radius-end);
|
||||
}
|
||||
&:before {
|
||||
left: calc(var(--tab-radius, 0.5rem) * -1);
|
||||
--circle-pos: top left;
|
||||
background-image: var(--tab-corner-bg);
|
||||
|
||||
/* RTL quick fix */
|
||||
[dir="rtl"] & {
|
||||
--circle-pos: top right;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
right: calc(var(--tab-radius, 0.5rem) * -1);
|
||||
--circle-pos: top right;
|
||||
background-image: var(--tab-corner-bg);
|
||||
|
||||
/* RTL quick fix */
|
||||
[dir="rtl"] & {
|
||||
--circle-pos: top left;
|
||||
}
|
||||
}
|
||||
&:first-child:before {
|
||||
background: none;
|
||||
background-image: var(--radius-end);
|
||||
background-position: top right;
|
||||
[dir="rtl"] & {
|
||||
background-image: var(--radius-start);
|
||||
background-position: top left;
|
||||
}
|
||||
}
|
||||
&:last-child:after {
|
||||
background: none;
|
||||
&:last-child:before {
|
||||
background-image: var(--radius-start);
|
||||
background-position: top left;
|
||||
[dir="rtl"] & {
|
||||
background-image: var(--radius-end);
|
||||
background-position: top right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-lifted.tab-active:not(.tab-disabled):not([disabled])
|
||||
+ .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
.tabs-lifted
|
||||
.tab-active:not(.tab-disabled):not([disabled])
|
||||
+ .tabs-lifted
|
||||
.tab-active:not(.tab-disabled):not([disabled]),
|
||||
.tabs-lifted .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked) {
|
||||
&:before {
|
||||
background: none;
|
||||
background-image: var(--radius-end);
|
||||
background-position: top right;
|
||||
}
|
||||
}
|
||||
.tabs-boxed {
|
||||
|
|
@ -113,7 +122,8 @@
|
|||
.tab {
|
||||
@apply rounded-btn;
|
||||
}
|
||||
.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
.tab-active:not(.tab-disabled):not([disabled]),
|
||||
:is(input:checked) {
|
||||
@apply bg-primary text-primary-content [@media(hover:hover)]:hover:text-primary-content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.table {
|
||||
@apply rounded-box text-left text-sm;
|
||||
@apply rounded-box text-left text-sm rtl:text-right;
|
||||
:where(th, td) {
|
||||
@apply px-4 py-3 align-middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
.textarea {
|
||||
@apply border-base-content bg-base-100 rounded-btn border border-opacity-0;
|
||||
@apply bg-base-100 rounded-btn border border-transparent;
|
||||
&-bordered {
|
||||
@apply border-opacity-20;
|
||||
@apply border-base-content/20;
|
||||
}
|
||||
&:focus {
|
||||
@apply outline-base-content/20 outline outline-2 outline-offset-2;
|
||||
box-shadow: none;
|
||||
@apply border-base-content/20 outline-base-content/20 outline outline-2 outline-offset-2;
|
||||
}
|
||||
&-ghost {
|
||||
@apply bg-opacity-5;
|
||||
|
|
@ -16,43 +17,43 @@
|
|||
&-primary {
|
||||
@apply border-primary;
|
||||
&:focus {
|
||||
@apply outline-primary;
|
||||
@apply outline-primary border-primary;
|
||||
}
|
||||
}
|
||||
&-secondary {
|
||||
@apply border-secondary;
|
||||
&:focus {
|
||||
@apply outline-secondary;
|
||||
@apply outline-secondary border-secondary;
|
||||
}
|
||||
}
|
||||
&-accent {
|
||||
@apply border-accent;
|
||||
&:focus {
|
||||
@apply outline-accent;
|
||||
@apply outline-accent border-accent;
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
@apply border-info;
|
||||
&:focus {
|
||||
@apply outline-info;
|
||||
@apply outline-info border-info;
|
||||
}
|
||||
}
|
||||
&-success {
|
||||
@apply border-success;
|
||||
&:focus {
|
||||
@apply outline-success;
|
||||
@apply outline-success border-success;
|
||||
}
|
||||
}
|
||||
&-warning {
|
||||
@apply border-warning;
|
||||
&:focus {
|
||||
@apply outline-warning;
|
||||
@apply outline-warning border-warning;
|
||||
}
|
||||
}
|
||||
&-error {
|
||||
@apply border-error;
|
||||
&:focus {
|
||||
@apply outline-error;
|
||||
@apply outline-error border-error;
|
||||
}
|
||||
}
|
||||
&-disabled,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
.timeline hr {
|
||||
@apply h-1;
|
||||
}
|
||||
:where(.timeline hr) {
|
||||
@apply bg-base-300;
|
||||
}
|
||||
:where(.timeline:has(.timeline-middle) hr) {
|
||||
&:first-child {
|
||||
@apply rounded-e-badge rounded-s-none;
|
||||
}
|
||||
&:last-child {
|
||||
@apply rounded-s-badge rounded-e-none;
|
||||
}
|
||||
}
|
||||
:where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
|
||||
@apply rounded-s-badge rounded-e-none;
|
||||
}
|
||||
:where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
|
||||
@apply rounded-e-badge rounded-s-none;
|
||||
}
|
||||
.timeline-box {
|
||||
@apply rounded-box bg-base-100 border-base-300 border px-4 py-2 shadow-sm;
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
.toggle {
|
||||
--tglbg: hsl(var(--b1));
|
||||
[type="checkbox"].toggle {
|
||||
--tglbg: theme(colors.base-100);
|
||||
--handleoffset: 1.5rem;
|
||||
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
||||
--togglehandleborder: 0 0;
|
||||
@apply border-base-content bg-base-content rounded-badge h-6 w-12 cursor-pointer appearance-none border border-opacity-20 bg-opacity-50;
|
||||
@apply text-base-content/50 rounded-badge h-6 w-12 cursor-pointer appearance-none border border-current bg-current;
|
||||
transition:
|
||||
background,
|
||||
box-shadow var(--animation-input, 0.2s) ease-out;
|
||||
|
|
@ -17,17 +17,21 @@
|
|||
&:focus-visible {
|
||||
@apply outline-base-content/20 outline outline-2 outline-offset-2;
|
||||
}
|
||||
&:hover {
|
||||
@apply bg-current;
|
||||
}
|
||||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
background-image: none;
|
||||
--handleoffsetcalculator: var(--handleoffset);
|
||||
@apply border-opacity-100 bg-opacity-100;
|
||||
@apply text-base-content;
|
||||
[dir="rtl"] & {
|
||||
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
||||
}
|
||||
}
|
||||
&:indeterminate {
|
||||
@apply border-opacity-100 bg-opacity-100;
|
||||
@apply text-base-content;
|
||||
box-shadow:
|
||||
calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
|
||||
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
|
||||
|
|
@ -46,7 +50,6 @@
|
|||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
@apply border-primary;
|
||||
@apply border-primary bg-primary text-primary-content border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,7 +60,6 @@
|
|||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
@apply border-secondary;
|
||||
@apply border-secondary bg-secondary text-secondary-content border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,7 +70,6 @@
|
|||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
@apply border-accent;
|
||||
@apply border-accent bg-accent text-accent-content border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +80,6 @@
|
|||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
@apply border-success;
|
||||
@apply border-success bg-success text-success-content border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
|
@ -90,7 +90,6 @@
|
|||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
@apply border-warning;
|
||||
@apply border-warning bg-warning text-warning-content border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
|
@ -101,7 +100,6 @@
|
|||
&:checked,
|
||||
&[checked="true"],
|
||||
&[aria-checked="true"] {
|
||||
@apply border-info;
|
||||
@apply border-info bg-info text-info-content border-opacity-10;
|
||||
}
|
||||
}
|
||||
|
|
@ -117,8 +115,8 @@
|
|||
}
|
||||
&:disabled {
|
||||
@apply border-base-content cursor-not-allowed bg-transparent opacity-30;
|
||||
--togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset,
|
||||
var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
|
||||
--togglehandleborder: 0 0 0 3px theme(colors.base-content) inset,
|
||||
var(--handleoffsetcalculator) 0 0 3px theme(colors.base-content) inset;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
:root .prose {
|
||||
--tw-prose-body: hsl(var(--bc) / 0.8);
|
||||
--tw-prose-headings: hsl(var(--bc));
|
||||
--tw-prose-lead: hsl(var(--bc));
|
||||
--tw-prose-links: hsl(var(--bc));
|
||||
--tw-prose-bold: hsl(var(--bc));
|
||||
--tw-prose-counters: hsl(var(--bc));
|
||||
--tw-prose-bullets: hsl(var(--bc) / 0.5);
|
||||
--tw-prose-hr: hsl(var(--bc) / 0.2);
|
||||
--tw-prose-quotes: hsl(var(--bc));
|
||||
--tw-prose-quote-borders: hsl(var(--bc) / 0.2);
|
||||
--tw-prose-captions: hsl(var(--bc) / 0.5);
|
||||
--tw-prose-code: hsl(var(--bc));
|
||||
--tw-prose-pre-code: hsl(var(--nc));
|
||||
--tw-prose-pre-bg: hsl(var(--n));
|
||||
--tw-prose-th-borders: hsl(var(--bc) / 0.5);
|
||||
--tw-prose-td-borders: hsl(var(--bc) / 0.2);
|
||||
--tw-prose-body: theme(colors.base-content/0.8);
|
||||
--tw-prose-headings: theme(colors.base-content);
|
||||
--tw-prose-lead: theme(colors.base-content);
|
||||
--tw-prose-links: theme(colors.base-content);
|
||||
--tw-prose-bold: theme(colors.base-content);
|
||||
--tw-prose-counters: theme(colors.base-content);
|
||||
--tw-prose-bullets: theme(colors.base-content/0.5);
|
||||
--tw-prose-hr: theme(colors.base-content/0.2);
|
||||
--tw-prose-quotes: theme(colors.base-content);
|
||||
--tw-prose-quote-borders: theme(colors.base-content/0.2);
|
||||
--tw-prose-captions: theme(colors.base-content/0.5);
|
||||
--tw-prose-code: theme(colors.base-content);
|
||||
--tw-prose-pre-code: theme(colors.neutral-content);
|
||||
--tw-prose-pre-bg: theme(colors.neutral);
|
||||
--tw-prose-th-borders: theme(colors.base-content/0.5);
|
||||
--tw-prose-td-borders: theme(colors.base-content/0.2);
|
||||
}
|
||||
.prose {
|
||||
& :where(code):not(:where([class~="not-prose"] *)) {
|
||||
|
|
@ -32,6 +32,6 @@
|
|||
}
|
||||
}
|
||||
& :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
|
||||
border-bottom-color: hsl(var(--bc) / 20%);
|
||||
border-bottom-color: theme(colors.base-content/0.2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ module.exports = {
|
|||
safelist: responsiveRegex,
|
||||
theme: {
|
||||
colors: require("../theming"),
|
||||
extend: require("../lib/utility-classes"),
|
||||
},
|
||||
plugins: [
|
||||
plugin(function ({ addBase, addUtilities, matchUtilities, matchComponents, theme }) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.alert {
|
||||
@apply grid w-full grid-flow-row content-start items-center justify-items-center gap-4 text-center sm:grid-flow-col sm:grid-cols-[auto_minmax(auto,1fr)] sm:justify-items-start sm:text-left;
|
||||
@apply grid w-full grid-flow-row content-start items-center justify-items-center gap-4 text-center sm:grid-flow-col sm:grid-cols-[auto_minmax(auto,1fr)] sm:justify-items-start sm:text-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
.btn {
|
||||
@apply rounded-btn inline-flex flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center border-transparent text-center transition duration-200 ease-out;
|
||||
@apply min-h-12 h-12 px-4;
|
||||
@apply rounded-btn inline-flex h-12 min-h-[3rem] flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center border-transparent px-4 text-center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1em;
|
||||
|
||||
/* disabled */
|
||||
&-disabled,
|
||||
&[disabled],
|
||||
|
|
@ -20,20 +18,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* group */
|
||||
.btn-group {
|
||||
@apply inline-flex;
|
||||
& > input[type="radio"].btn {
|
||||
@apply appearance-none;
|
||||
}
|
||||
& > input[type="radio"].btn:before {
|
||||
content: attr(data-title);
|
||||
}
|
||||
}
|
||||
|
||||
/* radio input and checkbox as button */
|
||||
.btn:is(input[type="checkbox"]),
|
||||
.btn:is(input[type="radio"]) {
|
||||
:where(.btn:is(input[type="checkbox"])),
|
||||
:where(.btn:is(input[type="radio"])) {
|
||||
@apply w-auto appearance-none;
|
||||
}
|
||||
.btn:is(input[type="checkbox"]):after,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
.diff {
|
||||
@apply relative grid w-full overflow-hidden;
|
||||
container-type: inline-size;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
.diff-resizer {
|
||||
@apply relative top-1/2 z-[1] h-12 w-[25rem] min-w-[1rem] max-w-[calc(100cqi-1rem)] resize-x overflow-hidden opacity-0;
|
||||
transform-origin: 100% 100%;
|
||||
scale: 4;
|
||||
translate: 1.5rem -1.5rem;
|
||||
clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem));
|
||||
}
|
||||
.diff-resizer,
|
||||
.diff-item-1,
|
||||
.diff-item-2 {
|
||||
@apply relative col-start-1 row-start-1;
|
||||
}
|
||||
.diff-item-1:after {
|
||||
@apply pointer-events-none absolute bottom-0 right-px top-1/2 z-[1] h-8 w-8 content-[''];
|
||||
translate: 50% -50%;
|
||||
}
|
||||
.diff-item-2 {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
.diff-item-1 > *,
|
||||
.diff-item-2 > * {
|
||||
@apply pointer-events-none absolute bottom-0 left-0 top-0 h-full w-[100cqi] max-w-none object-cover object-center;
|
||||
}
|
||||
|
|
@ -2,8 +2,12 @@
|
|||
@apply flex flex-row items-center self-stretch;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
@apply flex-grow;
|
||||
@apply h-0.5 w-full;
|
||||
@apply h-0.5 w-full flex-grow content-[''];
|
||||
}
|
||||
&-start:before {
|
||||
@apply hidden;
|
||||
}
|
||||
&-end:after {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@apply col-start-2 row-start-1;
|
||||
}
|
||||
&-side {
|
||||
@apply pointer-events-none fixed left-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-y-auto overscroll-contain;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
scrollbar-width: none;
|
||||
|
|
@ -19,10 +19,10 @@
|
|||
@apply col-start-1 row-start-1;
|
||||
}
|
||||
& > *:not(.drawer-overlay) {
|
||||
@apply transition duration-300 ease-out;
|
||||
@apply transition-transform duration-300 ease-out will-change-transform;
|
||||
transform: translateX(-100%);
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -48,6 +48,9 @@
|
|||
}
|
||||
& ~ .drawer-side > *:not(.drawer-overlay) {
|
||||
transform: translateX(100%);
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
&:checked ~ .drawer-side > *:not(.drawer-overlay) {
|
||||
transform: translateX(0%);
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
@apply invisible opacity-0;
|
||||
}
|
||||
.dropdown-end .dropdown-content {
|
||||
@apply right-0;
|
||||
@apply end-0;
|
||||
}
|
||||
.dropdown-left .dropdown-content {
|
||||
@apply bottom-auto right-full top-0;
|
||||
@apply bottom-auto end-full top-0;
|
||||
}
|
||||
.dropdown-right .dropdown-content {
|
||||
@apply bottom-auto left-full top-0;
|
||||
@apply bottom-auto start-full top-0;
|
||||
}
|
||||
.dropdown-bottom .dropdown-content {
|
||||
@apply bottom-auto top-full;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.file-input {
|
||||
@apply h-12 flex-shrink pr-4 text-sm leading-loose;
|
||||
@apply h-12 flex-shrink pe-4 text-sm leading-loose;
|
||||
&::file-selector-button {
|
||||
@apply mr-4 inline-flex h-full flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center px-4 text-center text-sm transition duration-200 ease-out;
|
||||
@apply me-4 inline-flex h-full flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center px-4 text-center text-sm transition duration-200 ease-out;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,57 +2,3 @@
|
|||
@apply flex-shrink;
|
||||
@apply h-12 px-4 text-sm leading-loose;
|
||||
}
|
||||
.input-group {
|
||||
@apply flex w-full items-stretch;
|
||||
> .input {
|
||||
@apply isolate;
|
||||
}
|
||||
> *,
|
||||
> .input,
|
||||
> .textarea,
|
||||
> .select {
|
||||
@apply rounded-none;
|
||||
}
|
||||
&-md {
|
||||
@apply text-sm leading-loose;
|
||||
}
|
||||
&-lg {
|
||||
@apply text-lg leading-loose;
|
||||
}
|
||||
&-sm {
|
||||
@apply text-sm leading-8;
|
||||
}
|
||||
&-xs {
|
||||
@apply text-xs leading-relaxed;
|
||||
}
|
||||
:where(span) {
|
||||
@apply bg-base-300 flex items-center px-4;
|
||||
}
|
||||
> :first-child {
|
||||
border-top-left-radius: var(--rounded-btn, 0.5rem);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
> :last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: var(--rounded-btn, 0.5rem);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
|
||||
}
|
||||
&-vertical {
|
||||
@apply flex-col;
|
||||
:first-child {
|
||||
border-top-left-radius: var(--rounded-btn, 0.5rem);
|
||||
border-top-right-radius: var(--rounded-btn, 0.5rem);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
|
||||
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@
|
|||
.mask-half-1 {
|
||||
mask-size: 200%;
|
||||
mask-position: left;
|
||||
@apply [mask-position:left] rtl:[mask-position:right];
|
||||
}
|
||||
.mask-half-2 {
|
||||
mask-size: 200%;
|
||||
mask-position: right;
|
||||
@apply [mask-position:right] rtl:[mask-position:left];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.select {
|
||||
@apply inline-flex cursor-pointer select-none appearance-none;
|
||||
@apply min-h-12 h-12 pl-4 pr-10 text-sm leading-loose;
|
||||
@apply h-12 min-h-[3rem] pl-4 pr-10 text-sm leading-loose;
|
||||
|
||||
/* disabled */
|
||||
/* &-disabled,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,33 @@
|
|||
.tabs {
|
||||
@apply flex flex-wrap items-end;
|
||||
@apply grid items-end;
|
||||
}
|
||||
.tabs-lifted {
|
||||
&:has(.tab-content[class^="rounded-"]) :first-child:not(.tab-active),
|
||||
&:has(.tab-content[class*=" rounded-"]) :first-child:not(.tab-active) {
|
||||
@apply border-b-transparent;
|
||||
}
|
||||
}
|
||||
.tab {
|
||||
@apply relative inline-flex cursor-pointer select-none flex-wrap items-center justify-center text-center;
|
||||
@apply h-8 text-sm leading-loose;
|
||||
@apply relative row-start-1 inline-flex h-8 cursor-pointer select-none appearance-none flex-wrap items-center justify-center text-center text-sm leading-loose;
|
||||
--tab-padding: 1rem;
|
||||
&:is(input[type="radio"]):after {
|
||||
--tw-content: attr(aria-label);
|
||||
content: var(--tw-content);
|
||||
}
|
||||
&:not(input):empty {
|
||||
@apply cursor-default;
|
||||
grid-column-start: span 9999;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
@apply col-span-full col-end-[span_9999] row-start-2 -mt-[--tab-border] hidden border-transparent;
|
||||
border-width: var(--tab-border, 0);
|
||||
:checked + &:nth-child(2),
|
||||
.tab-active + &:nth-child(2) {
|
||||
@apply rounded-ss-none;
|
||||
}
|
||||
}
|
||||
input.tab:checked + .tab-content,
|
||||
.tab-active + .tab-content {
|
||||
@apply block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.textarea {
|
||||
@apply min-h-12 flex-shrink;
|
||||
@apply min-h-[3rem] flex-shrink;
|
||||
@apply px-4 py-2 text-sm leading-loose;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
.timeline {
|
||||
@apply relative flex;
|
||||
}
|
||||
:where(.timeline > li) {
|
||||
@apply relative grid shrink-0 items-center;
|
||||
grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
|
||||
--timeline-row-end,
|
||||
minmax(0, 1fr)
|
||||
);
|
||||
grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
|
||||
--timeline-col-end,
|
||||
minmax(0, 1fr)
|
||||
);
|
||||
}
|
||||
.timeline > li > hr {
|
||||
@apply w-full border-0;
|
||||
}
|
||||
:where(.timeline > li > hr) {
|
||||
&:first-child {
|
||||
@apply col-start-1 row-start-2;
|
||||
}
|
||||
&:last-child {
|
||||
@apply col-start-3 col-end-[none] row-start-2 row-end-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-start {
|
||||
@apply col-start-1 col-end-4 row-start-1 row-end-2 m-1 self-end justify-self-center;
|
||||
}
|
||||
.timeline-middle {
|
||||
@apply col-start-2 row-start-2;
|
||||
}
|
||||
.timeline-end {
|
||||
@apply col-start-1 col-end-4 row-start-3 row-end-4 m-1 self-start justify-self-center;
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
|
@ -1,17 +1,20 @@
|
|||
{
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=20.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"get-json": "node src/lib/scripts/get-json",
|
||||
"dev": "npm run get-json --silent && npm run createStyleHandlerComponent:dev --silent && vite dev --port 3000 --open",
|
||||
"dev": "npm run createStyleHandlerComponent:dev --silent && vite dev --port 3000 --open",
|
||||
"build": "npm run get-json --silent && npm run createStyleHandlerComponent:prod --silent && NODE_ENV=production vite build --logLevel error",
|
||||
"preview": "npm run build && vite preview --port 3000 --open",
|
||||
"createStyleHandlerComponent:dev": "echo $'<script>import \"@components/StyleDevelopment.svelte\"</script>' > src/components/StyleHandler.svelte",
|
||||
"createStyleHandlerComponent:prod": "echo $'<script>import \"@components/StyleProduction.svelte\"</script>' > src/components/StyleHandler.svelte",
|
||||
"createStyleHandlerComponent:dev": "echo $'<script>import \"$components/StyleDevelopment.svelte\"</script>' > src/components/StyleHandler.svelte",
|
||||
"createStyleHandlerComponent:prod": "echo $'<script>import \"$components/StyleProduction.svelte\"</script>' > src/components/StyleHandler.svelte",
|
||||
"langdiff": "node src/lib/scripts/compare-translate-files"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
"@sveltejs/kit": "^1.25.2",
|
||||
"@sveltejs/kit": "^1.27.4",
|
||||
"@tailwindcss/typography": "0.5.10",
|
||||
"autoprefixer": "10.4.16",
|
||||
"dep-graph-count": "^1.0.0",
|
||||
|
|
@ -20,24 +23,23 @@
|
|||
"postcss": "8.4.31",
|
||||
"postcss-nesting": "12.0.1",
|
||||
"prism-themes": "1.9.0",
|
||||
"rehype-autolink-headings": "^7.0.0",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"sharp": "^0.32.6",
|
||||
"svelte": "^4.2.1",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"svelte": "^4.2.3",
|
||||
"svelte-preprocess": "^5.1.0",
|
||||
"svelte-prism": "1.1.6",
|
||||
"svelte-typeahead": "^4.4.1",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"theme-change": "2.5.0",
|
||||
"vite": "^4.4.11"
|
||||
"vite": "^4.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"colord": "^2.9.3",
|
||||
"daisyui": "^3.9.2",
|
||||
"culori": "^3.2.0",
|
||||
"daisyui": "^4.0.0-alpha.4",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"nanoid": "^5.0.1",
|
||||
"randomcolor": "^0.6.2",
|
||||
"nanoid": "^5.0.3",
|
||||
"svelte-countup": "^0.2.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,11 @@
|
|||
} catch (e) {}
|
||||
</script>
|
||||
%sveltekit.head%
|
||||
<script src="https://cdn.counter.dev/script.js" data-id="89c87d3c-db72-4b44-a0be-564ad71e48ee" data-utcoffset="3" defer></script>
|
||||
<script
|
||||
src="https://cdn.counter.dev/script.js"
|
||||
data-id="89c87d3c-db72-4b44-a0be-564ad71e48ee"
|
||||
data-utcoffset="3"
|
||||
defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>%sveltekit.body%</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { onMount } from "svelte"
|
||||
import { readEnv } from "$lib/util"
|
||||
export let slot
|
||||
import Sponsors from "@components/Sponsors.svelte"
|
||||
import Sponsors from "$components/Sponsors.svelte"
|
||||
</script>
|
||||
|
||||
{#if slot === "adesense-1"}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
export let data
|
||||
|
||||
const browsers = {
|
||||
firefox: {
|
||||
name: "Firefox",
|
||||
safeversion: 118,
|
||||
icon: '<svg style="width: 1.0009765625em; height: 1em;vertical-align: middle;fill:currentColor;overflow: hidden;" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M516.010667 1024q-161.706667 0-288.277333-85.994667t-188.288-227.712q-33.152-74.858667-38.293333-172.010667t14.848-189.994667 63.424-178.282667 102.293333-138.581333l-6.293333 160.576q6.293333-8 38.848-8.853333t40 8.853333q24-46.293333 91.712-78.848t133.994667-33.706667q-30.848 25.706667-68.288 84.864t-33.429333 93.418667q14.293333 4.565333 35.712 7.722667t36.010667 4.288 38.848 2.282667 28.864 1.706667q8.576 2.858667 5.418667 26.005333t-17.429333 43.136q-2.858667 4.010667-9.429333 10.581333t-32.277333 20.288-57.706667 19.434667l8.576 108.010667-79.424-38.293333q-10.282667 24.576-4.288 46.570667t20.565333 37.994667 37.418667 23.722667 46.293333 3.712q29.141333-5.141333 56-19.712t47.722667-25.706667 42.005333-10.005333q34.858667 2.282667 51.136 18.858667t11.136 37.141333q-0.576 1.152-1.429333 3.136t-4.864 7.146667-10.282667 8.853333-18.005333 5.994667-26.581333 0.576q-34.282667 54.293333-82.581333 77.418667t-119.722667 16.853333q42.282667 34.858667 92.864 47.146667t96.277333 3.434667 88.277333-29.717333 73.152-50.005333 45.994667-59.434667q24.576-52.010667 22.293333-109.994667t-21.418667-107.712-44.864-71.424q49.706667 21.717333 78.293333 45.418667t44.010667 64.277333q8.576-97.152-32.853333-196.010667t-119.722667-162.282667q151.424 44.010667 235.434667 159.722667t86.293333 295.722667q1.152 72.576-23.146667 145.706667t-70.570667 136-108.010667 112-141.418667 77.418667-164.864 28.288z" /></svg>',
|
||||
},
|
||||
chrome: {
|
||||
name: "Chrome",
|
||||
safeversion: 117,
|
||||
icon: '<svg style="width: 1em; height: 1em;vertical-align: middle;fill:currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M258.27328 446.54592l-146.5344-253.80864c93.81888-117.47328 238.24384-192.73728 400.26112-192.73728 187.43296 0 351.31392 100.74112 440.5248 251.00288l-417.77152 0c-7.49568-0.65536-15.09376-1.00352-22.75328-1.00352-121.87648 0-224.58368 83.64032-253.72672 196.54656zM695.296 324.99712l293.45792 0c22.7328 57.93792 35.2256 120.99584 35.2256 187.00288 0 280.82176-226.0992 508.80512-506.18368 511.91808l209.38752-362.68032c29.47072-42.37312 46.7968-93.81888 46.7968-149.23776 0-73.17504-30.16704-139.42784-78.68416-187.00288zM326.00064 512c0-102.56384 83.43552-185.99936 185.99936-185.99936s185.99936 83.43552 185.99936 185.99936c0 102.56384-83.43552 185.99936-185.99936 185.99936s-185.99936-83.43552-185.99936-185.99936zM582.18496 764.43648l-146.57536 253.87008c-246.53824-36.88448-435.6096-249.50784-435.6096-506.32704 0-91.21792 23.87968-176.8448 65.69984-251.02336l209.03936 362.04544c41.86112 89.10848 132.48512 150.97856 237.28128 150.97856 24.30976 0 47.84128-3.33824 70.18496-9.56416z" /></svg>',
|
||||
},
|
||||
safari: {
|
||||
name: "Safari",
|
||||
safeversion: 16.6,
|
||||
icon: '<svg style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 32a480 480 0 1 0 480 480A480 480 0 0 0 512 32z m281.92 243.84a859.52 859.52 0 0 1-77.44 198.72A207.36 207.36 0 0 1 512 720a207.68 207.68 0 0 1-37.44-3.52 859.84 859.84 0 0 1-198.4 77.44 36.8 36.8 0 0 1-45.76-45.76 859.84 859.84 0 0 1 77.44-198.4 207.36 207.36 0 0 1 241.92-241.92 859.52 859.52 0 0 1 198.72-77.44 36.8 36.8 0 0 1 45.44 45.44zM512 424A88 88 0 1 0 600 512 88 88 0 0 0 512 424z" fill="currentColor" /></svg>',
|
||||
},
|
||||
iossafari: {
|
||||
name: "Safari iOS",
|
||||
safeversion: 16.7,
|
||||
icon: '<svg class="svg-icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M46.933333 258.133333c-26.197333 0-46.933333 20.48-46.933333 46.08a46.08 46.08 0 0 0 46.933333 46.08c26.453333 0 47.36-20.48 47.36-46.08 0-25.6-20.906667-46.08-47.36-46.08m324.693334 0.853334c-143.36 0-232.96 97.706667-232.96 253.013333 0 156.586667 89.6 253.866667 232.96 253.866667 142.506667 0 232.533333-97.28 232.533333-253.866667 0-155.306667-90.026667-253.013333-232.533333-253.013333m462.506666 0c-106.666667 0-182.613333 58.88-182.613333 146.346666 0 69.546667 43.093333 113.066667 133.546667 133.973334l63.573333 15.36c61.866667 14.08 87.04 34.56 87.04 69.973333 0 40.96-41.386667 69.973333-100.266667 69.973333-60.16 0-105.386667-29.44-110.08-74.666666h-85.333333c3.413333 90.453333 77.653333 145.92 190.293333 145.92 119.04 0 193.706667-58.453333 193.706667-151.466667 0-72.96-42.666667-114.346667-141.653333-136.96l-56.746667-12.8c-60.16-14.506667-84.906667-33.706667-84.906667-66.133333 0-40.96 37.546667-68.266667 93.013334-68.266667 55.893333 0 94.293333 27.733333 98.56 73.386667h83.626666c-2.133333-86.186667-73.386667-144.64-181.76-144.64M371.626667 333.653333c87.04 0 142.933333 69.546667 142.933333 178.346667 0 109.653333-55.893333 179.2-142.933333 179.2-87.893333 0-143.36-69.546667-143.36-179.2 0-108.8 55.466667-178.346667 143.36-178.346667M4.736 397.226667v360.533333H89.6V397.226667H4.693333z" /></svg>',
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex gap-2 lg:gap-4">
|
||||
<span class="text-base-content/50 text-xs">Supported on</span>
|
||||
{#each Object.entries(data) as [browser, version]}
|
||||
<div class="inline-flex items-center gap-1 lg:gap-2">
|
||||
<div class="tooltip" data-tip={browsers[browser].name}>
|
||||
<span class={version <= browsers[browser].safeversion ? "text-success" : "text-error"}>
|
||||
{@html browsers[browser].icon}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-base-content/50 font-mono text-xs">{version}+</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
import { prefix } from "$lib/stores"
|
||||
import PrefixEdit from "@components/PrefixEdit.svelte"
|
||||
import Translate from "@components/Translate.svelte"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import PrefixEdit from "$components/PrefixEdit.svelte"
|
||||
import Translate from "$components/Translate.svelte"
|
||||
import { t } from "$lib/i18n"
|
||||
export let data
|
||||
</script>
|
||||
|
||||
|
|
@ -10,12 +10,12 @@
|
|||
<table class="table-xs md:table-sm table-pin-rows table w-full">
|
||||
<thead>
|
||||
<tr class="border-b-0">
|
||||
<th class="bg-base-200 rounded-l-box flex items-center gap-2 normal-case lg:py-3">
|
||||
<th class="bg-base-200 rounded-s-box flex items-center gap-2 lg:py-3">
|
||||
<PrefixEdit />
|
||||
<span><Translate text="Class name" /></span>
|
||||
</th>
|
||||
<th class="bg-base-200 normal-case lg:py-3"><Translate text="Type" /></th>
|
||||
<th class="bg-base-200 rounded-r-box lg:py-3" />
|
||||
<th class="bg-base-200 lg:py-3"><Translate text="Type" /></th>
|
||||
<th class="bg-base-200 rounded-e-box lg:py-3" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -54,7 +54,9 @@
|
|||
{#each data as item, index}
|
||||
<tr>
|
||||
<th class="w-3/12 font-normal">
|
||||
<span class="whitespace-nowrap font-mono lowercase">{`${$prefix}${item.class}`}</span>
|
||||
<span class="whitespace-nowrap font-mono lowercase">
|
||||
{`${item.prefix !== false ? $prefix : ""}${item.class}`}
|
||||
</span>
|
||||
</th>
|
||||
<td class="w-1/12">
|
||||
{#if item.type == "component"}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import Translate from "@components/Translate.svelte"
|
||||
import Translate from "$components/Translate.svelte"
|
||||
import { htmlToJsx } from "$lib/actions"
|
||||
let Prism
|
||||
onMount(async () => {
|
||||
|
|
@ -59,41 +59,41 @@
|
|||
</div>
|
||||
{/if}
|
||||
<div class="grid">
|
||||
<div class="tabs z-10 -mb-px">
|
||||
<div class="tabs tabs-lifted z-10 -mb-[var(--tab-border)] justify-self-start">
|
||||
<button
|
||||
on:click={() => (showContent = "preview")}
|
||||
class={`tab tab-lifted ${
|
||||
class={`tab ${
|
||||
showContent == "preview"
|
||||
? "tab-active [--tab-bg:hsl(var(--b1))]"
|
||||
? "tab-active [--tab-bg:var(--fallback-b1,oklch(var(--b1)))]"
|
||||
: "[--tab-border-color:transparent]"
|
||||
}`}>
|
||||
<Translate text="Preview" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => (showContent = "html")}
|
||||
class={`tab tab-lifted ${
|
||||
class={`tab ${
|
||||
showContent == "html"
|
||||
? "tab-active [--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]"
|
||||
? "tab-active [--tab-bg:var(--fallback-n,oklch(var(--n)))] [--tab-border-color:var(--fallback-n,oklch(var(--n)))] [--tab-color:var(--fallback-nc,oklch(var(--nc)))]"
|
||||
: "[--tab-border-color:transparent]"
|
||||
}`}>
|
||||
HTML
|
||||
</button>
|
||||
<button
|
||||
on:click={() => (showContent = "jsx")}
|
||||
class={`tab tab-lifted ${
|
||||
class={`tab ${
|
||||
showContent == "jsx"
|
||||
? "tab-active [--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]"
|
||||
? "tab-active [--tab-bg:var(--fallback-n,oklch(var(--n)))] [--tab-border-color:var(--fallback-n,oklch(var(--n)))] [--tab-color:var(--fallback-nc,oklch(var(--nc)))]"
|
||||
: "[--tab-border-color:transparent]"
|
||||
}`}>
|
||||
JSX
|
||||
</button>
|
||||
<div class="tab tab-lifted mr-6 flex-1 cursor-default [--tab-border-color:transparent]" />
|
||||
<div class="tab [--tab-border-color:transparent]" />
|
||||
</div>
|
||||
|
||||
{#if showContent == "preview"}
|
||||
<div class="bg-base-300 rounded-b-box rounded-tr-box relative overflow-x-auto">
|
||||
<div class="bg-base-300 rounded-b-box rounded-se-box relative overflow-x-auto">
|
||||
<div
|
||||
class="preview border-base-300 bg-base-100 rounded-b-box rounded-tr-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden border bg-cover bg-top p-4 {classes}"
|
||||
class="preview border-base-300 bg-base-100 rounded-b-box rounded-se-box flex min-h-[6rem] min-w-[18rem] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-x-hidden bg-cover bg-top p-4 [border-width:var(--tab-border)] {classes}"
|
||||
style={bg ? `background-image: url(${bg})` : ``}
|
||||
class:resize-x={responsive}>
|
||||
<slot />
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
<slot name="html" />
|
||||
</svelte:component>
|
||||
</div>
|
||||
<div class="col-start-1 row-start-1 flex items-start justify-end p-2">
|
||||
<div class="col-start-1 row-start-1 flex items-start justify-end p-2 rtl:justify-start">
|
||||
<div
|
||||
data-tip={isClipboardButtonPressed ? "copied" : "copy"}
|
||||
class="tooltip tooltip-left tooltip-accent">
|
||||
|
|
@ -207,26 +207,26 @@
|
|||
padding-right: 2.5rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-top-right-radius: 0.75rem;
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-bottom-right-radius: 0.75rem;
|
||||
border-bottom-left-radius: 0.75rem;
|
||||
border-top-right-radius: var(--rounded-box, 1rem);
|
||||
border-top-left-radius: var(--rounded-box, 1rem);
|
||||
border-bottom-right-radius: var(--rounded-box, 1rem);
|
||||
border-bottom-left-radius: var(--rounded-box, 1rem);
|
||||
margin: 0;
|
||||
min-height: 6rem;
|
||||
}
|
||||
.prose .component-preview pre[class*="language-"] .token.comment {
|
||||
color: hsl(var(--nc) / 0.4);
|
||||
color: var(--fallback-nc, oklch(var(--nc) / 0.4));
|
||||
}
|
||||
.prose .component-preview .preview {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
hsl(var(--b1)),
|
||||
hsl(var(--b1)) 13px,
|
||||
hsl(var(--b2)) 13px,
|
||||
hsl(var(--b2)) 14px
|
||||
var(--fallback-b1, oklch(var(--b1))),
|
||||
var(--fallback-b1, oklch(var(--b1))) 13px,
|
||||
var(--fallback-b2, oklch(var(--b2))) 13px,
|
||||
var(--fallback-b2, oklch(var(--b2))) 14px
|
||||
);
|
||||
/* background-size: 40px 40px;
|
||||
background-image: linear-gradient(to right, hsl(var(--bc) / 0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, hsl(var(--bc) / 0.04) 1px, transparent 1px); */
|
||||
background-image: linear-gradient(to right, oklch(var(--bc) / 0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, oklch(var(--bc) / 0.04) 1px, transparent 1px); */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,28 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import { pages } from "@src/lib/data.js"
|
||||
import { currentLang, defaultLang, t } from "$lib/i18n"
|
||||
|
||||
import { currentLang, defaultLang, t } from "@src/lib/i18n"
|
||||
export let pages = []
|
||||
|
||||
let arrayOfPagesInOrder = []
|
||||
pages.map((items) => {
|
||||
items.items.forEach((item) => {
|
||||
arrayOfPagesInOrder.push(item)
|
||||
function extractPages(obj) {
|
||||
const items = []
|
||||
function recursiveExtract(obj) {
|
||||
if (obj.href) {
|
||||
items.push(obj)
|
||||
}
|
||||
if (obj.items) {
|
||||
obj.items.forEach((item) => {
|
||||
recursiveExtract(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
obj.forEach((item) => {
|
||||
recursiveExtract(item)
|
||||
})
|
||||
})
|
||||
return items
|
||||
}
|
||||
let arrayOfPagesInOrder = extractPages(pages)
|
||||
|
||||
$: currentPageIndex = arrayOfPagesInOrder.findIndex((item) => item.href == $page.url.pathname)
|
||||
</script>
|
||||
|
||||
|
|
@ -22,7 +35,7 @@
|
|||
{#if currentPageIndex > 0 && arrayOfPagesInOrder[currentPageIndex - 1]}
|
||||
<a
|
||||
href={arrayOfPagesInOrder[currentPageIndex - 1].href}
|
||||
class="btn btn-sm md:btn-md gap-2 normal-case lg:gap-3">
|
||||
class="btn btn-sm md:btn-md gap-2 lg:gap-3">
|
||||
<svg
|
||||
class="h-6 w-6 fill-current md:h-8 md:w-8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -44,7 +57,7 @@
|
|||
{#if currentPageIndex < arrayOfPagesInOrder.length - 1 && arrayOfPagesInOrder[currentPageIndex + 1]}
|
||||
<a
|
||||
href={arrayOfPagesInOrder[currentPageIndex + 1].href}
|
||||
class="btn btn-neutral btn-sm md:btn-md gap-2 normal-case lg:gap-3">
|
||||
class="btn btn-neutral btn-sm md:btn-md gap-2 lg:gap-3">
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="text-neutral-content/50 hidden text-xs font-normal md:block">
|
||||
{$t("Next")}
|
||||
|
|
@ -180,6 +193,17 @@
|
|||
</div>
|
||||
{#if $currentLang != defaultLang}
|
||||
<div class="flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="inline-block h-4 w-4 fill-current">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-11-4.69v.447a3.5 3.5 0 001.025 2.475L8.293 10 8 10.293a1 1 0 000 1.414l1.06 1.06a1.5 1.5 0 01.44 1.061v.363a1 1 0 00.553.894l.276.139a1 1 0 001.342-.448l1.454-2.908a1.5 1.5 0 00-.281-1.731l-.772-.772a1 1 0 00-1.023-.242l-.384.128a.5.5 0 01-.606-.25l-.296-.592a.481.481 0 01.646-.646l.262.131a1 1 0 00.447.106h.188a1 1 0 00.949-1.316l-.068-.204a.5.5 0 01.149-.538l1.44-1.234A6.492 6.492 0 0116.5 10z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<script>
|
||||
import Sponsors from "@components/Sponsors.svelte"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import Sponsors from "$components/Sponsors.svelte"
|
||||
import { t } from "$lib/i18n"
|
||||
|
||||
const newtabicon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="inline-block w-4 fill-current opacity-0 group-hover:opacity-50"><path fill-rule="evenodd" d="M19,14 L19,19 C19,20.1045695 18.1045695,21 17,21 L5,21 C3.8954305,21 3,20.1045695 3,19 L3,7 C3,5.8954305 3.8954305,5 5,5 L10,5 L10,7 L5,7 L5,19 L17,19 L17,14 L19,14 Z M18.9971001,6.41421356 L11.7042068,13.7071068 L10.2899933,12.2928932 L17.5828865,5 L12.9971001,5 L12.9971001,3 L20.9971001,3 L20.9971001,11 L18.9971001,11 L18.9971001,6.41421356 Z" /></svg>`
|
||||
</script>
|
||||
|
||||
<div class="h-20" />
|
||||
|
||||
<div>
|
||||
<div class="bg-base-100 text-base-content">
|
||||
<footer class="footer mx-auto max-w-6xl px-4 py-20">
|
||||
|
|
@ -36,6 +38,9 @@
|
|||
<a href="/docs/changelog" class="link link-hover">
|
||||
{$t("changelog")}
|
||||
</a>
|
||||
<a href="/docs/roadmap" class="link link-hover">
|
||||
{$t("Roadmap")}
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener, noreferrer"
|
||||
|
|
@ -62,6 +67,7 @@
|
|||
<a href="/docs/colors/" class="link link-hover">{$t("color-system")}</a>
|
||||
<a href="/docs/config/" class="link link-hover">{$t("config")}</a>
|
||||
<a href="/blog/" class="link link-hover">{$t("Blog")}</a>
|
||||
<a href="/store/" class="link link-hover">{$t("Store")}</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="footer-title">{$t("available-on")}</span>
|
||||
|
|
@ -175,7 +181,7 @@
|
|||
rel="noopener, noreferrer"
|
||||
target="_blank"
|
||||
class="inline-flex items-center justify-center hover:opacity-90">
|
||||
<div class="avatar mr-3">
|
||||
<div class="avatar me-3">
|
||||
<div class="mask mask-squircle bg-neutral h-14 w-14 p-px">
|
||||
<img
|
||||
loading="lazy"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
const tabs = [
|
||||
{
|
||||
name: "Tailwind Plugin",
|
||||
|
|
@ -26,21 +26,19 @@
|
|||
</script>
|
||||
|
||||
<div class="not-prose mb-10 overflow-x-auto">
|
||||
<div class="tabs flex-nowrap whitespace-nowrap">
|
||||
<nav class="tabs tabs-lifted xl:tabs-lg">
|
||||
{#each tabs as { name, href }}
|
||||
<a
|
||||
{href}
|
||||
class={`tab tab-lifted xl:tab-lg ${$page.url.pathname == href ? "tab-active" : ""}`}>
|
||||
<a {href} class={`tab ${$page.url.pathname == href ? "tab-active" : ""}`}>
|
||||
{@html $t(name)}
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
<!-- <a target="_blank" rel="noopener, noreferrer" href="https://github.com/saadeghi/daisyui/tree/master/examples" class="tab tab-lifted xl:tab-lg">
|
||||
<!-- <a target="_blank" rel="noopener, noreferrer" href="https://github.com/saadeghi/daisyui/tree/master/examples" class="tab">
|
||||
<span class="link link-hover flex items-center text-sm">
|
||||
More examples on github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" class="ml-2 fill-current"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V12H19V19Z" /></svg>
|
||||
</span>
|
||||
</a> -->
|
||||
<span class="tab tab-lifted xl:tab-lg flex-grow cursor-default" />
|
||||
</div>
|
||||
<span class="tab" />
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script>
|
||||
import { currentLang, langs, setLang } from "@src/lib/i18n"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { currentLang, langs, setLang } from "$lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
</script>
|
||||
|
||||
<div title="Change Language" class="dropdown dropdown-end">
|
||||
<div tabindex="0" class="btn btn-ghost normal-case">
|
||||
<div tabindex="0" class="btn btn-ghost">
|
||||
<svg
|
||||
class="h-5 w-5 fill-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
{$t("__code", {}, langItem)}
|
||||
</span>
|
||||
{/if}
|
||||
{$t("__name", {}, langItem)}
|
||||
<span class="font-[sans-serif]">{$t("__name", {}, langItem)}</span>
|
||||
{#if $t("__status", {}, langItem) !== "__status" && $t("__status", {}, langItem) !== ""}
|
||||
<span class="badge badge-sm badge-ghost">
|
||||
{$t("__status", {}, langItem)}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import { readEnv } from "$lib/util"
|
||||
import ThemeChange from "@components/ThemeChange.svelte"
|
||||
import LangChange from "@components/LangChange.svelte"
|
||||
import Search from "@components/Search.svelte"
|
||||
import LogoContextMenu from "@components/LogoContextMenu.svelte"
|
||||
import ThemeChange from "$components/ThemeChange.svelte"
|
||||
import LangChange from "$components/LangChange.svelte"
|
||||
import Search from "$components/Search.svelte"
|
||||
import LogoContextMenu from "$components/LogoContextMenu.svelte"
|
||||
|
||||
let contextMenuEl
|
||||
|
||||
export let pages
|
||||
export let themes
|
||||
export let hideLogoOnLargeScreen = false
|
||||
export let hideSidebarButton = false
|
||||
export let hideSidebarButtonOnLargeScreen = false
|
||||
export let showComponentsBtn = false
|
||||
export let showBlogBtn = false
|
||||
export let showSearch = false
|
||||
export let showVersion = false
|
||||
export let showLanguage = false
|
||||
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
|
||||
let version = readEnv("VITE_DAISYUI_VERSION", "latest")
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<div
|
||||
class={`
|
||||
bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-all duration-100 [transform:translate3d(0,0,0)]
|
||||
bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)]
|
||||
${switchNavbarStyle ? "shadow-sm" : ""}
|
||||
`}>
|
||||
<nav class="navbar w-full">
|
||||
|
|
@ -45,9 +45,7 @@
|
|||
for="drawer"
|
||||
class={`btn btn-square btn-ghost drawer-button ${
|
||||
hideSidebarButtonOnLargeScreen ? "lg:hidden" : ""
|
||||
}
|
||||
${hideSidebarButton ? "hidden" : ""}
|
||||
}`}>
|
||||
} ${hideSidebarButton ? "hidden" : ""}`}>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
|
|
@ -83,7 +81,7 @@
|
|||
<circle cx="207.5" cy="135" r="56" fill="#FF9903" />
|
||||
</svg>
|
||||
|
||||
<div class="font-title inline-flex text-lg md:text-2xl">
|
||||
<div class="font-title inline-flex text-lg rtl:flex-row-reverse md:text-2xl">
|
||||
<span class="lowercase">daisy</span>
|
||||
<span class="uppercase text-[#1AD1A5]">UI</span>
|
||||
</div>
|
||||
|
|
@ -118,7 +116,7 @@
|
|||
|
||||
{#if showSearch}
|
||||
<div class="hidden w-full max-w-sm lg:flex">
|
||||
<Search {removeScrollPaddingFromNavbar} {addScrollPaddingToNavbar} />
|
||||
<Search {pages} {removeScrollPaddingFromNavbar} {addScrollPaddingToNavbar} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -128,7 +126,7 @@
|
|||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/components/"
|
||||
class="btn btn-ghost drawer-button font-normal normal-case">
|
||||
class="btn btn-ghost drawer-button font-normal">
|
||||
<!-- <svg
|
||||
width="20"
|
||||
height="20"
|
||||
|
|
@ -142,43 +140,10 @@
|
|||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{#if showBlogBtn}
|
||||
<div class={`hidden flex-none items-center lg:block`}>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/blog/"
|
||||
class="btn btn-ghost drawer-button font-normal normal-case">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
<ThemeChange />
|
||||
<ThemeChange {themes} />
|
||||
{#if showLanguage}
|
||||
<LangChange />
|
||||
{/if}
|
||||
|
||||
<span
|
||||
class="tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)] max-lg:hidden"
|
||||
data-tip="GitHub">
|
||||
<div class="flex-none items-center">
|
||||
<a
|
||||
aria-label="Github"
|
||||
target="_blank"
|
||||
href="https://github.com/saadeghi/daisyui"
|
||||
rel="noopener, noreferrer"
|
||||
class="btn btn-ghost drawer-button btn-square normal-case">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
class="inline-block h-5 w-5 fill-current md:h-6 md:w-6">
|
||||
<path
|
||||
d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}, 500)
|
||||
</script>
|
||||
|
||||
<div class="tooltip tooltip-right font-normal" data-tip="Add custom prefix">
|
||||
<div class="tooltip tooltip-right rtl:tooltip-left font-normal" data-tip="Add custom prefix">
|
||||
<input
|
||||
class="input input-bordered input-xs w-min max-w-[3.8rem]"
|
||||
type="text"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<script>
|
||||
import { siteData } from "@src/lib/data.js"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
|
||||
import { readEnv } from "$lib/util"
|
||||
|
||||
let siteData = {
|
||||
title: "Tailwind CSS Components",
|
||||
desc: "Free Tailwind Components",
|
||||
card: "/images/default.jpg",
|
||||
}
|
||||
export let formatTitle = true
|
||||
export let title = ""
|
||||
export let desc = siteData.desc
|
||||
|
|
|
|||
|
|
@ -4,18 +4,31 @@
|
|||
import { goto } from "$app/navigation"
|
||||
import Typeahead from "svelte-typeahead"
|
||||
|
||||
import { pages } from "$lib/data.js"
|
||||
import { getOS } from "$lib/util"
|
||||
import { t } from "$lib/i18n"
|
||||
|
||||
export let pages = []
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let searchIndex = []
|
||||
pages.forEach((group) => {
|
||||
group.items.forEach((item) => {
|
||||
searchIndex.push(item)
|
||||
function extractPages(obj) {
|
||||
const items = []
|
||||
function recursiveExtract(obj) {
|
||||
if (obj.href) {
|
||||
items.push(obj)
|
||||
}
|
||||
if (obj.items) {
|
||||
obj.items.forEach((item) => {
|
||||
recursiveExtract(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
obj.forEach((item) => {
|
||||
recursiveExtract(item)
|
||||
})
|
||||
})
|
||||
return items
|
||||
}
|
||||
let searchIndex = extractPages(pages)
|
||||
|
||||
let os
|
||||
onMount(() => {
|
||||
|
|
@ -36,8 +49,8 @@
|
|||
dispatch("search", detail)
|
||||
}
|
||||
|
||||
export let addScrollPaddingToNavbar
|
||||
export let removeScrollPaddingFromNavbar
|
||||
export let addScrollPaddingToNavbar = undefined
|
||||
export let removeScrollPaddingFromNavbar = undefined
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeydown} />
|
||||
|
|
@ -45,7 +58,7 @@
|
|||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label class={`searchbox relative mx-3 w-full`} bind:this={seachboxEl}>
|
||||
<svg
|
||||
class={`pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-60 ${
|
||||
class={`pointer-events-none absolute z-10 my-3.5 ms-4 stroke-current opacity-60 ${
|
||||
$page.url.pathname == "/" ? "text-current" : "text-base-content"
|
||||
}`}
|
||||
width="16"
|
||||
|
|
@ -64,7 +77,7 @@
|
|||
limit={8}
|
||||
label="Search"
|
||||
data={searchIndex}
|
||||
extract={(item) => item.tags}
|
||||
extract={(item) => (item.tags ? item.tags : item.name)}
|
||||
inputAfterSelect="clear"
|
||||
on:select={onSelect}
|
||||
on:focus={removeScrollPaddingFromNavbar}
|
||||
|
|
@ -75,7 +88,7 @@
|
|||
</div>
|
||||
</Typeahead>
|
||||
<div
|
||||
class={`pointer-events-none absolute right-10 top-2.5 gap-1 opacity-50 ${
|
||||
class={`pointer-events-none absolute end-10 top-2.5 gap-1 opacity-50 rtl:flex-row-reverse ${
|
||||
$page.url.pathname == "/" ? "hidden" : "hidden lg:flex"
|
||||
}`}>
|
||||
{#if ["macos"].includes(os)}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import { pages } from "@src/lib/data.js"
|
||||
import { readEnv } from "$lib/util"
|
||||
// import { useBreakpoints } from "$lib/breakpoints"
|
||||
import Search from "@components/Search.svelte"
|
||||
|
||||
import LogoContextMenu from "@components/LogoContextMenu.svelte"
|
||||
import Search from "$components/Search.svelte"
|
||||
import LogoContextMenu from "$components/LogoContextMenu.svelte"
|
||||
import SidebarMenuItem from "$components/SidebarMenuItem.svelte"
|
||||
let contextMenuEl
|
||||
|
||||
export let closeDrawer
|
||||
|
|
@ -13,14 +12,15 @@
|
|||
|
||||
let version = readEnv("VITE_DAISYUI_VERSION", "latest")
|
||||
|
||||
export let pages
|
||||
export let drawerSidebarScrollY
|
||||
$: switchNavbarStyle = drawerSidebarScrollY > 40 ? true : false
|
||||
|
||||
// const breakpoints = useBreakpoints()
|
||||
// const showSearch = breakpoints.smaller("lg")
|
||||
|
||||
import { t } from "@src/lib/i18n"
|
||||
$: innerWidth = 0
|
||||
import { t } from "$lib/i18n"
|
||||
$: innerWidth = undefined
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<LogoContextMenu bind:this={contextMenuEl} />
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" class="link link-hover font-mono text-xs">
|
||||
{version}
|
||||
<span class="opacity-60">{version}</span>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
|
|
@ -73,67 +73,25 @@
|
|||
switchNavbarStyle ? "shadow-sm" : ""
|
||||
}`}>
|
||||
<div class="flex w-full">
|
||||
<Search on:search={closeDrawer} on:focus={openDrawer} />
|
||||
<Search {pages} on:search={closeDrawer} on:focus={openDrawer} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ul class="menu bg-base-200 menu-horizontal w-full justify-between px-4 py-2 lg:hidden">
|
||||
<li>
|
||||
<a href="/components/">{$t("components-btn")}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">{$t("Blog")}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://github.com/saadeghi/daisyui" rel="noopener, noreferrer">
|
||||
{$t("GitHub")}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="h-4" />
|
||||
|
||||
{#each pages as { name, icon, items }}
|
||||
<ul class="menu menu-sm lg:menu-md px-4 py-0">
|
||||
{#if name && name != "excluded"}
|
||||
<li />
|
||||
<li class="menu-title flex flex-row gap-4">
|
||||
{#if icon}
|
||||
<span class="text-base-content">{@html icon}</span>
|
||||
{/if}
|
||||
<span>{$t(name)}</span>
|
||||
</li>
|
||||
{/if}
|
||||
{#if name != "excluded"}
|
||||
{#each items as { name, href, icon, badge, hidden, highlightAnotherItem, deprecated }}
|
||||
{#if !hidden}
|
||||
<li>
|
||||
<a
|
||||
{href}
|
||||
data-sveltekit-preload-data="hover"
|
||||
on:click={closeDrawer}
|
||||
id={$page.url.pathname.startsWith(href + "/") ? "active-menu" : ""}
|
||||
class={`${$page.url.pathname == href ? "active" : ""} ${
|
||||
$page.url.pathname == highlightAnotherItem + "/" ? "active" : ""
|
||||
} ${$page.url.pathname.startsWith(href + "/") ? "active" : ""}`}>
|
||||
{#if icon}
|
||||
<span>
|
||||
{@html icon}
|
||||
</span>
|
||||
{/if}
|
||||
<span class={deprecated ? "line-through" : undefined}>
|
||||
{@html $t(name)}
|
||||
</span>
|
||||
{#if badge}
|
||||
<span class="badge badge-sm font-mono lowercase">
|
||||
{$t(badge)}
|
||||
</span>
|
||||
{/if}
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
{/each}
|
||||
<ul class="menu px-4 py-0">
|
||||
{#each pages as { name, href, icon, badge, highlightAnotherItem, deprecated, items, collapsible, target }}
|
||||
<SidebarMenuItem
|
||||
{closeDrawer}
|
||||
{name}
|
||||
{href}
|
||||
{icon}
|
||||
{badge}
|
||||
{highlightAnotherItem}
|
||||
{deprecated}
|
||||
{items}
|
||||
{collapsible}
|
||||
{target} />
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
<script>
|
||||
import { browser } from "$app/environment"
|
||||
|
||||
import { page } from "$app/stores"
|
||||
import { t } from "$lib/i18n"
|
||||
import SidebarMenuItem from "$components/SidebarMenuItem.svelte"
|
||||
export let closeDrawer
|
||||
export let name = null,
|
||||
href = null,
|
||||
icon = null,
|
||||
badge = null,
|
||||
highlightAnotherItem = null,
|
||||
deprecated = null,
|
||||
items = null,
|
||||
collapsible = null,
|
||||
target = null
|
||||
|
||||
const sanitize = (name) => {
|
||||
return name.toLowerCase().replace(/\W/g, "-")
|
||||
}
|
||||
$: getDisclosureState = (name, items) => {
|
||||
// open the disclosure if the user has opened it before
|
||||
if (browser && localStorage.getItem(`disclosure-${sanitize(name)}`) === "open") {
|
||||
return "open"
|
||||
}
|
||||
// open the disclosure if the current page is a child of the disclosure
|
||||
if (
|
||||
items.some((item) => item.href === $page.url.pathname) ||
|
||||
items.some((item) => item.items?.some((subitem) => subitem.href === $page.url.pathname))
|
||||
) {
|
||||
return "open"
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
const saveDisclosureState = (id, value) => {
|
||||
if (browser) {
|
||||
localStorage.setItem(id, value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if name}
|
||||
<li>
|
||||
{#if items}
|
||||
{#if collapsible}
|
||||
<details
|
||||
id={`disclosure-${sanitize(name)}`}
|
||||
open={getDisclosureState(name, items)}
|
||||
on:toggle={(el) => saveDisclosureState(el.target.id, el.target.open ? "open" : "close")}>
|
||||
<summary class="group">
|
||||
{#if icon}
|
||||
<span>{@html icon}</span>
|
||||
{/if}
|
||||
{$t(name)}
|
||||
</summary>
|
||||
<ul>
|
||||
{#each items as { name, href, icon, badge, highlightAnotherItem, deprecated, items }}
|
||||
<SidebarMenuItem
|
||||
{closeDrawer}
|
||||
{name}
|
||||
{href}
|
||||
{icon}
|
||||
{badge}
|
||||
{highlightAnotherItem}
|
||||
{deprecated}
|
||||
{items} />
|
||||
{/each}
|
||||
</ul>
|
||||
</details>
|
||||
{:else}
|
||||
{#if !href}
|
||||
<h2 class="menu-title flex items-center gap-4 px-1.5">
|
||||
{#if icon}
|
||||
<span class="text-base-content">{@html icon}</span>
|
||||
{/if}
|
||||
{$t(name)}
|
||||
</h2>
|
||||
{/if}
|
||||
{#if items}
|
||||
<ul>
|
||||
{#each items as { name, href, icon, badge, highlightAnotherItem, deprecated, items }}
|
||||
<SidebarMenuItem
|
||||
{closeDrawer}
|
||||
{name}
|
||||
{href}
|
||||
{icon}
|
||||
{badge}
|
||||
{highlightAnotherItem}
|
||||
{deprecated}
|
||||
{items} />
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !items && href}
|
||||
<a
|
||||
{href}
|
||||
target={target === "blank" ? "_blank" : undefined}
|
||||
rel={target === "blank" ? "noopener noreferrer" : undefined}
|
||||
data-sveltekit-preload-data="hover"
|
||||
on:click={closeDrawer}
|
||||
class={`group ${$page.url.pathname == href ? "active" : ""} ${
|
||||
$page.url.pathname == highlightAnotherItem + "/" ? "active" : ""
|
||||
} ${$page.url.pathname.startsWith(href + "/") ? "active" : ""}`}>
|
||||
{#if icon}
|
||||
<span>
|
||||
{@html icon}
|
||||
</span>
|
||||
{/if}
|
||||
<span class={deprecated ? "line-through" : undefined}>
|
||||
{@html $t(name)}
|
||||
</span>
|
||||
{#if badge}
|
||||
<span class="badge badge-sm font-mono lowercase">
|
||||
{$t(badge)}
|
||||
</span>
|
||||
{/if}
|
||||
{#if target === "blank"}
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
class="opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19 11H37V29"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel" />
|
||||
<path
|
||||
d="M11.5439 36.4559L36.9997 11"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel" />
|
||||
</svg>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
{:else if !items}
|
||||
<li />
|
||||
{/if}
|
||||
|
|
@ -1,19 +1,20 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { themes } from "@src/lib/data.js"
|
||||
|
||||
import { themeChange } from "theme-change"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
onMount(() => {
|
||||
themeChange(false)
|
||||
})
|
||||
export let themes
|
||||
export let dropdownClasses = ""
|
||||
export let btnClasses = "btn-ghost"
|
||||
export let contentClasses = "mt-16"
|
||||
</script>
|
||||
|
||||
<div title="Change Theme" class={`dropdown dropdown-end ${dropdownClasses}`}>
|
||||
<div tabindex="0" class={`btn normal-case ${btnClasses}`}>
|
||||
<div
|
||||
title="Change Theme"
|
||||
class={`dropdown dropdown-end hidden [@supports(color:oklch(0_0_0))]:block ${dropdownClasses}`}>
|
||||
<div tabindex="0" class={`btn ${btnClasses}`}>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { themes } from "@src/lib/data.js"
|
||||
import { themeChange } from "theme-change"
|
||||
export let themes
|
||||
onMount(() => {
|
||||
themeChange(false)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
export let text
|
||||
export let variables = {}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
export let animateValue
|
||||
export let section
|
||||
export let index
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { t } from "@src/lib/i18n"
|
||||
import { t } from "$lib/i18n"
|
||||
</script>
|
||||
|
||||
<div class="hero bg-base-100 text-base-content mx-auto min-h-screen max-w-md md:max-w-full">
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
{$t("install-title")}
|
||||
</h2>
|
||||
<!-- <p class="mx-auto mt-5 w-full max-w-lg">{@html $t("install-desc")}</p> -->
|
||||
<p class="mx-auto mt-5 w-full max-w-lg text-left">1. {$t("install-step-1")}:</p>
|
||||
<p class="mx-auto mt-5 w-full max-w-lg text-start">1. {$t("install-step-1")}:</p>
|
||||
<div class="mx-auto my-2 w-full max-w-md">
|
||||
<div class="mockup-code mx-auto w-full max-w-xs text-left shadow-lg sm:max-w-none">
|
||||
<pre data-prefix="$"><code>npm i -D daisyui@latest</code></pre>
|
||||
</div>
|
||||
<p class="mx-auto mt-5 w-full max-w-lg text-left">2. {$t("install-step-2")}:</p>
|
||||
<p class="mx-auto mt-5 w-full max-w-lg text-start">2. {$t("install-step-2")}:</p>
|
||||
<div class="my-2 w-full max-w-4xl">
|
||||
<div
|
||||
class="mockup-code mx-auto w-full max-w-xs text-left text-sm shadow-lg sm:max-w-none">
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
#carbonads {
|
||||
display: flex;
|
||||
max-width: 350px;
|
||||
color: hsl(var(--bc));
|
||||
background-color: hsl(var(--b2));
|
||||
color: var(--fallback-bc, oklch(var(--bc)));
|
||||
background-color: var(--fallback-b2, oklch(var(--b2)));
|
||||
z-index: 100;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
#carbonads .carbon-poweredby {
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
background: hsl(var(--b3));
|
||||
background: var(--fallback-b3, oklch(var(--b3)));
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
color: inherit;
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--rounded-btn);
|
||||
padding-left: 2.5em;
|
||||
padding-inline-start: 2.5em;
|
||||
}
|
||||
[data-svelte-search][data-svelte-search] input::placeholder {
|
||||
color: inherit;
|
||||
|
|
@ -104,15 +104,15 @@
|
|||
[data-svelte-search][data-svelte-search] input:focus {
|
||||
outline: none;
|
||||
outline-offset: 0;
|
||||
border: 2px solid hsl(var(--bc) / 0.2);
|
||||
background-color: hsl(var(--b1));
|
||||
color: hsl(var(--bc));
|
||||
border: 2px solid var(--fallback-bc, oklch(var(--bc) / 0.2));
|
||||
background-color: var(--fallback-b1, oklch(var(--b1)));
|
||||
color: var(--fallback-bc, oklch(var(--bc)));
|
||||
}
|
||||
[data-svelte-typeahead][data-svelte-typeahead].dropdown[aria-expanded="true"]
|
||||
.svelte-typeahead-list {
|
||||
transform: translateY(0.5em);
|
||||
background: hsl(var(--b1) / 0.99);
|
||||
border: 0 solid hsl(var(--bc) / 0.2);
|
||||
background: var(--fallback-b1, oklch(var(--b1) / 0.99));
|
||||
border: 0 solid var(--fallback-bc, oklch(var(--bc) / 0.2));
|
||||
border-radius: var(--rounded-box);
|
||||
overflow: hidden;
|
||||
padding: 0.5rem;
|
||||
|
|
@ -124,16 +124,16 @@
|
|||
}
|
||||
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected,
|
||||
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected:hover {
|
||||
background: hsl(var(--n));
|
||||
color: hsl(var(--nc));
|
||||
background: var(--fallback-n, oklch(var(--n)));
|
||||
color: var(--fallback-nc, oklch(var(--nc)));
|
||||
}
|
||||
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li {
|
||||
color: hsl(var(--bc));
|
||||
color: var(--fallback-bc, oklch(var(--bc)));
|
||||
border-radius: var(--rounded-btn);
|
||||
}
|
||||
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:hover {
|
||||
background: hsl(var(--b2));
|
||||
color: hsl(var(--bc));
|
||||
background: var(--fallback-b2, oklch(var(--b2)));
|
||||
color: var(--fallback-bc, oklch(var(--bc)));
|
||||
}
|
||||
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:not(:last-of-type) {
|
||||
border-bottom: none;
|
||||
|
|
@ -145,14 +145,16 @@
|
|||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: unset;
|
||||
direction: ltr;
|
||||
}
|
||||
.prose pre[class*="language-"] {
|
||||
max-width: clamp(20rem, calc(100vw - 4rem), 80ch);
|
||||
background-color: hsl(var(--n));
|
||||
color: hsl(var(--nc));
|
||||
background-color: var(--fallback-n, oklch(var(--n)));
|
||||
color: var(--fallback-nc, oklch(var(--nc)));
|
||||
border-radius: var(--rounded-box);
|
||||
::selection {
|
||||
background-color: hsl(var(--nc));
|
||||
color: hsl(var(--n));
|
||||
background-color: var(--fallback-nc, oklch(var(--nc)));
|
||||
color: var(--fallback-n, oklch(var(--n)));
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
|
|
|||
|
|
@ -1,556 +0,0 @@
|
|||
export let siteStats = {
|
||||
components: "53",
|
||||
themes: "29",
|
||||
githubStars: "+25,000",
|
||||
npmInstalls: "+8,000,000",
|
||||
}
|
||||
|
||||
export let siteData = {
|
||||
title: "Tailwind CSS Components",
|
||||
desc: "Free Tailwind Components",
|
||||
card: "/images/default.jpg",
|
||||
}
|
||||
|
||||
export let pagesThatDontNeedSidebar = ["/"]
|
||||
|
||||
export let themes = [
|
||||
"light",
|
||||
"dark",
|
||||
"cupcake",
|
||||
"bumblebee",
|
||||
"emerald",
|
||||
"corporate",
|
||||
"synthwave",
|
||||
"retro",
|
||||
"cyberpunk",
|
||||
"valentine",
|
||||
"halloween",
|
||||
"garden",
|
||||
"forest",
|
||||
"aqua",
|
||||
"lofi",
|
||||
"pastel",
|
||||
"fantasy",
|
||||
"wireframe",
|
||||
"black",
|
||||
"luxury",
|
||||
"dracula",
|
||||
"cmyk",
|
||||
"autumn",
|
||||
"business",
|
||||
"acid",
|
||||
"lemonade",
|
||||
"night",
|
||||
"coffee",
|
||||
"winter",
|
||||
]
|
||||
|
||||
export let exampleRepos = [
|
||||
{
|
||||
name: "Next.js",
|
||||
href: "https://stackblitz.com/edit/daisyui-nextjs/",
|
||||
logos: ["/logos/nextjs.svg"],
|
||||
},
|
||||
{
|
||||
name: "SvelteKit",
|
||||
href: "https://stackblitz.com/edit/daisyui-sveltekit/",
|
||||
logos: ["/logos/svelte.svg"],
|
||||
},
|
||||
{
|
||||
name: "Nuxt 3",
|
||||
href: "https://stackblitz.com/edit/daisyui-nuxt3/",
|
||||
logos: ["/logos/nuxtjs.svg"],
|
||||
},
|
||||
{
|
||||
name: "Astro",
|
||||
href: "https://stackblitz.com/edit/daisyui-astro/",
|
||||
logos: ["/logos/astro.svg"],
|
||||
},
|
||||
{
|
||||
name: "Vue.js 3",
|
||||
href: "https://stackblitz.com/edit/daisyui-vue-vite/",
|
||||
logos: ["/logos/vue.svg"],
|
||||
},
|
||||
{
|
||||
name: "Solid.js",
|
||||
href: "https://stackblitz.com/edit/daisyui-solidjs/",
|
||||
logos: ["/logos/solidjs.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Vite",
|
||||
href: "https://stackblitz.com/edit/daisyui-vite/",
|
||||
logos: ["/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "React (Vite)",
|
||||
href: "https://stackblitz.com/edit/daisyui-react-vite/",
|
||||
logos: ["/logos/react.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Svelte (Vite)",
|
||||
href: "https://stackblitz.com/edit/daisyui-svelte-vite/",
|
||||
logos: ["/logos/svelte.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Remix",
|
||||
href: "https://stackblitz.com/edit/daisyui-remix/",
|
||||
logos: ["/logos/remix.svg"],
|
||||
},
|
||||
{
|
||||
name: "Refine",
|
||||
href: "https://stackblitz.com/edit/daisyui-refine/",
|
||||
logos: ["/logos/refine.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "PostCSS",
|
||||
href: "https://stackblitz.com/edit/daisyui-postcss/",
|
||||
logos: ["/logos/postcss.svg"],
|
||||
},
|
||||
{
|
||||
name: "React (Webpack)",
|
||||
href: "https://stackblitz.com/edit/daisyui-react-webpack/",
|
||||
logos: ["/logos/react.svg", "/logos/webpack.svg"],
|
||||
},
|
||||
{
|
||||
name: "Qwik",
|
||||
href: "https://stackblitz.com/edit/daisyui-qwik/",
|
||||
logos: ["/logos/qwik.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Preact",
|
||||
href: "https://stackblitz.com/edit/daisyui-preact-vite/",
|
||||
logos: ["/logos/preact.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Lit",
|
||||
href: "https://stackblitz.com/edit/daisyui-lit-vite/",
|
||||
logos: ["/logos/lit.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Angular",
|
||||
href: "https://stackblitz.com/edit/daisyui-angular/",
|
||||
logos: ["/logos/angular.svg"],
|
||||
},
|
||||
{
|
||||
name: "11ty",
|
||||
href: "https://stackblitz.com/edit/daisyui-11ty/",
|
||||
logos: ["/logos/11ty.svg"],
|
||||
},
|
||||
{
|
||||
name: "Snowpack",
|
||||
href: "https://stackblitz.com/edit/daisyui-snowpack/",
|
||||
logos: ["/logos/snowpack.svg"],
|
||||
},
|
||||
{
|
||||
name: "React (CRA)",
|
||||
href: "https://stackblitz.com/edit/daisyui-react-cra/",
|
||||
logos: ["/logos/react.svg", "/logos/cra.svg"],
|
||||
},
|
||||
{
|
||||
name: "Elm",
|
||||
href: "https://stackblitz.com/edit/elm-daisyui/",
|
||||
logos: ["/logos/elm.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "CDN (Tailwind)",
|
||||
href: "https://stackblitz.com/edit/daisyui-cdn/",
|
||||
logos: ["/logos/jsdelivr.svg"],
|
||||
},
|
||||
{
|
||||
name: "CDN (BassCSS)",
|
||||
href: "https://stackblitz.com/edit/daisyui-basscss/",
|
||||
logos: ["/logos/jsdelivr.svg"],
|
||||
},
|
||||
{
|
||||
name: "CDN (Tachyons)",
|
||||
href: "https://stackblitz.com/edit/daisyui-tachyons/",
|
||||
logos: ["/logos/jsdelivr.svg"],
|
||||
},
|
||||
{
|
||||
name: "WordPress (Gust)",
|
||||
href: "https://wordpress.org/plugins/gust-daisy-ui",
|
||||
logos: ["/logos/wordpress.svg", "/logos/gust.svg"],
|
||||
},
|
||||
]
|
||||
|
||||
export let pages = [
|
||||
{
|
||||
items: [
|
||||
{
|
||||
name: "Install",
|
||||
tags: "how setup install npm",
|
||||
href: "/docs/install/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20" /></svg>',
|
||||
|
||||
highlightAnotherItem: "/docs/cdn",
|
||||
},
|
||||
{
|
||||
name: "CDN",
|
||||
tags: "how cdn",
|
||||
href: "/docs/cdn/",
|
||||
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
name: "Use",
|
||||
tags: "how use",
|
||||
href: "/docs/use/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
|
||||
},
|
||||
{
|
||||
name: "Customize components",
|
||||
tags: "customize components",
|
||||
href: "/docs/customize/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>',
|
||||
},
|
||||
{
|
||||
name: "Config",
|
||||
tags: "setup config styled themes base logs utils rtl",
|
||||
href: "/docs/config/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" /></svg>',
|
||||
},
|
||||
{
|
||||
name: "Colors",
|
||||
tags: "colors 🎨",
|
||||
href: "/docs/colors/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 fill-current"><path d="M19,11.5C19,11.5 17,13.67 17,15C17,16.1 17.9,17 19,17C20.1,17 21,16.1 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z"/></svg>',
|
||||
},
|
||||
{
|
||||
name: "Themes",
|
||||
tags: "themes disable custom color generator",
|
||||
href: "/docs/themes/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>',
|
||||
},
|
||||
{
|
||||
name: "Theme Generator",
|
||||
tags: "theme generator custom color generator",
|
||||
href: "/theme-generator/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current" viewBox="0 0 512 512"><title>ionicons-v5-m</title><path d="M96,208H48a16,16,0,0,1,0-32H96a16,16,0,0,1,0,32Z"/><line x1="90.25" y1="90.25" x2="124.19" y2="124.19"/><path d="M124.19,140.19a15.91,15.91,0,0,1-11.31-4.69L78.93,101.56a16,16,0,0,1,22.63-22.63l33.94,33.95a16,16,0,0,1-11.31,27.31Z"/><path d="M192,112a16,16,0,0,1-16-16V48a16,16,0,0,1,32,0V96A16,16,0,0,1,192,112Z"/><line x1="293.89" y1="90.25" x2="259.95" y2="124.19"/><path d="M260,140.19a16,16,0,0,1-11.31-27.31l33.94-33.95a16,16,0,0,1,22.63,22.63L271.27,135.5A15.94,15.94,0,0,1,260,140.19Z"/><line x1="124.19" y1="259.95" x2="90.25" y2="293.89"/><path d="M90.25,309.89a16,16,0,0,1-11.32-27.31l33.95-33.94a16,16,0,0,1,22.62,22.63l-33.94,33.94A16,16,0,0,1,90.25,309.89Z"/><path d="M219,151.83a26,26,0,0,0-36.77,0l-30.43,30.43a26,26,0,0,0,0,36.77L208.76,276a4,4,0,0,0,5.66,0L276,214.42a4,4,0,0,0,0-5.66Z"/><path d="M472.31,405.11,304.24,237a4,4,0,0,0-5.66,0L237,298.58a4,4,0,0,0,0,5.66L405.12,472.31a26,26,0,0,0,36.76,0l30.43-30.43h0A26,26,0,0,0,472.31,405.11Z"/></svg>',
|
||||
},
|
||||
{
|
||||
name: "Layout & Typography",
|
||||
tags: "layout typography padding margin grid flex spacing font",
|
||||
href: "/docs/layout-and-typography/",
|
||||
icon: '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 fill-current"><path d="M4,2 L20,2 C21.1045695,2 22,2.8954305 22,4 L22,20 C22,21.1045695 21.1045695,22 20,22 L4,22 C2.8954305,22 2,21.1045695 2,20 L2,4 C2,2.8954305 2.8954305,2 4,2 Z M4,4 L4,20 L20,20 L20,4 L4,4 Z M14.7999209,15 L9.19992091,15 L8,18 L6,18 L11,6 L13,6 L18,18 L16,18 L14.7999209,15 Z M13.9998682,13 L11.9997364,8 L9.99986818,13 L13.9998682,13 Z"/></svg>',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Actions",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-fuchsia-600"><path fill-rule="evenodd" d="M10 1a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1zM5.05 3.05a.75.75 0 011.06 0l1.062 1.06A.75.75 0 116.11 5.173L5.05 4.11a.75.75 0 010-1.06zm9.9 0a.75.75 0 010 1.06l-1.06 1.062a.75.75 0 01-1.062-1.061l1.061-1.06a.75.75 0 011.06 0zM3 8a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5A.75.75 0 013 8zm11 0a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5A.75.75 0 0114 8zm-6.828 2.828a.75.75 0 010 1.061L6.11 12.95a.75.75 0 01-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm3.594-3.317a.75.75 0 00-1.37.364l-.492 6.861a.75.75 0 001.204.65l1.043-.799.985 3.678a.75.75 0 001.45-.388l-.978-3.646 1.292.204a.75.75 0 00.74-1.16l-3.874-5.764z" clip-rule="evenodd" /></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Button",
|
||||
tags: "button btn 🍑",
|
||||
href: "/components/button/",
|
||||
},
|
||||
{
|
||||
name: "Dropdown",
|
||||
tags: "dropdown popover menu listbox",
|
||||
href: "/components/dropdown/",
|
||||
},
|
||||
{
|
||||
name: "Modal",
|
||||
tags: "dialog modal window popup",
|
||||
href: "/components/modal/",
|
||||
},
|
||||
{
|
||||
name: "Swap",
|
||||
tags: "swap transition toggle icon",
|
||||
href: "/components/swap/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Data display",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-teal-600"><path fill-rule="evenodd" d="M3.25 3A2.25 2.25 0 001 5.25v9.5A2.25 2.25 0 003.25 17h13.5A2.25 2.25 0 0019 14.75v-9.5A2.25 2.25 0 0016.75 3H3.25zM2.5 9v5.75c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75V9h-15zM4 5.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H4zM6.25 6A.75.75 0 017 5.25h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H7a.75.75 0 01-.75-.75V6zM10 5.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H10z" clip-rule="evenodd" /></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Accordion",
|
||||
tags: "accordion disclosure collapse show hide faq",
|
||||
href: "/components/accordion/",
|
||||
},
|
||||
{
|
||||
name: "Alert",
|
||||
tags: "alert warning error message",
|
||||
href: "/components/alert/",
|
||||
},
|
||||
{
|
||||
name: "Avatar",
|
||||
tags: "avatar image profile picture",
|
||||
href: "/components/avatar/",
|
||||
},
|
||||
{
|
||||
name: "Badge",
|
||||
tags: "badge tag label",
|
||||
href: "/components/badge/",
|
||||
},
|
||||
{
|
||||
name: "Card",
|
||||
tags: "card",
|
||||
href: "/components/card/",
|
||||
},
|
||||
{
|
||||
name: "Carousel",
|
||||
tags: "carousel slider image",
|
||||
href: "/components/carousel/",
|
||||
},
|
||||
{
|
||||
name: "Chat bubble",
|
||||
tags: "chat bubble dialog message messenger",
|
||||
href: "/components/chat/",
|
||||
},
|
||||
{
|
||||
name: "Collapse",
|
||||
tags: "collapse disclosure accordion show hide",
|
||||
href: "/components/collapse/",
|
||||
},
|
||||
{
|
||||
name: "Countdown",
|
||||
tags: "countdown counter timer",
|
||||
href: "/components/countdown/",
|
||||
},
|
||||
{
|
||||
name: "Kbd",
|
||||
tags: "kbd keyboard ⌨️",
|
||||
href: "/components/kbd/",
|
||||
},
|
||||
{
|
||||
name: "Loading",
|
||||
tags: "loading loader spinner progress",
|
||||
href: "/components/loading/",
|
||||
},
|
||||
{
|
||||
name: "Progress",
|
||||
tags: "progressbar progress loading percentage",
|
||||
href: "/components/progress/",
|
||||
},
|
||||
{
|
||||
name: "Radial progress",
|
||||
tags: "progressbar progress loading percentage",
|
||||
href: "/components/radial-progress/",
|
||||
},
|
||||
{
|
||||
name: "Stat",
|
||||
tags: "stats data",
|
||||
href: "/components/stat/",
|
||||
},
|
||||
{
|
||||
name: "Table",
|
||||
tags: "table",
|
||||
href: "/components/table/",
|
||||
},
|
||||
{
|
||||
name: "Tooltip",
|
||||
tags: "tooltip",
|
||||
href: "/components/tooltip/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Data input",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-rose-600"><path d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" /><path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z" /></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Checkbox",
|
||||
tags: "checkbox ✅",
|
||||
href: "/components/checkbox/",
|
||||
},
|
||||
{
|
||||
name: "File Input",
|
||||
tags: "file upload",
|
||||
href: "/components/file-input/",
|
||||
},
|
||||
{
|
||||
name: "Radio",
|
||||
tags: "radio",
|
||||
href: "/components/radio/",
|
||||
},
|
||||
{
|
||||
name: "Range",
|
||||
tags: "range slider",
|
||||
href: "/components/range/",
|
||||
},
|
||||
{
|
||||
name: "Rating",
|
||||
tags: "star rating radio",
|
||||
href: "/components/rating/",
|
||||
},
|
||||
{
|
||||
name: "Select",
|
||||
tags: "select option menu",
|
||||
href: "/components/select/",
|
||||
},
|
||||
{
|
||||
name: "Text input",
|
||||
tags: "text input",
|
||||
href: "/components/input/",
|
||||
},
|
||||
{
|
||||
name: "Textarea",
|
||||
tags: "textarea",
|
||||
href: "/components/textarea/",
|
||||
},
|
||||
{
|
||||
name: "Toggle",
|
||||
tags: "toggle switch checkbox",
|
||||
href: "/components/toggle/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Layout",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-blue-600"><path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z" clip-rule="evenodd" /></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Artboard",
|
||||
tags: "artboard mobile",
|
||||
href: "/components/artboard/",
|
||||
},
|
||||
{
|
||||
name: "Button group",
|
||||
tags: "button group",
|
||||
href: "/components/button-group/",
|
||||
deprecated: true,
|
||||
},
|
||||
{
|
||||
name: "Divider",
|
||||
tags: "divider",
|
||||
href: "/components/divider/",
|
||||
},
|
||||
{
|
||||
name: "Drawer",
|
||||
tags: "drawer sidebar menu",
|
||||
href: "/components/drawer/",
|
||||
},
|
||||
{
|
||||
name: "Footer",
|
||||
tags: "footer 🦶",
|
||||
href: "/components/footer/",
|
||||
},
|
||||
{
|
||||
name: "Hero",
|
||||
tags: "hero title",
|
||||
href: "/components/hero/",
|
||||
},
|
||||
{
|
||||
name: "Indicator",
|
||||
tags: "indicator badge corner",
|
||||
href: "/components/indicator/",
|
||||
},
|
||||
{
|
||||
name: "Input group",
|
||||
tags: "input group label",
|
||||
href: "/components/input-group/",
|
||||
deprecated: true,
|
||||
},
|
||||
{
|
||||
name: "Join (group items)",
|
||||
tags: "join group button group input group form group",
|
||||
href: "/components/join/",
|
||||
},
|
||||
{
|
||||
name: "Mask",
|
||||
tags: "mask crop 😷",
|
||||
href: "/components/mask/",
|
||||
},
|
||||
{
|
||||
name: "Stack",
|
||||
tags: "stack",
|
||||
href: "/components/stack/",
|
||||
},
|
||||
{
|
||||
name: "Toast",
|
||||
tags: "toast notification snackbar",
|
||||
href: "/components/toast/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Navigation",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-cyan-600"><path d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z" /><path d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z" /></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Breadcrumbs",
|
||||
tags: "breadcrumbs links",
|
||||
href: "/components/breadcrumbs/",
|
||||
},
|
||||
{
|
||||
name: "Bottom navigation",
|
||||
tags: "bottom navigation app bar",
|
||||
href: "/components/bottom-navigation/",
|
||||
},
|
||||
{
|
||||
name: "Link",
|
||||
tags: "link href anchor 🔗",
|
||||
href: "/components/link/",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
tags: "menu list",
|
||||
href: "/components/menu/",
|
||||
},
|
||||
{
|
||||
name: "Navbar",
|
||||
tags: "navbar navigation menu",
|
||||
href: "/components/navbar/",
|
||||
},
|
||||
{
|
||||
name: "Pagination",
|
||||
tags: "pagination links next previous",
|
||||
href: "/components/pagination/",
|
||||
},
|
||||
{
|
||||
name: "Steps",
|
||||
tags: "steps progress",
|
||||
href: "/components/steps/",
|
||||
},
|
||||
{
|
||||
name: "Tab",
|
||||
tags: "tabs",
|
||||
href: "/components/tab/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Mockup",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-lime-600"><path d="M8 16.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z" /><path fill-rule="evenodd" d="M4 4a3 3 0 013-3h6a3 3 0 013 3v12a3 3 0 01-3 3H7a3 3 0 01-3-3V4zm4-1.5v.75c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V2.5h1A1.5 1.5 0 0114.5 4v12a1.5 1.5 0 01-1.5 1.5H7A1.5 1.5 0 015.5 16V4A1.5 1.5 0 017 2.5h1z" clip-rule="evenodd" /></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Browser",
|
||||
tags: "mockup browser",
|
||||
href: "/components/mockup-browser/",
|
||||
},
|
||||
{
|
||||
name: "Code",
|
||||
tags: "mockup code",
|
||||
href: "/components/mockup-code/",
|
||||
},
|
||||
{
|
||||
name: "Phone",
|
||||
tags: "mockup iphone 📱",
|
||||
href: "/components/mockup-phone/",
|
||||
},
|
||||
{
|
||||
name: "Window",
|
||||
tags: "mockup window 🪟",
|
||||
href: "/components/mockup-window/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "excluded",
|
||||
items: [
|
||||
{
|
||||
name: "CodePen example page",
|
||||
tags: "codepen",
|
||||
href: "/codepen/",
|
||||
},
|
||||
{
|
||||
name: "Tailwind Play example page",
|
||||
tags: "tailwind play",
|
||||
href: "/tailwindplay/",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
export const articles = [
|
||||
{
|
||||
title: "daisyUI: Tailwind CSS components for reducing markup",
|
||||
site: "Logrocket",
|
||||
link: "https://blog.logrocket.com/daisyui-tailwind-components-react-apps/",
|
||||
},
|
||||
{
|
||||
title: "Build a Personal Timeline with Hygraph and SvelteKit",
|
||||
site: "GraphCMS",
|
||||
link: "https://graphcms.com/blog/build-a-personal-timeline-with-graphcms-and-sveltekit",
|
||||
},
|
||||
{
|
||||
title: "Weekly Web Development Resources #85",
|
||||
site: "wweb.dev",
|
||||
link: "https://wweb.dev/weekly/85/",
|
||||
},
|
||||
{
|
||||
title: "DaisyUI - Tailwind components",
|
||||
site: "flaming.codes",
|
||||
link: "https://flaming.codes/posts/boostrap-tailwind-alternative-with-daisy-ui",
|
||||
},
|
||||
{
|
||||
title: "How to Setup React Typescript With Snowpack and Daisy UI",
|
||||
site: "rockyourcode",
|
||||
link: "https://www.rockyourcode.com/how-to-setup-react-typescript-with-snowpack-and-daisyui/",
|
||||
},
|
||||
{
|
||||
title: "DaisyUI : un plugin gratuit avec de nombreux composants pour Tailwind CSS",
|
||||
site: "Siecle Digital",
|
||||
link: "https://siecledigital.fr/2021/05/29/daisyui-plugin-gratuit-avec-composants-tailwind-css-a/",
|
||||
},
|
||||
{
|
||||
title: "Weekly News for Designers № 594",
|
||||
site: "speckyboy",
|
||||
link: "https://speckyboy.com/weekly-news-for-designers-594/",
|
||||
},
|
||||
{
|
||||
title: "DaisyUI — Free UI components plugin for Tailwind CSS",
|
||||
site: "dailydev",
|
||||
link: "https://app.daily.dev/posts/-4OPGw0te",
|
||||
},
|
||||
{
|
||||
title: "JSレスBootstrapなdaisyUIの秘密",
|
||||
site: "Future Tech Blog",
|
||||
link: "https://future-architect.github.io/articles/20211124a/",
|
||||
},
|
||||
{
|
||||
title: "Adding Tailwind and Daisy UI to SvelteKit",
|
||||
site: "Adding Tailwind and Daisy UI to SvelteKit",
|
||||
link: "https://dev.to/brewhousedigital/adding-tailwind-and-daisy-ui-to-sveltekit-2hk5",
|
||||
},
|
||||
{
|
||||
title: "Building React Components With DaisyUI",
|
||||
site: "Open Replay",
|
||||
link: "https://blog.openreplay.com/building-react-components-with-daisyui/",
|
||||
},
|
||||
{
|
||||
title: "How to Install DaisyUI in Tailwind CSS",
|
||||
site: "Larainfo",
|
||||
link: "https://larainfo.com/blogs/how-to-install-daisyui-in-tailwind-css",
|
||||
},
|
||||
{
|
||||
title: "DaisyUI - Make Tailwind components with ease!",
|
||||
site: "James Perkins",
|
||||
link: "https://www.jamesperkins.dev/post/daisyui-make-tailwind-components-with-ease/",
|
||||
},
|
||||
{
|
||||
title: "DaisyUI - Free Vue UI Components for Tailwind CSS",
|
||||
site: "Morioh",
|
||||
link: "https://morioh.com/a/350ca835203f/daisyui-free-vue-ui-components-for-tailwind-css",
|
||||
},
|
||||
{
|
||||
title: "Daisy UI 3.0 Released: New components, themes, improvements, and more!",
|
||||
site: "SHOWWCASE",
|
||||
link: "https://www.showwcase.com/show/35362/daisy-ui-30-released-new-components-themes-improvements-and-more",
|
||||
},
|
||||
{
|
||||
title: "How to install daisyUI in Laravel Vite",
|
||||
site: "Medium",
|
||||
link: "https://balajidharma.medium.com/how-to-install-daisyui-in-laravel-vite-29f606883ff6",
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
export const courses = [
|
||||
{
|
||||
title: "Tailwind + DaisyUI",
|
||||
site: "Fireship.io",
|
||||
link: "https://fireship.io/courses/sveltekit/setup-tailwind/",
|
||||
},
|
||||
{
|
||||
title: "Building with SvelteKit and GraphCMS - Styling with Tailwind and DaisyUI",
|
||||
site: "Netlify",
|
||||
link: "https://explorers.netlify.com/learn/building-with-sveltekit-and-graphcms/styling-with-tailwind-and-daisyui",
|
||||
},
|
||||
{
|
||||
title: "Svelte for Beginners by Mike Karan",
|
||||
site: "Udemy",
|
||||
link: "https://www.udemy.com/course/svelte-for-beginners/",
|
||||
},
|
||||
{
|
||||
title: "React Front To Back 2022 by Brad Traversy",
|
||||
site: "Udemy",
|
||||
link: "https://www.udemy.com/course/react-front-to-back-2022/",
|
||||
},
|
||||
{
|
||||
title: "Build Instagram profile page UI clone w/Next.js TailwindCSS",
|
||||
site: "Udemy",
|
||||
link: "https://www.udemy.com/course/build-instagram-profile-page-ui-clone-nextjs-tailwindcss/",
|
||||
},
|
||||
{
|
||||
title: "Instagram UI Clone Login Page w/ NextJS & TailwindCSS",
|
||||
site: "Udemy",
|
||||
link: "https://www.udemy.com/course/instagram-ui-clone-login-page-w-nextjs-tailwindcss/",
|
||||
},
|
||||
{
|
||||
title: "Build your Developer Portfolio and Blog from Scratch with Svelte and GraphCMS",
|
||||
site: "freeCodeCamp",
|
||||
link: "https://www.freecodecamp.org/news/build-your-developer-portfolio-from-scratch-with-sveltekit-and-graphcms/",
|
||||
},
|
||||
{
|
||||
title: "Building a React Admin Panel with refine and daisyUI",
|
||||
site: "Refine.dev",
|
||||
link: "https://refine.dev/blog/daisy-ui-react-admin-panel/",
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
export const exampleRepos = [
|
||||
{
|
||||
name: "Next.js",
|
||||
href: "https://stackblitz.com/edit/daisyui-nextjs/",
|
||||
logos: ["/logos/nextjs.svg"],
|
||||
},
|
||||
{
|
||||
name: "SvelteKit",
|
||||
href: "https://stackblitz.com/edit/daisyui-sveltekit/",
|
||||
logos: ["/logos/svelte.svg"],
|
||||
},
|
||||
{
|
||||
name: "Nuxt 3",
|
||||
href: "https://stackblitz.com/edit/daisyui-nuxt3/",
|
||||
logos: ["/logos/nuxtjs.svg"],
|
||||
},
|
||||
{
|
||||
name: "Astro",
|
||||
href: "https://stackblitz.com/edit/daisyui-astro/",
|
||||
logos: ["/logos/astro.svg"],
|
||||
},
|
||||
{
|
||||
name: "Vue.js 3",
|
||||
href: "https://stackblitz.com/edit/daisyui-vue-vite/",
|
||||
logos: ["/logos/vue.svg"],
|
||||
},
|
||||
{
|
||||
name: "Solid.js",
|
||||
href: "https://stackblitz.com/edit/daisyui-solidjs/",
|
||||
logos: ["/logos/solidjs.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Vite",
|
||||
href: "https://stackblitz.com/edit/daisyui-vite/",
|
||||
logos: ["/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "React (Vite)",
|
||||
href: "https://stackblitz.com/edit/daisyui-react-vite/",
|
||||
logos: ["/logos/react.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Svelte (Vite)",
|
||||
href: "https://stackblitz.com/edit/daisyui-svelte-vite/",
|
||||
logos: ["/logos/svelte.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Remix",
|
||||
href: "https://stackblitz.com/edit/daisyui-remix/",
|
||||
logos: ["/logos/remix.svg"],
|
||||
},
|
||||
{
|
||||
name: "Refine",
|
||||
href: "https://stackblitz.com/edit/daisyui-refine/",
|
||||
logos: ["/logos/refine.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "PostCSS",
|
||||
href: "https://stackblitz.com/edit/daisyui-postcss/",
|
||||
logos: ["/logos/postcss.svg"],
|
||||
},
|
||||
{
|
||||
name: "React (Webpack)",
|
||||
href: "https://stackblitz.com/edit/daisyui-react-webpack/",
|
||||
logos: ["/logos/react.svg", "/logos/webpack.svg"],
|
||||
},
|
||||
{
|
||||
name: "Qwik",
|
||||
href: "https://stackblitz.com/edit/daisyui-qwik/",
|
||||
logos: ["/logos/qwik.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Preact",
|
||||
href: "https://stackblitz.com/edit/daisyui-preact-vite/",
|
||||
logos: ["/logos/preact.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Lit",
|
||||
href: "https://stackblitz.com/edit/daisyui-lit-vite/",
|
||||
logos: ["/logos/lit.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "Angular",
|
||||
href: "https://stackblitz.com/edit/daisyui-angular/",
|
||||
logos: ["/logos/angular.svg"],
|
||||
},
|
||||
{
|
||||
name: "11ty",
|
||||
href: "https://stackblitz.com/edit/daisyui-11ty/",
|
||||
logos: ["/logos/11ty.svg"],
|
||||
},
|
||||
{
|
||||
name: "Snowpack",
|
||||
href: "https://stackblitz.com/edit/daisyui-snowpack/",
|
||||
logos: ["/logos/snowpack.svg"],
|
||||
},
|
||||
{
|
||||
name: "React (CRA)",
|
||||
href: "https://stackblitz.com/edit/daisyui-react-cra/",
|
||||
logos: ["/logos/react.svg", "/logos/cra.svg"],
|
||||
},
|
||||
{
|
||||
name: "Elm",
|
||||
href: "https://stackblitz.com/edit/elm-daisyui/",
|
||||
logos: ["/logos/elm.svg", "/logos/vite.svg"],
|
||||
},
|
||||
{
|
||||
name: "CDN (Tailwind)",
|
||||
href: "https://stackblitz.com/edit/daisyui-cdn/",
|
||||
logos: ["/logos/jsdelivr.svg"],
|
||||
},
|
||||
{
|
||||
name: "CDN (BassCSS)",
|
||||
href: "https://stackblitz.com/edit/daisyui-basscss/",
|
||||
logos: ["/logos/jsdelivr.svg"],
|
||||
},
|
||||
{
|
||||
name: "CDN (Tachyons)",
|
||||
href: "https://stackblitz.com/edit/daisyui-tachyons/",
|
||||
logos: ["/logos/jsdelivr.svg"],
|
||||
},
|
||||
{
|
||||
name: "WordPress (Gust)",
|
||||
href: "https://wordpress.org/plugins/gust-daisy-ui",
|
||||
logos: ["/logos/wordpress.svg", "/logos/gust.svg"],
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
export const pagesThatDontNeedSidebar = ["/", "/blog/", "/blog/*/", "/store/", "/resources/*/"]
|
||||
|
||||
export const pages = [
|
||||
{
|
||||
name: "Docs",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 48 48" class="text-orange-400 h-5 w-5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7H16C20.4183 7 24 10.5817 24 15V42C24 38.6863 21.3137 36 18 36H5V7Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/><path d="M43 7H32C27.5817 7 24 10.5817 24 15V42C24 38.6863 26.6863 36 30 36H43V7Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/></svg>',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
name: "Install",
|
||||
tags: "how setup install npm",
|
||||
href: "/docs/install/",
|
||||
highlightAnotherItem: "/docs/cdn",
|
||||
},
|
||||
{
|
||||
name: "Use",
|
||||
tags: "how use",
|
||||
href: "/docs/use/",
|
||||
},
|
||||
{
|
||||
name: "Customize components",
|
||||
tags: "customize components",
|
||||
href: "/docs/customize/",
|
||||
},
|
||||
{
|
||||
name: "Config",
|
||||
tags: "setup config styled themes base logs utils rtl",
|
||||
href: "/docs/config/",
|
||||
badge: "updated",
|
||||
},
|
||||
{
|
||||
name: "Colors",
|
||||
tags: "colors 🎨",
|
||||
href: "/docs/colors/",
|
||||
badge: "updated",
|
||||
},
|
||||
{
|
||||
name: "Themes",
|
||||
tags: "themes disable custom color generator",
|
||||
href: "/docs/themes/",
|
||||
},
|
||||
{
|
||||
name: "Utilities",
|
||||
tags: "Utilities utility class",
|
||||
href: "/docs/utilities/",
|
||||
badge: "new",
|
||||
},
|
||||
{
|
||||
name: "Layout & Typography",
|
||||
tags: "layout typography padding margin grid flex spacing font",
|
||||
href: "/docs/layout-and-typography/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Components",
|
||||
icon: '<svg class="w-5 h-5 text-green-600" width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 29H6V43H20V29Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M24 4L34 21H14L24 4Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M36 44C40.4183 44 44 40.4183 44 36C44 31.5817 40.4183 28 36 28C31.5817 28 28 31.5817 28 36C28 40.4183 31.5817 44 36 44Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/></svg>',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
name: "Actions",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 48 48" fill="none" stroke="currentColor" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg"><path d="M24 4V12" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22 22L42 26L36 30L42 36L36 42L30 36L26 42L22 22Z" fill="none" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M38.1421 9.85789L32.4853 15.5147" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M9.85787 38.1421L15.5147 32.4853" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M4 24H12" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M9.85795 9.85787L15.5148 15.5147" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Button",
|
||||
tags: "button btn 🍑",
|
||||
href: "/components/button/",
|
||||
badge: "updated",
|
||||
},
|
||||
{
|
||||
name: "Dropdown",
|
||||
tags: "dropdown popover menu listbox",
|
||||
href: "/components/dropdown/",
|
||||
},
|
||||
{
|
||||
name: "Modal",
|
||||
tags: "dialog modal window popup",
|
||||
href: "/components/modal/",
|
||||
},
|
||||
{
|
||||
name: "Swap",
|
||||
tags: "swap transition toggle icon",
|
||||
href: "/components/swap/",
|
||||
},
|
||||
{
|
||||
name: "Theme Controller",
|
||||
tags: "theme controller change dark mode",
|
||||
href: "/components/theme-controller/",
|
||||
badge: "new",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Data display",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 48 48" class="w-5 h-5" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="40" height="32" rx="3" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/><path d="M4 11C4 9.34315 5.34315 8 7 8H41C42.6569 8 44 9.34315 44 11V20H4V11Z" fill="none" stroke="currentColor" stroke-width="4"/><circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 10 14)" fill="currentColor"/><circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 16 14)" fill="currentColor"/></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Accordion",
|
||||
tags: "accordion disclosure collapse show hide faq",
|
||||
href: "/components/accordion/",
|
||||
},
|
||||
{
|
||||
name: "Avatar",
|
||||
tags: "avatar image profile picture",
|
||||
href: "/components/avatar/",
|
||||
},
|
||||
{
|
||||
name: "Badge",
|
||||
tags: "badge tag label",
|
||||
href: "/components/badge/",
|
||||
},
|
||||
{
|
||||
name: "Card",
|
||||
tags: "card",
|
||||
href: "/components/card/",
|
||||
},
|
||||
{
|
||||
name: "Carousel",
|
||||
tags: "carousel slider image",
|
||||
href: "/components/carousel/",
|
||||
},
|
||||
{
|
||||
name: "Chat bubble",
|
||||
tags: "chat bubble dialog message messenger",
|
||||
href: "/components/chat/",
|
||||
},
|
||||
{
|
||||
name: "Collapse",
|
||||
tags: "collapse disclosure accordion show hide",
|
||||
href: "/components/collapse/",
|
||||
},
|
||||
{
|
||||
name: "Countdown",
|
||||
tags: "countdown counter timer",
|
||||
href: "/components/countdown/",
|
||||
},
|
||||
{
|
||||
name: "Diff",
|
||||
tags: "diff compare comparison image slider",
|
||||
href: "/components/diff/",
|
||||
badge: "new",
|
||||
},
|
||||
{
|
||||
name: "Kbd",
|
||||
tags: "kbd keyboard ⌨️",
|
||||
href: "/components/kbd/",
|
||||
},
|
||||
{
|
||||
name: "Stat",
|
||||
tags: "stats data",
|
||||
href: "/components/stat/",
|
||||
},
|
||||
{
|
||||
name: "Table",
|
||||
tags: "table",
|
||||
href: "/components/table/",
|
||||
},
|
||||
{
|
||||
name: "Timeline",
|
||||
tags: "timeline",
|
||||
href: "/components/timeline/",
|
||||
badge: "new",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Navigation",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 48 48" class="h-5 w-5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 19H20C15.5817 19 12 22.5817 12 27C12 31.4183 15.5817 35 20 35H36C40.4183 35 44 31.4183 44 27C44 24.9711 43.2447 23.1186 42 21.7084" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M6 24.2916C4.75527 22.8814 4 21.0289 4 19C4 14.5817 7.58172 11 12 11H28C32.4183 11 36 14.5817 36 19C36 23.4183 32.4183 27 28 27H18" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Breadcrumbs",
|
||||
tags: "breadcrumbs links",
|
||||
href: "/components/breadcrumbs/",
|
||||
},
|
||||
{
|
||||
name: "Bottom navigation",
|
||||
tags: "bottom navigation app bar",
|
||||
href: "/components/bottom-navigation/",
|
||||
},
|
||||
{
|
||||
name: "Link",
|
||||
tags: "link href anchor 🔗",
|
||||
href: "/components/link/",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
tags: "menu list",
|
||||
href: "/components/menu/",
|
||||
},
|
||||
{
|
||||
name: "Navbar",
|
||||
tags: "navbar navigation menu",
|
||||
href: "/components/navbar/",
|
||||
},
|
||||
{
|
||||
name: "Pagination",
|
||||
tags: "pagination links next previous",
|
||||
href: "/components/pagination/",
|
||||
},
|
||||
{
|
||||
name: "Steps",
|
||||
tags: "steps progress",
|
||||
href: "/components/steps/",
|
||||
},
|
||||
{
|
||||
name: "Tab",
|
||||
tags: "tabs",
|
||||
href: "/components/tab/",
|
||||
badge: "updated",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Feedback",
|
||||
icon: '<svg width="18" height="18" class="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6H44V36H29L24 41L19 36H4V6Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M23 21H25.0025" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/><path d="M33.001 21H34.9999" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/><path d="M13.001 21H14.9999" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Alert",
|
||||
tags: "alert warning error message",
|
||||
href: "/components/alert/",
|
||||
},
|
||||
{
|
||||
name: "Loading",
|
||||
tags: "loading loader spinner progress",
|
||||
href: "/components/loading/",
|
||||
},
|
||||
{
|
||||
name: "Progress",
|
||||
tags: "progressbar progress loading percentage",
|
||||
href: "/components/progress/",
|
||||
},
|
||||
{
|
||||
name: "Radial progress",
|
||||
tags: "progressbar progress loading percentage",
|
||||
href: "/components/radial-progress/",
|
||||
},
|
||||
{
|
||||
name: "Skeleton",
|
||||
tags: "skeleton loading placeholder",
|
||||
href: "/components/skeleton/",
|
||||
badge: "new",
|
||||
},
|
||||
{
|
||||
name: "Toast",
|
||||
tags: "toast notification snackbar",
|
||||
href: "/components/toast/",
|
||||
},
|
||||
{
|
||||
name: "Tooltip",
|
||||
tags: "tooltip",
|
||||
href: "/components/tooltip/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Data input",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 48 48" class="w-5 h-5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 42H43" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Checkbox",
|
||||
tags: "checkbox ✅",
|
||||
href: "/components/checkbox/",
|
||||
},
|
||||
{
|
||||
name: "File Input",
|
||||
tags: "file upload",
|
||||
href: "/components/file-input/",
|
||||
},
|
||||
{
|
||||
name: "Radio",
|
||||
tags: "radio",
|
||||
href: "/components/radio/",
|
||||
},
|
||||
{
|
||||
name: "Range",
|
||||
tags: "range slider",
|
||||
href: "/components/range/",
|
||||
},
|
||||
{
|
||||
name: "Rating",
|
||||
tags: "star rating radio",
|
||||
href: "/components/rating/",
|
||||
},
|
||||
{
|
||||
name: "Select",
|
||||
tags: "select option menu",
|
||||
href: "/components/select/",
|
||||
},
|
||||
{
|
||||
name: "Text input",
|
||||
tags: "text input",
|
||||
href: "/components/input/",
|
||||
},
|
||||
{
|
||||
name: "Textarea",
|
||||
tags: "textarea",
|
||||
href: "/components/textarea/",
|
||||
},
|
||||
{
|
||||
name: "Toggle",
|
||||
tags: "toggle switch checkbox",
|
||||
href: "/components/toggle/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Layout",
|
||||
icon: '<svg width="18" height="18" class="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/><path d="M6 22L42 22" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M29 22V6" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M26 6H32" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M6 19V25" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M42 19V25" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Artboard",
|
||||
tags: "artboard mobile",
|
||||
href: "/components/artboard/",
|
||||
},
|
||||
{
|
||||
name: "Divider",
|
||||
tags: "divider",
|
||||
href: "/components/divider/",
|
||||
badge: "updated",
|
||||
},
|
||||
{
|
||||
name: "Drawer",
|
||||
tags: "drawer sidebar menu",
|
||||
href: "/components/drawer/",
|
||||
},
|
||||
{
|
||||
name: "Footer",
|
||||
tags: "footer 🦶",
|
||||
href: "/components/footer/",
|
||||
},
|
||||
{
|
||||
name: "Hero",
|
||||
tags: "hero title",
|
||||
href: "/components/hero/",
|
||||
},
|
||||
{
|
||||
name: "Indicator",
|
||||
tags: "indicator badge corner",
|
||||
href: "/components/indicator/",
|
||||
},
|
||||
{
|
||||
name: "Join (group items)",
|
||||
tags: "join group button group input group form group",
|
||||
href: "/components/join/",
|
||||
},
|
||||
{
|
||||
name: "Mask",
|
||||
tags: "mask crop 😷",
|
||||
href: "/components/mask/",
|
||||
},
|
||||
{
|
||||
name: "Stack",
|
||||
tags: "stack",
|
||||
href: "/components/stack/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Mockup",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 48 48" class="w-5 h-5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 30H40V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V30Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/><path d="M40 30V6C40 4.89543 39.1046 4 38 4H10C8.89543 4 8 4.89543 8 6V30" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/><path d="M22 37H26" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/></svg>',
|
||||
items: [
|
||||
{
|
||||
name: "Browser",
|
||||
tags: "mockup browser",
|
||||
href: "/components/mockup-browser/",
|
||||
},
|
||||
{
|
||||
name: "Code",
|
||||
tags: "mockup code",
|
||||
href: "/components/mockup-code/",
|
||||
},
|
||||
{
|
||||
name: "Phone",
|
||||
tags: "mockup iphone 📱",
|
||||
href: "/components/mockup-phone/",
|
||||
},
|
||||
{
|
||||
name: "Window",
|
||||
tags: "mockup window 🪟",
|
||||
href: "/components/mockup-window/",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Theme Generator",
|
||||
tags: "theme generator custom color generator",
|
||||
href: "/theme-generator/",
|
||||
icon: '<svg class="h-5 w-5 text-fuchsia-400" width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.1005 8.1005L24.3431 12.3431M30 4V10V4ZM39.8995 8.1005L35.6569 12.3431L39.8995 8.1005ZM44 18H38H44ZM39.8995 27.8995L35.6569 23.6569L39.8995 27.8995ZM30 32V26V32ZM20.1005 27.8995L24.3431 23.6569L20.1005 27.8995ZM16 18H22H16Z" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M29.5856 18.4143L5.54395 42.4559" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/></svg>',
|
||||
},
|
||||
{},
|
||||
{
|
||||
name: "Store",
|
||||
tags: "store template dashboard",
|
||||
href: "/store/",
|
||||
icon: '<svg class="h-5 w-5" width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40.0391 22V42H8.03906V22" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/><path d="M5.84231 13.7766C4.31276 17.7377 7.26307 22 11.5092 22C14.8229 22 17.5276 19.3137 17.5276 16C17.5276 19.3137 20.2139 22 23.5276 22H24.546C27.8597 22 30.546 19.3137 30.546 16C30.546 19.3137 33.2518 22 36.5655 22C40.8139 22 43.767 17.7352 42.2362 13.7723L39.2337 6H8.84523L5.84231 13.7766Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/></svg>',
|
||||
badge: "new",
|
||||
},
|
||||
{
|
||||
name: "Blog",
|
||||
tags: "blog tutorial news",
|
||||
href: "/blog/",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path d="M3.75 3a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75H4c6.075 0 11 4.925 11 11v.25c0 .414.336.75.75.75h.5a.75.75 0 00.75-.75V16C17 8.82 11.18 3 4 3h-.25z" /><path d="M3 8.75A.75.75 0 013.75 8H4a8 8 0 018 8v.25a.75.75 0 01-.75.75h-.5a.75.75 0 01-.75-.75V16a6 6 0 00-6-6h-.25A.75.75 0 013 9.25v-.5zM7 15a2 2 0 11-4 0 2 2 0 014 0z" /></svg>',
|
||||
},
|
||||
{
|
||||
name: "Resources",
|
||||
tags: "resources",
|
||||
href: "/resources/videos/",
|
||||
icon: '<svg width="18" height="18" viewBox="0 0 48 48" class="w-5 h-5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/><path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="bevel"/></svg>',
|
||||
},
|
||||
{},
|
||||
{
|
||||
name: "Playground",
|
||||
tags: "playground tailwind play",
|
||||
href: "/tailwindplay/",
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="currentColor" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>',
|
||||
target: "blank",
|
||||
},
|
||||
{
|
||||
name: "GitHub",
|
||||
tags: "github",
|
||||
href: "https://github.com/saadeghi/daisyui",
|
||||
icon: '<svg width="18" height="18" class="h-5 w-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M29.3444 30.4765C31.7481 29.977 33.9292 29.1108 35.6247 27.8391C38.5202 25.6676 40 22.3136 40 18.9999C40 16.6752 39.1187 14.505 37.5929 12.6668C36.7427 11.6425 39.2295 3.99989 37.02 5.02919C34.8105 6.05848 31.5708 8.33679 29.8726 7.83398C28.0545 7.29565 26.0733 6.99989 24 6.99989C22.1992 6.99989 20.4679 7.22301 18.8526 7.6344C16.5046 8.23237 14.2591 5.99989 12 5.02919C9.74086 4.05848 10.9736 11.9632 10.3026 12.7944C8.84119 14.6051 8 16.7288 8 18.9999C8 22.3136 9.79086 25.6676 12.6863 27.8391C14.6151 29.2857 17.034 30.2076 19.7401 30.6619" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/><path d="M19.7397 30.6619C18.5812 31.937 18.002 33.1478 18.002 34.2944C18.002 35.441 18.002 38.3464 18.002 43.0106" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/><path d="M29.3446 30.4766C30.4423 31.9174 30.9912 33.211 30.9912 34.3576C30.9912 35.5042 30.9912 38.3885 30.9912 43.0107" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/><path d="M6 31.2155C6.89887 31.3254 7.56554 31.7387 8 32.4554C8.65169 33.5303 11.0742 37.518 13.8251 37.518C15.6591 37.518 17.0515 37.518 18.0024 37.518" stroke="currentColor" stroke-width="4" stroke-linecap="butt"/></svg>',
|
||||
target: "blank",
|
||||
},
|
||||
{
|
||||
name: "Support daisyUI",
|
||||
tags: "support",
|
||||
href: "https://opencollective.com/daisyui",
|
||||
icon: '<svg width="18" class="h-5 w-5" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 8C8.92487 8 4 12.9249 4 19C4 30 17 40 24 42.3262C31 40 44 30 44 19C44 12.9249 39.0751 8 33 8C29.2797 8 25.9907 9.8469 24 12.6738C22.0093 9.8469 18.7203 8 15 8Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel"/></svg>',
|
||||
target: "blank",
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
name: "CodePen example page",
|
||||
tags: "codepen",
|
||||
href: "/codepen/",
|
||||
},
|
||||
{
|
||||
name: "CDN",
|
||||
tags: "how cdn",
|
||||
href: "/docs/cdn/",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,366 @@
|
|||
export const roadmap = [
|
||||
{
|
||||
title: "daisyUI 2",
|
||||
done: true,
|
||||
items: [
|
||||
{
|
||||
title: "New component: Chat",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: toast",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: radial-progress",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: swap",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: input-group",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: bottom-navigation",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New color names: info-content, success-content, warning-content, error-content",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Add support for RGB, HSL, etc. color formats for daisyUI themes in tailiwnd.config.js",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New responsive modifier classes for modal",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New responsive modifiers for stats",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New responsive modifiers for divider",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New rating-half modifier for rating component to show half stars",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New modifiers for mask component: mask-half-1, mask-half-2",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Empty li tag in a menu now shows a separator line",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New themes: night, cafe, winter, autumn, business, acid, lemonade",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New 'prefix' config",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New 'darkTheme' config",
|
||||
done: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "daisyUI 3",
|
||||
done: true,
|
||||
items: [
|
||||
{
|
||||
title: "New component: Loading",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: Accordion",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: Join",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: browser mockup",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Drawer support for responsive prefixes",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Drawer accessibility for keyboard navigation",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Modal component using dialog element",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Dropdown component using details/summary element",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Tooltip accessibility for keyboard navigation",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: btn-neutral variant for button",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "menu support for details/summary element",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "menu size variants: menu-xs, menu-sm, menu-md, menu-lg",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "table size variants: table-xs, table-sm, table-md, table-lg",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "table redesing",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "collapse support for details/summary element",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New tool: npm init daisyui",
|
||||
done: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Docs updates",
|
||||
done: true,
|
||||
items: [
|
||||
{
|
||||
title: "add Ukrainian translation",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "daisyUI blog",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "daisyUI newsletter",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Update example repos",
|
||||
done: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "daisyUI 4",
|
||||
done: true,
|
||||
items: [
|
||||
{
|
||||
title: "daisyUI uses OKLCH colors now. Unlocking access to 30% more colors than RGB/HSL",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: Timeline",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: Skeleton",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: Diff",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New component: Theme Controller – change the page theme without JS",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "3 new themes: dim, nord, sunset",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "New 'tab-content' class: switch tab content without JS",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Replace all directional styles with CSS logical properties",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "RTL support without any extra config or dependencies, using CSS logical properties",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "92% less NPM module dependencies",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "70% smaller node_modules footprint and install size",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "15% smaller CSS file size (CDN)",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Removed RTLCSS, PostCSS, Tailwind CSS dependencies",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Removed all *-focus color names. Darker colors are now generated using CSS color-mix() under the hood",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"btn-info, btn-success, btn-warning, btn-error now have hover color change just like other buttons",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Reduce tab class name repetition. Removed tab-lifted, tab-bordered, tab-lg, tab-md, tab-sm, tab-xs modifier classes for 'tab' item. Added tabs-lifted, tabs-bordered, tabs-lg, tabs-md, tabs-sm, tabs-xs classes for the parent 'tabs' class instead.",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Improve improve compatibility with @tailwindcss/forms plugin",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Use Culori package instead of Colord which supports P3 colors",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Add divider color modifiers",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Add divider color position modifiers",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "rewrite 'label' component to work best with 'join'",
|
||||
done: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Docs updates",
|
||||
done: false,
|
||||
items: [
|
||||
{
|
||||
title: "daisyUI Resources",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "daisyUI store",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Document utiltiy classes",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Document CSS variables",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Docs: add Farsi translation",
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
title: "Docs: add Arabic translation",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Docs: add German translation",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Docs: add FAQ to the site",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Add 'integrations' pages with tutorials about using third-party JS packages",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Add internal CSS variables in class name tables",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Improve the loading of translation files",
|
||||
done: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Upcoming",
|
||||
done: false,
|
||||
items: [
|
||||
{
|
||||
title: "New component: Banner",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "New component: Calendar",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "New component: Tag",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "New component: Banner",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Support the upcoming Tailwind CSS v4",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Pre-built grid layouts",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "New themes",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Animate tab background using CSS grid",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Use popover API when browsers support it",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Use CSS color-contrast() when browsers support it",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Use CSS relative colors when browsers support them",
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
title: "Use Container queries for responsive components",
|
||||
done: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export const stats = {
|
||||
components: "55",
|
||||
utilities: "500+",
|
||||
themes: "32",
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
export const themes = [
|
||||
"light",
|
||||
"dark",
|
||||
"cupcake",
|
||||
"bumblebee",
|
||||
"emerald",
|
||||
"corporate",
|
||||
"synthwave",
|
||||
"retro",
|
||||
"cyberpunk",
|
||||
"valentine",
|
||||
"halloween",
|
||||
"garden",
|
||||
"forest",
|
||||
"aqua",
|
||||
"lofi",
|
||||
"pastel",
|
||||
"fantasy",
|
||||
"wireframe",
|
||||
"black",
|
||||
"luxury",
|
||||
"dracula",
|
||||
"cmyk",
|
||||
"autumn",
|
||||
"business",
|
||||
"acid",
|
||||
"lemonade",
|
||||
"night",
|
||||
"coffee",
|
||||
"winter",
|
||||
"dim",
|
||||
"nord",
|
||||
"sunset",
|
||||
]
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
export const videoIds = [
|
||||
"tZbOO97urWs",
|
||||
"mqe9a7kHUvo",
|
||||
"mJgNSN5YAMI",
|
||||
"KLxgQFOCZjQ",
|
||||
"l4sbqrY0XGk",
|
||||
"ovPZ_oWRdVU",
|
||||
"c7UFf1asCRE",
|
||||
"B-MzDlbxHRw",
|
||||
"AaiijESQH5o",
|
||||
"fX3AhKuZnXc",
|
||||
"I78f5Atoa-Y",
|
||||
"haKnkk6ds20",
|
||||
"LHDJCQMEE3M",
|
||||
"SDK_UKMzgyE",
|
||||
"th8OswsAq6Q",
|
||||
"K4ziF0MhbLc",
|
||||
"9js_4PwapEc",
|
||||
"jzSL4HsPbZk",
|
||||
"UAKNwCvFxoU",
|
||||
"1kON7Q9MBak",
|
||||
"JN4uI4cNljE",
|
||||
"KteaV_c4NUQ",
|
||||
"NWzGJanh3Lg",
|
||||
"J827X9j0R60",
|
||||
"Kd6n3B0JRO8",
|
||||
"8VWAj4CHdOk",
|
||||
"whvp0nSy6Y4",
|
||||
"1HzFYpmx_zs",
|
||||
"XBYvzPe7skc",
|
||||
"mPQyckogDYc",
|
||||
"mEBPN_9jTAE",
|
||||
"Hpjq0D1vcpM",
|
||||
"zH2qG9YwN3s",
|
||||
"hM9fENyAquM",
|
||||
"Wm2g6FWec34",
|
||||
"uXQgJbUj3PQ",
|
||||
"5lF5PxBJoso",
|
||||
"u9jtHBE6NL8",
|
||||
"XR1rS-CCfx0",
|
||||
"y7LYoRGRqRI",
|
||||
"28db3jojTgo",
|
||||
"37gtpvy-k9U",
|
||||
"2rXSE_KMZKM",
|
||||
"1VC8ps7EI18",
|
||||
"X5_ZQmddfyk",
|
||||
"RyZbYZAXAa4",
|
||||
"BkM6INWM1Yo",
|
||||
"2tXuoNV1-WA",
|
||||
"XI3rnvhH-Go",
|
||||
"l04LcLNM390",
|
||||
"XzUeom623Cs",
|
||||
"K5QUx6iPyfQ",
|
||||
"Z-EgUIh27nU",
|
||||
"uK5fEIiFEAI",
|
||||
"9XeiyFsfzlE",
|
||||
"-elV2erzt10",
|
||||
"6nEcQFnfx8U",
|
||||
"9AydJ-cg8fU",
|
||||
"v3QJAdVE-7Q",
|
||||
"mRvohmjna-o",
|
||||
"8DQVMcP0ZUY",
|
||||
"Rn7pnxtHf_c",
|
||||
"7Wxql6rP-Xg",
|
||||
"l6NDDv3KcZg",
|
||||
"kytDBk6UBw4",
|
||||
"kVdU1e5HPIo",
|
||||
"2nXsvpk9rd0",
|
||||
"Z-KSLMRM_jI",
|
||||
"IQJE2VIeXQk",
|
||||
"nne_lr711Iw",
|
||||
"2FZrW2TsRVs",
|
||||
"ifbQ3S2bWyc",
|
||||
"HfUDVJoBk7k",
|
||||
"Z4_4QKyuIkM",
|
||||
"n_S5IOLdsSk",
|
||||
"IkmlcZgMeH0",
|
||||
"ZHBhA5gb4iM",
|
||||
"HB7f_Mz4x7Y",
|
||||
"osNYQvn19Zo",
|
||||
"11CCTx7rkjU",
|
||||
"jX2cS9pj4hw",
|
||||
"jlWfXcRUQ3g",
|
||||
"Fe8MZGoNcJE",
|
||||
"oGZOrIfRnYQ",
|
||||
"CDxZ_rHyiP0",
|
||||
"kclTvXlVh0w",
|
||||
"1OCN03HHXAQ",
|
||||
"9quJEOVW9Bk",
|
||||
"2WQs7Em6dYw",
|
||||
"qJcUjEsp9aY",
|
||||
"g2owVghzXzY",
|
||||
"fIdfxsKWnxQ",
|
||||
"zJ5bGZA9oWE",
|
||||
"cJV1G_w39wM",
|
||||
"yz9_8ehtBu8",
|
||||
"bwQvPBh3xYU",
|
||||
"wwsHlo7UkKk",
|
||||
"Gpm3w7Mib_M",
|
||||
"sFyUWHH2sVg",
|
||||
"YPYpPn-bY_o",
|
||||
]
|
||||
|
|
@ -63,8 +63,14 @@ const replaceStateWithQuery = (values) => {
|
|||
history.replaceState({}, "", url)
|
||||
}
|
||||
|
||||
export const setLang = (lang) => {
|
||||
export const setLang = (lang, replaceQuery = true) => {
|
||||
if (!langs.includes(lang)) {
|
||||
return null
|
||||
}
|
||||
currentLang.set(lang)
|
||||
replaceStateWithQuery({ lang: lang })
|
||||
replaceQuery && replaceStateWithQuery({ lang: lang })
|
||||
localStorage.setItem("lang", lang)
|
||||
document.documentElement.setAttribute("lang", lang)
|
||||
// set direction
|
||||
document.documentElement.setAttribute("dir", translations[`${path}/${lang}.json`]["__direction"])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import SEO from "@components/SEO.svelte"
|
||||
import SEO from "$components/SEO.svelte"
|
||||
import { timeago, formattedDate } from "$lib/util"
|
||||
export let title, desc, date, author, tags, thumbnail, published
|
||||
const slug = $page.url.pathname.split("/").at(-2)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import Ads from "@components/Ads.svelte"
|
||||
import ComponentFooter from "@components/ComponentFooter.svelte"
|
||||
import SEO from "@components/SEO.svelte"
|
||||
import Sponsors from "@components/Sponsors.svelte"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import Ads from "$components/Ads.svelte"
|
||||
import ComponentFooter from "$components/ComponentFooter.svelte"
|
||||
import SEO from "$components/SEO.svelte"
|
||||
import Sponsors from "$components/Sponsors.svelte"
|
||||
import { t } from "$lib/i18n"
|
||||
export let data
|
||||
export let title
|
||||
export let desc
|
||||
</script>
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
<p>{@html $t(desc)}</p>
|
||||
{/if}
|
||||
<slot />
|
||||
<ComponentFooter />
|
||||
<ComponentFooter pages={data.pages} />
|
||||
<div class="not-prose flex justify-center xl:hidden">
|
||||
<Sponsors wrapperClasses="flex-col sm:flex-row" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import Ads from "@components/Ads.svelte"
|
||||
import ComponentFooter from "@components/ComponentFooter.svelte"
|
||||
import SEO from "@components/SEO.svelte"
|
||||
import Sponsors from "@components/Sponsors.svelte"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import Ads from "$components/Ads.svelte"
|
||||
import ComponentFooter from "$components/ComponentFooter.svelte"
|
||||
import SEO from "$components/SEO.svelte"
|
||||
import Sponsors from "$components/Sponsors.svelte"
|
||||
import { t } from "$lib/i18n"
|
||||
export let data
|
||||
export let title
|
||||
export let desc
|
||||
</script>
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
<p>{@html $t(desc)}</p>
|
||||
{/if}
|
||||
<slot />
|
||||
<ComponentFooter />
|
||||
<ComponentFooter pages={data?.pages} />
|
||||
<div class="not-prose flex justify-center xl:hidden">
|
||||
<Sponsors wrapperClasses="flex-col sm:flex-row" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import { exec } from "child_process"
|
||||
|
||||
const commands = [
|
||||
"node src/lib/scripts/download-file 'https://api.npmjs.org/downloads/point/1970:2100/daisyui' 'src/lib/json/npm-downloads.json'",
|
||||
"node src/lib/scripts/download-file 'https://api.github.com/repos/saadeghi/daisyui' 'src/lib/json/github-repo.json'",
|
||||
"node src/lib/scripts/download-file 'https://api.github.com/repos/saadeghi/daisyui/contributors?page=1&per_page=100' 'src/lib/json/github-contributors-1.json'",
|
||||
"node src/lib/scripts/download-file 'https://api.github.com/repos/saadeghi/daisyui/contributors?page=2&per_page=100' 'src/lib/json/github-contributors-2.json'",
|
||||
"node src/lib/scripts/download-file 'https://opencollective.com/daisyui.json' 'src/lib/json/opencollective-info.json'",
|
||||
"node src/lib/scripts/download-file 'https://opencollective.com/daisyui/members/all.json' 'src/lib/json/opencollective-members.json'",
|
||||
"node src/lib/scripts/download-file.js 'https://api.npmjs.org/downloads/point/1970:2100/daisyui' 'src/lib/json/npm-downloads.json'",
|
||||
"node src/lib/scripts/download-file.js 'https://api.github.com/repos/saadeghi/daisyui' 'src/lib/json/github-repo.json'",
|
||||
"node src/lib/scripts/download-file.js 'https://api.github.com/repos/saadeghi/daisyui/contributors?page=1&per_page=100' 'src/lib/json/github-contributors-1.json'",
|
||||
"node src/lib/scripts/download-file.js 'https://api.github.com/repos/saadeghi/daisyui/contributors?page=2&per_page=100' 'src/lib/json/github-contributors-2.json'",
|
||||
"node src/lib/scripts/download-file.js 'https://opencollective.com/daisyui.json' 'src/lib/json/opencollective-info.json'",
|
||||
"node src/lib/scripts/download-file.js 'https://opencollective.com/daisyui/members/all.json' 'src/lib/json/opencollective-members.json'",
|
||||
"node --env-file=.env.local src/lib/scripts/get-youtube-resources.js 'src/lib/json/youtube.json'",
|
||||
]
|
||||
let number_of_files = 0
|
||||
const promises = commands.map((command) => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import https from "https"
|
||||
import fs from "fs"
|
||||
import sharp from "sharp"
|
||||
import { exec } from "child_process"
|
||||
import { tweets } from "../testimonials.js"
|
||||
|
||||
const downloadImage = (url, filename) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
import https from "https"
|
||||
import fs from "fs"
|
||||
import { videoIds } from "../data/youtube.js"
|
||||
|
||||
const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY
|
||||
const chunkSize = 50
|
||||
const apiUrl = `https://www.googleapis.com/youtube/v3/videos?part=snippet&part=status&key=${YOUTUBE_API_KEY}&id=`
|
||||
const outputFilePath = process.argv[2]
|
||||
const fallbackData = [
|
||||
{
|
||||
id: "ky18YtME8UQ",
|
||||
snippet: {
|
||||
title: "daisyUI 3.0",
|
||||
description: "daisyUI is the most popular component library for Tailwind CSS",
|
||||
channelTitle: "daisyUI",
|
||||
thumbnails: {
|
||||
high: {
|
||||
url: "https://i.ytimg.com/vi/ky18YtME8UQ/hqdefault.jpg",
|
||||
},
|
||||
},
|
||||
},
|
||||
status: {
|
||||
embeddable: true,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
// Function to make a request to the API
|
||||
function makeApiRequest(ids) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = apiUrl + ids.join(",")
|
||||
https
|
||||
.get(url, (res) => {
|
||||
let data = ""
|
||||
|
||||
res.on("data", (chunk) => {
|
||||
data += chunk
|
||||
})
|
||||
|
||||
res.on("end", () => {
|
||||
resolve(JSON.parse(data))
|
||||
})
|
||||
})
|
||||
.on("error", (err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Function to chunk the videoIds array and make API requests
|
||||
async function processVideoIds(videoIds) {
|
||||
const results = []
|
||||
|
||||
for (let i = 0; i < videoIds.length; i += chunkSize) {
|
||||
const chunk = videoIds.slice(i, i + chunkSize)
|
||||
const result = await makeApiRequest(chunk)
|
||||
|
||||
// if results has error
|
||||
if (!result.error) {
|
||||
results.push(result.items)
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
|
||||
// Process the videoIds and save the results as JSON
|
||||
processVideoIds(videoIds)
|
||||
.then((results) => {
|
||||
let combinedResults
|
||||
combinedResults = [].concat(...results)
|
||||
if (!combinedResults.length) {
|
||||
combinedResults = fallbackData
|
||||
}
|
||||
|
||||
fs.writeFile(outputFilePath, JSON.stringify(combinedResults, null, 2), (err) => {
|
||||
if (err) {
|
||||
console.error("Error writing to file:", err)
|
||||
} else {
|
||||
console.log("Data saved to", outputFilePath)
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error making API requests:", error)
|
||||
})
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.prose pre[class*="language-"] {
|
||||
.token.comment {
|
||||
color: hsl(var(--nc) / 0.5);
|
||||
color: var(--fallback-nc, oklch(var(--nc) / 0.5));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -68,3 +68,15 @@ export const timeago = (timestamp, locale = "en") => {
|
|||
export const formattedDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-UK", { dateStyle: "medium" })
|
||||
}
|
||||
|
||||
export const slugify = (str) => {
|
||||
return String(str)
|
||||
.normalize("NFKD") // split accented characters into their base characters and diacritical marks
|
||||
.replace(/[\u0300-\u036f]/g, "") // remove all the accents, which happen to be all in the \u03xx UNICODE block.
|
||||
.trim() // trim leading or trailing whitespace
|
||||
.toLowerCase() // convert to lowercase
|
||||
.replace(/[^a-z0-9 -]/g, "") // remove non-alphanumeric characters
|
||||
.replace(/\s+/g, "-") // replace spaces with hyphens
|
||||
.replace(/-+/g, "-") // remove consecutive hyphens
|
||||
.replace(/^-+|-+$/g, "") // remove leading and trailing hyphens
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import { exampleRepos } from "$lib/data/exampleRepos.js"
|
||||
|
||||
export function load() {
|
||||
return {
|
||||
exampleRepos,
|
||||
}
|
||||
}
|
||||
|
|
@ -1,125 +1,12 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { pagesThatDontNeedSidebar } from "@src/lib/data.js"
|
||||
|
||||
import { currentLang, langs } from "@src/lib/i18n"
|
||||
|
||||
onMount(() => {
|
||||
let lang = new URL(document.location).searchParams.get("lang")
|
||||
if (langs.includes(lang)) {
|
||||
$currentLang = lang
|
||||
localStorage.setItem("lang", $currentLang)
|
||||
}
|
||||
if (localStorage.getItem("lang")) {
|
||||
$currentLang = localStorage.getItem("lang")
|
||||
}
|
||||
})
|
||||
|
||||
import { page } from "$app/stores"
|
||||
|
||||
import "@components/StyleHandler.svelte"
|
||||
|
||||
import { onMount } from "svelte"
|
||||
import "prism-themes/themes/prism-material-dark.min.css"
|
||||
import "@src/prism-themes-modify.css"
|
||||
|
||||
import Navbar from "@components/Navbar.svelte"
|
||||
import Scripts from "@components/Scripts.svelte"
|
||||
|
||||
import Sidebar from "@components/Sidebar.svelte"
|
||||
|
||||
// let Sidebar
|
||||
// const sleep = (ms) => new Promise((f) => setTimeout(f, ms))
|
||||
// onMount(async () => {
|
||||
// await sleep(1000)
|
||||
// Sidebar = (await import("../../components/Sidebar.svelte")).default
|
||||
// })
|
||||
|
||||
let drawersidebar
|
||||
let drawerSidebarScrollY = 0
|
||||
function parseSidebarScroll() {
|
||||
drawerSidebarScrollY = drawersidebar.scrollTop
|
||||
}
|
||||
onMount(() => {
|
||||
parseSidebarScroll()
|
||||
document.documentElement.style.scrollPaddingTop = "5rem"
|
||||
document.documentElement.style.scrollBehavior = "smooth"
|
||||
})
|
||||
|
||||
let checked = ""
|
||||
function closeDrawer() {
|
||||
checked = ""
|
||||
}
|
||||
|
||||
function openDrawer() {
|
||||
checked = true
|
||||
}
|
||||
|
||||
let navbarScrollPadding = "5rem"
|
||||
function addScrollPaddingToNavbar(action) {
|
||||
navbarScrollPadding = "5rem"
|
||||
document.documentElement.style.scrollPaddingTop = "5rem"
|
||||
}
|
||||
|
||||
function removeScrollPaddingFromNavbar(action) {
|
||||
navbarScrollPadding = "0rem"
|
||||
document.documentElement.style.scrollPaddingTop = "0rem"
|
||||
}
|
||||
import "$lib/style/prism-themes-modify.css"
|
||||
export let data
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link
|
||||
media="screen and (min-width: 520px)"
|
||||
rel="preconnect"
|
||||
href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
media="screen and (min-width: 520px)"
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossorigin />
|
||||
<link
|
||||
media="screen and (min-width: 520px)"
|
||||
href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;900&family=Noto+Sans+JP:wght@300;900&family=Noto+Sans:wght@300;900&display=swap"
|
||||
rel="stylesheet" />
|
||||
</svelte:head>
|
||||
|
||||
<div
|
||||
class={`bg-base-100 drawer ${
|
||||
pagesThatDontNeedSidebar.includes($page.url.pathname) ? "" : "lg:drawer-open"
|
||||
}`}>
|
||||
<input id="drawer" type="checkbox" class="drawer-toggle" bind:checked />
|
||||
<div class={`drawer-content`}>
|
||||
<Navbar
|
||||
{addScrollPaddingToNavbar}
|
||||
{removeScrollPaddingFromNavbar}
|
||||
showBlogBtn="true"
|
||||
showComponentsBtn="true"
|
||||
hideLogoOnLargeScreen={$page.url.pathname == "/" ? false : true}
|
||||
hideSidebarButtonOnLargeScreen={$page.url.pathname == "/" ? false : true}
|
||||
showSearch="true"
|
||||
showVersion="true"
|
||||
showLanguage="true" />
|
||||
<div
|
||||
class={`${
|
||||
pagesThatDontNeedSidebar.includes($page.url.pathname)
|
||||
? ""
|
||||
: "max-w-[100vw] px-6 pb-16 xl:pr-2"
|
||||
}`}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="drawer-side z-40"
|
||||
style="scroll-behavior: smooth; scroll-padding-top: {navbarScrollPadding};"
|
||||
bind:this={drawersidebar}
|
||||
on:scroll={parseSidebarScroll}>
|
||||
<label for="drawer" class="drawer-overlay" aria-label="Close menu" />
|
||||
<aside class="bg-base-100 w-80">
|
||||
<svelte:component this={Sidebar} {closeDrawer} {openDrawer} {drawerSidebarScrollY} />
|
||||
<div
|
||||
class="bg-base-100 pointer-events-none sticky bottom-0 flex h-40 [mask-image:linear-gradient(transparent,#000000)]" />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
<slot />
|
||||
|
||||
{#if $page.url.pathname == "/components/modal/"}
|
||||
<input type="checkbox" id="my_modal_6" class="modal-toggle" aria-label="Open or close modal" />
|
||||
|
|
@ -155,5 +42,3 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Scripts />
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import npmDownloadsInfo from "$lib/json/npm-downloads.json"
|
|||
import contributors1 from "$lib/json/github-contributors-1.json"
|
||||
import contributors2 from "$lib/json/github-contributors-2.json"
|
||||
import openCollectiveBackers from "$lib/json/opencollective-members.json"
|
||||
import { tweets } from "@src/lib/testimonials.js"
|
||||
import { siteStats } from "@src/lib/data.js"
|
||||
import { tweets } from "$lib/testimonials.js"
|
||||
import { stats } from "$lib/data/stats.js"
|
||||
|
||||
let stargazers_count = 25000
|
||||
let npmInstalls = 8000000
|
||||
|
|
@ -43,6 +43,6 @@ export async function load() {
|
|||
contributors,
|
||||
backers,
|
||||
tweets,
|
||||
siteStats,
|
||||
stats,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import Countup from "svelte-countup"
|
||||
import SEO from "@components/SEO.svelte"
|
||||
import Ads from "@components/Ads.svelte"
|
||||
import HomepageInstall from "@components/homepage/Install.svelte"
|
||||
import Footer from "@components/Footer.svelte"
|
||||
import { t } from "@src/lib/i18n"
|
||||
import SEO from "$components/SEO.svelte"
|
||||
import Ads from "$components/Ads.svelte"
|
||||
import HomepageInstall from "$components/homepage/Install.svelte"
|
||||
import Footer from "$components/Footer.svelte"
|
||||
import { t } from "$lib/i18n"
|
||||
|
||||
// import ComponentsPreview from "@components/homepage/ComponentsPreview.svelte"
|
||||
// import ComponentsPreview from "$components/homepage/ComponentsPreview.svelte"
|
||||
let ComponentsPreview
|
||||
// const sleep = (ms) => new Promise((f) => setTimeout(f, ms))
|
||||
onMount(async () => {
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
bind:this={section["hero"]}>
|
||||
<div class="shrink xl:w-1/2">
|
||||
<div
|
||||
class="flex min-h-[calc(100vh-4rem)] items-center justify-center px-2 py-10 text-center xl:justify-start xl:pl-10 xl:pr-0 xl:text-left"
|
||||
class="flex min-h-[calc(100vh-4rem)] items-center justify-center px-2 py-10 text-center xl:justify-start xl:pe-0 xl:ps-10 xl:text-start"
|
||||
class:invisible={section["hero"] && scrollY > section["hero"].clientHeight}>
|
||||
<div>
|
||||
<div class="flex flex-col items-center gap-6 xl:flex-row">
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
data-tip={isClipboardButtonPressed ? "copied" : "copy"}
|
||||
class="tooltip tooltip-accent">
|
||||
<button
|
||||
class="btn btn-sm cursor-copy rounded-full font-mono font-light normal-case"
|
||||
class="btn btn-sm cursor-copy rounded-full font-mono font-light"
|
||||
on:click={() => copyText("npm i -D daisyui@latest")}>
|
||||
<pre><code>npm i -D daisyui</code></pre>
|
||||
</button>
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
</div>
|
||||
<div class="h-4" />
|
||||
<h1
|
||||
class="font-title text-center text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
|
||||
class="font-title text-center text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-start [:root[dir=rtl]_&]:leading-[1.35]">
|
||||
<span
|
||||
class="[&::selection]:text-base-content brightness-150 contrast-150 [&::selection]:bg-blue-700/20">
|
||||
{@html $t("The most popular")}
|
||||
|
|
@ -154,12 +154,12 @@
|
|||
<br />
|
||||
<span class="inline-grid">
|
||||
<span
|
||||
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text opacity-70 blur-3xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)]"
|
||||
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text blur-2xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
|
||||
aria-hidden="true">
|
||||
{@html $t("component library")}
|
||||
</span>
|
||||
<span
|
||||
class="[&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)]">
|
||||
class="[&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]">
|
||||
{@html $t("component library")}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -182,14 +182,14 @@
|
|||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/components/"
|
||||
class="btn md:btn-lg md:btn-wide group px-12 normal-case">
|
||||
class="btn md:btn-lg md:btn-wide group px-12">
|
||||
<span class="hidden sm:inline">{$t("cta-1")}</span>
|
||||
<span class="inline sm:hidden">{$t("cta-1-mobile")}</span>
|
||||
</a>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/docs/install/"
|
||||
class="btn btn-neutral md:btn-lg md:btn-wide group px-12 normal-case">
|
||||
class="btn btn-neutral md:btn-lg md:btn-wide group px-12">
|
||||
{$t("cta-2")}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 md:inline-block">
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 md:inline-block">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
|
@ -211,15 +211,15 @@
|
|||
<div class="xl:h-[calc(20vh)]" />
|
||||
<div>
|
||||
<div class="max-w-[100vw] px-2 py-10 lg:px-10 xl:max-w-[50vw]">
|
||||
<div class="font-title text-center xl:text-left">
|
||||
<div class="font-title text-center xl:text-start">
|
||||
<h2 class="text-[clamp(2.5rem,6vw,4.5rem)] font-bold leading-none">
|
||||
{@html $t("don't re-invent<br/>the wheel<br/>every time")}
|
||||
<img
|
||||
loading="lazy"
|
||||
width="72"
|
||||
height="72"
|
||||
alt="yawing face"
|
||||
src="/images/emoji/yawning-face@72.webp"
|
||||
alt="yawing face emoji"
|
||||
src="/images/emoji/yawning-face@80.webp"
|
||||
srcset={`/images/emoji/yawning-face.webp 2x`}
|
||||
class="pointer-events-none inline-block h-[1em] w-[1em] align-bottom" />
|
||||
</h2>
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
loading="lazy"
|
||||
width="72"
|
||||
height="72"
|
||||
alt="yawing face"
|
||||
alt="sunglasses emoji"
|
||||
src="/images/emoji/smiling-face-with-sunglasses@80.webp"
|
||||
srcset={`/images/emoji/smiling-face-with-sunglasses.webp 2x`}
|
||||
class="pointer-events-none inline-block h-[1em] w-[1em] align-bottom" />
|
||||
|
|
@ -274,24 +274,28 @@
|
|||
<!-- hero figure -->
|
||||
|
||||
<div
|
||||
class="invisible sticky bottom-4 flex w-[calc(100%-2rem)] shrink duration-700 xl:visible xl:-right-32 xl:bottom-auto xl:top-16 xl:w-auto xl:!transform-none xl:overflow-x-hidden xl:overflow-y-clip xl:bg-transparent xl:pb-16 xl:pt-16"
|
||||
class="invisible sticky bottom-4 flex w-[calc(100%-2rem)] shrink duration-700 xl:visible xl:-end-32 xl:bottom-auto xl:top-16 xl:w-auto xl:!transform-none xl:overflow-x-hidden xl:overflow-y-clip xl:bg-transparent xl:pb-16 xl:pt-16"
|
||||
style={`${
|
||||
section["hero"] && scrollY > section["hero"].clientHeight * 0.2
|
||||
? "visibility: visible;"
|
||||
: ""
|
||||
}transform:translateY(${animateValue(section["hero"], [17, 25], [120, 0])}%)`}>
|
||||
<div
|
||||
class="mockup mockup-window bg-base-200/90 xl:bg-base-200 mx-auto origin-top overflow-visible pb-4 backdrop-blur will-change-auto [transform:rotateX(20deg)rotateZ(-20deg)skewY(8deg)scale(1)] max-[1280px]:![transform:translate3d(0,0,0)] xl:-right-20 xl:-mr-10 xl:h-[32rem] xl:w-[50rem] xl:rounded-r-none xl:pr-4 xl:shadow-[-0.05rem_0.1rem_0rem_#00000014] xl:backdrop-blur-0"
|
||||
class="mockup mockup-window bg-base-200/90 xl:bg-base-200 mx-auto origin-top overflow-visible pb-4 backdrop-blur will-change-auto [--rtl-reverse:1] [transform:rotateX(20deg)rotateZ(-20deg)skewY(8deg)scale(1)] rtl:[--rtl-reverse:-1] rtl:[transform:rotateX(20deg)rotateZ(20deg)skewY(-8deg)scale(1)] max-[1280px]:![transform:translate3d(0,0,0)] xl:-end-20 xl:-me-10 xl:h-[32rem] xl:w-[50rem] xl:rounded-e-none xl:pe-4 xl:shadow-[-0.05rem_0.1rem_0rem_#00000014] xl:backdrop-blur-0"
|
||||
style={section["hero"] &&
|
||||
`transform: rotateX(${animateValue(
|
||||
section["hero"],
|
||||
[7, 17],
|
||||
[20, 0]
|
||||
)}deg)rotateZ(${animateValue(section["hero"], [7, 17], [-20, 0])}deg)skewY(${animateValue(
|
||||
)}deg)rotateZ(calc(${animateValue(
|
||||
section["hero"],
|
||||
[7, 17],
|
||||
[-20, 0]
|
||||
)}deg * var(--rtl-reverse)))skewY(calc(${animateValue(
|
||||
section["hero"],
|
||||
[7, 17],
|
||||
[8, 0]
|
||||
)}deg)`}
|
||||
)}deg * var(--rtl-reverse)))`}
|
||||
class:invisible={section["hero"] && scrollY > section["hero"].clientHeight}>
|
||||
<div class="grid">
|
||||
<div
|
||||
|
|
@ -302,36 +306,40 @@
|
|||
class="col-start-1 row-start-1 mx-6 flex items-end gap-6 xl:mx-0 xl:items-start xl:gap-0">
|
||||
<div class="flex gap-6 xl:w-60 xl:flex-col xl:gap-0">
|
||||
<div
|
||||
class="relative z-[1] w-80 will-change-auto motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)] xl:-left-6 xl:w-auto xl:[filter:drop-shadow(-1rem_3rem_1rem_#00000012)]"
|
||||
style={`transform:translate(${animateValue(
|
||||
class="relative z-[1] w-80 will-change-auto motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)] xl:-start-6 xl:w-auto xl:[filter:drop-shadow(-1rem_3rem_1rem_#00000012)]"
|
||||
style={`filter: drop-shadow(calc(-1rem * var(--rtl-reverse)) 3rem 1rem #00000012);transform:translate(calc(${animateValue(
|
||||
section["hero"],
|
||||
[2, 9],
|
||||
[0, 250]
|
||||
)}px,${animateValue(section["hero"], [2, 9], [0, -800])}px)`}>
|
||||
<div class="tabs">
|
||||
)}px * var(--rtl-reverse)),${animateValue(
|
||||
section["hero"],
|
||||
[2, 9],
|
||||
[0, -800]
|
||||
)}px)`}>
|
||||
<div class="tabs tabs-lifted">
|
||||
<button
|
||||
on:click={() => (activeMenuItemOnHeroMockup = 1)}
|
||||
class:tab-active={activeMenuItemOnHeroMockup === 1}
|
||||
class="tab tab-lifted tab-border-none w-1/3 grow whitespace-nowrap text-xs">
|
||||
class="tab tab-border-none whitespace-nowrap text-xs">
|
||||
{$t("Features")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => (activeMenuItemOnHeroMockup = 2)}
|
||||
class:tab-active={activeMenuItemOnHeroMockup === 2}
|
||||
class="tab tab-lifted tab-border-none w-1/3 grow whitespace-nowrap text-xs">
|
||||
class="tab tab-border-none whitespace-nowrap text-xs">
|
||||
{$t("Links")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => (activeMenuItemOnHeroMockup = 3)}
|
||||
class:tab-active={activeMenuItemOnHeroMockup === 3}
|
||||
class="tab tab-lifted tab-border-none w-1/3 grow whitespace-nowrap text-xs">
|
||||
class="tab tab-border-none whitespace-nowrap text-xs">
|
||||
{$t("Message")}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="bg-base-100 rounded-b-box h-60 shrink-0"
|
||||
class:rounded-tr-box={activeMenuItemOnHeroMockup !== 3}
|
||||
class:rounded-tl-box={activeMenuItemOnHeroMockup !== 1}>
|
||||
class:rounded-se-box={activeMenuItemOnHeroMockup !== 3}
|
||||
class:rounded-ss-box={activeMenuItemOnHeroMockup !== 1}>
|
||||
{#if activeMenuItemOnHeroMockup === 1}
|
||||
<div class="flex flex-col items-stretch p-6">
|
||||
<div class="form-control">
|
||||
|
|
@ -470,7 +478,8 @@
|
|||
alt="tailwind css avatar component" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-bubble text-xs [.chat_&]:before:[left:-0.73rem]">
|
||||
<div
|
||||
class="chat-bubble text-xs [.chat_&]:before:[inset-inline-start:-0.73rem]">
|
||||
{$t("Use Tailwind CSS but write fewer class names.")}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -498,20 +507,28 @@
|
|||
<div
|
||||
class="flex w-60 flex-col justify-end gap-4 xl:w-auto xl:justify-normal xl:p-6">
|
||||
<div
|
||||
class="alert border-base-300 border will-change-auto motion-reduce:!transform-none motion-reduce:!shadow-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`box-shadow:${animateValue(
|
||||
class="alert rounded-btn border-base-300 border will-change-auto motion-reduce:!transform-none motion-reduce:!shadow-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`box-shadow:calc(${animateValue(
|
||||
section["hero"],
|
||||
[5, 5.5],
|
||||
[0, -1]
|
||||
)}rem ${animateValue(section["hero"], [5, 5.5], [0, 3])}rem ${animateValue(
|
||||
)}rem * var(--rtl-reverse)) ${animateValue(
|
||||
section["hero"],
|
||||
[5, 5.5],
|
||||
[0, 3]
|
||||
)}rem ${animateValue(
|
||||
section["hero"],
|
||||
[5, 5.5],
|
||||
[0, 1]
|
||||
)}rem #00000012;transform:translate(${animateValue(
|
||||
)}rem #00000012;transform:translate(calc(${animateValue(
|
||||
section["hero"],
|
||||
[5, 15],
|
||||
[0, 250]
|
||||
)}px,${animateValue(section["hero"], [5, 15], [0, -800])}px)`}>
|
||||
)}px * var(--rtl-reverse)),${animateValue(
|
||||
section["hero"],
|
||||
[5, 15],
|
||||
[0, -800]
|
||||
)}px)`}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
|
|
@ -527,20 +544,28 @@
|
|||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="alert border-base-300 border will-change-auto motion-reduce:!transform-none motion-reduce:!shadow-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`box-shadow:${animateValue(
|
||||
class="alert rounded-btn border-base-300 border will-change-auto motion-reduce:!transform-none motion-reduce:!shadow-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`box-shadow:calc(${animateValue(
|
||||
section["hero"],
|
||||
[6, 6.5],
|
||||
[0, -1]
|
||||
)}rem ${animateValue(section["hero"], [6, 6.5], [0, 3])}rem ${animateValue(
|
||||
)}rem * var(--rtl-reverse)) ${animateValue(
|
||||
section["hero"],
|
||||
[6, 6.5],
|
||||
[0, 3]
|
||||
)}rem ${animateValue(
|
||||
section["hero"],
|
||||
[6, 6.5],
|
||||
[0, 1]
|
||||
)}rem #00000012;transform:translate(${animateValue(
|
||||
)}rem #00000012;transform:translate(calc(${animateValue(
|
||||
section["hero"],
|
||||
[6, 16],
|
||||
[0, 250]
|
||||
)}px,${animateValue(section["hero"], [6, 16], [0, -800])}px)`}>
|
||||
)}px * var(--rtl-reverse)),${animateValue(
|
||||
section["hero"],
|
||||
[6, 16],
|
||||
[0, -800]
|
||||
)}px)`}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
|
|
@ -556,22 +581,30 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex shrink-0 gap-6 pr-4 xl:flex-col xl:pr-0">
|
||||
<div class="flex shrink-0 gap-6 pe-4 xl:flex-col xl:pe-0">
|
||||
<div
|
||||
class="card bg-base-100 shadow-sm will-change-auto motion-reduce:!transform-none motion-reduce:!shadow-sm max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), ${animateValue(
|
||||
style={`--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), calc(${animateValue(
|
||||
section["hero"],
|
||||
[0, 0.5],
|
||||
[0, -1]
|
||||
)}rem ${animateValue(section["hero"], [0, 0.5], [0, 3])}rem ${animateValue(
|
||||
)}rem * var(--rtl-reverse)) ${animateValue(
|
||||
section["hero"],
|
||||
[0, 0.5],
|
||||
[0, 3]
|
||||
)}rem ${animateValue(
|
||||
section["hero"],
|
||||
[0, 0.5],
|
||||
[0, 1]
|
||||
)}rem #00000012;transform:translate(${animateValue(
|
||||
)}rem #00000012;transform:translate(calc(${animateValue(
|
||||
section["hero"],
|
||||
[0, 8],
|
||||
[0, 250]
|
||||
)}px,${animateValue(section["hero"], [0, 8], [0, -800])}px)`}>
|
||||
)}px * var(--rtl-reverse)),${animateValue(
|
||||
section["hero"],
|
||||
[0, 8],
|
||||
[0, -800]
|
||||
)}px)`}>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4 text-sm">{$t("Design system")}</h2>
|
||||
<div class="grid grid-cols-4 items-end gap-4">
|
||||
|
|
@ -630,19 +663,27 @@
|
|||
</div>
|
||||
<div
|
||||
class="card bg-base-100 shadow-sm will-change-auto motion-reduce:!transform-none motion-reduce:!shadow-sm max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), ${animateValue(
|
||||
style={`--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), calc(${animateValue(
|
||||
section["hero"],
|
||||
[4, 4.5],
|
||||
[0, -1]
|
||||
)}rem ${animateValue(section["hero"], [4, 4.5], [0, 3])}rem ${animateValue(
|
||||
)}rem * var(--rtl-reverse)) ${animateValue(
|
||||
section["hero"],
|
||||
[4, 4.5],
|
||||
[0, 3]
|
||||
)}rem ${animateValue(
|
||||
section["hero"],
|
||||
[4, 4.5],
|
||||
[0, 1]
|
||||
)}rem #00000012;transform:translate(${animateValue(
|
||||
)}rem #00000012;transform:translate(calc(${animateValue(
|
||||
section["hero"],
|
||||
[4, 10],
|
||||
[0, 250]
|
||||
)}px,${animateValue(section["hero"], [4, 10], [0, -800])}px)`}>
|
||||
)}px * var(--rtl-reverse)),${animateValue(
|
||||
section["hero"],
|
||||
[4, 10],
|
||||
[0, -800]
|
||||
)}px)`}>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4 text-sm">Semantic colors</h2>
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
|
|
@ -685,7 +726,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-start-1 row-start-1 w-11/12 px-6 pb-3 opacity-0 sm:px-10 sm:pb-10 xl:pt-10"
|
||||
dir="ltr"
|
||||
class="col-start-1 row-start-1 w-11/12 pb-3 pe-10 ps-10 opacity-0 rtl:ps-0 sm:pb-10 lg:pe-4 rtl:lg:ps-20 xl:ps-20 xl:pt-10"
|
||||
style={`opacity:${animateValue(
|
||||
section["hero"],
|
||||
[16, 17],
|
||||
|
|
@ -723,7 +765,7 @@
|
|||
{$t("Take Tailwind CSS")}
|
||||
<br />
|
||||
<span
|
||||
class="bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text will-change-auto [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] motion-reduce:!tracking-normal max-[1280px]:!tracking-normal [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)]"
|
||||
class="bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text will-change-auto [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] motion-reduce:!tracking-normal max-[1280px]:!tracking-normal [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
|
||||
style={`letter-spacing:${animateValue(section["nextlevel"], [-100, 20], [0, 1])}rem`}>
|
||||
{$t("to the next level")}
|
||||
</span>
|
||||
|
|
@ -804,10 +846,10 @@
|
|||
)}
|
||||
</p>
|
||||
<div class="h-4" />
|
||||
<div class="text-base-content/40 mx-auto w-72 text-left">
|
||||
<div class="text-base-content/40 mx-auto w-72 text-start">
|
||||
<span class="inline-block -translate-y-2 -rotate-12">{$t("Click")}</span>
|
||||
<svg
|
||||
class="inline-block h-8 w-20"
|
||||
class="inline-block h-8 w-20 rtl:[transform:rotateY(180deg)]"
|
||||
viewBox="0 0 45 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
@ -821,7 +863,7 @@
|
|||
{$t("Tailwind only")}
|
||||
<div class="relative">
|
||||
<div
|
||||
class="pointer-events-none absolute left-1/2 top-1/2 grid h-20 w-60 -translate-x-1/2 -translate-y-1/2">
|
||||
class="pointer-events-none absolute start-1/2 top-1/2 grid h-20 w-60 -translate-x-1/2 -translate-y-1/2">
|
||||
<div
|
||||
class="bg-primary/30 col-start-1 row-start-1 scale-[2] rounded-full blur-[5rem] [transform:translate3d(0,0,0)]" />
|
||||
</div>
|
||||
|
|
@ -862,7 +904,7 @@
|
|||
</div></pre>
|
||||
</div>
|
||||
<div class="divider xl:divider-horizontal">
|
||||
<span class="hidden xl:inline">→</span>
|
||||
<span class="hidden rtl:rotate-180 xl:inline">→</span>
|
||||
<span class="xl:hidden">↓</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -900,7 +942,7 @@
|
|||
<input type="checkbox" class="<span
|
||||
class="text-amber-600">peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2</span>" />
|
||||
<span class="<span
|
||||
class="text-amber-600">pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900</span>"></span>
|
||||
class="text-amber-600">pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900</span>"></span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="<span
|
||||
|
|
@ -910,7 +952,7 @@
|
|||
<input type="checkbox" class="<span
|
||||
class="text-amber-600">peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2</span>" />
|
||||
<span class="<span
|
||||
class="text-amber-600">pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900</span>"></span>
|
||||
class="text-amber-600">pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900</span>"></span>
|
||||
</div>
|
||||
</label>
|
||||
<button class="<span
|
||||
|
|
@ -921,7 +963,7 @@
|
|||
</div></pre>
|
||||
</div>
|
||||
<div class="divider xl:divider-horizontal">
|
||||
<span class="hidden xl:inline">→</span>
|
||||
<span class="hidden rtl:rotate-180 xl:inline">→</span>
|
||||
<span class="xl:hidden">↓</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -939,7 +981,7 @@
|
|||
type="checkbox"
|
||||
class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
|
||||
<span
|
||||
class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900" />
|
||||
class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900" />
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex cursor-pointer items-center justify-between p-1">
|
||||
|
|
@ -950,7 +992,7 @@
|
|||
name="sample-checkbox"
|
||||
class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
|
||||
<span
|
||||
class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900" />
|
||||
class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900" />
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
|
|
@ -973,11 +1015,11 @@
|
|||
class="relative flex flex-col items-center justify-center gap-10 px-4 md:px-10 xl:flex-row-reverse xl:gap-20">
|
||||
<div>
|
||||
<div
|
||||
class="bg-primary pointer-events-none absolute left-20 aspect-square w-96 rounded-full opacity-20 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
class="bg-primary pointer-events-none absolute start-20 aspect-square w-96 rounded-full opacity-20 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
<div
|
||||
class="bg-success pointer-events-none absolute aspect-square w-full rounded-full opacity-10 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
<h2
|
||||
class="font-title text-center text-[clamp(2rem,8vw,4rem)] font-black leading-none xl:text-left">
|
||||
class="font-title text-center text-[clamp(2rem,8vw,4rem)] font-black leading-none xl:text-start">
|
||||
<span
|
||||
class="motion-reduce:!opacity-100"
|
||||
style={`opacity:${
|
||||
|
|
@ -1009,7 +1051,7 @@
|
|||
</span>
|
||||
</h2>
|
||||
<div class="h-10" />
|
||||
<p class="text-base-content/60 font-title text-center font-light md:text-3xl xl:text-left">
|
||||
<p class="text-base-content/60 font-title text-center font-light md:text-3xl xl:text-start">
|
||||
{@html $t(
|
||||
"With daisyUI, you write 80% fewer class names<br />And your HTML size will be about 70% smaller."
|
||||
)}
|
||||
|
|
@ -1027,7 +1069,7 @@
|
|||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 md:inline-block">
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 md:inline-block">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
|
@ -1129,40 +1171,40 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="bg-neutral from-neutral to-neutral-focus text-neutral-content relative flex min-h-[100vh] max-w-[100vw] items-center justify-center overflow-hidden bg-gradient-to-br p-10 md:p-20"
|
||||
class="bg-neutral text-neutral-content relative flex min-h-[100vh] max-w-[100vw] items-center justify-center overflow-hidden p-10 md:p-20"
|
||||
bind:this={section["customizable"]}>
|
||||
<div
|
||||
class="relative flex max-w-[100rem] flex-col items-center justify-center xl:flex-row xl:gap-20">
|
||||
<div class="relative z-[1] w-full py-10">
|
||||
<h2 class="font-title text-center font-black leading-none xl:text-left">
|
||||
<h2 class="font-title text-center font-black leading-none xl:text-start">
|
||||
<span
|
||||
class="inline-block text-[clamp(2rem,8vw,3.6rem)] font-black will-change-auto motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`transform:translateX(${animateValue(
|
||||
class="inline-block text-[clamp(2rem,8vw,3.6rem)] font-black will-change-auto [--rtl-reverse:1] rtl:[--rtl-reverse:-1] motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`transform:translateX(calc(${animateValue(
|
||||
section["customizable"],
|
||||
[-100, 100],
|
||||
[10, 0]
|
||||
)}rem)`}>
|
||||
)}rem * var(--rtl-reverse)))`}>
|
||||
{@html $t("Highly customizable")}
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="inline-block text-[clamp(2rem,8vw,3rem)] font-light will-change-auto motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`transform:translateX(${animateValue(
|
||||
class="inline-block text-[clamp(2rem,8vw,3rem)] font-light will-change-auto [--rtl-reverse:1] rtl:[--rtl-reverse:-1] motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)]"
|
||||
style={`transform:translateX(calc(${animateValue(
|
||||
section["customizable"],
|
||||
[-100, 100],
|
||||
[0, 8]
|
||||
)}rem)`}>
|
||||
)}rem * var(--rtl-reverse)))`}>
|
||||
{@html $t("Powered by Tailwind CSS utility classes")}
|
||||
</span>
|
||||
</h2>
|
||||
<div class="h-10" />
|
||||
<p
|
||||
class="text-neutral-content/60 font-title inline-block w-full text-center font-light will-change-auto motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)] md:text-2xl xl:text-left"
|
||||
style={`transform:translateX(${animateValue(
|
||||
class="text-neutral-content/60 font-title inline-block w-full text-center font-light will-change-auto [--rtl-reverse:1] [text-wrap:balance] rtl:[--rtl-reverse:-1] motion-reduce:!transform-none max-[1280px]:![transform:translate3d(0,0,0)] md:text-2xl xl:text-start"
|
||||
style={`transform:translateX(calc(${animateValue(
|
||||
section["customizable"],
|
||||
[-100, 100],
|
||||
[10, 2]
|
||||
)}rem)`}>
|
||||
)}rem * var(--rtl-reverse)))`}>
|
||||
{@html $t(
|
||||
"daisyUI is built on top of Tailwind CSS so you can customize everything using utility classes."
|
||||
)}
|
||||
|
|
@ -1172,7 +1214,7 @@
|
|||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/docs/customize"
|
||||
class="btn btn-lg btn-wide group normal-case">
|
||||
class="btn btn-lg btn-wide group">
|
||||
{$t("how-to-customize")}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -1180,7 +1222,7 @@
|
|||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 md:inline-block">
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 md:inline-block">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
|
@ -1190,11 +1232,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="mockup-code bg-neutral-focus mx-auto w-full max-w-xs text-left sm:max-w-none">
|
||||
<div class="mockup-code mx-auto w-full max-w-xs bg-black/20 text-start sm:max-w-none">
|
||||
<pre><code><a class="<span>btn btn-primary</span>">Button</a></code></pre>
|
||||
</div>
|
||||
<div class="divider text-neutral-content text-opacity-30">↓</div>
|
||||
<div class="mockup-code bg-neutral-focus mx-auto w-full max-w-xs text-left sm:max-w-none">
|
||||
<div class="mockup-code mx-auto w-full max-w-xs bg-black/20 text-start sm:max-w-none">
|
||||
<pre><code><a class="<span>btn btn-primary</span> <span
|
||||
class="text-teal-500">rounded-full</span>">Button</a></code></pre>
|
||||
</div>
|
||||
|
|
@ -1206,15 +1248,15 @@
|
|||
class="from-base-100 to-base-300 relative flex min-h-[100vh] items-center justify-center bg-gradient-to-t py-16"
|
||||
bind:this={section["agnostic"]}>
|
||||
<div
|
||||
class="bg-warning right-1/5 pointer-events-none absolute -top-full aspect-square w-full -translate-x-1/2 rounded-full opacity-5 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
class="bg-warning end-1/5 pointer-events-none absolute -top-full aspect-square w-full -translate-x-1/2 rounded-full opacity-5 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
<div
|
||||
class="bg-base-content top-1/5 pointer-events-none absolute -left-40 aspect-square w-2/3 rounded-full border-2 opacity-5 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
class="bg-base-content top-1/5 pointer-events-none absolute -start-40 aspect-square w-2/3 rounded-full border-2 opacity-5 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
<div
|
||||
class="bg-info pointer-events-none absolute left-0 top-1/2 aspect-square w-1/2 -translate-y-1/2 rounded-full opacity-5 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
class="bg-info pointer-events-none absolute start-0 top-1/2 aspect-square w-1/2 -translate-y-1/2 rounded-full opacity-5 blur-3xl [transform:translate3d(0,0,0)]" />
|
||||
<div
|
||||
class="flex max-w-[100rem] flex-col-reverse items-center justify-center gap-10 p-4 md:gap-20 md:p-20 xl:flex-row-reverse">
|
||||
<div>
|
||||
<h2 class="font-title text-center leading-none xl:text-left">
|
||||
<h2 class="font-title text-center leading-none xl:text-start">
|
||||
<span class="text-[clamp(2rem,8vw,4rem)] font-black">{$t("Pure CSS.")}</span>
|
||||
<br />
|
||||
<span class="text-[clamp(2rem,8vw,4rem)] font-black">{$t("Framework agnostic.")}</span>
|
||||
|
|
@ -1223,13 +1265,13 @@
|
|||
</h2>
|
||||
<div class="h-10" />
|
||||
<p
|
||||
class="text-base-content/60 font-title mb-6 text-center font-light md:text-3xl xl:text-left">
|
||||
class="text-base-content/60 font-title mb-6 text-center font-light md:text-3xl xl:text-start">
|
||||
{@html $t(
|
||||
"daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file."
|
||||
)}
|
||||
</p>
|
||||
<p
|
||||
class="text-base-content/60 font-title mb-6 text-center font-light md:text-3xl xl:text-left">
|
||||
class="text-base-content/60 font-title mb-6 text-center font-light md:text-3xl xl:text-start">
|
||||
{@html $t(
|
||||
"Install daisyUI as a dev dependency and use the class names just like any other Tailwind CSS class name."
|
||||
)}
|
||||
|
|
@ -1239,7 +1281,7 @@
|
|||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/docs/install/"
|
||||
class="btn btn-lg btn-wide group normal-case">
|
||||
class="btn btn-lg btn-wide group">
|
||||
{$t("cta-2")}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -1247,7 +1289,7 @@
|
|||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 md:inline-block">
|
||||
class="hidden h-6 w-6 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 md:inline-block">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
|
@ -1292,10 +1334,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-h-[600vh] py-20" bind:this={section["themes"]}>
|
||||
<div class="min-h-[320vh] py-20" bind:this={section["themes"]}>
|
||||
<div
|
||||
class="sticky top-[calc(50vh-10rem)] mx-auto grid w-[calc(100%-2rem)] max-w-[85rem] overflow-hidden rounded-2xl sm:top-20">
|
||||
{#each ["light", "valentine", "cyberpunk", "cupcake", "retro", "synthwave", "business", "dracula", "luxury", "night"] as currentTheme, index}
|
||||
{#each ["light", "valentine", "cyberpunk", "cupcake", "retro", "synthwave", "luxury", "night"] as currentTheme, index}
|
||||
<div
|
||||
class="col-start-1 row-start-1 flex items-start [transform:translate3d(0,0,0)]"
|
||||
data-theme={currentTheme}
|
||||
|
|
@ -1383,13 +1425,10 @@
|
|||
</p>
|
||||
<div class="h-10" />
|
||||
<div class="flex w-full flex-col justify-center gap-4 md:flex-row">
|
||||
<a data-sveltekit-preload-data="hover" href="/theme-generator/" class="btn normal-case">
|
||||
<a data-sveltekit-preload-data="hover" href="/theme-generator/" class="btn">
|
||||
{$t("Theme Generator")}
|
||||
</a>
|
||||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
href="/docs/themes/#-4"
|
||||
class="btn btn-neutral normal-case">
|
||||
<a data-sveltekit-preload-data="hover" href="/docs/themes/#-4" class="btn btn-neutral">
|
||||
{$t("Learn more about themes")}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1409,7 +1448,7 @@
|
|||
? 0.1
|
||||
: Math.trunc(animateValue(section["possibilities"], [-30, -20], [0, 1]))
|
||||
}`}>
|
||||
{data.siteStats.components}
|
||||
{data.stats.components}
|
||||
{$t("components")}
|
||||
</span>
|
||||
<br />
|
||||
|
|
@ -1420,13 +1459,14 @@
|
|||
? 0.1
|
||||
: Math.trunc(animateValue(section["possibilities"], [-20, -10], [0, 1]))
|
||||
}`}>
|
||||
500+ {$t("utility classes")}
|
||||
{data.stats.utilities}
|
||||
{$t("utility classes")}
|
||||
</span>
|
||||
<br />
|
||||
<span class="inline-grid">
|
||||
{#if Math.trunc(animateValue(section["possibilities"], [-10, 0], [0, 1])) !== 0}
|
||||
<span
|
||||
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text opacity-70 blur-3xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)]"
|
||||
class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text opacity-70 blur-3xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [:root[dir=rtl]_&]:leading-[1.35] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
|
||||
aria-hidden="true">
|
||||
{$t("endless possibilities")}
|
||||
</span>
|
||||
|
|
@ -1439,8 +1479,8 @@
|
|||
}`}
|
||||
class={`[&::selection]:text-base-content relative col-start-1 row-start-1 leading-tight motion-reduce:!opacity-100 [&::selection]:bg-blue-700/20 ${
|
||||
Math.trunc(animateValue(section["possibilities"], [-10, 0], [0, 1])) !== 0
|
||||
? "bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)]"
|
||||
: "motion-reduce:!bg-[linear-gradient(90deg,hsl(var(--s))_0%,hsl(var(--sf))_9%,hsl(var(--pf))_42%,hsl(var(--p))_47%,hsl(var(--a))_100%)] motion-reduce:!bg-clip-text motion-reduce:![-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:motion-reduce:!bg-[linear-gradient(90deg,hsl(var(--s))_4%,color-mix(in_oklch,hsl(var(--sf)),hsl(var(--pf)))_22%,hsl(var(--p))_45%,color-mix(in_oklch,hsl(var(--p)),hsl(var(--a)))_67%,hsl(var(--a))_100.2%)]"
|
||||
? "bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
|
||||
: "motion-reduce:!bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] motion-reduce:!bg-clip-text motion-reduce:![-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:motion-reduce:!bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
|
||||
}`}>
|
||||
{$t("endless possibilities")}
|
||||
</span>
|
||||
|
|
@ -1546,7 +1586,7 @@
|
|||
<div
|
||||
class="mx-auto grid max-w-5xl grid-cols-1 gap-6 px-10 md:grid-cols-2 lg:grid-cols-3 lg:[&>*:nth-child(3n-1)]:translate-y-16">
|
||||
{#each data.tweets as tweet, index}
|
||||
<div class="card border-base-content/5 card-compact border text-left">
|
||||
<div class="card border-base-content/5 card-compact border text-start">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar">
|
||||
|
|
@ -1576,7 +1616,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 py-40 lg:px-10">
|
||||
<div class="w-full overflow-hidden px-2 py-40 lg:px-10">
|
||||
<div class="text-center">
|
||||
<div class="h-6" />
|
||||
<div>
|
||||
|
|
@ -1584,7 +1624,7 @@
|
|||
loading="lazy"
|
||||
width="80"
|
||||
height="80"
|
||||
alt="yawing face"
|
||||
alt="heart emoji"
|
||||
src="/images/emoji/heart-on-fire@80.webp"
|
||||
srcset={`/images/emoji/heart-on-fire.webp 2x`}
|
||||
class="pointer-events-none inline-block h-20 w-20 align-bottom" />
|
||||
|
|
@ -1658,8 +1698,8 @@
|
|||
<div class="avatar placeholder">
|
||||
<div
|
||||
class="mask mask-squircle w-8 text-black"
|
||||
style={`background-color:hsl(${Math.floor(Math.random() * 360)}, 15%, 80%)`}>
|
||||
<span class="font-mono text-xs uppercase">
|
||||
style={`background-color:hsl(${Math.floor(Math.random() * 360)} 10% 80%)`}>
|
||||
<span class="select-none font-mono text-xs uppercase">
|
||||
{backer.name
|
||||
.split(" ")
|
||||
.map((n, i, arr) => (i === 0 || i === arr.length - 1 ? n[0] : ""))
|
||||
|
|
@ -1739,11 +1779,7 @@
|
|||
<div class="h-10" />
|
||||
<div class="flex w-full flex-col items-center justify-center gap-2 md:flex-row">
|
||||
<span class="text-base-content/60">{$t("Or play with daisyUI on")}:</span>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener, noreferrer"
|
||||
href="/codepen"
|
||||
class="btn-ghost btn-sm btn normal-case">
|
||||
<a target="_blank" rel="noopener, noreferrer" href="/codepen" class="btn-ghost btn-sm btn">
|
||||
<svg
|
||||
class="h-4 w-4 stroke-current"
|
||||
viewBox="0 0 64 64"
|
||||
|
|
@ -1760,7 +1796,7 @@
|
|||
</a>
|
||||
<a
|
||||
href="/tailwindplay"
|
||||
class="btn-ghost btn-sm btn normal-case"
|
||||
class="btn-ghost btn-sm btn"
|
||||
target="_blank"
|
||||
rel="noopener, noreferrer">
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@ layout: components
|
|||
---
|
||||
|
||||
<script>
|
||||
import Component from "@components/Component.svelte"
|
||||
import ClassTable from "@components/ClassTable.svelte"
|
||||
import Translate from "@components/Translate.svelte"
|
||||
import Component from "$components/Component.svelte"
|
||||
import ClassTable from "$components/ClassTable.svelte"
|
||||
import BrowserSupport from "$components/BrowserSupport.svelte"
|
||||
import Translate from "$components/Translate.svelte"
|
||||
import { prefix } from '$lib/stores';
|
||||
import { replace } from '$lib/actions';
|
||||
</script>
|
||||
|
|
@ -6,9 +6,10 @@ layout: components
|
|||
---
|
||||
|
||||
<script>
|
||||
import Component from "@components/Component.svelte"
|
||||
import ClassTable from "@components/ClassTable.svelte"
|
||||
import Translate from "@components/Translate.svelte"
|
||||
import Component from "$components/Component.svelte"
|
||||
import ClassTable from "$components/ClassTable.svelte"
|
||||
import BrowserSupport from "$components/BrowserSupport.svelte"
|
||||
import Translate from "$components/Translate.svelte"
|
||||
import { prefix } from '$lib/stores';
|
||||
import { replace } from '$lib/actions';
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
import SEO from "@components/SEO.svelte"
|
||||
import Translate from "@components/Translate.svelte"
|
||||
import Ads from "@components/Ads.svelte"
|
||||
import SEO from "$components/SEO.svelte"
|
||||
import Translate from "$components/Translate.svelte"
|
||||
import Ads from "$components/Ads.svelte"
|
||||
export let data
|
||||
let { components } = data
|
||||
</script>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue