css-zero 0.0.26 → 0.0.27
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 -2
- data/app/assets/stylesheets/_reset.css +16 -19
- 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 +2 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +3 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +0 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css +1 -7
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +0 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css +17 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6042a247b900f1c53ca209d67a3cd9de65cea06889a70ad5b13643b915195a08
|
|
4
|
+
data.tar.gz: 5cd927896caf176105f857803a676f26e802041578a255777f371b79b8df8555
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4adc0e6555602ace413d7da7205bbff33de92a2372130f7f3646f05f6951deb04b858746115adce32bdda70bd52497b85a12cff03afa21beeff4751a3639beae
|
|
7
|
+
data.tar.gz: 14a8a5733e07206451923270e5e042635a40edbcacda8225ce80f1fe8a4387d490dd4fea58d204d31b0f9494ea1f09644d3fe3ddaeb27a5ca0a84f045d7f7aae
|
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 flash input pagination progress prose sheet skeleton 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 toggle
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -52,9 +52,9 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
|
|
|
52
52
|
*= require transform
|
|
53
53
|
*= require transition
|
|
54
54
|
*= require typography
|
|
55
|
+
*= require zindex
|
|
55
56
|
*= require_tree .
|
|
56
57
|
*= require_self
|
|
57
|
-
*= require zindex
|
|
58
58
|
*= require zutilities
|
|
59
59
|
*/
|
|
60
60
|
```
|
|
@@ -36,6 +36,15 @@ html,
|
|
|
36
36
|
-webkit-tap-highlight-color: transparent; /* 7 */
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
/*
|
|
40
|
+
Prevent page scroll when modal dialog is open.
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
html:has(dialog:modal[open]) {
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
39
48
|
/*
|
|
40
49
|
Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
|
41
50
|
*/
|
|
@@ -242,14 +251,6 @@ progress {
|
|
|
242
251
|
line-height: 1em;
|
|
243
252
|
}
|
|
244
253
|
|
|
245
|
-
/*
|
|
246
|
-
Correct empty date field height on safari IOS.
|
|
247
|
-
*/
|
|
248
|
-
|
|
249
|
-
::-webkit-date-and-time-value {
|
|
250
|
-
height: 1.5em;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
254
|
/*
|
|
254
255
|
Remove the inner padding in Chrome and Safari on macOS.
|
|
255
256
|
*/
|
|
@@ -259,16 +260,11 @@ progress {
|
|
|
259
260
|
}
|
|
260
261
|
|
|
261
262
|
/*
|
|
262
|
-
|
|
263
|
+
Correct empty date field height on safari IOS.
|
|
263
264
|
*/
|
|
264
265
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
-webkit-appearance: none;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
input[step='any'] {
|
|
271
|
-
-moz-appearance: textfield;
|
|
266
|
+
::-webkit-date-and-time-value {
|
|
267
|
+
height: 1.5em;
|
|
272
268
|
}
|
|
273
269
|
|
|
274
270
|
/*
|
|
@@ -344,10 +340,11 @@ video {
|
|
|
344
340
|
}
|
|
345
341
|
|
|
346
342
|
/*
|
|
347
|
-
|
|
343
|
+
Make turbo frame become pseudo-box by default.
|
|
348
344
|
*/
|
|
349
|
-
|
|
350
|
-
|
|
345
|
+
|
|
346
|
+
turbo-frame {
|
|
347
|
+
display: contents;
|
|
351
348
|
}
|
|
352
349
|
|
|
353
350
|
/*
|
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 flash input pagination progress prose sheet skeleton switch table
|
|
5
|
+
accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table toggle
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
.btn {
|
|
2
2
|
align-items: center;
|
|
3
3
|
background-color: var(--btn-background, var(--color-primary));
|
|
4
|
-
border-color: var(--color-border);
|
|
5
4
|
border-radius: var(--rounded-md);
|
|
6
5
|
border-width: var(--btn-border-width, 0);
|
|
7
6
|
color: var(--btn-color, var(--color-text-reversed));
|
|
@@ -71,12 +70,13 @@
|
|
|
71
70
|
|
|
72
71
|
&::after {
|
|
73
72
|
animation: var(--animate-spin);
|
|
73
|
+
animation-duration: 1s;
|
|
74
74
|
background-image: url("loader-circle.svg");
|
|
75
75
|
background-size: cover;
|
|
76
|
-
block-size: var(--size-
|
|
76
|
+
block-size: var(--size-6);
|
|
77
77
|
content: "";
|
|
78
78
|
filter: var(--btn-icon-color, var(--color-filter-text-reversed));
|
|
79
|
-
inline-size: var(--size-
|
|
79
|
+
inline-size: var(--size-6);
|
|
80
80
|
margin-inline: auto;
|
|
81
81
|
position: absolute;
|
|
82
82
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
.flash {
|
|
2
2
|
animation: appear-then-fade 4s 300ms both;
|
|
3
|
-
|
|
4
|
-
background-color: hsl(from var(--color-text) h s l / .65);
|
|
3
|
+
background-color: var(--color-text);
|
|
5
4
|
border-radius: var(--rounded-full);
|
|
6
5
|
color: var(--color-text-reversed);
|
|
7
6
|
margin-block-start: var(--size-4);
|
|
@@ -9,11 +8,6 @@
|
|
|
9
8
|
padding: var(--size-2) var(--size-4);
|
|
10
9
|
position: fixed;
|
|
11
10
|
text-align: center;
|
|
12
|
-
|
|
13
|
-
img {
|
|
14
|
-
display: inline;
|
|
15
|
-
margin-block-end: var(--size-1);
|
|
16
|
-
}
|
|
17
11
|
}
|
|
18
12
|
|
|
19
13
|
@keyframes appear-then-fade {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.toggle {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
position: relative;
|
|
4
|
+
|
|
5
|
+
&:has(:focus-visible) .btn {
|
|
6
|
+
outline: var(--border-2) solid var(--color-selected-dark);
|
|
7
|
+
outline-offset: var(--border-2);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
[type="checkbox"] {
|
|
11
|
+
position: absolute; clip: rect(0, 0, 0, 0);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[type="checkbox"]:checked + .btn {
|
|
15
|
+
--btn-background: var(--color-secondary);
|
|
16
|
+
}
|
|
17
|
+
}
|
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.27
|
|
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-25 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -66,6 +66,7 @@ files:
|
|
|
66
66
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
|
|
67
67
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
68
68
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
69
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
|
|
69
70
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
|
70
71
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
|
71
72
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|