css-zero 0.0.22 → 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/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/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
|
*****************************************************************/
|
|
@@ -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]) {
|
|
@@ -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
|