css-zero 0.0.21 → 0.0.23

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/stylesheets/sizes.css +10 -0
  4. data/app/assets/stylesheets/typography.css +2 -2
  5. data/app/assets/stylesheets/zutilities.css +6 -0
  6. data/lib/css_zero/version.rb +1 -1
  7. data/lib/generators/css_zero/add/USAGE +1 -1
  8. data/lib/generators/css_zero/add/resources.yml +6 -1
  9. data/lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg +1 -0
  10. data/lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg +1 -0
  11. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +4 -0
  12. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +1 -1
  13. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +20 -0
  14. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +1 -1
  15. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css +9 -4
  16. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
  17. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +4 -0
  18. data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js +21 -0
  19. metadata +6 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 481b6bc3c15647de31c49080ef3f7192e8b09f30aaaccf31c13ff3e9c2cfd186
4
- data.tar.gz: 81c81d0318e3d791ce1413fb4e138c4acd93342754c3ab7638a3412bb06b3925
3
+ metadata.gz: 384e68aee1868c3f50f08a62b7f8f7dfa8ccbef7ebcfb8237758f9089c2ca817
4
+ data.tar.gz: df90558a73aaf3470093c6eddf9d20ce8372a1d7503809c23544cdd6b7d4b0dd
5
5
  SHA512:
6
- metadata.gz: e703ceb69b9a40978790111661b8ba6a4dd1e9331661d869006b409fe963ae2ac83265fbb31d83b39c147374421435146d4df1587539a9b51bf36924f455594a
7
- data.tar.gz: '089475f52788b3fe8432f95bd54a3b433a9d94452248c4c86763839086687fef7c7fcd2912f5a050763035c76a6fd1a3b32c59592e83288a1ab39728849abfab'
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
data/app/assets/stylesheets/sizes.css CHANGED
@@ -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
  *****************************************************************/
data/app/assets/stylesheets/typography.css CHANGED
@@ -18,8 +18,8 @@
18
18
  --text-8xl: 6rem; /* 96px */
19
19
  --text-9xl: 8rem; /* 128px */
20
20
 
21
- --text-sm-responsive: clamp(0.75rem, 2cqi, 1rem);
22
- --text-base-responsive: clamp(1rem, 2.5cqi, 1.25rem);
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
 
data/app/assets/stylesheets/zutilities.css CHANGED
@@ -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
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.21"
2
+ VERSION = "0.0.23"
3
3
  end
data/lib/generators/css_zero/add/USAGE 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...]
data/lib/generators/css_zero/add/resources.yml CHANGED
@@ -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
data/lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg ADDED
@@ -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>
data/lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg ADDED
@@ -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>
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css CHANGED
@@ -22,6 +22,10 @@
22
22
  justify-content: space-between;
23
23
  padding-block: var(--size-4);
24
24
 
25
+ &:hover {
26
+ text-decoration: underline;
27
+ }
28
+
25
29
  &:focus-visible {
26
30
  outline: var(--border-2) solid var(--color-primary);
27
31
  outline-offset: var(--border-2);
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css CHANGED
@@ -9,7 +9,7 @@
9
9
  overflow: hidden;
10
10
 
11
11
  img {
12
- aspect-ratio: 1;
12
+ aspect-ratio: var(--aspect-square);
13
13
  block-size: var(--size-full);
14
14
  inline-size: var(--size-full);
15
15
  object-fit: cover;
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css ADDED
@@ -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
+ }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css CHANGED
@@ -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]) {
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css CHANGED
@@ -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: 2em;
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.17em;
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.83em;
36
+ font-size: 0.875em;
33
37
  }
34
38
 
35
39
  h6 {
36
- font-size: 0.67em;
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
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css CHANGED
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  &::before {
23
- aspect-ratio: 1;
23
+ aspect-ratio: var(--aspect-square);
24
24
  background-color: var(--color-text-reversed);
25
25
  block-size: var(--size-full);
26
26
  border-radius: var(--rounded-full);
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css CHANGED
@@ -10,6 +10,10 @@
10
10
  border-block-start-width: var(--border);
11
11
  }
12
12
 
13
+ tr:hover {
14
+ background-color: var(--color-border-light);
15
+ }
16
+
13
17
  th {
14
18
  font-weight: var(--font-medium);
15
19
  text-align: start;
data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js ADDED
@@ -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.21
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-17 00:00:00.000000000 Z
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