css-zero 0.0.23 → 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 +30 -2
- 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 +9 -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/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 -5
- 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/sheet.css +61 -0
- 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: 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 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
|
@@ -234,6 +234,14 @@ progress {
|
|
234
234
|
line-height: 1em;
|
235
235
|
}
|
236
236
|
|
237
|
+
/*
|
238
|
+
Correct empty date field height on safari IOS.
|
239
|
+
*/
|
240
|
+
|
241
|
+
::-webkit-date-and-time-value {
|
242
|
+
height: 1.5em;
|
243
|
+
}
|
244
|
+
|
237
245
|
/*
|
238
246
|
Remove the inner padding in Chrome and Safari on macOS.
|
239
247
|
*/
|
@@ -242,6 +250,19 @@ progress {
|
|
242
250
|
-webkit-appearance: none;
|
243
251
|
}
|
244
252
|
|
253
|
+
/*
|
254
|
+
Remove the increment cursor for step any.
|
255
|
+
*/
|
256
|
+
|
257
|
+
input[step='any']::-webkit-inner-spin-button,
|
258
|
+
input[step='any']::-webkit-outer-spin-button {
|
259
|
+
-webkit-appearance: none;
|
260
|
+
}
|
261
|
+
|
262
|
+
input[step='any'] {
|
263
|
+
-moz-appearance: textfield;
|
264
|
+
}
|
265
|
+
|
245
266
|
/*
|
246
267
|
Add the correct display in Chrome and Safari.
|
247
268
|
*/
|
@@ -314,12 +335,19 @@ video {
|
|
314
335
|
block-size: auto;
|
315
336
|
}
|
316
337
|
|
338
|
+
/*
|
339
|
+
Prevent page scroll when modal dialog is open
|
340
|
+
*/
|
341
|
+
html:has(dialog:modal[open]) {
|
342
|
+
overflow: hidden;
|
343
|
+
}
|
344
|
+
|
317
345
|
/*
|
318
346
|
Make elements with the HTML hidden attribute stay hidden by default.
|
319
347
|
*/
|
320
348
|
|
321
349
|
[hidden] {
|
322
|
-
display: none
|
350
|
+
display: none;
|
323
351
|
}
|
324
352
|
|
325
353
|
/*
|
@@ -327,5 +355,5 @@ video {
|
|
327
355
|
*/
|
328
356
|
|
329
357
|
[contents] {
|
330
|
-
display: contents
|
358
|
+
display: contents;
|
331
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 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,6 +41,12 @@ progress:
|
|
38
41
|
- app/assets/stylesheets/progress.css
|
39
42
|
prose:
|
40
43
|
- app/assets/stylesheets/prose.css
|
44
|
+
sheet:
|
45
|
+
- app/assets/stylesheets/sheet.css
|
46
|
+
- app/javascript/controllers/dialog_controller.js
|
47
|
+
- app/assets/images/x.svg
|
48
|
+
skeleton:
|
49
|
+
- app/assets/stylesheets/skeleton.css
|
41
50
|
switch:
|
42
51
|
- app/assets/stylesheets/switch.css
|
43
52
|
table:
|
@@ -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
|
|
@@ -0,0 +1,61 @@
|
|
1
|
+
.sheet {
|
2
|
+
background-color: var(--color-bg);
|
3
|
+
border-inline-start-width: var(--border);
|
4
|
+
box-shadow: var(--shadow-lg);
|
5
|
+
block-size: 100%;
|
6
|
+
color: var(--color-text);
|
7
|
+
inline-size: var(--size-3-4);
|
8
|
+
margin-inline-start: auto;
|
9
|
+
max-block-size: none;
|
10
|
+
max-inline-size: var(--width-sm);
|
11
|
+
padding: var(--size-6);
|
12
|
+
|
13
|
+
&::backdrop {
|
14
|
+
background-color: rgba(0, 0, 0, .8);
|
15
|
+
}
|
16
|
+
|
17
|
+
/* Setup animation */
|
18
|
+
transform: translateX(100%);
|
19
|
+
transition-behavior: allow-discrete;
|
20
|
+
transition-duration: var(--time-500);
|
21
|
+
transition-property: display, overlay, transform;
|
22
|
+
|
23
|
+
&::backdrop {
|
24
|
+
opacity: 0;
|
25
|
+
transition-behavior: allow-discrete;
|
26
|
+
transition-duration: var(--time-150);
|
27
|
+
transition-property: display, overlay, opacity;
|
28
|
+
}
|
29
|
+
|
30
|
+
/* In animation */
|
31
|
+
&[open] {
|
32
|
+
transform: translateX(0);
|
33
|
+
}
|
34
|
+
|
35
|
+
&[open]::backdrop {
|
36
|
+
opacity: 1;
|
37
|
+
}
|
38
|
+
|
39
|
+
/* Out animation */
|
40
|
+
@starting-style {
|
41
|
+
&[open] {
|
42
|
+
transform: translateX(100%);
|
43
|
+
}
|
44
|
+
|
45
|
+
&[open]::backdrop {
|
46
|
+
opacity: 0;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
/* Small screens and below */
|
51
|
+
@media (width < 40rem) {
|
52
|
+
max-inline-size: none;
|
53
|
+
text-align: center;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
.sheet__close {
|
58
|
+
inset-block-start: var(--size-4);
|
59
|
+
inset-inline-end: var(--size-4);
|
60
|
+
position: absolute;
|
61
|
+
}
|
@@ -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,15 +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
|
64
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
|
65
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
|
63
66
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
64
67
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
65
68
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
66
69
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
67
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
|
68
72
|
- lib/generators/css_zero/install/USAGE
|
69
73
|
- lib/generators/css_zero/install/install_generator.rb
|
70
74
|
- lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
|