css-zero 0.0.22 → 0.0.23

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) 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/zutilities.css +6 -0
  5. data/lib/css_zero/version.rb +1 -1
  6. data/lib/generators/css_zero/add/USAGE +1 -1
  7. data/lib/generators/css_zero/add/resources.yml +6 -1
  8. data/lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg +1 -0
  9. data/lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg +1 -0
  10. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +4 -0
  11. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +1 -1
  12. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +20 -0
  13. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +1 -1
  14. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
  15. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +4 -0
  16. data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js +21 -0
  17. metadata +6 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b5d4d17fb32c6c3bfd5762fcc8343faee461b303382b2f99a36b8d45ad31eba2
4
- data.tar.gz: 8e77a9d7121a81064b67cc28bca86d0b3fe41d7ba8add75e973a84fc83d45cb8
3
+ metadata.gz: 384e68aee1868c3f50f08a62b7f8f7dfa8ccbef7ebcfb8237758f9089c2ca817
4
+ data.tar.gz: df90558a73aaf3470093c6eddf9d20ce8372a1d7503809c23544cdd6b7d4b0dd
5
5
  SHA512:
6
- metadata.gz: cb0ed49bdd5bd806f10720b998cefcffbf781cd4507fa67f07e75812eb73d87bdb1df7b4d237aee347d7f732ac6eed97582bbe41b423a19459cbbfae8b4ec800
7
- data.tar.gz: 2c85562ca2d1a2f893cd29333d2a3099babc649a48cde4575ae5bf08ae950a3ce62226c9a9bb040f3701d37b2785b4e051290a281a3b49dbf417466475b1768d
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/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.22"
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/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.22
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-18 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