css-zero 0.0.22 → 0.0.24
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 +1 -1
- data/app/assets/stylesheets/_reset.css +28 -0
- data/app/assets/stylesheets/sizes.css +10 -0
- data/app/assets/stylesheets/zutilities.css +6 -0
- 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 +10 -1
- data/lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +4 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +20 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +0 -5
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +61 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +4 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js +21 -0
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a5e73d39707f2126d5d15f5099004ac306aa5acaa584ff7c4441bfec4309d8f3
|
|
4
|
+
data.tar.gz: 9eb912c80e2fd2e3f0681390cecb8cb2950e558cf2c42fae5affd846cd4b08e3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1d9ad5567f702b654d1efca3312b275fd3adec67c95bdf5539d44b01dc845846b171b8850654d3e8182537c3b4b1a757a1291500df589c0575880d6a6629ab68
|
|
7
|
+
data.tar.gz: e55ab56ea77eefd60b392afe4c6cda7421739bab9a25c1410e5d8a83ab37a73912849803c2d67a4fe513a8227437486ae2ef93b3046a5d4d456265af7db6c3f8
|
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 collapsible dialog input pagination progress prose switch table
|
|
22
|
+
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -234,6 +234,14 @@ progress {
|
|
|
234
234
|
line-height: 1em;
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
+
/*
|
|
238
|
+
Correct empty date field height on safari IOS.
|
|
239
|
+
*/
|
|
240
|
+
|
|
241
|
+
::-webkit-date-and-time-value {
|
|
242
|
+
height: 1.5em;
|
|
243
|
+
}
|
|
244
|
+
|
|
237
245
|
/*
|
|
238
246
|
Remove the inner padding in Chrome and Safari on macOS.
|
|
239
247
|
*/
|
|
@@ -242,6 +250,19 @@ progress {
|
|
|
242
250
|
-webkit-appearance: none;
|
|
243
251
|
}
|
|
244
252
|
|
|
253
|
+
/*
|
|
254
|
+
Remove the increment cursor for step any.
|
|
255
|
+
*/
|
|
256
|
+
|
|
257
|
+
input[step='any']::-webkit-inner-spin-button,
|
|
258
|
+
input[step='any']::-webkit-outer-spin-button {
|
|
259
|
+
-webkit-appearance: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
input[step='any'] {
|
|
263
|
+
-moz-appearance: textfield;
|
|
264
|
+
}
|
|
265
|
+
|
|
245
266
|
/*
|
|
246
267
|
Add the correct display in Chrome and Safari.
|
|
247
268
|
*/
|
|
@@ -314,6 +335,13 @@ video {
|
|
|
314
335
|
block-size: auto;
|
|
315
336
|
}
|
|
316
337
|
|
|
338
|
+
/*
|
|
339
|
+
Prevent page scroll when dialog is open
|
|
340
|
+
*/
|
|
341
|
+
html:has(dialog[open]) {
|
|
342
|
+
overflow: hidden;
|
|
343
|
+
}
|
|
344
|
+
|
|
317
345
|
/*
|
|
318
346
|
Make elements with the HTML hidden attribute stay hidden by default.
|
|
319
347
|
*/
|
|
@@ -84,6 +84,16 @@
|
|
|
84
84
|
--width-6xl: 72rem; /* 1152px */
|
|
85
85
|
--width-7xl: 80rem; /* 1280px */
|
|
86
86
|
|
|
87
|
+
/****************************************************************
|
|
88
|
+
* Aspect Ratio
|
|
89
|
+
*****************************************************************/
|
|
90
|
+
--aspect-square: 1/1;
|
|
91
|
+
--aspect-landscape: 4/3;
|
|
92
|
+
--aspect-portrait: 3/4;
|
|
93
|
+
--aspect-widescreen: 16/9;
|
|
94
|
+
--aspect-ultrawide: 18/5;
|
|
95
|
+
--aspect-golden: 1.6180/1;
|
|
96
|
+
|
|
87
97
|
/****************************************************************
|
|
88
98
|
* Breakpoints
|
|
89
99
|
*****************************************************************/
|
|
@@ -163,6 +163,12 @@
|
|
|
163
163
|
.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
|
|
164
164
|
.overflow-hidden { overflow: hidden; }
|
|
165
165
|
|
|
166
|
+
.object-contain { object-fit: contain; }
|
|
167
|
+
.object-cover { object-fit: cover; }
|
|
168
|
+
|
|
169
|
+
.aspect-square { aspect-ratio: 1; }
|
|
170
|
+
.aspect-widescreen { aspect-ratio: 16 / 9; }
|
|
171
|
+
|
|
166
172
|
/****************************************************************
|
|
167
173
|
* Margin
|
|
168
174
|
*****************************************************************/
|
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 collapsible dialog input pagination progress prose switch table
|
|
5
|
+
accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -15,12 +15,17 @@ button:
|
|
|
15
15
|
- app/assets/images/loader-circle.svg
|
|
16
16
|
card:
|
|
17
17
|
- app/assets/stylesheets/card.css
|
|
18
|
+
carousel:
|
|
19
|
+
- app/assets/stylesheets/carousel.css
|
|
20
|
+
- app/javascript/controllers/carousel_controller.js
|
|
21
|
+
- app/assets/images/arrow-left.svg
|
|
22
|
+
- app/assets/images/arrow-right.svg
|
|
18
23
|
collapsible:
|
|
19
24
|
- app/javascript/controllers/collapsible_controller.js
|
|
20
25
|
dialog:
|
|
21
26
|
- app/assets/stylesheets/dialog.css
|
|
22
|
-
- app/assets/images/x.svg
|
|
23
27
|
- app/javascript/controllers/dialog_controller.js
|
|
28
|
+
- app/assets/images/x.svg
|
|
24
29
|
input:
|
|
25
30
|
- app/assets/stylesheets/input.css
|
|
26
31
|
- app/assets/images/select-arrow.svg
|
|
@@ -35,5 +40,9 @@ prose:
|
|
|
35
40
|
- app/assets/stylesheets/prose.css
|
|
36
41
|
switch:
|
|
37
42
|
- app/assets/stylesheets/switch.css
|
|
43
|
+
sheet:
|
|
44
|
+
- app/assets/stylesheets/sheet.css
|
|
45
|
+
- app/javascript/controllers/dialog_controller.js
|
|
46
|
+
- app/assets/images/x.svg
|
|
38
47
|
table:
|
|
39
48
|
- app/assets/stylesheets/table.css
|
|
@@ -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="m12 19-7-7 7-7"/><path d="M19 12H5"/></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="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.carousel {
|
|
2
|
+
align-items: center;
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: var(--size-4);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.carousel__content {
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: var(--size-6);
|
|
10
|
+
overflow-x: auto;
|
|
11
|
+
padding: var(--size-1);
|
|
12
|
+
scrollbar-width: none;
|
|
13
|
+
scroll-snap-type: x mandatory;
|
|
14
|
+
|
|
15
|
+
> * {
|
|
16
|
+
flex: 1 0 100%;
|
|
17
|
+
scroll-snap-stop: always;
|
|
18
|
+
scroll-snap-align: center;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
font-size: var(--text-sm);
|
|
8
8
|
inline-size: var(--size-full);
|
|
9
9
|
padding: var(--size-2) var(--size-3);
|
|
10
|
-
resize: none;
|
|
11
10
|
|
|
12
11
|
option {
|
|
13
12
|
padding-block: var(--size-1);
|
|
@@ -17,6 +16,7 @@
|
|
|
17
16
|
field-sizing: content;
|
|
18
17
|
max-block-size: calc(10lh + var(--size-6));
|
|
19
18
|
min-block-size: calc(3lh + var(--size-6));
|
|
19
|
+
resize: none;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
&:is(select):not([multiple], [size]) {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
.sheet {
|
|
2
|
+
background-color: var(--color-bg);
|
|
3
|
+
border-inline-start-width: var(--border);
|
|
4
|
+
box-shadow: var(--shadow-lg);
|
|
5
|
+
block-size: 100%;
|
|
6
|
+
color: var(--color-text);
|
|
7
|
+
inline-size: var(--size-3-4);
|
|
8
|
+
margin-inline-start: auto;
|
|
9
|
+
max-block-size: none;
|
|
10
|
+
max-inline-size: var(--width-sm);
|
|
11
|
+
padding: var(--size-6);
|
|
12
|
+
|
|
13
|
+
&::backdrop {
|
|
14
|
+
background-color: rgba(0, 0, 0, .8);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* Setup animation */
|
|
18
|
+
transform: translateX(100%);
|
|
19
|
+
transition-behavior: allow-discrete;
|
|
20
|
+
transition-duration: var(--time-500);
|
|
21
|
+
transition-property: display, overlay, 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
|
+
transform: translateX(0);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&[open]::backdrop {
|
|
36
|
+
opacity: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Out animation */
|
|
40
|
+
@starting-style {
|
|
41
|
+
&[open] {
|
|
42
|
+
transform: translateX(100%);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[open]::backdrop {
|
|
46
|
+
opacity: 0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Small screens and below */
|
|
51
|
+
@media (width < 40rem) {
|
|
52
|
+
max-inline-size: none;
|
|
53
|
+
text-align: center;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.sheet__close {
|
|
58
|
+
inset-block-start: var(--size-4);
|
|
59
|
+
inset-inline-end: var(--size-4);
|
|
60
|
+
position: absolute;
|
|
61
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = [ "content" ]
|
|
5
|
+
|
|
6
|
+
next() {
|
|
7
|
+
this.contentTarget.scrollTo({ left: this.#scrollLeft + this.#slideSize, behavior: "smooth" })
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
previous() {
|
|
11
|
+
this.contentTarget.scrollTo({ left: this.#scrollLeft - this.#slideSize, behavior: "smooth" })
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
get #scrollLeft() {
|
|
15
|
+
return this.contentTarget.scrollLeft
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
get #slideSize() {
|
|
19
|
+
return this.contentTarget.clientWidth
|
|
20
|
+
}
|
|
21
|
+
}
|
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.24
|
|
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-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -37,6 +37,8 @@ files:
|
|
|
37
37
|
- lib/generators/css_zero/add/USAGE
|
|
38
38
|
- lib/generators/css_zero/add/add_generator.rb
|
|
39
39
|
- lib/generators/css_zero/add/resources.yml
|
|
40
|
+
- lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg
|
|
41
|
+
- lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg
|
|
40
42
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
|
|
41
43
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
|
|
42
44
|
- lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
|
|
@@ -52,13 +54,16 @@ files:
|
|
|
52
54
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css
|
|
53
55
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
|
|
54
56
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
|
|
57
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
|
|
55
58
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
|
|
56
59
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
|
|
57
60
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
|
|
58
61
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
|
59
62
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
|
|
63
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
|
|
60
64
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
61
65
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
66
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
|
62
67
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
|
63
68
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
|
64
69
|
- lib/generators/css_zero/install/USAGE
|