css-zero 4.0.2 → 4.0.3
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 +7 -0
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +8 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +36 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +4 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/sound_controller.js +21 -17
- 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: 968fe17a2f45545b00f3e3868a0119246043b00866c751b77b9ff6571a5d1e67
|
|
4
|
+
data.tar.gz: e1cc5cce55aa89119edea55a557effabc3336fef3d0ad7e71f02134ad17b4c7b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f4a95823923447a9fbc8fd97f797c148301ba9d71495acc336e0c9342bd7376f0c004c8de1b76f448b4fe5697b7ece48af244a2b6d5ad4215f654dab31bd5f88
|
|
7
|
+
data.tar.gz: 654b0076a84b5353d00e28d8752aafe87b0532aa26adde4146d1c15bab2034fe603b188e1690e90d3fa9e25808427e75f28b6f74d1666e4c63fc924f770d4ba0
|
data/CHANGELOG.md
CHANGED
data/lib/css_zero/version.rb
CHANGED
|
@@ -40,13 +40,17 @@
|
|
|
40
40
|
inline-size: var(--size-full);
|
|
41
41
|
justify-content: center;
|
|
42
42
|
user-select: none;
|
|
43
|
-
|
|
44
|
-
.icon {
|
|
45
|
-
--icon-size: 1em;
|
|
46
|
-
}
|
|
47
43
|
}
|
|
48
44
|
}
|
|
49
45
|
|
|
46
|
+
.avatar--sm {
|
|
47
|
+
--avatar-size: var(--size-6);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.avatar--lg {
|
|
51
|
+
--avatar-size: var(--size-10);
|
|
52
|
+
}
|
|
53
|
+
|
|
50
54
|
.avatar__badge {
|
|
51
55
|
background-color: var(--avatar-badge-color, var(--color-primary));
|
|
52
56
|
block-size: var(--avatar-badge-size);
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
position: relative;
|
|
18
18
|
white-space: nowrap;
|
|
19
19
|
|
|
20
|
+
.icon {
|
|
21
|
+
--icon-size: var(--btn-icon-size, 1rem);
|
|
22
|
+
}
|
|
23
|
+
|
|
20
24
|
&:hover {
|
|
21
25
|
background-color: var(--btn-hover-color, var(--color-border-light));
|
|
22
26
|
}
|
|
@@ -31,6 +35,8 @@
|
|
|
31
35
|
}
|
|
32
36
|
}
|
|
33
37
|
|
|
38
|
+
/* Variants */
|
|
39
|
+
|
|
34
40
|
.btn--primary {
|
|
35
41
|
--btn-background: var(--color-primary);
|
|
36
42
|
--btn-border-color: transparent;
|
|
@@ -76,6 +82,36 @@
|
|
|
76
82
|
--btn-padding: var(--size-1_5);
|
|
77
83
|
}
|
|
78
84
|
|
|
85
|
+
/* Sizes */
|
|
86
|
+
|
|
87
|
+
.btn--xs {
|
|
88
|
+
--btn-font-size: var(--text-xs);
|
|
89
|
+
--btn-padding: var(--size-0_5) var(--size-2);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.btn--icon-xs {
|
|
93
|
+
--btn-icon-size: var(--size-3_5);
|
|
94
|
+
--btn-padding: var(--size-1);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.btn--sm {
|
|
98
|
+
--btn-padding: var(--size-0_5) var(--size-2_5);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.btn--icon-sm {
|
|
102
|
+
--btn-padding: var(--size-1);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.btn--lg {
|
|
106
|
+
--btn-padding: var(--size-1_5) var(--size-3);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.btn--icon-lg {
|
|
110
|
+
--btn-padding: var(--size-2);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Extras */
|
|
114
|
+
|
|
79
115
|
.btn--feedback {
|
|
80
116
|
transition-duration: var(--time-150);
|
|
81
117
|
transition-property: transform;
|
|
@@ -2,69 +2,73 @@ import { Controller } from "@hotwired/stimulus"
|
|
|
2
2
|
import { play } from "https://esm.sh/cuelume@0.2.2?standalone"
|
|
3
3
|
|
|
4
4
|
export default class extends Controller {
|
|
5
|
-
static values = { connect: String, disconnect: String }
|
|
5
|
+
static values = { connect: String, disconnect: String, volume: { type: Number, default: 1 } }
|
|
6
6
|
|
|
7
7
|
connect() {
|
|
8
|
-
this.hasConnectValue && play(this.connectValue)
|
|
8
|
+
this.hasConnectValue && this.#play(this.connectValue)
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
disconnect() {
|
|
12
|
-
this.hasDisconnectValue && play(this.disconnectValue)
|
|
12
|
+
this.hasDisconnectValue && this.#play(this.disconnectValue)
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
chime() {
|
|
16
|
-
play("chime")
|
|
16
|
+
this.#play("chime")
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
sparkle() {
|
|
20
|
-
play("sparkle")
|
|
20
|
+
this.#play("sparkle")
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
droplet() {
|
|
24
|
-
play("droplet")
|
|
24
|
+
this.#play("droplet")
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
bloom() {
|
|
28
|
-
play("bloom")
|
|
28
|
+
this.#play("bloom")
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
whisper() {
|
|
32
|
-
play("whisper")
|
|
32
|
+
this.#play("whisper")
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
tick() {
|
|
36
|
-
play("tick")
|
|
36
|
+
this.#play("tick")
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
press() {
|
|
40
|
-
play("press")
|
|
40
|
+
this.#play("press")
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
release() {
|
|
44
|
-
play("release")
|
|
44
|
+
this.#play("release")
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
toggle() {
|
|
48
|
-
play("toggle")
|
|
48
|
+
this.#play("toggle")
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
success() {
|
|
52
|
-
play("success")
|
|
52
|
+
this.#play("success")
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
error() {
|
|
56
|
-
play("error")
|
|
56
|
+
this.#play("error")
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
page() {
|
|
60
|
-
play("page")
|
|
60
|
+
this.#play("page")
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
loading() {
|
|
64
|
-
play("loading")
|
|
64
|
+
this.#play("loading")
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
ready() {
|
|
68
|
-
play("ready")
|
|
68
|
+
this.#play("ready")
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
#play(sound) {
|
|
72
|
+
play(sound, { volume: this.volumeValue })
|
|
69
73
|
}
|
|
70
74
|
}
|