rizzo-css 0.0.14 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/rizzo.min.css +12 -9
- package/package.json +1 -1
- package/scaffold/astro/ThemeIcon.astro +50 -0
- package/scaffold/astro-app/src/components/DocsSidebar.astro +51 -0
- package/scaffold/astro-app/src/components/Navbar.astro +45 -123
- package/scaffold/astro-app/src/components/ThemeIcon.astro +50 -0
- package/scaffold/astro-app/src/layouts/DocsLayout.astro +72 -13
- package/scaffold/astro-app/src/pages/components/navbar.astro +3 -3
- package/scaffold/astro-app/src/pages/components/theme-switcher.astro +2 -0
- package/scaffold/svelte/ThemeIcon.svelte +54 -0
- package/scaffold/svelte/index.ts +2 -0
- package/scaffold/svelte-app/src/lib/rizzo/ThemeIcon.svelte +54 -0
- package/scaffold/svelte-app/src/lib/rizzo/index.ts +2 -0
- package/scaffold/svelte-app/src/lib/rizzo-docs/CodeBlock.svelte +1 -1
- package/scaffold/svelte-app/src/lib/rizzo-docs/pages/ThemeSwitcherDoc.svelte +8 -0
- package/scaffold/vanilla/README.md +1 -1
- package/scaffold/vanilla/components/accordion.html +20 -0
- package/scaffold/vanilla/components/alert.html +20 -0
- package/scaffold/vanilla/components/avatar.html +20 -0
- package/scaffold/vanilla/components/badge.html +20 -0
- package/scaffold/vanilla/components/breadcrumb.html +20 -0
- package/scaffold/vanilla/components/button.html +20 -0
- package/scaffold/vanilla/components/cards.html +20 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +20 -0
- package/scaffold/vanilla/components/divider.html +20 -0
- package/scaffold/vanilla/components/dropdown.html +20 -0
- package/scaffold/vanilla/components/forms.html +20 -0
- package/scaffold/vanilla/components/icons.html +20 -0
- package/scaffold/vanilla/components/index.html +20 -0
- package/scaffold/vanilla/components/modal.html +20 -0
- package/scaffold/vanilla/components/navbar.html +20 -0
- package/scaffold/vanilla/components/pagination.html +20 -0
- package/scaffold/vanilla/components/progress-bar.html +20 -0
- package/scaffold/vanilla/components/search.html +20 -0
- package/scaffold/vanilla/components/settings.html +20 -0
- package/scaffold/vanilla/components/spinner.html +20 -0
- package/scaffold/vanilla/components/table.html +20 -0
- package/scaffold/vanilla/components/tabs.html +20 -0
- package/scaffold/vanilla/components/theme-switcher.html +20 -0
- package/scaffold/vanilla/components/toast.html +20 -0
- package/scaffold/vanilla/components/tooltip.html +20 -0
- package/scaffold/vanilla/index.html +20 -0
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Progress Bar</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Search</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Settings</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Spinner</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Table</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Tabs</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Theme Switcher</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Toast</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Tooltip</h1>
|
|
178
188
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-4);">Read the full docs for this component on the main site:</p>
|
|
@@ -188,6 +198,16 @@
|
|
|
188
198
|
|
|
189
199
|
|
|
190
200
|
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
191
211
|
<script src="../js/main.js"></script>
|
|
192
212
|
</body>
|
|
193
213
|
</html>
|
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
176
186
|
<main id="main-content" class="flex flex-col items-center justify-center text-center min-h-screen" style="padding: var(--spacing-12) var(--spacing-4); min-height: calc(100vh - 4rem);">
|
|
177
187
|
<span class="badge badge--primary badge--sm mb-4">Vanilla JS + Rizzo CSS</span>
|
|
178
188
|
<h1 style="font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--spacing-4) 0; color: var(--text);">Build something great</h1>
|
|
@@ -200,6 +210,16 @@
|
|
|
200
210
|
|
|
201
211
|
|
|
202
212
|
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
203
223
|
<script src="js/main.js"></script>
|
|
204
224
|
</body>
|
|
205
225
|
</html>
|