css-zero 0.0.24 → 0.0.25
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 +1 -1
- data/app/assets/stylesheets/_reset.css +4 -4
- data/app/assets/stylesheets/zutilities.css +32 -35
- 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 +7 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +1 -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/card.css +2 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css +22 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +10 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css +5 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js +7 -0
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +10 -0
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b904762be7cdca0956aa0340d32bdaf524ce2f10b106e30f2487104904ce23cf
|
|
4
|
+
data.tar.gz: cd968a19dfbd06001ba9b009c73cc513d2a5440c0d53146b062e4561e4c5c187
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e2c9fbae5418104337666b1302c9ae824f72adcce8009cde01ed5df1a12e770726598d16d3cf1dd885a0d318328e0889922dc4230975b06129a7f72f8a7ee45d
|
|
7
|
+
data.tar.gz: 1a65d184ce40cce70efcb94afc23100e0c2019668a4aba36eee69b1abae86fd7beb966f061ec15d71c6acf8ecf18e3eef3587535da320497e1d8d086aee17ff9
|
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 carousel collapsible dialog input pagination progress prose sheet switch table
|
|
22
|
+
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -336,9 +336,9 @@ video {
|
|
|
336
336
|
}
|
|
337
337
|
|
|
338
338
|
/*
|
|
339
|
-
Prevent page scroll when dialog is open
|
|
339
|
+
Prevent page scroll when modal dialog is open
|
|
340
340
|
*/
|
|
341
|
-
html:has(dialog[open]) {
|
|
341
|
+
html:has(dialog:modal[open]) {
|
|
342
342
|
overflow: hidden;
|
|
343
343
|
}
|
|
344
344
|
|
|
@@ -347,7 +347,7 @@ html:has(dialog[open]) {
|
|
|
347
347
|
*/
|
|
348
348
|
|
|
349
349
|
[hidden] {
|
|
350
|
-
display: none
|
|
350
|
+
display: none;
|
|
351
351
|
}
|
|
352
352
|
|
|
353
353
|
/*
|
|
@@ -355,5 +355,5 @@ html:has(dialog[open]) {
|
|
|
355
355
|
*/
|
|
356
356
|
|
|
357
357
|
[contents] {
|
|
358
|
-
display: contents
|
|
358
|
+
display: contents;
|
|
359
359
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/****************************************************************
|
|
2
|
-
* Flex
|
|
2
|
+
* Flex
|
|
3
3
|
*****************************************************************/
|
|
4
4
|
.flex { display: flex; }
|
|
5
5
|
.flex-col { flex-direction: column; }
|
|
@@ -28,6 +28,37 @@
|
|
|
28
28
|
.gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
|
|
29
29
|
.gap-sm { column-gap: 0.5rem; row-gap: 0.5rem; }
|
|
30
30
|
|
|
31
|
+
/****************************************************************
|
|
32
|
+
* Grid
|
|
33
|
+
*****************************************************************/
|
|
34
|
+
.grid { display: grid; }
|
|
35
|
+
|
|
36
|
+
.grid-cols-1 { grid-template-columns: var(--grid-1); }
|
|
37
|
+
.grid-cols-2 { grid-template-columns: var(--grid-2); }
|
|
38
|
+
.grid-cols-3 { grid-template-columns: var(--grid-3); }
|
|
39
|
+
.grid-cols-4 { grid-template-columns: var(--grid-4); }
|
|
40
|
+
.grid-cols-5 { grid-template-columns: var(--grid-5); }
|
|
41
|
+
.grid-cols-6 { grid-template-columns: var(--grid-6); }
|
|
42
|
+
.grid-cols-7 { grid-template-columns: var(--grid-7); }
|
|
43
|
+
.grid-cols-8 { grid-template-columns: var(--grid-8); }
|
|
44
|
+
.grid-cols-9 { grid-template-columns: var(--grid-9); }
|
|
45
|
+
.grid-cols-10 { grid-template-columns: var(--grid-10); }
|
|
46
|
+
.grid-cols-11 { grid-template-columns: var(--grid-11); }
|
|
47
|
+
.grid-cols-12 { grid-template-columns: var(--grid-12); }
|
|
48
|
+
|
|
49
|
+
.col-span-1 { grid-column: var(--span-1); }
|
|
50
|
+
.col-span-2 { grid-column: var(--span-2); }
|
|
51
|
+
.col-span-3 { grid-column: var(--span-3); }
|
|
52
|
+
.col-span-4 { grid-column: var(--span-4); }
|
|
53
|
+
.col-span-5 { grid-column: var(--span-5); }
|
|
54
|
+
.col-span-6 { grid-column: var(--span-6); }
|
|
55
|
+
.col-span-7 { grid-column: var(--span-7); }
|
|
56
|
+
.col-span-8 { grid-column: var(--span-8); }
|
|
57
|
+
.col-span-9 { grid-column: var(--span-9); }
|
|
58
|
+
.col-span-10 { grid-column: var(--span-10); }
|
|
59
|
+
.col-span-11 { grid-column: var(--span-11); }
|
|
60
|
+
.col-span-12 { grid-column: var(--span-12); }
|
|
61
|
+
|
|
31
62
|
/****************************************************************
|
|
32
63
|
* Text
|
|
33
64
|
*****************************************************************/
|
|
@@ -127,8 +158,6 @@
|
|
|
127
158
|
.rounded-md { border-radius: var(--rounded-md); }
|
|
128
159
|
.rounded-lg { border-radius: var(--rounded-lg); }
|
|
129
160
|
.rounded-xl { border-radius: var(--rounded-xl); }
|
|
130
|
-
.rounded-2xl { border-radius: var(--rounded-2xl); }
|
|
131
|
-
.rounded-3xl { border-radius: var(--rounded-3xl); }
|
|
132
161
|
.rounded-full { border-radius: var(--rounded-full); }
|
|
133
162
|
|
|
134
163
|
/****************************************************************
|
|
@@ -141,7 +170,6 @@
|
|
|
141
170
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
142
171
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
143
172
|
.shadow-2xl { box-shadow: var(--shadow-2xl); }
|
|
144
|
-
.shadow-inner { box-shadow: var(--shadow-inner); }
|
|
145
173
|
|
|
146
174
|
/****************************************************************
|
|
147
175
|
* Layout
|
|
@@ -308,37 +336,6 @@
|
|
|
308
336
|
.pie-8 { padding-inline-end: var(--size-8); }
|
|
309
337
|
.pie-10 { padding-inline-end: var(--size-10); }
|
|
310
338
|
|
|
311
|
-
/****************************************************************
|
|
312
|
-
* Grid system
|
|
313
|
-
*****************************************************************/
|
|
314
|
-
.grid { display: grid; }
|
|
315
|
-
|
|
316
|
-
.grid-cols-1 { grid-template-columns: var(--grid-1); }
|
|
317
|
-
.grid-cols-2 { grid-template-columns: var(--grid-2); }
|
|
318
|
-
.grid-cols-3 { grid-template-columns: var(--grid-3); }
|
|
319
|
-
.grid-cols-4 { grid-template-columns: var(--grid-4); }
|
|
320
|
-
.grid-cols-5 { grid-template-columns: var(--grid-5); }
|
|
321
|
-
.grid-cols-6 { grid-template-columns: var(--grid-6); }
|
|
322
|
-
.grid-cols-7 { grid-template-columns: var(--grid-7); }
|
|
323
|
-
.grid-cols-8 { grid-template-columns: var(--grid-8); }
|
|
324
|
-
.grid-cols-9 { grid-template-columns: var(--grid-9); }
|
|
325
|
-
.grid-cols-10 { grid-template-columns: var(--grid-10); }
|
|
326
|
-
.grid-cols-11 { grid-template-columns: var(--grid-11); }
|
|
327
|
-
.grid-cols-12 { grid-template-columns: var(--grid-12); }
|
|
328
|
-
|
|
329
|
-
.col-span-1 { grid-column: var(--span-1); }
|
|
330
|
-
.col-span-2 { grid-column: var(--span-2); }
|
|
331
|
-
.col-span-3 { grid-column: var(--span-3); }
|
|
332
|
-
.col-span-4 { grid-column: var(--span-4); }
|
|
333
|
-
.col-span-5 { grid-column: var(--span-5); }
|
|
334
|
-
.col-span-6 { grid-column: var(--span-6); }
|
|
335
|
-
.col-span-7 { grid-column: var(--span-7); }
|
|
336
|
-
.col-span-8 { grid-column: var(--span-8); }
|
|
337
|
-
.col-span-9 { grid-column: var(--span-9); }
|
|
338
|
-
.col-span-10 { grid-column: var(--span-10); }
|
|
339
|
-
.col-span-11 { grid-column: var(--span-11); }
|
|
340
|
-
.col-span-12 { grid-column: var(--span-12); }
|
|
341
|
-
|
|
342
339
|
/****************************************************************
|
|
343
340
|
* Accessibility
|
|
344
341
|
*****************************************************************/
|
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 carousel collapsible dialog input pagination progress prose sheet switch table
|
|
5
|
+
accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -26,6 +26,9 @@ dialog:
|
|
|
26
26
|
- app/assets/stylesheets/dialog.css
|
|
27
27
|
- app/javascript/controllers/dialog_controller.js
|
|
28
28
|
- app/assets/images/x.svg
|
|
29
|
+
flash:
|
|
30
|
+
- app/assets/stylesheets/flash.css
|
|
31
|
+
- app/javascript/controllers/element_removal_controller.js
|
|
29
32
|
input:
|
|
30
33
|
- app/assets/stylesheets/input.css
|
|
31
34
|
- app/assets/images/select-arrow.svg
|
|
@@ -38,11 +41,13 @@ progress:
|
|
|
38
41
|
- app/assets/stylesheets/progress.css
|
|
39
42
|
prose:
|
|
40
43
|
- app/assets/stylesheets/prose.css
|
|
41
|
-
switch:
|
|
42
|
-
- app/assets/stylesheets/switch.css
|
|
43
44
|
sheet:
|
|
44
45
|
- app/assets/stylesheets/sheet.css
|
|
45
46
|
- app/javascript/controllers/dialog_controller.js
|
|
46
47
|
- app/assets/images/x.svg
|
|
48
|
+
skeleton:
|
|
49
|
+
- app/assets/stylesheets/skeleton.css
|
|
50
|
+
switch:
|
|
51
|
+
- app/assets/stylesheets/switch.css
|
|
47
52
|
table:
|
|
48
53
|
- app/assets/stylesheets/table.css
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.flash {
|
|
2
|
+
animation: appear-then-fade 4s 300ms both;
|
|
3
|
+
backdrop-filter: var(--blur) var(--contrast-75);
|
|
4
|
+
background-color: hsl(from var(--color-text) h s l / .65);
|
|
5
|
+
border-radius: var(--rounded-full);
|
|
6
|
+
color: var(--color-text-reversed);
|
|
7
|
+
margin-block-start: var(--size-4);
|
|
8
|
+
margin-inline: auto;
|
|
9
|
+
padding: var(--size-2) var(--size-4);
|
|
10
|
+
position: fixed;
|
|
11
|
+
text-align: center;
|
|
12
|
+
|
|
13
|
+
img {
|
|
14
|
+
display: inline;
|
|
15
|
+
margin-block-end: var(--size-1);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@keyframes appear-then-fade {
|
|
20
|
+
0%, 100% { opacity: 0; }
|
|
21
|
+
5%, 60% { opacity: 1; }
|
|
22
|
+
}
|
|
@@ -31,6 +31,11 @@
|
|
|
31
31
|
margin-inline-end: var(--size-2);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
&:autofill {
|
|
35
|
+
-webkit-text-fill-color: var(--color-text);
|
|
36
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
|
37
|
+
}
|
|
38
|
+
|
|
34
39
|
&::placeholder {
|
|
35
40
|
color: var(--color-text-subtle);
|
|
36
41
|
}
|
|
@@ -39,6 +44,10 @@
|
|
|
39
44
|
border-color: var(--color-negative);
|
|
40
45
|
}
|
|
41
46
|
|
|
47
|
+
&:user-invalid ~ .invalid-feedback {
|
|
48
|
+
display: block;
|
|
49
|
+
}
|
|
50
|
+
|
|
42
51
|
&:disabled {
|
|
43
52
|
cursor: not-allowed;
|
|
44
53
|
opacity: var(--opacity-50);
|
|
@@ -57,7 +66,7 @@
|
|
|
57
66
|
:is(.input, .range, .checkbox, .radio) {
|
|
58
67
|
/* Keyboard navigation */
|
|
59
68
|
&:focus-visible {
|
|
60
|
-
outline: var(--border-2) solid var(--color-
|
|
69
|
+
outline: var(--border-2) solid var(--color-selected-dark);
|
|
61
70
|
outline-offset: var(--border-2);
|
|
62
71
|
}
|
|
63
72
|
|
|
@@ -4,9 +4,12 @@
|
|
|
4
4
|
--color-text: black;
|
|
5
5
|
--color-text-reversed: white;
|
|
6
6
|
--color-text-subtle: var(--zinc-500);
|
|
7
|
+
--color-link: var(--blue-700);
|
|
7
8
|
--color-border-light: var(--zinc-100);
|
|
8
9
|
--color-border: var(--zinc-200);
|
|
9
10
|
--color-border-dark: var(--zinc-400);
|
|
11
|
+
--color-selected: var(--blue-100);
|
|
12
|
+
--color-selected-dark: var(--blue-300);
|
|
10
13
|
|
|
11
14
|
/* Accent colors */
|
|
12
15
|
--color-primary: var(--zinc-900);
|
|
@@ -27,9 +30,12 @@
|
|
|
27
30
|
--color-text: white;
|
|
28
31
|
--color-text-reversed: black;
|
|
29
32
|
--color-text-subtle: var(--zinc-400);
|
|
33
|
+
--color-link: var(--sky-400);
|
|
30
34
|
--color-border-light: var(--zinc-800);
|
|
31
35
|
--color-border: var(--zinc-800);
|
|
32
36
|
--color-border-dark: var(--zinc-600);
|
|
37
|
+
--color-selected: var(--blue-950);
|
|
38
|
+
--color-selected-dark: var(--blue-800);
|
|
33
39
|
|
|
34
40
|
/* Accent colors */
|
|
35
41
|
--color-primary: var(--zinc-50);
|
|
@@ -60,3 +66,7 @@ body {
|
|
|
60
66
|
font-synthesis-weight: none;
|
|
61
67
|
text-rendering: optimizeLegibility;
|
|
62
68
|
}
|
|
69
|
+
|
|
70
|
+
::selection {
|
|
71
|
+
background-color: var(--color-selected);
|
|
72
|
+
}
|
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.25
|
|
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-23 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -56,16 +56,19 @@ files:
|
|
|
56
56
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
|
|
57
57
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
|
|
58
58
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
|
|
59
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
|
|
59
60
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
|
|
60
61
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
|
|
61
62
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
|
62
63
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
|
|
63
64
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
|
|
65
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
|
|
64
66
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
65
67
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
66
68
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
|
67
69
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
|
68
70
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
|
71
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
|
|
69
72
|
- lib/generators/css_zero/install/USAGE
|
|
70
73
|
- lib/generators/css_zero/install/install_generator.rb
|
|
71
74
|
- lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
|