css-zero 0.0.91 → 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.
- checksums.yaml +4 -4
- data/README.md +10 -24
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +2 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +2 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +2 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +4 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css +2 -6
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +4 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +2 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +6 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css +7 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js +6 -4
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 32342c2b786487ee68c9b3a1d894d94b85b89607da1abb1d2f5a75ed9effc53c
|
|
4
|
+
data.tar.gz: '02517761054609b9014ef3fb4194a8d4405b7875c87dc42abe000b085577dddc'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
-
##
|
|
45
|
+
## Figma
|
|
60
46
|
|
|
61
|
-
|
|
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
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
gap: var(--size-2);
|
|
15
15
|
inline-size: var(--btn-inline-size, auto);
|
|
16
16
|
justify-content: var(--btn-justify-content, center);
|
|
17
|
+
min-block-size: var(--btn-block-size, var(--size-9));
|
|
17
18
|
padding: var(--btn-padding, 0.375rem 1rem);
|
|
18
19
|
text-align: center;
|
|
19
20
|
white-space: nowrap;
|
|
@@ -70,6 +71,7 @@
|
|
|
70
71
|
|
|
71
72
|
.btn--plain {
|
|
72
73
|
--btn-background: transparent;
|
|
74
|
+
--btn-block-size: auto;
|
|
73
75
|
--btn-border-color: transparent;
|
|
74
76
|
--btn-hover-color: transparent;
|
|
75
77
|
--btn-padding: 0;
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
transition-property: display, overlay, opacity;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
/*
|
|
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
|
-
/*
|
|
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-
|
|
64
|
-
inset-inline-end:
|
|
63
|
+
inset-block-start: var(--size-3);
|
|
64
|
+
inset-inline-end: var(--size-3);
|
|
65
65
|
position: absolute;
|
|
66
66
|
}
|
|
@@ -13,19 +13,15 @@
|
|
|
13
13
|
transition-duration: var(--time-150);
|
|
14
14
|
transition-property: display, overlay, opacity, transform;
|
|
15
15
|
|
|
16
|
-
/*
|
|
16
|
+
/* Animation end */
|
|
17
17
|
&:popover-open {
|
|
18
18
|
opacity: 1; transform: var(--scale-100);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
/*
|
|
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
|
-
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
transition-property: display, overlay, opacity;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
/*
|
|
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
|
-
/*
|
|
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-
|
|
70
|
-
inset-inline-end:
|
|
69
|
+
inset-block-start: var(--size-3);
|
|
70
|
+
inset-inline-end: var(--size-3);
|
|
71
71
|
position: absolute;
|
|
72
72
|
}
|
|
@@ -32,13 +32,12 @@
|
|
|
32
32
|
transition-duration: var(--time-150);
|
|
33
33
|
transition-property: display, opacity, transform;
|
|
34
34
|
|
|
35
|
-
/*
|
|
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
|
-
/*
|
|
40
|
+
/* Animation start */
|
|
42
41
|
@starting-style {
|
|
43
42
|
.dropdown-active & {
|
|
44
43
|
opacity: 0; transform: var(--scale-95);
|
|
@@ -119,3 +118,7 @@
|
|
|
119
118
|
.invalid .ts-control {
|
|
120
119
|
border-color: var(--color-negative);
|
|
121
120
|
}
|
|
121
|
+
|
|
122
|
+
[data-controller*="combobox"] {
|
|
123
|
+
clip: rect(0 0 0 0); position: absolute;
|
|
124
|
+
}
|
|
@@ -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
|
-
|
|
25
|
-
|
|
26
|
+
hide() {
|
|
27
|
+
clearTimeout(this.#showTimer); this.menuTarget.hidePopover()
|
|
26
28
|
}
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
this.
|
|
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.
|
|
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-
|
|
11
|
+
date: 2025-01-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|