css-zero 0.0.15 → 0.0.17
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 +72 -2
- data/app/assets/stylesheets/_reset.css +6 -6
- data/app/assets/stylesheets/zutilities.css +20 -1
- 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 +7 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +31 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css +22 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +2 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +5 -5
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js +9 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js +1 -1
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +27 -13
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 92f6b9adffe56fbbd63cc59f9d80869e8fd52f01dc43285e2a4fca1478099a83
|
|
4
|
+
data.tar.gz: 48bc41e660292ebcd1f9fec79a0c791cbfec06ba9e698711ab211bec155950c3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a3ff2ead3a52606d129f09bc0c9aa9039b4cd155ea0e87d6b2b07ceedb77b346d044004f906376dccd796fa63f2fd28341c6b4339547238e202465fc16c12beb
|
|
7
|
+
data.tar.gz: e7f2b6b8b2cf02729a57051cdb7d3827ee5803bb6af9257fa8b6e968eafcd40163e671f24f3b8c4fcfebea2663d825bb483a86a7911c8e8425210f3214628010
|
data/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# CSS Zero
|
|
2
2
|
|
|
3
|
-
An opinionated CSS starter kit for your application. You can think of it like a "no build" Tailwind CSS.
|
|
3
|
+
An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -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 badge button card dialog input progress switch table
|
|
22
|
+
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -132,6 +132,24 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
132
132
|
```
|
|
133
133
|
</details>
|
|
134
134
|
|
|
135
|
+
### Avatar
|
|
136
|
+
|
|
137
|
+
<details>
|
|
138
|
+
<summary>Show me the code</summary>
|
|
139
|
+
|
|
140
|
+
```html+erb
|
|
141
|
+
<div class="flex item-center gap">
|
|
142
|
+
<div class="avatar">
|
|
143
|
+
<%= image_tag "cartoon.jpg", role: "presentation", size: 48 %>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div class="avatar">
|
|
147
|
+
<span class="avatar__fallback">CN</span>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
```
|
|
151
|
+
</details>
|
|
152
|
+
|
|
135
153
|
### Badge
|
|
136
154
|
|
|
137
155
|
<img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
|
|
@@ -150,6 +168,24 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
150
168
|
```
|
|
151
169
|
</details>
|
|
152
170
|
|
|
171
|
+
### Breadcrumb
|
|
172
|
+
|
|
173
|
+
<details>
|
|
174
|
+
<summary>Show me the code</summary>
|
|
175
|
+
|
|
176
|
+
```html+erb
|
|
177
|
+
<nav class="breadcrumb">
|
|
178
|
+
<a href="#">Home</a>
|
|
179
|
+
<%= image_tag "chevron-right.svg", size: 14 %>
|
|
180
|
+
<a href="#"><%= image_tag "ellipsis.svg", size: 14 %></a>
|
|
181
|
+
<%= image_tag "chevron-right.svg", size: 14 %>
|
|
182
|
+
<a href="#">Components</a>
|
|
183
|
+
<%= image_tag "chevron-right.svg", size: 14 %>
|
|
184
|
+
<a href="#" class="text-primary">Breadcrumb</a>
|
|
185
|
+
</nav>
|
|
186
|
+
```
|
|
187
|
+
</details>
|
|
188
|
+
|
|
153
189
|
### Button
|
|
154
190
|
|
|
155
191
|
<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
|
|
@@ -217,6 +253,38 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
217
253
|
```
|
|
218
254
|
</details>
|
|
219
255
|
|
|
256
|
+
### Collapsible
|
|
257
|
+
|
|
258
|
+
<details>
|
|
259
|
+
<summary>Show me the code</summary>
|
|
260
|
+
|
|
261
|
+
```html+erb
|
|
262
|
+
<div data-controller="collapsible" style="max-inline-size: 350px">
|
|
263
|
+
<div class="flex items-center justify-between gap pi-4 pb-3">
|
|
264
|
+
<h4 class="text-sm font-semibold">
|
|
265
|
+
@lazaronixon starred 3 repositories
|
|
266
|
+
</h4>
|
|
267
|
+
<button data-action="collapsible#toggle" class="btn btn--plain p-0">
|
|
268
|
+
<%= image_tag "chevrons-up-down.svg", size: 16 %>
|
|
269
|
+
<span class="sr-only">Toggle</span>
|
|
270
|
+
</button>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
|
|
273
|
+
@rails/rails
|
|
274
|
+
</div>
|
|
275
|
+
<details>
|
|
276
|
+
<summary data-collapsible-target="summary" hidden></summary>
|
|
277
|
+
<div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
|
|
278
|
+
@rails/jbuilder
|
|
279
|
+
</div>
|
|
280
|
+
<div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
|
|
281
|
+
@rails/jsbundling-rails
|
|
282
|
+
</div>
|
|
283
|
+
</details>
|
|
284
|
+
</div>
|
|
285
|
+
```
|
|
286
|
+
</details>
|
|
287
|
+
|
|
220
288
|
### Dialog
|
|
221
289
|
|
|
222
290
|
#### Alert Dialog
|
|
@@ -413,6 +481,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
|
413
481
|
```
|
|
414
482
|
</details>
|
|
415
483
|
|
|
484
|
+
### More components soon...
|
|
485
|
+
|
|
416
486
|
## Development
|
|
417
487
|
|
|
418
488
|
To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
|
@@ -60,7 +60,7 @@ body {
|
|
|
60
60
|
*/
|
|
61
61
|
|
|
62
62
|
hr {
|
|
63
|
-
|
|
63
|
+
block-size: 0; /* 1 */
|
|
64
64
|
color: inherit; /* 2 */
|
|
65
65
|
border-block-start-width: 1px; /* 3 */
|
|
66
66
|
}
|
|
@@ -155,11 +155,11 @@ sup {
|
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
sub {
|
|
158
|
-
|
|
158
|
+
inset-block-end: -0.25em;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
sup {
|
|
162
|
-
|
|
162
|
+
inset-block-start: -0.5em;
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
/*
|
|
@@ -242,7 +242,7 @@ progress {
|
|
|
242
242
|
|
|
243
243
|
::-webkit-inner-spin-button,
|
|
244
244
|
::-webkit-outer-spin-button {
|
|
245
|
-
|
|
245
|
+
block-size: auto;
|
|
246
246
|
}
|
|
247
247
|
|
|
248
248
|
/*
|
|
@@ -321,8 +321,8 @@ object {
|
|
|
321
321
|
|
|
322
322
|
img,
|
|
323
323
|
video {
|
|
324
|
-
max-
|
|
325
|
-
|
|
324
|
+
max-inline-size: 100%;
|
|
325
|
+
block-size: auto;
|
|
326
326
|
}
|
|
327
327
|
|
|
328
328
|
/*
|
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
.items-center { align-items: center; }
|
|
17
17
|
|
|
18
18
|
.grow { flex-grow: 1; }
|
|
19
|
+
.grow-0 { flex-grow: 0; }
|
|
20
|
+
|
|
21
|
+
.shrink { flex-shrink: 1; }
|
|
19
22
|
.shrink-0 { flex-shrink: 0; }
|
|
20
23
|
|
|
21
24
|
.self-start { align-self: start; }
|
|
@@ -42,7 +45,7 @@
|
|
|
42
45
|
.whitespace-nowrap { white-space: nowrap; }
|
|
43
46
|
.whitespace-normal { white-space: normal; }
|
|
44
47
|
|
|
45
|
-
.break-words {
|
|
48
|
+
.break-words { overflow-wrap: break-word; }
|
|
46
49
|
.break-all { word-break: break-all; }
|
|
47
50
|
|
|
48
51
|
.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
|
|
@@ -85,6 +88,7 @@
|
|
|
85
88
|
.bg-main { background-color: var(--color-bg); }
|
|
86
89
|
.bg-black { background-color: var(--color-text); }
|
|
87
90
|
.bg-white { background-color: var(--color-text-reversed); }
|
|
91
|
+
.bg-shade { background-color: var(--color-secondary); }
|
|
88
92
|
.bg-transparent { background-color: transparent; }
|
|
89
93
|
|
|
90
94
|
/****************************************************************
|
|
@@ -92,6 +96,7 @@
|
|
|
92
96
|
*****************************************************************/
|
|
93
97
|
.colorize-black { filter: var(--color-filter-text); }
|
|
94
98
|
.colorize-white { filter: var(--color-filter-text-reversed); }
|
|
99
|
+
.colorize-shade { filter: var(--color-filter-text-subtle); }
|
|
95
100
|
.colorize-negative { filter: var(--color-filter-negative); }
|
|
96
101
|
.colorize-positive { filter: var(--color-filter-positive); }
|
|
97
102
|
|
|
@@ -154,6 +159,7 @@
|
|
|
154
159
|
.m-0\.5 { margin: var(--size-0_5); }
|
|
155
160
|
.m-1 { margin: var(--size-1); }
|
|
156
161
|
.m-2 { margin: var(--size-2); }
|
|
162
|
+
.m-3 { margin: var(--size-3); }
|
|
157
163
|
.m-4 { margin: var(--size-4); }
|
|
158
164
|
.m-6 { margin: var(--size-6); }
|
|
159
165
|
.m-8 { margin: var(--size-8); }
|
|
@@ -164,6 +170,7 @@
|
|
|
164
170
|
.mb-0\.5 { margin-block: var(--size-0_5); }
|
|
165
171
|
.mb-1 { margin-block: var(--size-1); }
|
|
166
172
|
.mb-2 { margin-block: var(--size-2); }
|
|
173
|
+
.mb-3 { margin-block: var(--size-3); }
|
|
167
174
|
.mb-4 { margin-block: var(--size-4); }
|
|
168
175
|
.mb-6 { margin-block: var(--size-6); }
|
|
169
176
|
.mb-8 { margin-block: var(--size-8); }
|
|
@@ -174,6 +181,7 @@
|
|
|
174
181
|
.mbs-0\.5 { margin-block-start: var(--size-0_5); }
|
|
175
182
|
.mbs-1 { margin-block-start: var(--size-1); }
|
|
176
183
|
.mbs-2 { margin-block-start: var(--size-2); }
|
|
184
|
+
.mbs-3 { margin-block-start: var(--size-3); }
|
|
177
185
|
.mbs-4 { margin-block-start: var(--size-4); }
|
|
178
186
|
.mbs-6 { margin-block-start: var(--size-6); }
|
|
179
187
|
.mbs-8 { margin-block-start: var(--size-8); }
|
|
@@ -184,6 +192,7 @@
|
|
|
184
192
|
.mbe-0\.5 { margin-block-end: var(--size-0_5); }
|
|
185
193
|
.mbe-1 { margin-block-end: var(--size-1); }
|
|
186
194
|
.mbe-2 { margin-block-end: var(--size-2); }
|
|
195
|
+
.mbe-3 { margin-block-end: var(--size-3); }
|
|
187
196
|
.mbe-4 { margin-block-end: var(--size-4); }
|
|
188
197
|
.mbe-6 { margin-block-end: var(--size-6); }
|
|
189
198
|
.mbe-8 { margin-block-end: var(--size-8); }
|
|
@@ -194,6 +203,7 @@
|
|
|
194
203
|
.mi-0\.5 { margin-inline: var(--size-0_5); }
|
|
195
204
|
.mi-1 { margin-inline: var(--size-1); }
|
|
196
205
|
.mi-2 { margin-inline: var(--size-2); }
|
|
206
|
+
.mi-3 { margin-inline: var(--size-3); }
|
|
197
207
|
.mi-4 { margin-inline: var(--size-4); }
|
|
198
208
|
.mi-6 { margin-inline: var(--size-6); }
|
|
199
209
|
.mi-8 { margin-inline: var(--size-8); }
|
|
@@ -204,6 +214,7 @@
|
|
|
204
214
|
.mis-0\.5 { margin-inline-start: var(--size-0_5); }
|
|
205
215
|
.mis-1 { margin-inline-start: var(--size-1); }
|
|
206
216
|
.mis-2 { margin-inline-start: var(--size-2); }
|
|
217
|
+
.mis-3 { margin-inline-start: var(--size-3); }
|
|
207
218
|
.mis-4 { margin-inline-start: var(--size-4); }
|
|
208
219
|
.mis-6 { margin-inline-start: var(--size-6); }
|
|
209
220
|
.mis-8 { margin-inline-start: var(--size-8); }
|
|
@@ -214,6 +225,7 @@
|
|
|
214
225
|
.mie-0\.5 { margin-inline-end: var(--size-0_5); }
|
|
215
226
|
.mie-1 { margin-inline-end: var(--size-1); }
|
|
216
227
|
.mie-2 { margin-inline-end: var(--size-2); }
|
|
228
|
+
.mie-3 { margin-inline-end: var(--size-3); }
|
|
217
229
|
.mie-4 { margin-inline-end: var(--size-4); }
|
|
218
230
|
.mie-6 { margin-inline-end: var(--size-6); }
|
|
219
231
|
.mie-8 { margin-inline-end: var(--size-8); }
|
|
@@ -227,6 +239,7 @@
|
|
|
227
239
|
.p-0\.5 { padding: var(--size-0_5); }
|
|
228
240
|
.p-1 { padding: var(--size-1); }
|
|
229
241
|
.p-2 { padding: var(--size-2); }
|
|
242
|
+
.p-3 { padding: var(--size-3); }
|
|
230
243
|
.p-4 { padding: var(--size-4); }
|
|
231
244
|
.p-6 { padding: var(--size-6); }
|
|
232
245
|
.p-8 { padding: var(--size-8); }
|
|
@@ -236,6 +249,7 @@
|
|
|
236
249
|
.pb-0\.5 { padding-block: var(--size-0_5); }
|
|
237
250
|
.pb-1 { padding-block: var(--size-1); }
|
|
238
251
|
.pb-2 { padding-block: var(--size-2); }
|
|
252
|
+
.pb-3 { padding-block: var(--size-3); }
|
|
239
253
|
.pb-4 { padding-block: var(--size-4); }
|
|
240
254
|
.pb-6 { padding-block: var(--size-6); }
|
|
241
255
|
.pb-8 { padding-block: var(--size-8); }
|
|
@@ -245,6 +259,7 @@
|
|
|
245
259
|
.pbs-0\.5 { padding-block-start: var(--size-0_5); }
|
|
246
260
|
.pbs-1 { padding-block-start: var(--size-1); }
|
|
247
261
|
.pbs-2 { padding-block-start: var(--size-2); }
|
|
262
|
+
.pbs-3 { padding-block-start: var(--size-3); }
|
|
248
263
|
.pbs-4 { padding-block-start: var(--size-4); }
|
|
249
264
|
.pbs-6 { padding-block-start: var(--size-6); }
|
|
250
265
|
.pbs-8 { padding-block-start: var(--size-8); }
|
|
@@ -254,6 +269,7 @@
|
|
|
254
269
|
.pbe-0\.5 { padding-block-end: var(--size-0_5); }
|
|
255
270
|
.pbe-1 { padding-block-end: var(--size-1); }
|
|
256
271
|
.pbe-2 { padding-block-end: var(--size-2); }
|
|
272
|
+
.pbe-3 { padding-block-end: var(--size-3); }
|
|
257
273
|
.pbe-4 { padding-block-end: var(--size-4); }
|
|
258
274
|
.pbe-6 { padding-block-end: var(--size-6); }
|
|
259
275
|
.pbe-8 { padding-block-end: var(--size-8); }
|
|
@@ -263,6 +279,7 @@
|
|
|
263
279
|
.pi-0\.5 { padding-inline: var(--size-0_5); }
|
|
264
280
|
.pi-1 { padding-inline: var(--size-1); }
|
|
265
281
|
.pi-2 { padding-inline: var(--size-2); }
|
|
282
|
+
.pi-3 { padding-inline: var(--size-3); }
|
|
266
283
|
.pi-4 { padding-inline: var(--size-4); }
|
|
267
284
|
.pi-6 { padding-inline: var(--size-6); }
|
|
268
285
|
.pi-8 { padding-inline: var(--size-8); }
|
|
@@ -272,6 +289,7 @@
|
|
|
272
289
|
.pis-0\.5 { padding-inline-start: var(--size-0_5); }
|
|
273
290
|
.pis-1 { padding-inline-start: var(--size-1); }
|
|
274
291
|
.pis-2 { padding-inline-start: var(--size-2); }
|
|
292
|
+
.pis-3 { padding-inline-start: var(--size-3); }
|
|
275
293
|
.pis-4 { padding-inline-start: var(--size-4); }
|
|
276
294
|
.pis-6 { padding-inline-start: var(--size-6); }
|
|
277
295
|
.pis-8 { padding-inline-start: var(--size-8); }
|
|
@@ -281,6 +299,7 @@
|
|
|
281
299
|
.pie-0\.5 { padding-inline-end: var(--size-0_5); }
|
|
282
300
|
.pie-1 { padding-inline-end: var(--size-1); }
|
|
283
301
|
.pie-2 { padding-inline-end: var(--size-2); }
|
|
302
|
+
.pie-3 { padding-inline-end: var(--size-3); }
|
|
284
303
|
.pie-4 { padding-inline-end: var(--size-4); }
|
|
285
304
|
.pie-6 { padding-inline-end: var(--size-6); }
|
|
286
305
|
.pie-8 { padding-inline-end: var(--size-8); }
|
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 badge button card dialog input progress switch table
|
|
5
|
+
accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -3,13 +3,20 @@ accordion:
|
|
|
3
3
|
- app/assets/images/chevron-down.svg
|
|
4
4
|
alert:
|
|
5
5
|
- app/assets/stylesheets/alert.css
|
|
6
|
+
avatar:
|
|
7
|
+
- app/assets/stylesheets/avatar.css
|
|
6
8
|
badge:
|
|
7
9
|
- app/assets/stylesheets/badge.css
|
|
10
|
+
breadcrumb:
|
|
11
|
+
- app/assets/stylesheets/breadcrumb.css
|
|
12
|
+
- app/assets/images/chevron-right.svg
|
|
8
13
|
button:
|
|
9
14
|
- app/assets/stylesheets/button.css
|
|
10
15
|
- app/assets/images/loader-circle.svg
|
|
11
16
|
card:
|
|
12
17
|
- app/assets/stylesheets/card.css
|
|
18
|
+
collapsible:
|
|
19
|
+
- app/javascript/controllers/collapsible_controller.js
|
|
13
20
|
dialog:
|
|
14
21
|
- app/assets/stylesheets/dialog.css
|
|
15
22
|
- app/assets/images/x.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"><path d="m9 18 6-6-6-6"/></svg>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--avatar-size: var(--size-10);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.avatar {
|
|
6
|
+
block-size: var(--avatar-size);
|
|
7
|
+
border-radius: var(--rounded-full);
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-shrink: 0;
|
|
10
|
+
inline-size: var(--avatar-size);
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
|
|
13
|
+
img {
|
|
14
|
+
aspect-ratio: 1;
|
|
15
|
+
block-size: var(--size-full);
|
|
16
|
+
inline-size: var(--size-full);
|
|
17
|
+
object-fit: cover;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.avatar__fallback {
|
|
22
|
+
align-items: center;
|
|
23
|
+
background-color: var(--color-secondary);
|
|
24
|
+
block-size: var(--size-full);
|
|
25
|
+
border-radius: var(--rounded-full);
|
|
26
|
+
display: flex;
|
|
27
|
+
font-size: calc(var(--avatar-size) * .4);
|
|
28
|
+
inline-size: var(--size-full);
|
|
29
|
+
justify-content: center;
|
|
30
|
+
user-select: none;
|
|
31
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.breadcrumb {
|
|
2
|
+
align-items: center;
|
|
3
|
+
color: var(--color-text-subtle);
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-wrap: wrap;
|
|
6
|
+
font-size: var(--text-sm);
|
|
7
|
+
gap: var(--size-2_5);
|
|
8
|
+
overflow-wrap: break-word;
|
|
9
|
+
|
|
10
|
+
img {
|
|
11
|
+
filter: var(--color-filter-text-subtle);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
a:hover {
|
|
15
|
+
color: var(--color-text);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Small screens and below */
|
|
19
|
+
@media (width < 40rem) {
|
|
20
|
+
gap: var(--size-1_5);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
font-weight: var(--font-medium);
|
|
12
12
|
gap: var(--size-2);
|
|
13
13
|
justify-content: center;
|
|
14
|
+
min-inline-size: fit-content;
|
|
14
15
|
padding: var(--size-2) var(--size-4);
|
|
15
16
|
text-align: center;
|
|
16
|
-
white-space: nowrap;
|
|
17
17
|
|
|
18
|
-
img
|
|
18
|
+
img {
|
|
19
19
|
filter: var(--btn-icon-color, var(--color-filter-text-reversed));
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
inline-size: var(--size-full);
|
|
8
8
|
margin: auto;
|
|
9
9
|
max-inline-size: var(--width-lg);
|
|
10
|
-
overflow: hidden;
|
|
11
10
|
padding: var(--size-6);
|
|
12
11
|
|
|
13
12
|
&::backdrop {
|
|
@@ -19,13 +18,13 @@
|
|
|
19
18
|
transform: var(--scale-95);
|
|
20
19
|
transition-behavior: allow-discrete;
|
|
21
20
|
transition-duration: var(--time-150);
|
|
22
|
-
transition-property: display overlay opacity transform;
|
|
21
|
+
transition-property: display, overlay, opacity, transform;
|
|
23
22
|
|
|
24
23
|
&::backdrop {
|
|
25
24
|
opacity: 0;
|
|
26
25
|
transition-behavior: allow-discrete;
|
|
27
26
|
transition-duration: var(--time-150);
|
|
28
|
-
transition-property: display overlay opacity;
|
|
27
|
+
transition-property: display, overlay, opacity;
|
|
29
28
|
}
|
|
30
29
|
|
|
31
30
|
/* In animation */
|
|
@@ -48,15 +47,16 @@
|
|
|
48
47
|
}
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
/* Small screens */
|
|
50
|
+
/* Small screens and below */
|
|
52
51
|
@media (width < 40rem) {
|
|
53
52
|
border-radius: 0;
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
.dialog__close {
|
|
57
|
+
inset-block-start: var(--size-4);
|
|
58
|
+
inset-inline-end: var(--size-4);
|
|
58
59
|
position: absolute;
|
|
59
|
-
inset: var(--size-4) var(--size-4) auto auto;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
/* Prevent page scroll when dialog is open */
|
|
@@ -1,30 +1,44 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
/* Color Scheme */
|
|
3
|
-
color-scheme: light dark;
|
|
4
|
-
|
|
5
2
|
/* Abstractions */
|
|
6
|
-
--color-bg:
|
|
7
|
-
--color-text:
|
|
8
|
-
--color-text-reversed:
|
|
9
|
-
--color-text-subtle:
|
|
10
|
-
--color-border:
|
|
11
|
-
--color-border-darker:
|
|
3
|
+
--color-bg: white;
|
|
4
|
+
--color-text: black;
|
|
5
|
+
--color-text-reversed: white;
|
|
6
|
+
--color-text-subtle: var(--zinc-500);
|
|
7
|
+
--color-border: var(--zinc-200);
|
|
8
|
+
--color-border-darker: var(--zinc-400);
|
|
12
9
|
|
|
13
10
|
/* Accent colors */
|
|
14
|
-
--color-primary:
|
|
15
|
-
--color-secondary:
|
|
16
|
-
--color-negative:
|
|
17
|
-
--color-positive:
|
|
11
|
+
--color-primary: var(--zinc-900);
|
|
12
|
+
--color-secondary: var(--zinc-100);
|
|
13
|
+
--color-negative: var(--red-600);
|
|
14
|
+
--color-positive: var(--green-600);
|
|
18
15
|
|
|
19
16
|
/* SVG color values */
|
|
20
17
|
--color-filter-text: invert(0);
|
|
21
18
|
--color-filter-text-reversed: invert(100%);
|
|
19
|
+
--color-filter-text-subtle: invert(43%) sepia(8%) saturate(340%) hue-rotate(202deg) brightness(99%) contrast(85%);
|
|
22
20
|
--color-filter-negative: invert(31%) sepia(96%) saturate(4646%) hue-rotate(350deg) brightness(91%) contrast(89%);
|
|
23
21
|
--color-filter-positive: invert(48%) sepia(74%) saturate(520%) hue-rotate(90deg) brightness(89%) contrast(90%);
|
|
24
22
|
|
|
25
23
|
@media (prefers-color-scheme: dark) {
|
|
24
|
+
/* Abstractions */
|
|
25
|
+
--color-bg: var(--zinc-950);
|
|
26
|
+
--color-text: white;
|
|
27
|
+
--color-text-reversed: black;
|
|
28
|
+
--color-text-subtle: var(--zinc-400);
|
|
29
|
+
--color-border: var(--zinc-800);
|
|
30
|
+
--color-border-darker: var(--zinc-300);
|
|
31
|
+
|
|
32
|
+
/* Accent colors */
|
|
33
|
+
--color-primary: var(--zinc-50);
|
|
34
|
+
--color-secondary: var(--zinc-800);
|
|
35
|
+
--color-negative: var(--red-900);
|
|
36
|
+
--color-positive: var(--green-900);
|
|
37
|
+
|
|
38
|
+
/* SVG color values */
|
|
26
39
|
--color-filter-text: invert(100%);
|
|
27
40
|
--color-filter-text-reversed: invert(0);
|
|
41
|
+
--color-filter-text-subtle: invert(55%) sepia(98%) saturate(0%) hue-rotate(299deg) brightness(96%) contrast(94%);
|
|
28
42
|
--color-filter-negative: invert(15%) sepia(83%) saturate(2066%) hue-rotate(345deg) brightness(87%) contrast(88%);
|
|
29
43
|
--color-filter-positive: invert(23%) sepia(74%) saturate(495%) hue-rotate(91deg) brightness(88%) contrast(89%);
|
|
30
44
|
}
|
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.17
|
|
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-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -37,13 +37,16 @@ files:
|
|
|
37
37
|
- lib/generators/css_zero/add/add_generator.rb
|
|
38
38
|
- lib/generators/css_zero/add/resources.yml
|
|
39
39
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
|
|
40
|
+
- lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
|
|
40
41
|
- lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
|
|
41
42
|
- lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
|
|
42
43
|
- lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
|
|
43
44
|
- lib/generators/css_zero/add/templates/app/assets/images/x.svg
|
|
44
45
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
|
|
45
46
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
|
|
47
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css
|
|
46
48
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
|
|
49
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css
|
|
47
50
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
|
|
48
51
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
|
|
49
52
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
|
|
@@ -51,6 +54,7 @@ files:
|
|
|
51
54
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
|
52
55
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
53
56
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
57
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
|
54
58
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
|
55
59
|
- lib/generators/css_zero/install/USAGE
|
|
56
60
|
- lib/generators/css_zero/install/install_generator.rb
|