rizzo-css 0.0.14 → 0.0.15
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 +10 -7
- package/package.json +1 -1
- 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/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 +1 -0
- package/scaffold/svelte-app/src/lib/rizzo-docs/CodeBlock.svelte +1 -1
- package/scaffold/vanilla/README.md +1 -1
- package/scaffold/vanilla/components/accordion.html +14 -0
- package/scaffold/vanilla/components/alert.html +14 -0
- package/scaffold/vanilla/components/avatar.html +14 -0
- package/scaffold/vanilla/components/badge.html +14 -0
- package/scaffold/vanilla/components/breadcrumb.html +14 -0
- package/scaffold/vanilla/components/button.html +14 -0
- package/scaffold/vanilla/components/cards.html +14 -0
- package/scaffold/vanilla/components/copy-to-clipboard.html +14 -0
- package/scaffold/vanilla/components/divider.html +14 -0
- package/scaffold/vanilla/components/dropdown.html +14 -0
- package/scaffold/vanilla/components/forms.html +14 -0
- package/scaffold/vanilla/components/icons.html +14 -0
- package/scaffold/vanilla/components/index.html +14 -0
- package/scaffold/vanilla/components/modal.html +14 -0
- package/scaffold/vanilla/components/navbar.html +14 -0
- package/scaffold/vanilla/components/pagination.html +14 -0
- package/scaffold/vanilla/components/progress-bar.html +14 -0
- package/scaffold/vanilla/components/search.html +14 -0
- package/scaffold/vanilla/components/settings.html +14 -0
- package/scaffold/vanilla/components/spinner.html +14 -0
- package/scaffold/vanilla/components/table.html +14 -0
- package/scaffold/vanilla/components/tabs.html +14 -0
- package/scaffold/vanilla/components/theme-switcher.html +14 -0
- package/scaffold/vanilla/components/toast.html +14 -0
- package/scaffold/vanilla/components/tooltip.html +14 -0
- package/scaffold/vanilla/index.html +14 -0
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Dropdown</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Forms</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Icons</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-6) 0; color: var(--text);">Component showcase</h1>
|
|
178
185
|
<p style="color: var(--text-dim); margin-bottom: var(--spacing-6);">Each page links to the full docs on the main site.</p>
|
|
@@ -213,6 +220,13 @@
|
|
|
213
220
|
|
|
214
221
|
|
|
215
222
|
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
|
|
216
230
|
<script src="../js/main.js"></script>
|
|
217
231
|
</body>
|
|
218
232
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Modal</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Navbar</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Pagination</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Progress Bar</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Search</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Settings</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Spinner</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Table</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Tabs</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Theme Switcher</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Toast</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<h1 style="font-size: var(--font-size-3xl); margin: 0 0 var(--spacing-4) 0; color: var(--text);">Tooltip</h1>
|
|
178
185
|
<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 +195,13 @@
|
|
|
188
195
|
|
|
189
196
|
|
|
190
197
|
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
191
205
|
<script src="../js/main.js"></script>
|
|
192
206
|
</body>
|
|
193
207
|
</html>
|
|
@@ -173,6 +173,13 @@
|
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
176
183
|
<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
184
|
<span class="badge badge--primary badge--sm mb-4">Vanilla JS + Rizzo CSS</span>
|
|
178
185
|
<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 +207,13 @@
|
|
|
200
207
|
|
|
201
208
|
|
|
202
209
|
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
203
217
|
<script src="js/main.js"></script>
|
|
204
218
|
</body>
|
|
205
219
|
</html>
|