css-zero 0.0.34 → 0.0.36
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/assets/stylesheets/zutilities.css +2 -9
- 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 +29 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/camera.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/copy.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/default-picture.webp +0 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/download.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/eye-off.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/eye.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/maximize.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/minus.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/share.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/x.svg +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +17 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +12 -9
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css +2 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +43 -25
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +0 -5
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css +4 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css +41 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css +7 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css +6 -6
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js +11 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js +9 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/clear_button_controller.js +9 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/copy_button_controller.js +13 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js +4 -4
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js +13 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js +33 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js +17 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js +26 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/reveal_button_controller.js +19 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js +8 -9
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js +21 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js +42 -0
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +2 -7
- metadata +23 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css +0 -32
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 02bf5fecc4db0a341a8e9787bf93ff11f447b0c36d71d02105fccfb544db431e
|
|
4
|
+
data.tar.gz: 6c39de744cd1c74965873dc531e55b8c8229785d698bcbf355de88a6f5f4ff04
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: eb4d6e6c8b0ec2b26e98eb4b3cd504d20024787ab435a65b0b624cbf1acdf044e5afe13be4118091bfb2b321e7f7d0e6afc5ab08b8e12bbcbdce93e9196fae0b
|
|
7
|
+
data.tar.gz: d93dfdf03c9752c3c938c81282b48c4fef238b344f7409e35af9a4f5369eca79b8c2feed210c0301639c9b21e367258640a7e97c4142b83adb5e393129ac674c
|
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 layouts pagination progress prose sheet skeleton switch table tabs toggle
|
|
22
|
+
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
.self-end { align-self: end; }
|
|
26
26
|
.self-center { align-self: center; }
|
|
27
27
|
|
|
28
|
-
.gap { column-gap: var(--column-gap,
|
|
29
|
-
.gap-
|
|
28
|
+
.gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
|
|
29
|
+
.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }
|
|
30
30
|
|
|
31
31
|
/****************************************************************
|
|
32
32
|
* Text
|
|
@@ -122,16 +122,11 @@
|
|
|
122
122
|
.border-main { border-color: var(--color-border); }
|
|
123
123
|
.border-dark { border-color: var(--color-border-dark); }
|
|
124
124
|
|
|
125
|
-
.border-solid { border-style: solid; }
|
|
126
|
-
.border-dashed { border-style: dashed; }
|
|
127
|
-
.border-dotted { border-style: dotted; }
|
|
128
|
-
|
|
129
125
|
.rounded-none { border-radius: none; }
|
|
130
126
|
.rounded-sm { border-radius: var(--rounded-sm); }
|
|
131
127
|
.rounded { border-radius: var(--rounded); }
|
|
132
128
|
.rounded-md { border-radius: var(--rounded-md); }
|
|
133
129
|
.rounded-lg { border-radius: var(--rounded-lg); }
|
|
134
|
-
.rounded-xl { border-radius: var(--rounded-xl); }
|
|
135
130
|
.rounded-full { border-radius: var(--rounded-full); }
|
|
136
131
|
|
|
137
132
|
/****************************************************************
|
|
@@ -142,8 +137,6 @@
|
|
|
142
137
|
.shadow { box-shadow: var(--shadow); }
|
|
143
138
|
.shadow-md { box-shadow: var(--shadow-md); }
|
|
144
139
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
145
|
-
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
146
|
-
.shadow-2xl { box-shadow: var(--shadow-2xl); }
|
|
147
140
|
|
|
148
141
|
/****************************************************************
|
|
149
142
|
* Layout
|
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 layouts pagination progress prose sheet skeleton switch table tabs toggle
|
|
5
|
+
accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -29,14 +29,34 @@ dialog:
|
|
|
29
29
|
flash:
|
|
30
30
|
- app/assets/stylesheets/flash.css
|
|
31
31
|
- app/javascript/controllers/element_removal_controller.js
|
|
32
|
+
fullscreen:
|
|
33
|
+
- app/javascript/controllers/fullscreen_controller.js
|
|
34
|
+
- app/assets/images/maximize.svg
|
|
35
|
+
hotkey:
|
|
36
|
+
- app/javascript/controllers/hotkey_controller.js
|
|
32
37
|
input:
|
|
33
38
|
- app/assets/stylesheets/input.css
|
|
34
39
|
- app/assets/images/select-arrow.svg
|
|
40
|
+
- app/javascript/controllers/check_all_controller.js
|
|
41
|
+
input_concerns:
|
|
42
|
+
- app/javascript/controllers/autoselect_controller.js
|
|
43
|
+
- app/javascript/controllers/clear_button_controller.js
|
|
44
|
+
- app/assets/images/x.svg
|
|
45
|
+
- app/javascript/controllers/reveal_button_controller.js
|
|
46
|
+
- app/assets/images/eye.svg
|
|
47
|
+
- app/assets/images/eye-off.svg
|
|
48
|
+
- app/javascript/controllers/copy_button_controller.js
|
|
49
|
+
- app/assets/images/copy.svg
|
|
35
50
|
layouts:
|
|
36
51
|
- app/assets/stylesheets/layouts.css
|
|
37
52
|
- app/assets/images/menu.svg
|
|
53
|
+
lightbox:
|
|
54
|
+
- app/assets/stylesheets/lightbox.css
|
|
55
|
+
- app/javascript/controllers/lightbox_controller.js
|
|
56
|
+
- app/assets/images/download.svg
|
|
57
|
+
- app/assets/images/share.svg
|
|
58
|
+
- app/assets/images/x.svg
|
|
38
59
|
pagination:
|
|
39
|
-
- app/assets/stylesheets/pagination.css
|
|
40
60
|
- app/assets/images/chevron-right.svg
|
|
41
61
|
- app/assets/images/chevron-left.svg
|
|
42
62
|
- app/assets/images/ellipsis.svg
|
|
@@ -50,6 +70,7 @@ sheet:
|
|
|
50
70
|
- app/assets/images/x.svg
|
|
51
71
|
skeleton:
|
|
52
72
|
- app/assets/stylesheets/skeleton.css
|
|
73
|
+
- app/javascript/controllers/form_controller.js
|
|
53
74
|
switch:
|
|
54
75
|
- app/assets/stylesheets/switch.css
|
|
55
76
|
table:
|
|
@@ -57,5 +78,12 @@ table:
|
|
|
57
78
|
tabs:
|
|
58
79
|
- app/assets/stylesheets/tabs.css
|
|
59
80
|
- app/javascript/controllers/tabs_controller.js
|
|
81
|
+
upload_preview:
|
|
82
|
+
- app/javascript/controllers/upload_preview_controller.js
|
|
83
|
+
- app/assets/images/default-picture.webp
|
|
84
|
+
- app/assets/images/camera.svg
|
|
85
|
+
- app/assets/images/minus.svg
|
|
60
86
|
toggle:
|
|
61
87
|
- app/assets/stylesheets/toggle.css
|
|
88
|
+
web_share:
|
|
89
|
+
- app/javascript/controllers/web_share_controller.js
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
|
@@ -16,6 +16,23 @@
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
.avatar--btn {
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
filter: var(--brightness-75);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:focus-visible {
|
|
27
|
+
outline: var(--border-2) solid var(--color-selected-dark);
|
|
28
|
+
outline-offset: var(--border-2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:disabled {
|
|
32
|
+
pointer-events: none;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
19
36
|
.avatar__fallback {
|
|
20
37
|
align-items: center;
|
|
21
38
|
background-color: var(--color-border-light);
|
|
@@ -1,31 +1,34 @@
|
|
|
1
1
|
.badge {
|
|
2
|
-
background-color: var(--badge-background, var(--color-
|
|
2
|
+
background-color: var(--badge-background, var(--color-bg));
|
|
3
3
|
border-radius: var(--rounded-full);
|
|
4
|
-
border
|
|
5
|
-
color: var(--badge-color, var(--color-text
|
|
4
|
+
border: 1px solid var(--badge-border-color, var(--color-border));
|
|
5
|
+
color: var(--badge-color, var(--color-text));
|
|
6
6
|
display: inline-flex;
|
|
7
7
|
font-size: var(--text-xs);
|
|
8
8
|
font-weight: var(--font-semibold);
|
|
9
9
|
padding: var(--size-0_5) var(--size-2_5);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.badge--
|
|
13
|
-
--badge-background: var(--color-
|
|
14
|
-
--badge-color:
|
|
12
|
+
.badge--primary {
|
|
13
|
+
--badge-background: var(--color-primary);
|
|
14
|
+
--badge-border-color: transparent;
|
|
15
|
+
--badge-color: var(--color-text-reversed);
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
.badge--
|
|
18
|
-
--badge-background:
|
|
19
|
-
--badge-border-
|
|
18
|
+
.badge--secondary {
|
|
19
|
+
--badge-background: var(--color-secondary);
|
|
20
|
+
--badge-border-color: transparent;
|
|
20
21
|
--badge-color: var(--color-text);
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.badge--positive {
|
|
24
25
|
--badge-background: var(--color-positive);
|
|
26
|
+
--badge-border-color: transparent;
|
|
25
27
|
--badge-color: white;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
.badge--negative {
|
|
29
31
|
--badge-background: var(--color-negative);
|
|
32
|
+
--badge-border-color: transparent;
|
|
30
33
|
--badge-color: white;
|
|
31
34
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-wrap: wrap;
|
|
6
6
|
font-size: var(--text-sm);
|
|
7
|
-
gap: var(--size-
|
|
7
|
+
gap: var(--size-2);
|
|
8
8
|
overflow-wrap: break-word;
|
|
9
9
|
|
|
10
10
|
img {
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
@media (width < 40rem) {
|
|
19
|
-
gap: var(--size-
|
|
19
|
+
gap: var(--size-1);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.btn {
|
|
2
2
|
align-items: center;
|
|
3
|
-
background-color: var(--btn-background, var(--color-
|
|
4
|
-
border-radius: var(--rounded-md);
|
|
5
|
-
border
|
|
6
|
-
color: var(--btn-color, var(--color-text
|
|
3
|
+
background-color: var(--btn-background, var(--color-bg));
|
|
4
|
+
border-radius: var(--btn-radius, var(--rounded-md));
|
|
5
|
+
border: 1px solid var(--btn-border-color, var(--color-border));
|
|
6
|
+
color: var(--btn-color, var(--color-text));
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
display: inline-flex;
|
|
9
9
|
font-size: var(--text-sm);
|
|
@@ -11,11 +11,15 @@
|
|
|
11
11
|
gap: var(--size-2);
|
|
12
12
|
justify-content: center;
|
|
13
13
|
white-space: nowrap;
|
|
14
|
-
padding: var(--
|
|
14
|
+
padding: var(--btn-padding, 0.5rem 1rem);
|
|
15
15
|
text-align: center;
|
|
16
16
|
|
|
17
|
-
img {
|
|
18
|
-
filter: var(--btn-icon-color, var(--color-filter-text
|
|
17
|
+
img:not([class]) {
|
|
18
|
+
filter: var(--btn-icon-color, var(--color-filter-text));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:hover {
|
|
22
|
+
filter: var(--btn-filter-hover, var(--brightness-95));
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
&:focus-visible {
|
|
@@ -29,35 +33,49 @@
|
|
|
29
33
|
}
|
|
30
34
|
}
|
|
31
35
|
|
|
32
|
-
.btn--
|
|
33
|
-
--btn-background: var(--color-
|
|
34
|
-
--btn-color:
|
|
35
|
-
--btn-
|
|
36
|
+
.btn--primary {
|
|
37
|
+
--btn-background: var(--color-primary);
|
|
38
|
+
--btn-border-color: transparent;
|
|
39
|
+
--btn-color: var(--color-text-reversed);
|
|
40
|
+
--btn-icon-color: var(--color-filter-text-reversed);
|
|
36
41
|
}
|
|
37
42
|
|
|
38
|
-
.btn--
|
|
39
|
-
--btn-background: var(--color-
|
|
40
|
-
--btn-border-
|
|
41
|
-
--btn-color: var(--color-text);
|
|
42
|
-
--btn-icon-color: var(--color-filter-text);
|
|
43
|
+
.btn--secondary {
|
|
44
|
+
--btn-background: var(--color-secondary);
|
|
45
|
+
--btn-border-color: transparent;
|
|
43
46
|
}
|
|
44
47
|
|
|
45
|
-
.btn--
|
|
46
|
-
--btn-
|
|
47
|
-
--btn-color: var(--color-text);
|
|
48
|
-
--btn-icon-color: var(--color-filter-text);
|
|
48
|
+
.btn--borderless {
|
|
49
|
+
--btn-border-color: transparent;
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
.btn--positive {
|
|
52
53
|
--btn-background: var(--color-positive);
|
|
53
|
-
--btn-color:
|
|
54
|
-
--btn-
|
|
54
|
+
--btn-border-color: transparent;
|
|
55
|
+
--btn-color: var(--color-text-reversed);
|
|
56
|
+
--btn-icon-color: var(--color-filter-text-reversed);
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
.btn--negative {
|
|
58
60
|
--btn-background: var(--color-negative);
|
|
59
|
-
--btn-color:
|
|
60
|
-
--btn-
|
|
61
|
+
--btn-border-color: transparent;
|
|
62
|
+
--btn-color: var(--color-text-reversed);
|
|
63
|
+
--btn-icon-color: var(--color-filter-text-reversed);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.btn--plain {
|
|
67
|
+
--btn-background: transparent;
|
|
68
|
+
--btn-border-color: transparent;
|
|
69
|
+
--btn-padding: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.btn--rounded {
|
|
73
|
+
--btn-padding: var(--size-2);
|
|
74
|
+
--btn-radius: var(--rounded-full);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.btn--pressed:active {
|
|
78
|
+
opacity: var(--opacity-50);
|
|
61
79
|
}
|
|
62
80
|
|
|
63
81
|
[aria-busy] .btn--loading:disabled {
|
|
@@ -66,7 +84,7 @@
|
|
|
66
84
|
}
|
|
67
85
|
|
|
68
86
|
&::after {
|
|
69
|
-
filter: var(--btn-icon-color, var(--color-filter-text
|
|
87
|
+
filter: var(--btn-icon-color, var(--color-filter-text));
|
|
70
88
|
}
|
|
71
89
|
|
|
72
90
|
&::after {
|
|
@@ -50,11 +50,6 @@
|
|
|
50
50
|
|
|
51
51
|
/* Containers that act like (and contain) inputs */
|
|
52
52
|
.input--actor {
|
|
53
|
-
&:has(:-webkit-autofill) {
|
|
54
|
-
-webkit-text-fill-color: var(--color-text);
|
|
55
|
-
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
53
|
&:focus-within {
|
|
59
54
|
outline: var(--border-2) solid var(--color-selected-dark);
|
|
60
55
|
outline-offset: var(--border-2);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.layout
|
|
1
|
+
.sidebar-layout {
|
|
2
2
|
display: grid;
|
|
3
3
|
grid-template-areas: "header header" "sidebar main";
|
|
4
4
|
grid-template-columns: var(--sidebar-width, 0) 1fr;
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
@media (width >= 48rem) { display: none; }
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.
|
|
21
|
+
.pancake-stack {
|
|
22
22
|
display: grid;
|
|
23
23
|
grid-template-rows: auto 1fr auto;
|
|
24
24
|
min-block-size: 100dvh;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.
|
|
27
|
+
.super-centered {
|
|
28
28
|
display: grid;
|
|
29
|
-
place-
|
|
29
|
+
place-items: center;
|
|
30
30
|
min-block-size: 100dvh;
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--lightbox-padding: var(--size-4);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.lightbox {
|
|
6
|
+
background-color: rgba(0, 0, 0, .8);
|
|
7
|
+
block-size: 100dvh;
|
|
8
|
+
max-block-size: unset;
|
|
9
|
+
inline-size: 100dvw;
|
|
10
|
+
max-inline-size: unset;
|
|
11
|
+
padding: var(--lightbox-padding);
|
|
12
|
+
|
|
13
|
+
&[open] {
|
|
14
|
+
display: grid;
|
|
15
|
+
place-items: center;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.lightbox__close {
|
|
20
|
+
align-self: start;
|
|
21
|
+
grid-area: 1/1;
|
|
22
|
+
justify-self: end;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.lightbox__download {
|
|
26
|
+
align-self: end;
|
|
27
|
+
grid-area: 1/1;
|
|
28
|
+
justify-self: end;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.lightbox__share {
|
|
32
|
+
align-self: start;
|
|
33
|
+
grid-area: 1/1;
|
|
34
|
+
justify-self: start;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.lightbox__image {
|
|
38
|
+
grid-area: 1/1;
|
|
39
|
+
max-inline-size: calc(100dvw - (var(--lightbox-padding) * 2));
|
|
40
|
+
max-block-size: calc(100dvh - (var(--lightbox-padding) * 2));
|
|
41
|
+
}
|
|
@@ -14,13 +14,16 @@
|
|
|
14
14
|
padding: var(--size-1);
|
|
15
15
|
|
|
16
16
|
button {
|
|
17
|
-
background-color: transparent;
|
|
18
|
-
color: var(--color-text-subtle);
|
|
19
17
|
inline-size: var(--size-full);
|
|
20
18
|
}
|
|
21
19
|
|
|
20
|
+
button {
|
|
21
|
+
--btn-background: transparent;
|
|
22
|
+
--btn-border-color: transparent;
|
|
23
|
+
--btn-filter-hover: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
22
26
|
button[aria-selected=true] {
|
|
23
|
-
background
|
|
24
|
-
color: var(--color-text);
|
|
27
|
+
--btn-background: var(--color-bg);
|
|
25
28
|
}
|
|
26
29
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
.toggle {
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
|
|
4
|
-
&:has(:focus-visible) .btn {
|
|
5
|
-
outline: var(--border-2) solid var(--color-selected-dark);
|
|
6
|
-
outline-offset: var(--border-2);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
4
|
[type="checkbox"] {
|
|
10
5
|
position: absolute; clip: rect(0, 0, 0, 0);
|
|
11
6
|
}
|
|
12
7
|
|
|
13
|
-
[type="checkbox"]:checked
|
|
8
|
+
&:has([type="checkbox"]:checked) {
|
|
14
9
|
--btn-background: var(--color-secondary);
|
|
15
10
|
}
|
|
11
|
+
|
|
12
|
+
&:has(:focus-visible) {
|
|
13
|
+
outline: var(--border-2) solid var(--color-selected-dark);
|
|
14
|
+
outline-offset: var(--border-2);
|
|
15
|
+
}
|
|
16
16
|
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/copy_button_controller.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = [ "input" ]
|
|
5
|
+
|
|
6
|
+
async copy() {
|
|
7
|
+
try {
|
|
8
|
+
await navigator.clipboard.writeText(this.inputTarget.value)
|
|
9
|
+
} catch (error) {
|
|
10
|
+
console.warn(error.message);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { Controller } from "@hotwired/stimulus"
|
|
2
2
|
|
|
3
3
|
export default class extends Controller {
|
|
4
|
-
static targets = [ "
|
|
4
|
+
static targets = [ "menu" ]
|
|
5
5
|
|
|
6
6
|
show() {
|
|
7
|
-
this.
|
|
7
|
+
this.menuTarget.show()
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
showModal() {
|
|
11
|
-
this.
|
|
11
|
+
this.menuTarget.showModal()
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
close() {
|
|
15
|
-
this.
|
|
15
|
+
this.menuTarget.close()
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
closeOnClickOutside({ target }) {
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = [ "button" ]
|
|
5
|
+
|
|
6
|
+
connect() {
|
|
7
|
+
if (this.hasButtonTarget) this.#hideButtonIfNotSupported()
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
toggle() {
|
|
11
|
+
this.#fullScreenMode ? this.#exitFullscreen() : this.#requestFullscreen()
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
#hideButtonIfNotSupported() {
|
|
15
|
+
this.buttonTarget.hidden = !this.#supportsFullScreen
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
#exitFullscreen() {
|
|
19
|
+
document.exitFullscreen()
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
#requestFullscreen() {
|
|
23
|
+
document.documentElement.requestFullscreen()
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
get #supportsFullScreen() {
|
|
27
|
+
return this.element.requestFullscreen
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
get #fullScreenMode() {
|
|
31
|
+
return document.fullscreenElement
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
click(event) {
|
|
5
|
+
if (this.#isClickable && !this.#shouldIgnore(event)) {
|
|
6
|
+
this.element.click()
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
#shouldIgnore(event) {
|
|
11
|
+
return event.defaultPrevented || event.target.closest("input, textarea")
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
get #isClickable() {
|
|
15
|
+
return getComputedStyle(this.element).pointerEvents !== "none"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = [ "dialog", "zoomedImage", "download", "share" ]
|
|
5
|
+
|
|
6
|
+
show(event) {
|
|
7
|
+
this.dialogTarget.showModal()
|
|
8
|
+
this.#set(event.target.parentNode)
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
close() {
|
|
12
|
+
this.dialogTarget.close()
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
reset() {
|
|
16
|
+
this.zoomedImageTarget.src = ""
|
|
17
|
+
this.downloadTarget.href = ""
|
|
18
|
+
this.shareTarget.dataset.webShareFileValue = "";
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
#set(target) {
|
|
22
|
+
this.zoomedImageTarget.src = target.href
|
|
23
|
+
this.downloadTarget.href = target.dataset.lightboxUrlValue;
|
|
24
|
+
this.shareTarget.dataset.webShareFileValue = target.dataset.lightboxUrlValue;
|
|
25
|
+
}
|
|
26
|
+
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/reveal_button_controller.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = [ "input", "image" ]
|
|
5
|
+
static values = { showImage: String, hideImage: String }
|
|
6
|
+
|
|
7
|
+
reveal() {
|
|
8
|
+
this.inputTarget.type = this.#inputType
|
|
9
|
+
this.imageTarget.src = this.#imageSrc
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
get #inputType() {
|
|
13
|
+
return this.inputTarget.type === "text" ? "password" : "text"
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
get #imageSrc() {
|
|
17
|
+
return this.inputTarget.type === "text" ? this.hideImageValue : this.showImageValue
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -2,24 +2,23 @@ import { Controller } from "@hotwired/stimulus"
|
|
|
2
2
|
|
|
3
3
|
export default class extends Controller {
|
|
4
4
|
static targets = [ "button", "tab" ]
|
|
5
|
-
static values = {
|
|
5
|
+
static values = { index: Number, default: 0 }
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
this
|
|
7
|
+
select({ target }) {
|
|
8
|
+
this.indexValue = target.dataset.index
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
this.selectedValue = target.dataset.value
|
|
11
|
+
indexValueChanged() {
|
|
13
12
|
this.#showSelectedTab()
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
#showSelectedTab() {
|
|
17
|
-
this.buttonTargets.forEach(element => {
|
|
18
|
-
element.ariaSelected =
|
|
16
|
+
this.buttonTargets.forEach((element, index) => {
|
|
17
|
+
element.ariaSelected = index === this.indexValue
|
|
19
18
|
})
|
|
20
19
|
|
|
21
|
-
this.tabTargets.forEach(element => {
|
|
22
|
-
element.hidden =
|
|
20
|
+
this.tabTargets.forEach((element, index) => {
|
|
21
|
+
element.hidden = index !== this.indexValue
|
|
23
22
|
})
|
|
24
23
|
}
|
|
25
24
|
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = [ "image", "input", "removeInput" ]
|
|
5
|
+
static values = { defaultImage: String }
|
|
6
|
+
|
|
7
|
+
previewImage() {
|
|
8
|
+
const selectedFile = this.inputTarget.files[0]
|
|
9
|
+
|
|
10
|
+
if (selectedFile) {
|
|
11
|
+
this.imageTarget.src = URL.createObjectURL(selectedFile);
|
|
12
|
+
this.imageTarget.onload = () => { URL.revokeObjectURL(this.imageTarget.src) }
|
|
13
|
+
this.removeInputTarget.value = false
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
clear() {
|
|
18
|
+
this.imageTarget.src = this.defaultImageValue
|
|
19
|
+
this.removeInputTarget.value = true
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static values = { title: String, text: String, url: String, file: String }
|
|
5
|
+
|
|
6
|
+
#applicationName = 'MyApplication'
|
|
7
|
+
|
|
8
|
+
connect() {
|
|
9
|
+
this.element.hidden = !navigator.canShare
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
async share() {
|
|
13
|
+
try {
|
|
14
|
+
await navigator.share(await this.#getShareData())
|
|
15
|
+
} catch(error) {
|
|
16
|
+
console.warn(error.message);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
async #getShareData() {
|
|
21
|
+
const data = { title: this.titleValue, text: this.textValue }
|
|
22
|
+
|
|
23
|
+
if (this.urlValue) {
|
|
24
|
+
data.url = this.urlValue
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (this.fileValue) {
|
|
28
|
+
data.files = [ await this.#getFileObject()]
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return data;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
async #getFileObject() {
|
|
35
|
+
const response = await fetch(this.fileValue)
|
|
36
|
+
const blob = await response.blob()
|
|
37
|
+
const randomPrefix = `${this.#applicationName}_${Math.random().toString(36).slice(2)}`
|
|
38
|
+
const fileName = `${randomPrefix}.${blob.type.split('/').pop()}`
|
|
39
|
+
|
|
40
|
+
return new File([ blob ], fileName, { type: blob.type })
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
/* Accent colors */
|
|
41
41
|
--color-primary: var(--zinc-50);
|
|
42
42
|
--color-secondary: var(--zinc-800);
|
|
43
|
-
--color-negative: var(--red-
|
|
44
|
-
--color-positive: var(--green-
|
|
43
|
+
--color-negative: var(--red-400);
|
|
44
|
+
--color-positive: var(--green-400);
|
|
45
45
|
|
|
46
46
|
/* SVG color values */
|
|
47
47
|
--color-filter-text: invert(100%);
|
|
@@ -70,8 +70,3 @@ body {
|
|
|
70
70
|
::selection {
|
|
71
71
|
background-color: var(--color-selected);
|
|
72
72
|
}
|
|
73
|
-
|
|
74
|
-
:-webkit-autofill {
|
|
75
|
-
-webkit-text-fill-color: var(--color-text);
|
|
76
|
-
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
|
77
|
-
}
|
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.36
|
|
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-09-
|
|
11
|
+
date: 2024-09-23 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -37,14 +37,23 @@ files:
|
|
|
37
37
|
- lib/generators/css_zero/add/resources.yml
|
|
38
38
|
- lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg
|
|
39
39
|
- lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg
|
|
40
|
+
- lib/generators/css_zero/add/templates/app/assets/images/camera.svg
|
|
40
41
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
|
|
41
42
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
|
|
42
43
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
|
|
43
44
|
- lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
|
|
45
|
+
- lib/generators/css_zero/add/templates/app/assets/images/copy.svg
|
|
46
|
+
- lib/generators/css_zero/add/templates/app/assets/images/default-picture.webp
|
|
47
|
+
- lib/generators/css_zero/add/templates/app/assets/images/download.svg
|
|
44
48
|
- lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg
|
|
49
|
+
- lib/generators/css_zero/add/templates/app/assets/images/eye-off.svg
|
|
50
|
+
- lib/generators/css_zero/add/templates/app/assets/images/eye.svg
|
|
45
51
|
- lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
|
|
52
|
+
- lib/generators/css_zero/add/templates/app/assets/images/maximize.svg
|
|
46
53
|
- lib/generators/css_zero/add/templates/app/assets/images/menu.svg
|
|
54
|
+
- lib/generators/css_zero/add/templates/app/assets/images/minus.svg
|
|
47
55
|
- lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
|
|
56
|
+
- lib/generators/css_zero/add/templates/app/assets/images/share.svg
|
|
48
57
|
- lib/generators/css_zero/add/templates/app/assets/images/x.svg
|
|
49
58
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
|
|
50
59
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
|
|
@@ -58,7 +67,7 @@ files:
|
|
|
58
67
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
|
|
59
68
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
|
|
60
69
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
|
|
61
|
-
- lib/generators/css_zero/add/templates/app/assets/stylesheets/
|
|
70
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css
|
|
62
71
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
|
63
72
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
|
|
64
73
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
|
|
@@ -67,11 +76,22 @@ files:
|
|
|
67
76
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
68
77
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css
|
|
69
78
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
|
|
79
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
|
|
70
80
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
|
81
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
|
|
82
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/clear_button_controller.js
|
|
71
83
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
|
84
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/copy_button_controller.js
|
|
72
85
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
|
73
86
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
|
|
87
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js
|
|
88
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
|
|
89
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
|
|
90
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
|
|
91
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/reveal_button_controller.js
|
|
74
92
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
|
|
93
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
|
|
94
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js
|
|
75
95
|
- lib/generators/css_zero/install/USAGE
|
|
76
96
|
- lib/generators/css_zero/install/install_generator.rb
|
|
77
97
|
- lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
:where(.pagination) {
|
|
2
|
-
align-items: center;
|
|
3
|
-
display: flex;
|
|
4
|
-
gap: var(--size-1);
|
|
5
|
-
|
|
6
|
-
img {
|
|
7
|
-
filter: var(--color-filter-text);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
a {
|
|
11
|
-
align-items: center;
|
|
12
|
-
border-radius: var(--rounded-md);
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
font-size: var(--text-sm);
|
|
15
|
-
font-weight: var(--font-medium);
|
|
16
|
-
gap: var(--size-2);
|
|
17
|
-
justify-content: center;
|
|
18
|
-
padding: var(--size-2) var(--size-4);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
a:is([aria-current]) {
|
|
22
|
-
border-width: var(--border);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
a:is([aria-disabled]) {
|
|
26
|
-
pointer-events: none;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
a:not([aria-disabled]):hover {
|
|
30
|
-
background-color: var(--color-border-light);
|
|
31
|
-
}
|
|
32
|
-
}
|