css-zero 0.0.21 → 0.0.23
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/sizes.css +10 -0
- data/app/assets/stylesheets/typography.css +2 -2
- 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 +6 -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/input.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css +9 -4
- 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 +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 384e68aee1868c3f50f08a62b7f8f7dfa8ccbef7ebcfb8237758f9089c2ca817
|
|
4
|
+
data.tar.gz: df90558a73aaf3470093c6eddf9d20ce8372a1d7503809c23544cdd6b7d4b0dd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 928d0dd662bd67da78146d1356dcacd04946a57fccb25aaf861224e79f6028fe87888520142c5cb56d492be3367b12c512739871e76e8608f56563216926dc83
|
|
7
|
+
data.tar.gz: 55578a5d4ef3a5a6cf1f2e987223bfdf99e2493fd7d649e1a56765859dbe96a9b83d75fa4321159992e04347b3c7dfd9eeec2e25f9b00f18dc0c32cdf0dd801d
|
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 switch table
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -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
|
*****************************************************************/
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
--text-8xl: 6rem; /* 96px */
|
|
19
19
|
--text-9xl: 8rem; /* 128px */
|
|
20
20
|
|
|
21
|
-
--text-sm-responsive: clamp(0.
|
|
22
|
-
--text-base-responsive: clamp(1rem, 2.5cqi, 1.
|
|
21
|
+
--text-sm-responsive: clamp(0.875rem, 2cqi, 1rem);
|
|
22
|
+
--text-base-responsive: clamp(1rem, 2.5cqi, 1.5rem);
|
|
23
23
|
--text-lg-responsive: clamp(1.25rem, 4cqi, 1.875rem);
|
|
24
24
|
--text-xl-responsive: clamp(1.875rem, 5cqi, 3rem);
|
|
25
25
|
|
|
@@ -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 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
|
|
@@ -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]) {
|
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
font-size: var(--text-base-responsive);
|
|
3
3
|
max-inline-size: 65ch;
|
|
4
4
|
|
|
5
|
+
/* Antialiased fonts */
|
|
6
|
+
-moz-osx-font-smoothing: grayscale;
|
|
7
|
+
-webkit-font-smoothing: antialiased;
|
|
8
|
+
|
|
5
9
|
:is(h1, h2, h3, h4, h5, h6) {
|
|
6
10
|
font-weight: 800;
|
|
7
11
|
hyphens: auto;
|
|
@@ -13,7 +17,7 @@
|
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
h1 {
|
|
16
|
-
font-size:
|
|
20
|
+
font-size: 2.25em;
|
|
17
21
|
}
|
|
18
22
|
|
|
19
23
|
h2 {
|
|
@@ -21,7 +25,7 @@
|
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
h3 {
|
|
24
|
-
font-size: 1.
|
|
28
|
+
font-size: 1.125em;
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
h4 {
|
|
@@ -29,11 +33,11 @@
|
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
h5 {
|
|
32
|
-
font-size: 0.
|
|
36
|
+
font-size: 0.875em;
|
|
33
37
|
}
|
|
34
38
|
|
|
35
39
|
h6 {
|
|
36
|
-
font-size: 0.
|
|
40
|
+
font-size: 0.75em;
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
:is(ul, ol, menu) {
|
|
@@ -127,6 +131,7 @@
|
|
|
127
131
|
}
|
|
128
132
|
|
|
129
133
|
a {
|
|
134
|
+
font-weight: 500;
|
|
130
135
|
text-decoration: underline;
|
|
131
136
|
text-decoration-skip-ink: auto;
|
|
132
137
|
}
|
|
@@ -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.23
|
|
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-20 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,6 +54,7 @@ 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
|
|
@@ -59,6 +62,7 @@ files:
|
|
|
59
62
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
|
|
60
63
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
61
64
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
65
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
|
62
66
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
|
63
67
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
|
64
68
|
- lib/generators/css_zero/install/USAGE
|