css-zero 0.0.92 → 0.0.93

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.
Files changed (13) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +10 -24
  3. data/lib/css_zero/version.rb +1 -1
  4. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +2 -1
  5. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +4 -4
  6. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css +2 -6
  7. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +4 -4
  8. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +2 -1
  9. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +6 -0
  10. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css +3 -4
  11. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css +1 -1
  12. data/lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js +6 -4
  13. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3c1c919ca22e297fc9aed948e7f9eda8a17d341dd32c8b4df5c70b4bb1823cda
4
- data.tar.gz: b3feb5c0d25ae33d70f76cdfded1a64ac65b562784fdaab32412c1b7f043e825
3
+ metadata.gz: 32342c2b786487ee68c9b3a1d894d94b85b89607da1abb1d2f5a75ed9effc53c
4
+ data.tar.gz: '02517761054609b9014ef3fb4194a8d4405b7875c87dc42abe000b085577dddc'
5
5
  SHA512:
6
- metadata.gz: 1e784e20f4e8cf7878e68400fd3c9eb72cdf1d5314e73f897fd606c28f05b8c9bd5f5d43805125ec246bcfed81c2ddcff108a0b3731c09897b4c621c69c02fb3
7
- data.tar.gz: e2326b48f1d6261f90d33688d6b69e0791610e456790fb8ed737508e0c35f683d20e058f0d37bcbc396a95f5d66d4aad69534018ff37785c83b1f82854f76195
6
+ metadata.gz: 75bdcf3780aac15921ccead84e9abec3629b6dd9f84751aa21d15e82781050e3cedb924925db75c1a1bd1387986dde849a02734be9e20873dfa44cf2b4f48751
7
+ data.tar.gz: 7fd76a723cb4be4d92243f1ed3faa5882fb96f76dfe2e184d7708bf1da9b6141925d0875cf12ccfe8a46bf924daeea117eda7d157ba235ef50a44beaada385e2
data/README.md CHANGED
@@ -24,41 +24,27 @@ bin/rails generate css_zero:add --help
24
24
 
25
25
  ## Usage
26
26
 
27
- ```html
28
- <h1 class="text-xl font-bold mb-4">
29
- Write most page content using utility classes.
30
- </h1>
31
-
32
- <div class="custom-component">
33
- Create components using CSS variables.
34
- </div>
35
-
36
- <div class="card">
37
- Optionally, copy pre-built components into your application.
38
- </div>
39
- ```
40
-
41
- ```css
42
- .custom-component {
43
- background-color: var(--red-500);
44
- border-radius: var(--rounded);
45
- block-size: var(--size-4);
46
- }
47
- ```
48
-
49
27
  Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
50
28
 
51
29
  ## Components
52
30
 
53
31
  [<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
54
32
 
33
+ ## Scaffold
34
+
35
+ This gem implements custom templates for scaffolds and authentication.
36
+
37
+ ```
38
+ bin/rails generate scaffold contacts name email phone
39
+ ```
40
+
55
41
  ## Icons
56
42
 
57
43
  Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
58
44
 
59
- ## Scaffold
45
+ ## Figma
60
46
 
61
- This gem implements custom templates for scaffolds and authentication.
47
+ [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
62
48
 
63
49
  ## Development
64
50
 
data/lib/css_zero/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.92"
2
+ VERSION = "0.0.93"
3
3
  end
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css CHANGED
@@ -48,7 +48,8 @@
48
48
  content: "";
49
49
  filter: var(--color-filter-text);
50
50
  inline-size: var(--size-4);
51
- transition: transform var(--time-200);
51
+ transition-duration: var(--time-200);
52
+ transition-property: transform;
52
53
  }
53
54
  }
54
55
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css CHANGED
@@ -26,7 +26,7 @@
26
26
  transition-property: display, overlay, opacity;
27
27
  }
28
28
 
29
- /* In animation */
29
+ /* Animation end */
30
30
  &[open] {
31
31
  opacity: 1; transform: var(--scale-100);
32
32
  }
@@ -35,7 +35,7 @@
35
35
  opacity: 1;
36
36
  }
37
37
 
