css-zero 0.0.24 → 0.0.25
Sign up to get free protection for your applications and to get access to all the features.
- 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
|