css-zero 4.2.1 → 4.2.2
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/CHANGELOG.md +11 -0
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/combobox.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/datepicker.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +3 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css +8 -16
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +2 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css +3 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +5 -5
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js +9 -18
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 14a22c54b379b8a90a4144a252413a0cc388b140781ffdbe98101f00aa9f4ff3
|
|
4
|
+
data.tar.gz: 04061c71ca6daef8635b92d8691508c5726e7b6e20f9aba4c8c9f9994d73c20a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 538545d4c41977daedaf54485fc5e796b42621484e8017c27cf768ca9ec58f1ab0e52fe2155e5cd24ace58fe957737c344b1d776f975a0ae3d22abb22e8e06f4
|
|
7
|
+
data.tar.gz: 209ec906573f718d1d621fed9d7099d7938e69079e0cd3ee6765018b0a06043b1e3b14d53cc9233aba62b9fc6f23e704a491809cd5e0bce9f2681627103a1e75
|
data/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
## 4.2.2 - 2026-08-29
|
|
2
|
+
- Use position-try shorthand in popover
|
|
3
|
+
- Adjust dialog transition durations
|
|
4
|
+
- Adjust flash animation easing
|
|
5
|
+
- Adjust tabs indicator easing
|
|
6
|
+
- Adjust combobox transition duration
|
|
7
|
+
- Adjust datepicker animation duration
|
|
8
|
+
- Adjust popover transition duration
|
|
9
|
+
- Adjust sheet transition and slide distance
|
|
10
|
+
- Simplify autosave
|
|
11
|
+
|
|
1
12
|
## 4.2.1 - 2026-08-26
|
|
2
13
|
- Hide sidebar content when closed
|
|
3
14
|
- Adjust sidebar menu current and focus styles
|
data/lib/css_zero/version.rb
CHANGED
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
|
|
14
14
|
/* Setup transition */
|
|
15
15
|
transition-behavior: allow-discrete;
|
|
16
|
-
transition-duration: var(--time-
|
|
16
|
+
transition-duration: var(--time-200);
|
|
17
17
|
transition-property: display, overlay, opacity, transform;
|
|
18
18
|
transition-timing-function: var(--ease-out-3);
|
|
19
19
|
|
|
20
20
|
&::backdrop {
|
|
21
21
|
transition-behavior: allow-discrete;
|
|
22
|
-
transition-duration: var(--time-
|
|
22
|
+
transition-duration: var(--time-150);
|
|
23
23
|
transition-property: display, overlay, opacity;
|
|
24
24
|
transition-timing-function: var(--ease-out-3);
|
|
25
25
|
}
|
|
@@ -61,6 +61,6 @@
|
|
|
61
61
|
|
|
62
62
|
.dialog__close {
|
|
63
63
|
inset-block-start: var(--size-3);
|
|
64
|
-
inset-inline-end:
|
|
64
|
+
inset-inline-end: var(--size-3);
|
|
65
65
|
position: absolute;
|
|
66
66
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.flash {
|
|
2
2
|
animation: flash-in-out 5s both;
|
|
3
|
-
animation-timing-function: var(--ease-
|
|
3
|
+
animation-timing-function: var(--ease-out-3);
|
|
4
4
|
background-color: var(--color-surface);
|
|
5
5
|
border-radius: var(--rounded-lg);
|
|
6
6
|
border-width: var(--border);
|
|
@@ -31,36 +31,28 @@
|
|
|
31
31
|
|
|
32
32
|
@keyframes flash-in-out {
|
|
33
33
|
0% {
|
|
34
|
-
opacity: 0;
|
|
35
|
-
transform: translateY(-100%);
|
|
34
|
+
opacity: 0; transform: translateY(-100%);
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
8%, 92% {
|
|
39
|
-
opacity: 1;
|
|
40
|
-
transform: translateY(0);
|
|
41
|
-
animation-timing-function: ease-out;
|
|
38
|
+
opacity: 1; transform: translateY(0);
|
|
42
39
|
}
|
|
43
40
|
|
|
44
|
-
100% {
|
|
45
|
-
opacity: 0;
|
|
46
|
-
transform: translateY(-100%);
|
|
41
|
+
100% {
|
|
42
|
+
opacity: 0; transform: translateY(-100%);
|
|
47
43
|
}
|
|
48
44
|
}
|
|
49
45
|
|
|
50
46
|
@keyframes flash-in-out-extended {
|
|
51
47
|
0% {
|
|
52
|
-
opacity: 0;
|
|
53
|
-
transform: translateY(-100%);
|
|
48
|
+
opacity: 0; transform: translateY(-100%);
|
|
54
49
|
}
|
|
55
50
|
|
|
56
51
|
3.3%, 96.7% {
|
|
57
|
-
opacity: 1;
|
|
58
|
-
transform: translateY(0);
|
|
59
|
-
animation-timing-function: ease-out;
|
|
52
|
+
opacity: 1; transform: translateY(0);
|
|
60
53
|
}
|
|
61
54
|
|
|
62
55
|
100% {
|
|
63
|
-
opacity: 0;
|
|
64
|
-
transform: translateY(-100%);
|
|
56
|
+
opacity: 0; transform: translateY(-100%);
|
|
65
57
|
}
|
|
66
58
|
}
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
|
|
14
14
|
&:is([type="checkbox"], [type="radio"]) {
|
|
15
15
|
accent-color: var(--input-accent-color, var(--color-primary));
|
|
16
|
-
block-size:
|
|
17
|
-
inline-size:
|
|
16
|
+
block-size: var(--input-check-size, var(--size-4));
|
|
17
|
+
inline-size: var(--input-check-size, var(--size-4));
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&:is([type="range"]) {
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
/* Anchor position */
|
|
10
10
|
position-area: var(--popover-position, block-end);
|
|
11
|
-
position-try
|
|
11
|
+
position-try: var(--popover-position-try, flip-block);
|
|
12
12
|
margin-block: var(--popover-margin-block, .25rem 0);
|
|
13
13
|
|
|
14
14
|
/* Setup transition */
|
|
15
15
|
transition-behavior: allow-discrete;
|
|
16
|
-
transition-duration: var(--time-
|
|
16
|
+
transition-duration: var(--time-150);
|
|
17
17
|
transition-property: display, opacity, overlay, transform;
|
|
18
18
|
transition-timing-function: var(--ease-out-3);
|
|
19
19
|
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
|
|
40
40
|
.popover--unanchored {
|
|
41
41
|
--popover-position: none;
|
|
42
|
-
--popover-position-try
|
|
42
|
+
--popover-position-try: none;
|
|
43
43
|
--popover-margin-block: 0;
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -72,4 +72,3 @@
|
|
|
72
72
|
--popover-position: block-start span-inline-start;
|
|
73
73
|
--popover-margin-block: 0 .25rem;
|
|
74
74
|
}
|
|
75
|
-
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
/* Setup transition */
|
|
16
16
|
transition-behavior: allow-discrete;
|
|
17
|
-
transition-duration: var(--time-
|
|
17
|
+
transition-duration: var(--time-300);
|
|
18
18
|
transition-property: display, overlay, opacity, transform;
|
|
19
|
-
transition-timing-function: var(--ease-out-
|
|
19
|
+
transition-timing-function: var(--ease-out-4);
|
|
20
20
|
|
|
21
21
|
&::backdrop {
|
|
22
22
|
transition-behavior: allow-discrete;
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
.sheet--left {
|
|
52
52
|
--sheet-border: 0 1px;
|
|
53
53
|
--sheet-margin-inline: 0 auto;
|
|
54
|
-
--sheet-transform: translateX(-
|
|
54
|
+
--sheet-transform: translateX(-100%);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.sheet--right {
|
|
58
58
|
--sheet-border: 1px 0;
|
|
59
59
|
--sheet-margin-inline: auto 0;
|
|
60
|
-
--sheet-transform: translateX(
|
|
60
|
+
--sheet-transform: translateX(100%);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.sheet__content {
|
|
@@ -66,6 +66,6 @@
|
|
|
66
66
|
|
|
67
67
|
.sheet__close {
|
|
68
68
|
inset-block-start: var(--size-3);
|
|
69
|
-
inset-inline-end:
|
|
69
|
+
inset-inline-end: var(--size-3);
|
|
70
70
|
position: absolute;
|
|
71
71
|
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js
CHANGED
|
@@ -9,47 +9,38 @@ export default class extends Controller {
|
|
|
9
9
|
#timer
|
|
10
10
|
|
|
11
11
|
disconnect() {
|
|
12
|
-
this.#
|
|
12
|
+
this.#dirty && this.#save()
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
change() {
|
|
16
|
-
!this.#dirty && this.#
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
async #submit() {
|
|
20
|
-
this.#dirty && await this.#save()
|
|
16
|
+
!this.#dirty && this.#scheduleSave()
|
|
21
17
|
}
|
|
22
18
|
|
|
23
19
|
async #save() {
|
|
24
|
-
this.#updateAppearance(true)
|
|
25
20
|
this.#resetTimer()
|
|
21
|
+
this.#toggleSaving(true)
|
|
26
22
|
await this.#submitForm(this.element)
|
|
27
|
-
this.#
|
|
23
|
+
this.#toggleSaving(false)
|
|
28
24
|
}
|
|
29
25
|
|
|
30
26
|
async #submitForm(form) {
|
|
31
27
|
return await new FetchRequest(form.method, form.action, { body: new FormData(form) }).perform()
|
|
32
28
|
}
|
|
33
29
|
|
|
34
|
-
#scheduleSaveAndUpdateAppearance(saving) {
|
|
35
|
-
this.#scheduleSave()
|
|
36
|
-
this.#updateAppearance(false)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
30
|
#scheduleSave() {
|
|
40
31
|
this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL)
|
|
41
32
|
}
|
|
42
33
|
|
|
43
|
-
#updateAppearance(saving) {
|
|
44
|
-
this.element.ariaBusy = saving
|
|
45
|
-
this.submitTarget.disabled = saving
|
|
46
|
-
}
|
|
47
|
-
|
|
48
34
|
#resetTimer() {
|
|
49
35
|
clearTimeout(this.#timer)
|
|
50
36
|
this.#timer = null
|
|
51
37
|
}
|
|
52
38
|
|
|
39
|
+
#toggleSaving(saving) {
|
|
40
|
+
this.element.ariaBusy = saving
|
|
41
|
+
this.submitTarget.disabled = saving
|
|
42
|
+
}
|
|
43
|
+
|
|
53
44
|
get #dirty() {
|
|
54
45
|
return !!this.#timer
|
|
55
46
|
}
|