38
- /* Out animation */
38
+ /* Animation start */
39
39
  @starting-style {
40
40
  &[open] {
41
41
  opacity: 0; transform: var(--scale-95);
@@ -60,7 +60,7 @@
60
60
  }
61
61
 
62
62
  .dialog__close {
63
- inset-block-start: var(--size-4);
64
- inset-inline-end: var(--size-4);
63
+ inset-block-start: var(--size-3);
64
+ inset-inline-end: var(--size-3);
65
65
  position: absolute;
66
66
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css CHANGED
@@ -13,19 +13,15 @@
13
13
  transition-duration: var(--time-150);
14
14
  transition-property: display, overlay, opacity, transform;
15
15
 
16
- /* In animation */
16
+ /* Animation end */
17
17
  &:popover-open {
18
18
  opacity: 1; transform: var(--scale-100);
19
19
  }
20
20
 
21
- /* Out animation */
21
+ /* Animation start */
22
22
  @starting-style {
23
23
  &:popover-open {
24
24
  opacity: 0; transform: var(--scale-95);
25
25
  }
26
26
  }
27
27
  }
28
-
29
- .popover--tooltip {
30
- font-size: var(--text-sm); padding: var(--size-1_5) var(--size-3);
31
- }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css CHANGED
@@ -25,7 +25,7 @@
25
25
  transition-property: display, overlay, opacity;
26
26
  }
27
27
 
28
- /* In animation */
28
+ /* Animation end */
29
29
  &[open] {
30
30
  transform: translateX(0);
31
31
  }
@@ -34,7 +34,7 @@
34
34
  opacity: 1;
35
35
  }
36
36
 
37
- /* Out animation */
37
+ /* Animation start */
38
38
  @starting-style {
39
39
  &[open] {
40
40
  transform: var(--sheet-transform);
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  .sheet__close {
69
- inset-block-start: var(--size-4);
70
- inset-inline-end: var(--size-4);
69
+ inset-block-start: var(--size-3);
70
+ inset-inline-end: var(--size-3);
71
71
  position: absolute;
72
72
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css CHANGED
@@ -25,7 +25,8 @@
25
25
  border-radius: var(--rounded-full);
26
26
  content: "";
27
27
  display: block;
28
- transition: margin var(--time-150);
28
+ transition-duration: var(--time-150);
29
+ transition-property: margin;
29
30
  }
30
31
 
31
32
  &:focus-visible {
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css CHANGED
@@ -1,7 +1,13 @@
1
1
  :where(.table) {
2
+ caption-side: bottom;
2
3
  font-size: var(--text-sm);
3
4
  inline-size: var(--size-full);
4
5
 
6
+ caption {
7
+ color: var(--color-text-subtle);
8
+ margin-block-start: var(--size-4);
9
+ }
10
+
5
11
  thead {
6
12
  color: var(--color-text-subtle);
7
13
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css CHANGED
@@ -32,13 +32,12 @@
32
32
  transition-duration: var(--time-150);
33
33
  transition-property: display, opacity, transform;
34
34
 
35
- /* In animation */
35
+ /* Animation end */
36
36
  .dropdown-active & {
37
- opacity: 1;
38
- transform: var(--scale-100);
37
+ opacity: 1; transform: var(--scale-100);
39
38
  }
40
39
 
41
- /* Out animation */
40
+ /* Animation start */
42
41
  @starting-style {
43
42
  .dropdown-active & {
44
43
  opacity: 0; transform: var(--scale-95);
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css CHANGED
@@ -55,7 +55,7 @@ trix-toolbar {
55
55
  color: var(--color-text-reversed);
56
56
  }
57
57
 
58
- @media (max-width: 768px) {
58
+ @media (max-width: 48rem) {
59
59
  .trix-button-group--history-tools { display: none; }
60
60
  }
61
61
  }
data/lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js CHANGED
@@ -5,6 +5,8 @@ export default class extends Controller {
5
5
  static targets = [ "button", "menu" ]
6
6
  static values = { placement: { type: String, default: "bottom" } }
7
7
 
8
+ #showTimer = null
9
+
8
10
  initialize() {
9
11
  this.orient = this.orient.bind(this)
10
12
  }
@@ -21,12 +23,12 @@ export default class extends Controller {
21
23
  this.menuTarget.showPopover()
22
24
  }
23
25
 
24
- showLater() {
25
- setTimeout(() => this.show(), 700)
26
+ hide() {
27
+ clearTimeout(this.#showTimer); this.menuTarget.hidePopover()
26
28
  }
27
29
 
28
- hide() {
29
- this.menuTarget.hidePopover()
30
+ showLater() {
31
+ this.#showTimer = setTimeout(() => this.show(), 700)
30
32
  }
31
33
 
32
34
  orient() {
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.92
4
+ version: 0.0.93
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: 2025-01-16 00:00:00.000000000 Z
11
+ date: 2025-01-17 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com