css-zero 0.0.17 → 0.0.18
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.
- checksums.yaml +4 -4
- data/README.md +3 -393
- data/app/assets/stylesheets/_reset.css +10 -21
- data/app/assets/stylesheets/typography.css +16 -4
- data/app/assets/stylesheets/zutilities.css +7 -15
- data/app/helpers/dialog_helper.rb +5 -0
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/USAGE +1 -1
- data/lib/generators/css_zero/add/resources.yml +5 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +7 -9
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +3 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +10 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +22 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css +33 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js +10 -2
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +4 -2
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e0160a1de6cec67785d5c12b68ab51a020dddf109aab5e76bb1dc1c15ca4c5d3
|
|
4
|
+
data.tar.gz: 60d34a2b612a22f5c8adfbe759a570ed507afaabd9192d3a5d34393384b49d9a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: df8b92602ece5cc374d5fd806a07c54a20c889de3e078e2c1f1322df0cf3eca85e6e10c6a9115d794fdf6aaa538c967e911cebfa1c6588af881f9faf48b161e1
|
|
7
|
+
data.tar.gz: 4bdfaf4732cf6d971d1fc28de2dc60e7c4bc7af3f128097573e61a1104d59e474a8f344d09731d4a523e40c2a9485c07671d62d17d128817bca37b0b221ec1f8
|
data/README.md
CHANGED
|
@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
|
|
|
19
19
|
Add only the components you need. (Optional)
|
|
20
20
|
|
|
21
21
|
```
|
|
22
|
-
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
|
|
22
|
+
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress switch table
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -89,399 +89,9 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
89
89
|
|
|
90
90
|
## Components
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
[<img src="https://github.com/user-attachments/assets/989b0ddd-064a-4ac6-8aee-f9eaaf07ff38">](https://css-zero-showcase.onrender.com/lookbook)
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<details>
|
|
97
|
-
<summary>Show me the code</summary>
|
|
98
|
-
|
|
99
|
-
```html+erb
|
|
100
|
-
<div class="accordion">
|
|
101
|
-
<details name="my_accordion">
|
|
102
|
-
<summary>Is it accessible?</summary>
|
|
103
|
-
<p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
|
|
104
|
-
</details>
|
|
105
|
-
<details name="my_accordion">
|
|
106
|
-
<summary>Is it styled?</summary>
|
|
107
|
-
<p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
|
|
108
|
-
</details>
|
|
109
|
-
<details name="my_accordion">
|
|
110
|
-
<summary>Is it animated?</summary>
|
|
111
|
-
<p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
|
|
112
|
-
</details>
|
|
113
|
-
</div>
|
|
114
|
-
```
|
|
115
|
-
</details>
|
|
116
|
-
|
|
117
|
-
### Alert
|
|
118
|
-
|
|
119
|
-
<img width="500" alt="alert" src="https://github.com/lazaronixon/css-zero/assets/2651240/eae5c6dd-f6b4-4c01-bec1-cd7e9523d0a6">
|
|
120
|
-
|
|
121
|
-
<details>
|
|
122
|
-
<summary>Show me the code</summary>
|
|
123
|
-
|
|
124
|
-
```html+erb
|
|
125
|
-
<div class="alert alert--negative flex items-start gap">
|
|
126
|
-
<%= image_tag("circle-alert.svg", role: "presentation", size: 16) %>
|
|
127
|
-
<div class="flex flex-col">
|
|
128
|
-
<h1 class="font-medium leading-none mbe-1">Error</h1>
|
|
129
|
-
<p class="text-sm">Your session has expired. Please log in again.</p>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
```
|
|
133
|
-
</details>
|
|
134
|
-
|
|
135
|
-
### Avatar
|
|
136
|
-
|
|
137
|
-
<details>
|
|
138
|
-
<summary>Show me the code</summary>
|
|
139
|
-
|
|
140
|
-
```html+erb
|
|
141
|
-
<div class="flex item-center gap">
|
|
142
|
-
<div class="avatar">
|
|
143
|
-
<%= image_tag "cartoon.jpg", role: "presentation", size: 48 %>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<div class="avatar">
|
|
147
|
-
<span class="avatar__fallback">CN</span>
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
150
|
-
```
|
|
151
|
-
</details>
|
|
152
|
-
|
|
153
|
-
### Badge
|
|
154
|
-
|
|
155
|
-
<img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
|
|
156
|
-
|
|
157
|
-
<details>
|
|
158
|
-
<summary>Show me the code</summary>
|
|
159
|
-
|
|
160
|
-
```html+erb
|
|
161
|
-
<div class="flex justify-start gap">
|
|
162
|
-
<div class="badge">Badge</div>
|
|
163
|
-
<div class="badge badge--secondary">Secondary</div>
|
|
164
|
-
<div class="badge badge--outline">Outline</div>
|
|
165
|
-
<div class="badge badge--positive">Positive</div>
|
|
166
|
-
<div class="badge badge--negative">Negative</div>
|
|
167
|
-
</div>
|
|
168
|
-
```
|
|
169
|
-
</details>
|
|
170
|
-
|
|
171
|
-
### Breadcrumb
|
|
172
|
-
|
|
173
|
-
<details>
|
|
174
|
-
<summary>Show me the code</summary>
|
|
175
|
-
|
|
176
|
-
```html+erb
|
|
177
|
-
<nav class="breadcrumb">
|
|
178
|
-
<a href="#">Home</a>
|
|
179
|
-
<%= image_tag "chevron-right.svg", size: 14 %>
|
|
180
|
-
<a href="#"><%= image_tag "ellipsis.svg", size: 14 %></a>
|
|
181
|
-
<%= image_tag "chevron-right.svg", size: 14 %>
|
|
182
|
-
<a href="#">Components</a>
|
|
183
|
-
<%= image_tag "chevron-right.svg", size: 14 %>
|
|
184
|
-
<a href="#" class="text-primary">Breadcrumb</a>
|
|
185
|
-
</nav>
|
|
186
|
-
```
|
|
187
|
-
</details>
|
|
188
|
-
|
|
189
|
-
### Button
|
|
190
|
-
|
|
191
|
-
<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
|
|
192
|
-
|
|
193
|
-
<details>
|
|
194
|
-
<summary>Show me the code</summary>
|
|
195
|
-
|
|
196
|
-
```html+erb
|
|
197
|
-
<div class="flex flex-wrap items-center gap" aria-busy>
|
|
198
|
-
<button class="btn">Primary</button>
|
|
199
|
-
<button class="btn btn--secondary">Secondary</button>
|
|
200
|
-
<button class="btn btn--outline">Outline</button>
|
|
201
|
-
<button class="btn btn--plain">Plain</button>
|
|
202
|
-
<button class="btn btn--positive">Positive</button>
|
|
203
|
-
<button class="btn btn--negative">Negative</button>
|
|
204
|
-
|
|
205
|
-
<button class="btn">
|
|
206
|
-
<%= image_tag "circle-plus.svg", role: "presentation", size: 16 %>
|
|
207
|
-
<span>With icon</span>
|
|
208
|
-
</button>
|
|
209
|
-
|
|
210
|
-
<button class="btn btn--loading" disabled>
|
|
211
|
-
<span>Please wait</span>
|
|
212
|
-
</button>
|
|
213
|
-
</div>
|
|
214
|
-
```
|
|
215
|
-
</details>
|
|
216
|
-
|
|
217
|
-
### Card
|
|
218
|
-
|
|
219
|
-
<img width="366" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/f4077b91-2d0c-49db-9fb6-2955f8575217">
|
|
220
|
-
|
|
221
|
-
<details>
|
|
222
|
-
<summary>Show me the code</summary>
|
|
223
|
-
|
|
224
|
-
```html+erb
|
|
225
|
-
<div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
|
|
226
|
-
<div class="flex flex-col gap-sm">
|
|
227
|
-
<h1 class="text-2xl font-semibold leading-none">Create project</h1>
|
|
228
|
-
<p class="text-sm text-subtle">Deploy your new project in one-click.</p>
|
|
229
|
-
</div>
|
|
230
|
-
|
|
231
|
-
<div class="flex flex-col gap">
|
|
232
|
-
<div class="flex flex-col gap-sm">
|
|
233
|
-
<label for="name" class="text-sm font-medium">Name</label>
|
|
234
|
-
<input type="text" id="name" placeholder="Name of your project" class="input">
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<div class="flex flex-col gap-sm">
|
|
238
|
-
<label for="framework" class="text-sm font-medium">Framework</label>
|
|
239
|
-
<select id="framework" class="input">
|
|
240
|
-
<option value="">Select</option>
|
|
241
|
-
<option value="rails">Ruby on Rails</option>
|
|
242
|
-
<option value="laravel">Laravel</option>
|
|
243
|
-
<option value="next">Next</option>
|
|
244
|
-
</select>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
|
|
248
|
-
<div class="flex justify-between">
|
|
249
|
-
<button class="btn btn--outline">Cancel</button>
|
|
250
|
-
<button class="btn">Destroy</button>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
```
|
|
254
|
-
</details>
|
|
255
|
-
|
|
256
|
-
### Collapsible
|
|
257
|
-
|
|
258
|
-
<details>
|
|
259
|
-
<summary>Show me the code</summary>
|
|
260
|
-
|
|
261
|
-
```html+erb
|
|
262
|
-
<div data-controller="collapsible" style="max-inline-size: 350px">
|
|
263
|
-
<div class="flex items-center justify-between gap pi-4 pb-3">
|
|
264
|
-
<h4 class="text-sm font-semibold">
|
|
265
|
-
@lazaronixon starred 3 repositories
|
|
266
|
-
</h4>
|
|
267
|
-
<button data-action="collapsible#toggle" class="btn btn--plain p-0">
|
|
268
|
-
<%= image_tag "chevrons-up-down.svg", size: 16 %>
|
|
269
|
-
<span class="sr-only">Toggle</span>
|
|
270
|
-
</button>
|
|
271
|
-
</div>
|
|
272
|
-
<div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
|
|
273
|
-
@rails/rails
|
|
274
|
-
</div>
|
|
275
|
-
<details>
|
|
276
|
-
<summary data-collapsible-target="summary" hidden></summary>
|
|
277
|
-
<div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
|
|
278
|
-
@rails/jbuilder
|
|
279
|
-
</div>
|
|
280
|
-
<div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
|
|
281
|
-
@rails/jsbundling-rails
|
|
282
|
-
</div>
|
|
283
|
-
</details>
|
|
284
|
-
</div>
|
|
285
|
-
```
|
|
286
|
-
</details>
|
|
287
|
-
|
|
288
|
-
### Dialog
|
|
289
|
-
|
|
290
|
-
#### Alert Dialog
|
|
291
|
-
|
|
292
|
-
<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
|
|
293
|
-
|
|
294
|
-
<details>
|
|
295
|
-
<summary>Show me the code</summary>
|
|
296
|
-
|
|
297
|
-
```html+erb
|
|
298
|
-
<div data-controller="dialog">
|
|
299
|
-
<dialog data-dialog-target="box" class="dialog">
|
|
300
|
-
<h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
|
|
301
|
-
<p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
|
|
302
|
-
|
|
303
|
-
<div class="flex justify-end gap-sm mbs-4">
|
|
304
|
-
<form method="dialog"><button class="btn btn--outline">Cancel</button></form>
|
|
305
|
-
<button class="btn btn--primary">Continue</button>
|
|
306
|
-
</div>
|
|
307
|
-
</dialog>
|
|
308
|
-
|
|
309
|
-
<button class="btn" data-action="dialog#showModal">
|
|
310
|
-
Show dialog
|
|
311
|
-
</button>
|
|
312
|
-
</div>
|
|
313
|
-
```
|
|
314
|
-
</details>
|
|
315
|
-
|
|
316
|
-
#### Dismissible Dialog
|
|
317
|
-
|
|
318
|
-
<img width="400" alt="dismissible_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
|
|
319
|
-
|
|
320
|
-
<details>
|
|
321
|
-
<summary>Show me the code</summary>
|
|
322
|
-
|
|
323
|
-
```html+erb
|
|
324
|
-
<div data-controller="dialog">
|
|
325
|
-
<dialog data-dialog-target="box" data-action="click->dialog#closeOnClickOutside" class="dialog" style="max-inline-size: 430px;">
|
|
326
|
-
<form method="dialog">
|
|
327
|
-
<button class="btn btn--plain p-0 dialog__close">
|
|
328
|
-
<%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
|
|
329
|
-
<span class="sr-only">Close</span>
|
|
330
|
-
</button>
|
|
331
|
-
</form>
|
|
332
|
-
|
|
333
|
-
<div class="flex flex-col gap">
|
|
334
|
-
<div class="flex flex-col gap-sm">
|
|
335
|
-
<h1 class="text-lg leading-none font-semibold">Edit profile</h1>
|
|
336
|
-
<p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p>
|
|
337
|
-
</div>
|
|
338
|
-
|
|
339
|
-
<div class="flex flex-col mb-4 gap">
|
|
340
|
-
<div class="grid grid-cols-4 items-center gap">
|
|
341
|
-
<label for="name" class="text-sm font-medium text-end">Name</label>
|
|
342
|
-
<input type="text" id="name" value="Lázaro Nixon" class="input col-span-3">
|
|
343
|
-
</div>
|
|
344
|
-
|
|
345
|
-
<div class="grid grid-cols-4 items-center gap">
|
|
346
|
-
<label for="username" class="text-sm font-medium text-end">Username</label>
|
|
347
|
-
<input type="text" id="username" value="@lazaronixon" class="input col-span-3">
|
|
348
|
-
</div>
|
|
349
|
-
</div>
|
|
350
|
-
|
|
351
|
-
<div class="flex items-center justify-end">
|
|
352
|
-
<input type="submit" value= "Save changes" class="btn"/>
|
|
353
|
-
</div>
|
|
354
|
-
</div>
|
|
355
|
-
</dialog>
|
|
356
|
-
|
|
357
|
-
<button class="btn" data-action="dialog#showModal">
|
|
358
|
-
Show dialog
|
|
359
|
-
</button>
|
|
360
|
-
</div>
|
|
361
|
-
```
|
|
362
|
-
</details>
|
|
363
|
-
|
|
364
|
-
### Input
|
|
365
|
-
|
|
366
|
-
<img width="500" alt="input" src="https://github.com/lazaronixon/css-zero/assets/2651240/f33a9d34-44b5-4c6b-ad88-1f0fd00b7291">
|
|
367
|
-
|
|
368
|
-
<details>
|
|
369
|
-
<summary>Show me the code</summary>
|
|
370
|
-
|
|
371
|
-
```html+erb
|
|
372
|
-
<%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
|
|
373
|
-
<div class="flex flex-col gap-sm">
|
|
374
|
-
<%= form.label :name, class: "text-sm font-medium" %>
|
|
375
|
-
<%= form.text_field :name, class: "input" %>
|
|
376
|
-
</div>
|
|
377
|
-
|
|
378
|
-
<div class="flex flex-col gap-sm">
|
|
379
|
-
<%= form.label :pick_a_date, class: "text-sm font-medium" %>
|
|
380
|
-
<%= form.date_field :pick_a_date, class: "input" %>
|
|
381
|
-
</div>
|
|
382
|
-
|
|
383
|
-
<div class="flex flex-col gap-sm">
|
|
384
|
-
<%= form.label :age_range, class: "text-sm font-medium" %>
|
|
385
|
-
<%= form.select :age_range, ["0-13", "14-17", "18-23"], {}, class: "input" %>
|
|
386
|
-
</div>
|
|
387
|
-
|
|
388
|
-
<div class="flex flex-col gap-sm">
|
|
389
|
-
<%= form.label :comment, class: "text-sm font-medium" %>
|
|
390
|
-
<%= form.text_area :comment, rows: 3, class: "input" %>
|
|
391
|
-
</div>
|
|
392
|
-
|
|
393
|
-
<div class="flex items-center gap-sm">
|
|
394
|
-
<%= form.check_box :status, class: "checkbox" %>
|
|
395
|
-
<%= form.label :status, "Send a copy to yourself", class: "text-sm font-medium" %>
|
|
396
|
-
</div>
|
|
397
|
-
<% end %>
|
|
398
|
-
```
|
|
399
|
-
</details>
|
|
400
|
-
|
|
401
|
-
### Progress
|
|
402
|
-
|
|
403
|
-
<img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
|
|
404
|
-
|
|
405
|
-
<details>
|
|
406
|
-
<summary>Show me the code</summary>
|
|
407
|
-
|
|
408
|
-
```html
|
|
409
|
-
<label>
|
|
410
|
-
<span class="sr-only">Loading progress</span>
|
|
411
|
-
<progress value="75" max="100" class="progress"></progress>
|
|
412
|
-
</label>
|
|
413
|
-
```
|
|
414
|
-
</details>
|
|
415
|
-
|
|
416
|
-
### Switch
|
|
417
|
-
|
|
418
|
-
<img width="175" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/b47e28fb-6492-402c-b422-b896dfd3b713">
|
|
419
|
-
|
|
420
|
-
<details>
|
|
421
|
-
<summary>Show me the code</summary>
|
|
422
|
-
|
|
423
|
-
```html+erb
|
|
424
|
-
<div class="flex items-center gap-sm">
|
|
425
|
-
<input type="checkbox" class="switch">
|
|
426
|
-
<label for="status" class="text-sm font-medium">Airplane Mode</label>
|
|
427
|
-
</div>
|
|
428
|
-
```
|
|
429
|
-
</details>
|
|
430
|
-
|
|
431
|
-
### Table
|
|
432
|
-
|
|
433
|
-
<img width="500" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/c7b261a8-6d38-46f2-bf69-fd9385776bbe">
|
|
434
|
-
|
|
435
|
-
<details>
|
|
436
|
-
<summary>Show me the code</summary>
|
|
437
|
-
|
|
438
|
-
```html+erb
|
|
439
|
-
<table class="table">
|
|
440
|
-
<thead>
|
|
441
|
-
<tr>
|
|
442
|
-
<th>Invoice</th>
|
|
443
|
-
<th>Status</th>
|
|
444
|
-
<th>Method</th>
|
|
445
|
-
<th class="text-end">Amount</th>
|
|
446
|
-
</tr>
|
|
447
|
-
</thead>
|
|
448
|
-
<tbody>
|
|
449
|
-
<tr>
|
|
450
|
-
<th>INV001</th>
|
|
451
|
-
<td>Paid</td>
|
|
452
|
-
<td>Credit Card</td>
|
|
453
|
-
<td class="text-end">$250.00</td>
|
|
454
|
-
</tr>
|
|
455
|
-
<tr>
|
|
456
|
-
<th>INV002</th>
|
|
457
|
-
<td>Pending</td>
|
|
458
|
-
<td>PayPal</td>
|
|
459
|
-
<td class="text-end">$150.00</td>
|
|
460
|
-
</tr>
|
|
461
|
-
<tr>
|
|
462
|
-
<th>INV003</th>
|
|
463
|
-
<td>Unpaid</td>
|
|
464
|
-
<td>Transfer</td>
|
|
465
|
-
<td class="text-end">$350.00</td>
|
|
466
|
-
</tr>
|
|
467
|
-
<tr>
|
|
468
|
-
<th>INV004</th>
|
|
469
|
-
<td>Paid</td>
|
|
470
|
-
<td>Credit Card</td>
|
|
471
|
-
<td class="text-end">$450.00</td>
|
|
472
|
-
</tr>
|
|
473
|
-
</tbody>
|
|
474
|
-
<tfoot>
|
|
475
|
-
<tr>
|
|
476
|
-
<td colspan="3">Paid</td>
|
|
477
|
-
<td class="text-end">$2,500.00</td>
|
|
478
|
-
</tr>
|
|
479
|
-
</tfoot>
|
|
480
|
-
</table>
|
|
481
|
-
```
|
|
482
|
-
</details>
|
|
483
|
-
|
|
484
|
-
### More components soon...
|
|
94
|
+
More components soon...
|
|
485
95
|
|
|
486
96
|
## Development
|
|
487
97
|
|
|
@@ -30,16 +30,7 @@ html,
|
|
|
30
30
|
line-height: 1.5; /* 1 */
|
|
31
31
|
-webkit-text-size-adjust: 100%; /* 2 */
|
|
32
32
|
tab-size: 4; /* 3 */
|
|
33
|
-
font-family: var(
|
|
34
|
-
--default-font-family,
|
|
35
|
-
ui-sans-serif,
|
|
36
|
-
system-ui,
|
|
37
|
-
sans-serif,
|
|
38
|
-
'Apple Color Emoji',
|
|
39
|
-
'Segoe UI Emoji',
|
|
40
|
-
'Segoe UI Symbol',
|
|
41
|
-
'Noto Color Emoji'
|
|
42
|
-
); /* 4 */
|
|
33
|
+
font-family: var(--default-font-family, system-ui, sans-serif); /* 4 */
|
|
43
34
|
font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
|
|
44
35
|
font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
|
|
45
36
|
-webkit-tap-highlight-color: transparent; /* 7 */
|
|
@@ -118,17 +109,7 @@ code,
|
|
|
118
109
|
kbd,
|
|
119
110
|
samp,
|
|
120
111
|
pre {
|
|
121
|
-
font-family: var(
|
|
122
|
-
--default-mono-font-family,
|
|
123
|
-
ui-monospace,
|
|
124
|
-
SFMono-Regular,
|
|
125
|
-
Menlo,
|
|
126
|
-
Monaco,
|
|
127
|
-
Consolas,
|
|
128
|
-
'Liberation Mono',
|
|
129
|
-
'Courier New',
|
|
130
|
-
monospace
|
|
131
|
-
); /* 4 */
|
|
112
|
+
font-family: var(--default-mono-font-family, ui-monospace, monospace); /* 4 */
|
|
132
113
|
font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 5 */
|
|
133
114
|
font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 6 */
|
|
134
115
|
font-size: 1em; /* 4 */
|
|
@@ -245,6 +226,14 @@ progress {
|
|
|
245
226
|
block-size: auto;
|
|
246
227
|
}
|
|
247
228
|
|
|
229
|
+
/*
|
|
230
|
+
Correct the arrow style of datalist in Chrome.
|
|
231
|
+
*/
|
|
232
|
+
|
|
233
|
+
::-webkit-calendar-picker-indicator {
|
|
234
|
+
line-height: 1em;
|
|
235
|
+
}
|
|
236
|
+
|
|
248
237
|
/*
|
|
249
238
|
Remove the inner padding in Chrome and Safari on macOS.
|
|
250
239
|
*/
|
|
@@ -54,13 +54,25 @@
|
|
|
54
54
|
--leading-10: 2.5rem; /* 40px */
|
|
55
55
|
|
|
56
56
|
/****************************************************************
|
|
57
|
-
* Font Family
|
|
57
|
+
* Font Family (https://modernfontstacks.com)
|
|
58
58
|
* Variables for controlling the font family of an element.
|
|
59
59
|
* font-family: var(--font-sans);
|
|
60
60
|
*****************************************************************/
|
|
61
|
-
--font-
|
|
62
|
-
--font-
|
|
63
|
-
--font-
|
|
61
|
+
--font-system-ui: system-ui, sans-serif;
|
|
62
|
+
--font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
|
|
63
|
+
--font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
|
|
64
|
+
--font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
|
|
65
|
+
--font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
|
|
66
|
+
--font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
|
|
67
|
+
--font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
|
|
68
|
+
--font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
|
|
69
|
+
--font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
|
|
70
|
+
--font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
|
|
71
|
+
--font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
|
|
72
|
+
--font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
|
|
73
|
+
--font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
|
|
74
|
+
--font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
|
|
75
|
+
--font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
|
|
64
76
|
|
|
65
77
|
/****************************************************************
|
|
66
78
|
* Letter Spacing
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
.bg-main { background-color: var(--color-bg); }
|
|
89
89
|
.bg-black { background-color: var(--color-text); }
|
|
90
90
|
.bg-white { background-color: var(--color-text-reversed); }
|
|
91
|
-
.bg-shade { background-color: var(--color-
|
|
91
|
+
.bg-shade { background-color: var(--color-border-light); }
|
|
92
92
|
.bg-transparent { background-color: transparent; }
|
|
93
93
|
|
|
94
94
|
/****************************************************************
|
|
@@ -110,6 +110,12 @@
|
|
|
110
110
|
.border-is { border-inline-start-width: var(--border-size, 1px); }
|
|
111
111
|
.border-ie { border-inline-end-width: var(--border-size, 1px); }
|
|
112
112
|
|
|
113
|
+
.border-main { border-color: var(--color-border); }
|
|
114
|
+
.border-dark { border-color: var(--color-border-dark); }
|
|
115
|
+
|
|
116
|
+
.border-solid { border-style: solid; }
|
|
117
|
+
.border-dashed { border-style: dashed; }
|
|
118
|
+
|
|
113
119
|
.rounded-none { border-radius: none; }
|
|
114
120
|
.rounded-sm { border-radius: var(--rounded-sm); }
|
|
115
121
|
.rounded { border-radius: var(--rounded); }
|
|
@@ -159,7 +165,6 @@
|
|
|
159
165
|
.m-0\.5 { margin: var(--size-0_5); }
|
|
160
166
|
.m-1 { margin: var(--size-1); }
|
|
161
167
|
.m-2 { margin: var(--size-2); }
|
|
162
|
-
.m-3 { margin: var(--size-3); }
|
|
163
168
|
.m-4 { margin: var(--size-4); }
|
|
164
169
|
.m-6 { margin: var(--size-6); }
|
|
165
170
|
.m-8 { margin: var(--size-8); }
|
|
@@ -170,7 +175,6 @@
|
|
|
170
175
|
.mb-0\.5 { margin-block: var(--size-0_5); }
|
|
171
176
|
.mb-1 { margin-block: var(--size-1); }
|
|
172
177
|
.mb-2 { margin-block: var(--size-2); }
|
|
173
|
-
.mb-3 { margin-block: var(--size-3); }
|
|
174
178
|
.mb-4 { margin-block: var(--size-4); }
|
|
175
179
|
.mb-6 { margin-block: var(--size-6); }
|
|
176
180
|
.mb-8 { margin-block: var(--size-8); }
|
|
@@ -181,7 +185,6 @@
|
|
|
181
185
|
.mbs-0\.5 { margin-block-start: var(--size-0_5); }
|
|
182
186
|
.mbs-1 { margin-block-start: var(--size-1); }
|
|
183
187
|
.mbs-2 { margin-block-start: var(--size-2); }
|
|
184
|
-
.mbs-3 { margin-block-start: var(--size-3); }
|
|
185
188
|
.mbs-4 { margin-block-start: var(--size-4); }
|
|
186
189
|
.mbs-6 { margin-block-start: var(--size-6); }
|
|
187
190
|
.mbs-8 { margin-block-start: var(--size-8); }
|
|
@@ -192,7 +195,6 @@
|
|
|
192
195
|
.mbe-0\.5 { margin-block-end: var(--size-0_5); }
|
|
193
196
|
.mbe-1 { margin-block-end: var(--size-1); }
|
|
194
197
|
.mbe-2 { margin-block-end: var(--size-2); }
|
|
195
|
-
.mbe-3 { margin-block-end: var(--size-3); }
|
|
196
198
|
.mbe-4 { margin-block-end: var(--size-4); }
|
|
197
199
|
.mbe-6 { margin-block-end: var(--size-6); }
|
|
198
200
|
.mbe-8 { margin-block-end: var(--size-8); }
|
|
@@ -203,7 +205,6 @@
|
|
|
203
205
|
.mi-0\.5 { margin-inline: var(--size-0_5); }
|
|
204
206
|
.mi-1 { margin-inline: var(--size-1); }
|
|
205
207
|
.mi-2 { margin-inline: var(--size-2); }
|
|
206
|
-
.mi-3 { margin-inline: var(--size-3); }
|
|
207
208
|
.mi-4 { margin-inline: var(--size-4); }
|
|
208
209
|
.mi-6 { margin-inline: var(--size-6); }
|
|
209
210
|
.mi-8 { margin-inline: var(--size-8); }
|
|
@@ -214,7 +215,6 @@
|
|
|
214
215
|
.mis-0\.5 { margin-inline-start: var(--size-0_5); }
|
|
215
216
|
.mis-1 { margin-inline-start: var(--size-1); }
|
|
216
217
|
.mis-2 { margin-inline-start: var(--size-2); }
|
|
217
|
-
.mis-3 { margin-inline-start: var(--size-3); }
|
|
218
218
|
.mis-4 { margin-inline-start: var(--size-4); }
|
|
219
219
|
.mis-6 { margin-inline-start: var(--size-6); }
|
|
220
220
|
.mis-8 { margin-inline-start: var(--size-8); }
|
|
@@ -225,7 +225,6 @@
|
|
|
225
225
|
.mie-0\.5 { margin-inline-end: var(--size-0_5); }
|
|
226
226
|
.mie-1 { margin-inline-end: var(--size-1); }
|
|
227
227
|
.mie-2 { margin-inline-end: var(--size-2); }
|
|
228
|
-
.mie-3 { margin-inline-end: var(--size-3); }
|
|
229
228
|
.mie-4 { margin-inline-end: var(--size-4); }
|
|
230
229
|
.mie-6 { margin-inline-end: var(--size-6); }
|
|
231
230
|
.mie-8 { margin-inline-end: var(--size-8); }
|
|
@@ -239,7 +238,6 @@
|
|
|
239
238
|
.p-0\.5 { padding: var(--size-0_5); }
|
|
240
239
|
.p-1 { padding: var(--size-1); }
|
|
241
240
|
.p-2 { padding: var(--size-2); }
|
|
242
|
-
.p-3 { padding: var(--size-3); }
|
|
243
241
|
.p-4 { padding: var(--size-4); }
|
|
244
242
|
.p-6 { padding: var(--size-6); }
|
|
245
243
|
.p-8 { padding: var(--size-8); }
|
|
@@ -249,7 +247,6 @@
|
|
|
249
247
|
.pb-0\.5 { padding-block: var(--size-0_5); }
|
|
250
248
|
.pb-1 { padding-block: var(--size-1); }
|
|
251
249
|
.pb-2 { padding-block: var(--size-2); }
|
|
252
|
-
.pb-3 { padding-block: var(--size-3); }
|
|
253
250
|
.pb-4 { padding-block: var(--size-4); }
|
|
254
251
|
.pb-6 { padding-block: var(--size-6); }
|
|
255
252
|
.pb-8 { padding-block: var(--size-8); }
|
|
@@ -259,7 +256,6 @@
|
|
|
259
256
|
.pbs-0\.5 { padding-block-start: var(--size-0_5); }
|
|
260
257
|
.pbs-1 { padding-block-start: var(--size-1); }
|
|
261
258
|
.pbs-2 { padding-block-start: var(--size-2); }
|
|
262
|
-
.pbs-3 { padding-block-start: var(--size-3); }
|
|
263
259
|
.pbs-4 { padding-block-start: var(--size-4); }
|
|
264
260
|
.pbs-6 { padding-block-start: var(--size-6); }
|
|
265
261
|
.pbs-8 { padding-block-start: var(--size-8); }
|
|
@@ -269,7 +265,6 @@
|
|
|
269
265
|
.pbe-0\.5 { padding-block-end: var(--size-0_5); }
|
|
270
266
|
.pbe-1 { padding-block-end: var(--size-1); }
|
|
271
267
|
.pbe-2 { padding-block-end: var(--size-2); }
|
|
272
|
-
.pbe-3 { padding-block-end: var(--size-3); }
|
|
273
268
|
.pbe-4 { padding-block-end: var(--size-4); }
|
|
274
269
|
.pbe-6 { padding-block-end: var(--size-6); }
|
|
275
270
|
.pbe-8 { padding-block-end: var(--size-8); }
|
|
@@ -279,7 +274,6 @@
|
|
|
279
274
|
.pi-0\.5 { padding-inline: var(--size-0_5); }
|
|
280
275
|
.pi-1 { padding-inline: var(--size-1); }
|
|
281
276
|
.pi-2 { padding-inline: var(--size-2); }
|
|
282
|
-
.pi-3 { padding-inline: var(--size-3); }
|
|
283
277
|
.pi-4 { padding-inline: var(--size-4); }
|
|
284
278
|
.pi-6 { padding-inline: var(--size-6); }
|
|
285
279
|
.pi-8 { padding-inline: var(--size-8); }
|
|
@@ -289,7 +283,6 @@
|
|
|
289
283
|
.pis-0\.5 { padding-inline-start: var(--size-0_5); }
|
|
290
284
|
.pis-1 { padding-inline-start: var(--size-1); }
|
|
291
285
|
.pis-2 { padding-inline-start: var(--size-2); }
|
|
292
|
-
.pis-3 { padding-inline-start: var(--size-3); }
|
|
293
286
|
.pis-4 { padding-inline-start: var(--size-4); }
|
|
294
287
|
.pis-6 { padding-inline-start: var(--size-6); }
|
|
295
288
|
.pis-8 { padding-inline-start: var(--size-8); }
|
|
@@ -299,7 +292,6 @@
|
|
|
299
292
|
.pie-0\.5 { padding-inline-end: var(--size-0_5); }
|
|
300
293
|
.pie-1 { padding-inline-end: var(--size-1); }
|
|
301
294
|
.pie-2 { padding-inline-end: var(--size-2); }
|
|
302
|
-
.pie-3 { padding-inline-end: var(--size-3); }
|
|
303
295
|
.pie-4 { padding-inline-end: var(--size-4); }
|
|
304
296
|
.pie-6 { padding-inline-end: var(--size-6); }
|
|
305
297
|
.pie-8 { padding-inline-end: var(--size-8); }
|
data/lib/css_zero/version.rb
CHANGED
|
@@ -2,7 +2,7 @@ Description:
|
|
|
2
2
|
This will add components into your project.
|
|
3
3
|
|
|
4
4
|
Components:
|
|
5
|
-
accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
|
|
5
|
+
accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress switch table
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -24,6 +24,11 @@ dialog:
|
|
|
24
24
|
input:
|
|
25
25
|
- app/assets/stylesheets/input.css
|
|
26
26
|
- app/assets/images/select-arrow.svg
|
|
27
|
+
pagination:
|
|
28
|
+
- app/assets/stylesheets/pagination.css
|
|
29
|
+
- app/assets/images/chevron-right.svg
|
|
30
|
+
- app/assets/images/chevron-left.svg
|
|
31
|
+
- app/assets/images/ellipsis.svg
|
|
27
32
|
progress:
|
|
28
33
|
- app/assets/stylesheets/progress.css
|
|
29
34
|
switch:
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--avatar-size: var(--size-10);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
1
|
.avatar {
|
|
6
|
-
|
|
2
|
+
--size: var(--avatar-size, var(--size-10));
|
|
3
|
+
|
|
4
|
+
block-size: var(--size);
|
|
7
5
|
border-radius: var(--rounded-full);
|
|
8
6
|
display: flex;
|
|
9
7
|
flex-shrink: 0;
|
|
10
|
-
inline-size: var(--
|
|
8
|
+
inline-size: var(--size);
|
|
11
9
|
overflow: hidden;
|
|
12
10
|
|
|
13
11
|
img {
|
|
@@ -20,12 +18,12 @@
|
|
|
20
18
|
|
|
21
19
|
.avatar__fallback {
|
|
22
20
|
align-items: center;
|
|
23
|
-
background-color: var(--color-
|
|
21
|
+
background-color: var(--color-border-light);
|
|
24
22
|
block-size: var(--size-full);
|
|
25
23
|
border-radius: var(--rounded-full);
|
|
26
24
|
display: flex;
|
|
27
|
-
font-size: calc(var(--
|
|
25
|
+
font-size: calc(var(--size) * .4);
|
|
28
26
|
inline-size: var(--size-full);
|
|
29
27
|
justify-content: center;
|
|
30
28
|
user-select: none;
|
|
31
|
-
}
|
|
29
|
+
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
.badge {
|
|
2
|
+
align-items: center;
|
|
2
3
|
background-color: var(--badge-background, var(--color-primary));
|
|
3
4
|
border-radius: var(--rounded-full);
|
|
4
5
|
border-width: var(--badge-border-width, 0);
|
|
5
6
|
color: var(--badge-color, var(--color-text-reversed));
|
|
7
|
+
display: inline-flex;
|
|
6
8
|
font-size: var(--text-xs);
|
|
7
9
|
font-weight: var(--font-semibold);
|
|
8
10
|
padding: var(--size-0_5) var(--size-2_5);
|
|
@@ -15,8 +17,8 @@
|
|
|
15
17
|
|
|
16
18
|
.badge--outline {
|
|
17
19
|
--badge-background: transparent;
|
|
20
|
+
--badge-border-width: var(--border);
|
|
18
21
|
--badge-color: var(--color-text);
|
|
19
|
-
--btn-border-width: var(--border);
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
.badge--positive {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
color: var(--color-text);
|
|
7
7
|
inline-size: var(--size-full);
|
|
8
8
|
margin: auto;
|
|
9
|
-
max-inline-size: var(--width-lg);
|
|
9
|
+
max-inline-size: var(--dialog-width, var(--width-lg));
|
|
10
10
|
padding: var(--size-6);
|
|
11
11
|
|
|
12
12
|
&::backdrop {
|
|
@@ -49,7 +49,10 @@
|
|
|
49
49
|
|
|
50
50
|
/* Small screens and below */
|
|
51
51
|
@media (width < 40rem) {
|
|
52
|
-
border-radius: 0;
|
|
52
|
+
border-end-end-radius: 0;
|
|
53
|
+
border-end-start-radius: 0;
|
|
54
|
+
margin-block-end: 0;
|
|
55
|
+
max-inline-size: none !important;
|
|
53
56
|
}
|
|
54
57
|
}
|
|
55
58
|
|
|
@@ -57,6 +60,11 @@
|
|
|
57
60
|
inset-block-start: var(--size-4);
|
|
58
61
|
inset-inline-end: var(--size-4);
|
|
59
62
|
position: absolute;
|
|
63
|
+
|
|
64
|
+
/* Small screens and below */
|
|
65
|
+
@media (width < 40rem) {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
60
68
|
}
|
|
61
69
|
|
|
62
70
|
/* Prevent page scroll when dialog is open */
|
|
@@ -8,6 +8,17 @@
|
|
|
8
8
|
font-size: var(--text-sm);
|
|
9
9
|
inline-size: var(--size-full);
|
|
10
10
|
padding: var(--size-2) var(--size-3);
|
|
11
|
+
resize: none;
|
|
12
|
+
|
|
13
|
+
option {
|
|
14
|
+
padding-block: var(--size-1);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&:is(textarea):not([rows]) {
|
|
18
|
+
field-sizing: content;
|
|
19
|
+
max-block-size: calc(10lh + var(--size-6));
|
|
20
|
+
min-block-size: calc(3lh + var(--size-6));
|
|
21
|
+
}
|
|
11
22
|
|
|
12
23
|
&:is(select):not([multiple], [size]) {
|
|
13
24
|
background-image: url("select-arrow.svg");
|
|
@@ -44,8 +55,15 @@
|
|
|
44
55
|
transform: scale(1.15);
|
|
45
56
|
}
|
|
46
57
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
58
|
+
:is(.input, .range, .checkbox, .radio) {
|
|
59
|
+
/* Keyboard navigation */
|
|
60
|
+
&:focus-visible {
|
|
61
|
+
outline: var(--border-2) solid var(--color-border-dark);
|
|
62
|
+
outline-offset: var(--border-2);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Server side validation */
|
|
66
|
+
.field_with_errors & {
|
|
67
|
+
border-color: var(--color-negative);
|
|
68
|
+
}
|
|
51
69
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
:where(.pagination) {
|
|
2
|
+
align-items: center;
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: var(--size-1);
|
|
5
|
+
|
|
6
|
+
img {
|
|
7
|
+
filter: var(--color-filter-text);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
a {
|
|
11
|
+
align-items: center;
|
|
12
|
+
border-radius: var(--rounded-md);
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
font-size: var(--text-sm);
|
|
15
|
+
font-weight: var(--font-medium);
|
|
16
|
+
gap: var(--size-2);
|
|
17
|
+
justify-content: center;
|
|
18
|
+
min-inline-size: fit-content;
|
|
19
|
+
padding: var(--size-2) var(--size-4);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
a:is([aria-current]) {
|
|
23
|
+
border-width: var(--border);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
a:is([aria-disabled]) {
|
|
27
|
+
pointer-events: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
a:not([aria-disabled]):hover {
|
|
31
|
+
background-color: var(--color-secondary);
|
|
32
|
+
}
|
|
33
|
+
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { Controller } from "@hotwired/stimulus"
|
|
2
2
|
|
|
3
3
|
export default class extends Controller {
|
|
4
|
-
static targets = [ "
|
|
4
|
+
static targets = [ "details" ]
|
|
5
|
+
|
|
6
|
+
open() {
|
|
7
|
+
this.detailsTarget.open = true
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
close() {
|
|
11
|
+
this.detailsTarget.open = false
|
|
12
|
+
}
|
|
5
13
|
|
|
6
14
|
toggle() {
|
|
7
|
-
this.
|
|
15
|
+
this.detailsTarget.open ? this.close() : this.open()
|
|
8
16
|
}
|
|
9
17
|
}
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
--color-text: black;
|
|
5
5
|
--color-text-reversed: white;
|
|
6
6
|
--color-text-subtle: var(--zinc-500);
|
|
7
|
+
--color-border-light: var(--zinc-100);
|
|
7
8
|
--color-border: var(--zinc-200);
|
|
8
|
-
--color-border-
|
|
9
|
+
--color-border-dark: var(--zinc-400);
|
|
9
10
|
|
|
10
11
|
/* Accent colors */
|
|
11
12
|
--color-primary: var(--zinc-900);
|
|
@@ -26,8 +27,9 @@
|
|
|
26
27
|
--color-text: white;
|
|
27
28
|
--color-text-reversed: black;
|
|
28
29
|
--color-text-subtle: var(--zinc-400);
|
|
30
|
+
--color-border-light: var(--zinc-800);
|
|
29
31
|
--color-border: var(--zinc-800);
|
|
30
|
-
--color-border-
|
|
32
|
+
--color-border-dark: var(--zinc-300);
|
|
31
33
|
|
|
32
34
|
/* Accent colors */
|
|
33
35
|
--color-primary: var(--zinc-50);
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: css-zero
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.18
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Lázaro Nixon
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-07-
|
|
11
|
+
date: 2024-07-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -30,6 +30,7 @@ files:
|
|
|
30
30
|
- app/assets/stylesheets/transition.css
|
|
31
31
|
- app/assets/stylesheets/typography.css
|
|
32
32
|
- app/assets/stylesheets/zutilities.css
|
|
33
|
+
- app/helpers/dialog_helper.rb
|
|
33
34
|
- lib/css-zero.rb
|
|
34
35
|
- lib/css_zero/engine.rb
|
|
35
36
|
- lib/css_zero/version.rb
|
|
@@ -37,8 +38,10 @@ files:
|
|
|
37
38
|
- lib/generators/css_zero/add/add_generator.rb
|
|
38
39
|
- lib/generators/css_zero/add/resources.yml
|
|
39
40
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
|
|
41
|
+
- lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
|
|
40
42
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
|
|
41
43
|
- lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
|
|
44
|
+
- lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg
|
|
42
45
|
- lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
|
|
43
46
|
- lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
|
|
44
47
|
- lib/generators/css_zero/add/templates/app/assets/images/x.svg
|
|
@@ -51,6 +54,7 @@ files:
|
|
|
51
54
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
|
|
52
55
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
|
|
53
56
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
|
|
57
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
|
|
54
58
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
|
55
59
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
56
60
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|