css-zero 0.0.12 → 0.0.14
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 +82 -47
- 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 +1 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +6 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +7 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +5 -5
- metadata +1 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css +0 -59
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 534451ca0aee9a1bf1b81e3831c6716e7ac071dbf0ec5f0c2e4805ef86cf9638
|
|
4
|
+
data.tar.gz: a9a70ae47d1253368e596483adab0134242292465b8b2e4dc20df18b246c7852
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ffd516034332e7b6092dfa659536321295a5047d7e4ab745725c6ea3e9b03611caf8913a89417f680bf0a660c924eaf93264b29d0b4e57681556b3b87568e380
|
|
7
|
+
data.tar.gz: 8104a1a8a350126a5d5dbe74276ffaafd76aa4f85d8156e45aaf4630edf7fc9c0add9972e21c68392deb88666697117d52a01b02f077129910e729578b65b483
|
data/README.md
CHANGED
|
@@ -4,12 +4,6 @@ An opinionated CSS starter kit for your application. You can think of it like a
|
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
-
Is recommended to use [Propshaft](https://github.com/rails/propshaft), make sure to load all the CSS files in your `layout.html.erb`.
|
|
8
|
-
|
|
9
|
-
```html+erb
|
|
10
|
-
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
7
|
Add this gem to your project.
|
|
14
8
|
|
|
15
9
|
```
|
|
@@ -25,9 +19,48 @@ bin/rails generate css_zero:install
|
|
|
25
19
|
Add only the components you need. (Optional)
|
|
26
20
|
|
|
27
21
|
```
|
|
28
|
-
bin/rails generate css_zero:add accordion alert
|
|
22
|
+
bin/rails generate css_zero:add accordion alert badge button card dialog input progress switch table
|
|
29
23
|
```
|
|
30
24
|
|
|
25
|
+
### Requirements
|
|
26
|
+
|
|
27
|
+
If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
|
|
28
|
+
|
|
29
|
+
<details>
|
|
30
|
+
<summary>Click here to see how</summary>
|
|
31
|
+
|
|
32
|
+
```html+erb
|
|
33
|
+
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
|
|
34
|
+
```
|
|
35
|
+
</details>
|
|
36
|
+
|
|
37
|
+
If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
|
|
38
|
+
|
|
39
|
+
<details>
|
|
40
|
+
<summary>Click here to see how</summary>
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
/*
|
|
44
|
+
*= require _reset
|
|
45
|
+
*= require animations
|
|
46
|
+
*= require borders
|
|
47
|
+
*= require colors
|
|
48
|
+
*= require effects
|
|
49
|
+
*= require filters
|
|
50
|
+
*= require grid
|
|
51
|
+
*= require sizes
|
|
52
|
+
*= require transform
|
|
53
|
+
*= require transition
|
|
54
|
+
*= require typography
|
|
55
|
+
*= require_tree .
|
|
56
|
+
*= require_self
|
|
57
|
+
*= require zutilities
|
|
58
|
+
*/
|
|
59
|
+
```
|
|
60
|
+
</details>
|
|
61
|
+
|
|
62
|
+
Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
|
|
63
|
+
|
|
31
64
|
## Usage
|
|
32
65
|
|
|
33
66
|
```html
|
|
@@ -63,7 +96,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
63
96
|
<details>
|
|
64
97
|
<summary>Show me the code</summary>
|
|
65
98
|
|
|
66
|
-
```html
|
|
99
|
+
```html+erb
|
|
67
100
|
<div class="accordion">
|
|
68
101
|
<details name="my_accordion">
|
|
69
102
|
<summary>Is it accessible?</summary>
|
|
@@ -99,32 +132,6 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
99
132
|
```
|
|
100
133
|
</details>
|
|
101
134
|
|
|
102
|
-
### Alert Dialog
|
|
103
|
-
|
|
104
|
-
<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
|
|
105
|
-
|
|
106
|
-
<details>
|
|
107
|
-
<summary>Show me the code</summary>
|
|
108
|
-
|
|
109
|
-
```html
|
|
110
|
-
<div>
|
|
111
|
-
<dialog id="my_alert_dialog" class="alert-dialog">
|
|
112
|
-
<h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
|
|
113
|
-
<p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
|
|
114
|
-
|
|
115
|
-
<div class="flex justify-end gap-sm mbs-4">
|
|
116
|
-
<form method="dialog"><button class="btn btn--outline">Cancel</button></form>
|
|
117
|
-
<button class="btn btn--primary">Continue</button>
|
|
118
|
-
</div>
|
|
119
|
-
</dialog>
|
|
120
|
-
|
|
121
|
-
<button class="btn" data-controller="dialog-control" data-dialog-control-target-value="my_alert_dialog" data-action="dialog-control#showModal">
|
|
122
|
-
Show alert dialog
|
|
123
|
-
</button>
|
|
124
|
-
</div>
|
|
125
|
-
```
|
|
126
|
-
</details>
|
|
127
|
-
|
|
128
135
|
### Badge
|
|
129
136
|
|
|
130
137
|
<img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
|
|
@@ -132,7 +139,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
132
139
|
<details>
|
|
133
140
|
<summary>Show me the code</summary>
|
|
134
141
|
|
|
135
|
-
```html
|
|
142
|
+
```html+erb
|
|
136
143
|
<div class="flex justify-start gap">
|
|
137
144
|
<div class="badge">Badge</div>
|
|
138
145
|
<div class="badge badge--secondary">Secondary</div>
|
|
@@ -145,21 +152,22 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
145
152
|
|
|
146
153
|
### Button
|
|
147
154
|
|
|
148
|
-
<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/
|
|
155
|
+
<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
|
|
149
156
|
|
|
150
157
|
<details>
|
|
151
158
|
<summary>Show me the code</summary>
|
|
152
159
|
|
|
153
|
-
```html
|
|
160
|
+
```html+erb
|
|
154
161
|
<div class="flex flex-wrap items-center gap" aria-busy>
|
|
155
162
|
<button class="btn">Primary</button>
|
|
156
163
|
<button class="btn btn--secondary">Secondary</button>
|
|
157
164
|
<button class="btn btn--outline">Outline</button>
|
|
158
165
|
<button class="btn btn--plain">Plain</button>
|
|
166
|
+
<button class="btn btn--positive">Positive</button>
|
|
159
167
|
<button class="btn btn--negative">Negative</button>
|
|
160
168
|
|
|
161
169
|
<button class="btn">
|
|
162
|
-
<%= image_tag "circle-
|
|
170
|
+
<%= image_tag "circle-plus.svg", role: "presentation", size: 16 %>
|
|
163
171
|
<span>With icon</span>
|
|
164
172
|
</button>
|
|
165
173
|
|
|
@@ -177,7 +185,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
177
185
|
<details>
|
|
178
186
|
<summary>Show me the code</summary>
|
|
179
187
|
|
|
180
|
-
```html
|
|
188
|
+
```html+erb
|
|
181
189
|
<div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
|
|
182
190
|
<div class="flex flex-col gap-sm">
|
|
183
191
|
<h1 class="text-2xl font-semibold leading-none">Create project</h1>
|
|
@@ -211,16 +219,43 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
211
219
|
|
|
212
220
|
### Dialog
|
|
213
221
|
|
|
214
|
-
|
|
222
|
+
#### Alert Dialog
|
|
223
|
+
|
|
224
|
+
<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
|
|
215
225
|
|
|
216
226
|
<details>
|
|
217
227
|
<summary>Show me the code</summary>
|
|
218
228
|
|
|
219
|
-
```html
|
|
220
|
-
<
|
|
229
|
+
```html+erb
|
|
230
|
+
<div>
|
|
231
|
+
<dialog id="alert_dialog" class="dialog">
|
|
232
|
+
<h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
|
|
233
|
+
<p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
|
|
234
|
+
|
|
235
|
+
<div class="flex justify-end gap-sm mbs-4">
|
|
236
|
+
<form method="dialog"><button class="btn btn--outline">Cancel</button></form>
|
|
237
|
+
<button class="btn btn--primary">Continue</button>
|
|
238
|
+
</div>
|
|
239
|
+
</dialog>
|
|
240
|
+
|
|
241
|
+
<button class="btn" data-controller="dialog-control" data-dialog-control-target-value="alert_dialog" data-action="dialog-control#showModal">
|
|
242
|
+
Show alert dialog
|
|
243
|
+
</button>
|
|
244
|
+
</div>
|
|
245
|
+
```
|
|
246
|
+
</details>
|
|
247
|
+
|
|
248
|
+
#### Dismissible Dialog
|
|
249
|
+
|
|
250
|
+
<img width="400" alt="dismissible dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
|
|
251
|
+
|
|
252
|
+
<details>
|
|
253
|
+
<summary>Show me the code</summary>
|
|
254
|
+
|
|
255
|
+
```html+erb
|
|
221
256
|
<div>
|
|
222
|
-
<dialog id="
|
|
223
|
-
<button class="btn btn--plain p-0 dialog__close" popovertarget="
|
|
257
|
+
<dialog id="dismissible_dialog" class="dialog" style="max-inline-size: 430px;" popover>
|
|
258
|
+
<button class="btn btn--plain p-0 dialog__close" popovertarget="dismissible_dialog" popovertargetaction="hide">
|
|
224
259
|
<%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
|
|
225
260
|
<span class="sr-only">Close</span>
|
|
226
261
|
</button>
|
|
@@ -249,8 +284,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
249
284
|
</div>
|
|
250
285
|
</dialog>
|
|
251
286
|
|
|
252
|
-
<button class="btn" popovertarget="
|
|
253
|
-
Show dialog
|
|
287
|
+
<button class="btn" popovertarget="dismissible_dialog">
|
|
288
|
+
Show dismissible dialog
|
|
254
289
|
</button>
|
|
255
290
|
</div>
|
|
256
291
|
```
|
|
@@ -330,7 +365,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
330
365
|
<details>
|
|
331
366
|
<summary>Show me the code</summary>
|
|
332
367
|
|
|
333
|
-
```html
|
|
368
|
+
```html+erb
|
|
334
369
|
<table class="table">
|
|
335
370
|
<thead>
|
|
336
371
|
<tr>
|
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
|
|
5
|
+
accordion alert badge button card dialog input progress switch table
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -3,10 +3,6 @@ accordion:
|
|
|
3
3
|
- app/assets/images/chevron-down.svg
|
|
4
4
|
alert:
|
|
5
5
|
- app/assets/stylesheets/alert.css
|
|
6
|
-
- app/assets/images/circle-alert.svg
|
|
7
|
-
alert_dialog:
|
|
8
|
-
- app/assets/stylesheets/alert_dialog.css
|
|
9
|
-
- app/javascript/controllers/dialog_control_controller.js
|
|
10
6
|
badge:
|
|
11
7
|
- app/assets/stylesheets/badge.css
|
|
12
8
|
button:
|
|
@@ -17,6 +13,7 @@ card:
|
|
|
17
13
|
dialog:
|
|
18
14
|
- app/assets/stylesheets/dialog.css
|
|
19
15
|
- app/assets/images/x.svg
|
|
16
|
+
- app/javascript/controllers/dialog_control_controller.js
|
|
20
17
|
input:
|
|
21
18
|
- app/assets/stylesheets/input.css
|
|
22
19
|
- app/assets/images/select-arrow.svg
|
|
@@ -11,6 +11,12 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.alert--positive {
|
|
15
|
+
--alert-border-color: var(--color-positive);
|
|
16
|
+
--alert-color: var(--color-positive);
|
|
17
|
+
--alert-icon-color: var(--color-filter-positive);
|
|
18
|
+
}
|
|
19
|
+
|
|
14
20
|
.alert--negative {
|
|
15
21
|
--alert-border-color: var(--color-negative);
|
|
16
22
|
--alert-color: var(--color-negative);
|
|
@@ -49,9 +49,16 @@
|
|
|
49
49
|
--btn-icon-color: var(--color-filter-text);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
.btn--positive {
|
|
53
|
+
--btn-background: var(--color-positive);
|
|
54
|
+
--btn-color: white;
|
|
55
|
+
--btn-icon-color: var(--color-filter-positive);
|
|
56
|
+
}
|
|
57
|
+
|
|
52
58
|
.btn--negative {
|
|
53
59
|
--btn-background: var(--color-negative);
|
|
54
60
|
--btn-color: white;
|
|
61
|
+
--btn-icon-color: var(--color-filter-negative);
|
|
55
62
|
}
|
|
56
63
|
|
|
57
64
|
.btn--loading {
|
|
@@ -28,21 +28,21 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
/* In animation */
|
|
31
|
-
&:popover-open {
|
|
31
|
+
&:is([open], :popover-open) {
|
|
32
32
|
opacity: 1; transform: var(--scale-100);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
&:popover-open::backdrop {
|
|
35
|
+
&:is([open], :popover-open)::backdrop {
|
|
36
36
|
opacity: 1;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
/* Out animation */
|
|
40
40
|
@starting-style {
|
|
41
|
-
&:popover-open {
|
|
41
|
+
&:is([open], :popover-open) {
|
|
42
42
|
opacity: 0; transform: var(--scale-95);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
&:popover-open::backdrop {
|
|
45
|
+
&:is([open], :popover-open)::backdrop {
|
|
46
46
|
opacity: 0;
|
|
47
47
|
}
|
|
48
48
|
}
|
|
@@ -59,6 +59,6 @@
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
/* Prevent page scroll when dialog is open */
|
|
62
|
-
html:has(.dialog:popover-open) {
|
|
62
|
+
html:has(.dialog:is([open], :popover-open)) {
|
|
63
63
|
overflow: hidden;
|
|
64
64
|
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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.14
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Lázaro Nixon
|
|
@@ -43,7 +43,6 @@ files:
|
|
|
43
43
|
- lib/generators/css_zero/add/templates/app/assets/images/x.svg
|
|
44
44
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
|
|
45
45
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
|
|
46
|
-
- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css
|
|
47
46
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
|
|
48
47
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
|
|
49
48
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
.alert-dialog {
|
|
2
|
-
background-color: var(--color-bg);
|
|
3
|
-
border-width: var(--border);
|
|
4
|
-
border-radius: var(--rounded-lg);
|
|
5
|
-
box-shadow: var(--shadow-lg);
|
|
6
|
-
color: var(--color-text);
|
|
7
|
-
inline-size: var(--size-full);
|
|
8
|
-
margin: auto;
|
|
9
|
-
max-inline-size: var(--width-lg);
|
|
10
|
-
padding: var(--size-6);
|
|
11
|
-
|
|
12
|
-
&::backdrop {
|
|
13
|
-
background-color: rgba(0, 0, 0, .8);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/* Setup animation */
|
|
17
|
-
opacity: 0;
|
|
18
|
-
transform: var(--scale-95);
|
|
19
|
-
transition-behavior: allow-discrete;
|
|
20
|
-
transition-duration: var(--time-150);
|
|
21
|
-
transition-property: display overlay opacity 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
|
-
opacity: 1; transform: var(--scale-100);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&[open]::backdrop {
|
|
36
|
-
opacity: 1;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/* Out animation */
|
|
40
|
-
@starting-style {
|
|
41
|
-
&[open] {
|
|
42
|
-
opacity: 0; transform: var(--scale-95);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&[open]::backdrop {
|
|
46
|
-
opacity: 0;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/* Small screens */
|
|
51
|
-
@media (width < 40rem) {
|
|
52
|
-
border-radius: 0;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/* Prevent page scroll when alert dialog is open */
|
|
57
|
-
html:has(.alert-dialog[open]) {
|
|
58
|
-
overflow: hidden;
|
|
59
|
-
}
|