css-zero 0.0.24 → 0.0.26
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 +2 -1
- data/app/assets/stylesheets/_reset.css +12 -4
- data/app/assets/stylesheets/zindex.css +13 -0
- 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/breadcrumb.css +0 -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/dialog.css +0 -2
- 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 -7
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +0 -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 +6 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2a4abc591fd494e591052a0bc63cb46af6d9a0cbae7c126c07b914a15a097175
|
4
|
+
data.tar.gz: d5ed800b2b6a0ef53ccb8f41a6a8706f63dbe0b92e266b3c606afbf21d143aef
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fdf03752432fe469809a8299338cd0726022514b462cb0ab7523bfe533169cd47a6edc97fc7fb34e9ef31432f9c1470a257bcf15bca53eb40e905030f47dff3f
|
7
|
+
data.tar.gz: 79397cb9785170dc47b34669592e67478159b2a75585155177174dd19951fc2325837af549a188d97e3e6dff26fcef87855f877e4889863f2a88e63fd1a673f3
|
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
|
@@ -54,6 +54,7 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
|
|
54
54
|
*= require typography
|
55
55
|
*= require_tree .
|
56
56
|
*= require_self
|
57
|
+
*= require zindex
|
57
58
|
*= require zutilities
|
58
59
|
*/
|
59
60
|
```
|
@@ -193,6 +193,14 @@ input:where([type='button'], [type='reset'], [type='submit']),
|
|
193
193
|
appearance: button;
|
194
194
|
}
|
195
195
|
|
196
|
+
/*
|
197
|
+
Revert padding block, it can be noticed in select with multiple.
|
198
|
+
*/
|
199
|
+
|
200
|
+
option {
|
201
|
+
padding-block: revert;
|
202
|
+
}
|
203
|
+
|
196
204
|
/*
|
197
205
|
Use the modern Firefox focus style for all focusable elements.
|
198
206
|
*/
|
@@ -336,9 +344,9 @@ video {
|
|
336
344
|
}
|
337
345
|
|
338
346
|
/*
|
339
|
-
Prevent page scroll when dialog is open
|
347
|
+
Prevent page scroll when modal dialog is open
|
340
348
|
*/
|
341
|
-
html:has(dialog[open]) {
|
349
|
+
html:has(dialog:modal[open]) {
|
342
350
|
overflow: hidden;
|
343
351
|
}
|
344
352
|
|
@@ -347,7 +355,7 @@ html:has(dialog[open]) {
|
|
347
355
|
*/
|
348
356
|
|
349
357
|
[hidden] {
|
350
|
-
display: none
|
358
|
+
display: none;
|
351
359
|
}
|
352
360
|
|
353
361
|
/*
|
@@ -355,5 +363,5 @@ html:has(dialog[open]) {
|
|
355
363
|
*/
|
356
364
|
|
357
365
|
[contents] {
|
358
|
-
display: contents
|
366
|
+
display: contents;
|
359
367
|
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/****************************************************************
|
2
|
+
* Z-Index
|
3
|
+
* Utilities for controlling the stack order of an element.
|
4
|
+
* z-index: var(--z-10);
|
5
|
+
*****************************************************************/
|
6
|
+
|
7
|
+
:root {
|
8
|
+
--z-10: 10;
|
9
|
+
--z-20: 20;
|
10
|
+
--z-30: 30;
|
11
|
+
--z-40: 40;
|
12
|
+
--z-50: 50;
|
13
|
+
}
|
@@ -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
|
@@ -47,7 +47,6 @@
|
|
47
47
|
}
|
48
48
|
}
|
49
49
|
|
50
|
-
/* Small screens and below */
|
51
50
|
@media (width < 40rem) {
|
52
51
|
border-end-end-radius: 0;
|
53
52
|
border-end-start-radius: 0;
|
@@ -61,7 +60,6 @@
|
|
61
60
|
inset-inline-end: var(--size-4);
|
62
61
|
position: absolute;
|
63
62
|
|
64
|
-
/* Small screens and below */
|
65
63
|
@media (width < 40rem) {
|
66
64
|
display: none;
|
67
65
|
}
|
@@ -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
|
+
}
|
@@ -8,10 +8,6 @@
|
|
8
8
|
inline-size: var(--size-full);
|
9
9
|
padding: var(--size-2) var(--size-3);
|
10
10
|
|
11
|
-
option {
|
12
|
-
padding-block: var(--size-1);
|
13
|
-
}
|
14
|
-
|
15
11
|
&:is(textarea):not([rows]) {
|
16
12
|
field-sizing: content;
|
17
13
|
max-block-size: calc(10lh + var(--size-6));
|
@@ -31,6 +27,11 @@
|
|
31
27
|
margin-inline-end: var(--size-2);
|
32
28
|
}
|
33
29
|
|
30
|
+
&:autofill {
|
31
|
+
-webkit-text-fill-color: var(--color-text);
|
32
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
33
|
+
}
|
34
|
+
|
34
35
|
&::placeholder {
|
35
36
|
color: var(--color-text-subtle);
|
36
37
|
}
|
@@ -39,6 +40,10 @@
|
|
39
40
|
border-color: var(--color-negative);
|
40
41
|
}
|
41
42
|
|
43
|
+
&:user-invalid ~ .invalid-feedback {
|
44
|
+
display: block;
|
45
|
+
}
|
46
|
+
|
42
47
|
&:disabled {
|
43
48
|
cursor: not-allowed;
|
44
49
|
opacity: var(--opacity-50);
|
@@ -55,13 +60,11 @@
|
|
55
60
|
}
|
56
61
|
|
57
62
|
:is(.input, .range, .checkbox, .radio) {
|
58
|
-
/* Keyboard navigation */
|
59
63
|
&:focus-visible {
|
60
|
-
outline: var(--border-2) solid var(--color-
|
64
|
+
outline: var(--border-2) solid var(--color-selected-dark);
|
61
65
|
outline-offset: var(--border-2);
|
62
66
|
}
|
63
67
|
|
64
|
-
/* Server side validation */
|
65
68
|
.field_with_errors & {
|
66
69
|
border-color: var(--color-negative);
|
67
70
|
}
|
@@ -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.26
|
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
|
@@ -29,6 +29,7 @@ files:
|
|
29
29
|
- app/assets/stylesheets/transform.css
|
30
30
|
- app/assets/stylesheets/transition.css
|
31
31
|
- app/assets/stylesheets/typography.css
|
32
|
+
- app/assets/stylesheets/zindex.css
|
32
33
|
- app/assets/stylesheets/zutilities.css
|
33
34
|
- app/helpers/dialog_helper.rb
|
34
35
|
- lib/css-zero.rb
|
@@ -56,16 +57,19 @@ files:
|
|
56
57
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
|
57
58
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
|
58
59
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
|
60
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
|
59
61
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
|
60
62
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
|
61
63
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
62
64
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
|
63
65
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
|
66
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
|
64
67
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
65
68
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
66
69
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
67
70
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
68
71
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
72
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
|
69
73
|
- lib/generators/css_zero/install/USAGE
|
70
74
|
- lib/generators/css_zero/install/install_generator.rb
|
71
75
|
- lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
|