css-zero 0.0.92 → 0.0.94
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 +4 -26
- 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 +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +3 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +11 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +9 -19
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css +3 -7
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +9 -19
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +5 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +6 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css +5 -6
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js +2 -18
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js +2 -2
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/datepicker_controller.js +1 -2
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/otp_input_controller.js +1 -3
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js +6 -4
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js +1 -3
- data/lib/generators/css_zero/install/install_generator.rb +1 -1
- data/lib/generators/css_zero/scaffold/templates/_form.html.erb.tt +3 -3
- 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: 421e49460a3f5afe3b7ba8f87faa35d1e8a44050f5b0fd8696cd1b175a415d2d
|
4
|
+
data.tar.gz: a6240eac2e50923e843a354fe607d1e02f135a797fae05c5030cdb9f3c961db5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a86bd1229145b84313451d9997b887ae0b9c5d60bc143e73b891113d22f3521c26945a410b3a713cf9dc6ac0c109bb13bd50c12183ca28c9417ae44027b25ff8
|
7
|
+
data.tar.gz: fa092a46a4ab911f999c0a115323150752a783e1914a00fe6cdbed53710f5849b4396d632fa2a8dc1a996cb91522a053f3e7a0177e560f72934f6b5550ab0945
|
data/README.md
CHANGED
@@ -22,39 +22,17 @@ Add the additional components you need. (Optional)
|
|
22
22
|
bin/rails generate css_zero:add --help
|
23
23
|
```
|
24
24
|
|
25
|
-
##
|
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>
|
25
|
+
## Components
|
35
26
|
|
36
|
-
<
|
37
|
-
Optionally, copy pre-built components into your application.
|
38
|
-
</div>
|
39
|
-
```
|
27
|
+
[<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
|
40
28
|
|
41
|
-
|
42
|
-
.custom-component {
|
43
|
-
background-color: var(--red-500);
|
44
|
-
border-radius: var(--rounded);
|
45
|
-
block-size: var(--size-4);
|
46
|
-
}
|
47
|
-
```
|
29
|
+
## Utility classes and variables
|
48
30
|
|
49
31
|
Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
|
50
32
|
|
51
|
-
## Components
|
52
|
-
|
53
|
-
[<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
|
54
|
-
|
55
33
|
## Icons
|
56
34
|
|
57
|
-
|
35
|
+
If you're looking for high-quality icons, I recommend checking out [Lucide](https://lucide.dev).
|
58
36
|
|
59
37
|
## Scaffold
|
60
38
|
|
data/lib/css_zero/version.rb
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
.btn {
|
2
2
|
--btn-background: var(--color-bg);
|
3
|
+
--hover-color: oklch(from var(--btn-background) calc(l * .95) c h);
|
3
4
|
|
4
5
|
align-items: center;
|
5
6
|
background-color: var(--btn-background);
|
@@ -24,7 +25,7 @@
|
|
24
25
|
}
|
25
26
|
|
26
27
|
&:hover {
|
27
|
-
background-color: var(--btn-hover-color,
|
28
|
+
background-color: var(--btn-hover-color, var(--hover-color));
|
28
29
|
}
|
29
30
|
|
30
31
|
&:focus-visible {
|
@@ -84,9 +85,7 @@
|
|
84
85
|
}
|
85
86
|
|
86
87
|
[aria-busy] .btn--loading:disabled {
|
87
|
-
> * {
|
88
|
-
visibility: hidden;
|
89
|
-
}
|
88
|
+
> * { visibility: hidden; }
|
90
89
|
|
91
90
|
&::after {
|
92
91
|
filter: var(--btn-icon-color, var(--color-filter-text));
|
@@ -6,14 +6,22 @@
|
|
6
6
|
|
7
7
|
.carousel__content {
|
8
8
|
display: flex;
|
9
|
-
gap: var(--size-
|
9
|
+
gap: var(--size-4);
|
10
10
|
inline-size: var(--size-full);
|
11
|
-
overflow: hidden;
|
11
|
+
overflow-x: hidden;
|
12
|
+
scroll-behavior: smooth;
|
12
13
|
scroll-snap-type: x mandatory;
|
14
|
+
|
15
|
+
@supports (-moz-appearance: none) {
|
16
|
+
scroll-behavior: auto;
|
17
|
+
}
|
13
18
|
}
|
14
19
|
|
15
20
|
.carousel__item {
|
16
|
-
|
21
|
+
--items: var(--carousel-items, 1);
|
22
|
+
--items-gap: calc(100% - 1rem * (var(--items) - 1));
|
23
|
+
|
24
|
+
flex: 0 0 calc(var(--items-gap) / var(--items));
|
17
25
|
padding: var(--size-1);
|
18
26
|
scroll-snap-stop: always;
|
19
27
|
scroll-snap-align: start;
|
@@ -12,7 +12,7 @@
|
|
12
12
|
background-color: rgba(0, 0, 0, .8);
|
13
13
|
}
|
14
14
|
|
15
|
-
/*
|
15
|
+
/* Final state of exit animation and setup */
|
16
16
|
opacity: 0;
|
17
17
|
transform: var(--scale-95);
|
18
18
|
transition-behavior: allow-discrete;
|
@@ -26,24 +26,14 @@
|
|
26
26
|
transition-property: display, overlay, opacity;
|
27
27
|
}
|
28
28
|
|
29
|
-
/*
|
30
|
-
&[open] {
|
31
|
-
|
32
|
-
}
|
33
|
-
|
34
|
-
&[open]::backdrop {
|
35
|
-
opacity: 1;
|
36
|
-
}
|
29
|
+
/* Final state of entry animation */
|
30
|
+
&[open] { opacity: 1; transform: var(--scale-100); }
|
31
|
+
&[open]::backdrop { opacity: 1; }
|
37
32
|
|
38
|
-
/*
|
33
|
+
/* Initial state of entry animation */
|
39
34
|
@starting-style {
|
40
|
-
&[open] {
|
41
|
-
|
42
|
-
}
|
43
|
-
|
44
|
-
&[open]::backdrop {
|
45
|
-
opacity: 0;
|
46
|
-
}
|
35
|
+
&[open] { opacity: 0; transform: var(--scale-95); }
|
36
|
+
&[open]::backdrop { opacity: 0; }
|
47
37
|
}
|
48
38
|
|
49
39
|
/* Drawer component on mobile */
|
@@ -60,7 +50,7 @@
|
|
60
50
|
}
|
61
51
|
|
62
52
|
.dialog__close {
|
63
|
-
inset-block-start: var(--size-
|
64
|
-
inset-inline-end:
|
53
|
+
inset-block-start: var(--size-3);
|
54
|
+
inset-inline-end: var(--size-3);
|
65
55
|
position: absolute;
|
66
56
|
}
|
@@ -6,26 +6,22 @@
|
|
6
6
|
color: var(--color-text);
|
7
7
|
inline-size: var(--popover-size, max-content);
|
8
8
|
|
9
|
-
/*
|
9
|
+
/* Final state of exit animation and setup */
|
10
10
|
opacity: 0;
|
11
11
|
transform: var(--scale-95);
|
12
12
|
transition-behavior: allow-discrete;
|
13
13
|
transition-duration: var(--time-150);
|
14
14
|
transition-property: display, overlay, opacity, transform;
|
15
15
|
|
16
|
-
/*
|
16
|
+
/* Final state of entry animation */
|
17
17
|
&:popover-open {
|
18
18
|
opacity: 1; transform: var(--scale-100);
|
19
19
|
}
|
20
20
|
|
21
|
-
/*
|
21
|
+
/* Initial state of entry animation */
|
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
|
-
}
|
@@ -12,7 +12,7 @@
|
|
12
12
|
background-color: rgba(0, 0, 0, .8);
|
13
13
|
}
|
14
14
|
|
15
|
-
/*
|
15
|
+
/* Final state of exit animation and setup */
|
16
16
|
transform: var(--sheet-transform);
|
17
17
|
transition-behavior: allow-discrete;
|
18
18
|
transition-duration: var(--time-500);
|
@@ -25,24 +25,14 @@
|
|
25
25
|
transition-property: display, overlay, opacity;
|
26
26
|
}
|
27
27
|
|
28
|
-
/*
|
29
|
-
&[open] {
|
30
|
-
|
31
|
-
}
|
32
|
-
|
33
|
-
&[open]::backdrop {
|
34
|
-
opacity: 1;
|
35
|
-
}
|
28
|
+
/* Final state of entry animation */
|
29
|
+
&[open] { transform: translateX(0); }
|
30
|
+
&[open]::backdrop { opacity: 1; }
|
36
31
|
|
37
|
-
/*
|
32
|
+
/* Initial state of entry animation */
|
38
33
|
@starting-style {
|
39
|
-
&[open] {
|
40
|
-
|
41
|
-
}
|
42
|
-
|
43
|
-
&[open]::backdrop {
|
44
|
-
opacity: 0;
|
45
|
-
}
|
34
|
+
&[open] { transform: var(--sheet-transform); }
|
35
|
+
&[open]::backdrop { opacity: 0;}
|
46
36
|
}
|
47
37
|
|
48
38
|
@media (width >= 40rem) {
|
@@ -66,7 +56,7 @@
|
|
66
56
|
}
|
67
57
|
|
68
58
|
.sheet__close {
|
69
|
-
inset-block-start: var(--size-
|
70
|
-
inset-inline-end:
|
59
|
+
inset-block-start: var(--size-3);
|
60
|
+
inset-inline-end: var(--size-3);
|
71
61
|
position: absolute;
|
72
62
|
}
|
@@ -4,9 +4,9 @@
|
|
4
4
|
border-color: transparent;
|
5
5
|
border-radius: var(--rounded-full);
|
6
6
|
border-width: var(--border-2);
|
7
|
-
block-size: var(--size-
|
7
|
+
block-size: var(--size-5);
|
8
8
|
cursor: pointer;
|
9
|
-
inline-size: var(--size-
|
9
|
+
inline-size: var(--size-9);
|
10
10
|
transition-duration: var(--time-150);
|
11
11
|
transition-property: var(--transition-colors);
|
12
12
|
|
@@ -15,7 +15,7 @@
|
|
15
15
|
}
|
16
16
|
|
17
17
|
&:checked::before {
|
18
|
-
margin-inline-start: var(--size-
|
18
|
+
margin-inline-start: var(--size-4);
|
19
19
|
}
|
20
20
|
|
21
21
|
&::before {
|
@@ -25,7 +25,8 @@
|
|
25
25
|
border-radius: var(--rounded-full);
|
26
26
|
content: "";
|
27
27
|
display: block;
|
28
|
-
transition:
|
28
|
+
transition-duration: var(--time-150);
|
29
|
+
transition-property: margin;
|
29
30
|
}
|
30
31
|
|
31
32
|
&:focus-visible {
|
@@ -25,20 +25,19 @@
|
|
25
25
|
font-size: var(--text-sm);
|
26
26
|
line-height: inherit;
|
27
27
|
|
28
|
-
/*
|
28
|
+
/* Final state of exit animation and setup */
|
29
29
|
opacity: 0;
|
30
30
|
transform: var(--scale-95);
|
31
31
|
transition-behavior: allow-discrete;
|
32
32
|
transition-duration: var(--time-150);
|
33
33
|
transition-property: display, opacity, transform;
|
34
34
|
|
35
|
-
/*
|
35
|
+
/* Final state of entry animation */
|
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
|
+
/* Initial state of entry animation */
|
42
41
|
@starting-style {
|
43
42
|
.dropdown-active & {
|
44
43
|
opacity: 0; transform: var(--scale-95);
|
@@ -120,6 +119,6 @@
|
|
120
119
|
border-color: var(--color-negative);
|
121
120
|
}
|
122
121
|
|
123
|
-
[data-controller
|
122
|
+
[data-controller~="combobox"] {
|
124
123
|
clip: rect(0 0 0 0); position: absolute;
|
125
124
|
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
CHANGED
@@ -4,26 +4,10 @@ export default class extends Controller {
|
|
4
4
|
static targets = [ "content" ]
|
5
5
|
|
6
6
|
next() {
|
7
|
-
this.contentTarget.
|
7
|
+
this.contentTarget.scrollBy(100, 0)
|
8
8
|
}
|
9
9
|
|
10
10
|
prev() {
|
11
|
-
this.contentTarget.
|
12
|
-
}
|
13
|
-
|
14
|
-
get #nextPosition() {
|
15
|
-
return this.#scrollLeft + this.#slideSize
|
16
|
-
}
|
17
|
-
|
18
|
-
get #prevPosition() {
|
19
|
-
return this.#scrollLeft - this.#slideSize
|
20
|
-
}
|
21
|
-
|
22
|
-
get #scrollLeft() {
|
23
|
-
return this.contentTarget.scrollLeft
|
24
|
-
}
|
25
|
-
|
26
|
-
get #slideSize() {
|
27
|
-
return this.contentTarget.clientWidth
|
11
|
+
this.contentTarget.scrollBy(-100, 0)
|
28
12
|
}
|
29
13
|
}
|
@@ -38,13 +38,13 @@ export default class extends Controller {
|
|
38
38
|
}
|
39
39
|
|
40
40
|
#reset() {
|
41
|
-
this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(
|
41
|
+
this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(element => {
|
42
42
|
element.classList.remove(this.selectedClass)
|
43
43
|
})
|
44
44
|
}
|
45
45
|
|
46
46
|
#selectMatches(value) {
|
47
|
-
this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach(
|
47
|
+
this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach(element => {
|
48
48
|
element.classList.add(this.selectedClass)
|
49
49
|
})
|
50
50
|
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/datepicker_controller.js
CHANGED
@@ -4,8 +4,7 @@ import flatpickr from "https://esm.sh/flatpickr@4.6.13?standalone"
|
|
4
4
|
export default class extends Controller {
|
5
5
|
static targets = [ "details" ]
|
6
6
|
static values = {
|
7
|
-
type: String,
|
8
|
-
disable: Array,
|
7
|
+
type: String, disable: Array,
|
9
8
|
mode: { type: String, default: "single" },
|
10
9
|
dateFormat: { type: String, default: "F d, Y" },
|
11
10
|
dateTimeFormat: { type: String, default: "F d, Y H:i" }
|
@@ -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() {
|
@@ -29,7 +29,7 @@ export default class extends Controller {
|
|
29
29
|
}
|
30
30
|
}
|
31
31
|
|
32
|
-
#showCurrentTab(
|
32
|
+
#showCurrentTab() {
|
33
33
|
this.buttonTargets.forEach((element, index) => {
|
34
34
|
element.ariaSelected = index === this.indexValue
|
35
35
|
element.tabIndex = index === this.indexValue ? 0 : -1
|
@@ -12,13 +12,13 @@
|
|
12
12
|
<%% end %>
|
13
13
|
|
14
14
|
<% attributes.each do |attribute| -%>
|
15
|
-
<div class="flex flex-col gap-half mbe-4">
|
15
|
+
<div class="flex flex-col items-start gap-half mbe-4">
|
16
16
|
<% if attribute.password_digest? -%>
|
17
17
|
<%%= form.label :password, class: "text-sm font-medium leading-none" %>
|
18
18
|
<%%= form.password_field :password, class: "input" %>
|
19
19
|
</div>
|
20
20
|
|
21
|
-
<div class="flex flex-col gap-half mbe-4">
|
21
|
+
<div class="flex flex-col items-start gap-half mbe-4">
|
22
22
|
<%%= form.label :password_confirmation, class: "text-sm font-medium leading-none" %>
|
23
23
|
<%%= form.password_field :password_confirmation, class: "input" %>
|
24
24
|
<% elsif attribute.attachments? -%>
|
@@ -29,7 +29,7 @@
|
|
29
29
|
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: "auto", class: "input" %>
|
30
30
|
<% elsif attribute.field_type == :checkbox -%>
|
31
31
|
<%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
|
32
|
-
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "
|
32
|
+
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "checkbox" %>
|
33
33
|
<% else -%>
|
34
34
|
<%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
|
35
35
|
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "input" %>
|
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.94
|
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-20 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email: lazaronixon@hotmail.com
|