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