css-zero 0.0.29 → 0.0.31
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 +1 -1
- data/app/assets/stylesheets/_reset.css +2 -2
- data/app/assets/stylesheets/transform.css +1 -1
- data/app/assets/stylesheets/zutilities.css +5 -0
- data/app/helpers/tabs_helper.rb +5 -0
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/USAGE +1 -1
- data/lib/generators/css_zero/add/resources.yml +5 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +20 -6
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css +47 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +13 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css +26 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js +25 -0
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +5 -0
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2d871257d5eb95aed27c17cdf296d2c950c773bca21f1f76630a0a271856bec9
|
|
4
|
+
data.tar.gz: 73529a331bcfb94f4f1bb97ac0da3fd274c6e9d1eb38aea81eee5e7161214456
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: acae42abeba3c9688e42acb1cd164c0408ab904133cdfc5046b25e5e4d1b04fb024fa952537fa1ca0795b8bf249ab40b40abd1ec84149c1c31c655fb20545dc2
|
|
7
|
+
data.tar.gz: 6a57d0f885bc79e2e0b6ab5f8ffda9fcd58b2b61ece7c21bdc3751e7a3b23ef78a33ce799a9499198b87df604f536fc0a1ff819491a14c895eef47632e403b12
|
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 carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table toggle
|
|
22
|
+
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input layouts pagination progress prose sheet skeleton switch table tabs toggle
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/****************************************************************
|
|
3
3
|
* Scale
|
|
4
4
|
* Variables for scaling elements with transform.
|
|
5
|
-
* transform:
|
|
5
|
+
* transform: var(--scale-100);
|
|
6
6
|
*****************************************************************/
|
|
7
7
|
--scale-50: scale(0.50);
|
|
8
8
|
--scale-75: scale(0.75);
|
|
@@ -110,8 +110,12 @@
|
|
|
110
110
|
*****************************************************************/
|
|
111
111
|
.border-0 { border-width: 0; }
|
|
112
112
|
.border { border-width: var(--border-size, 1px); }
|
|
113
|
+
|
|
114
|
+
.border-b { border-block-width: var(--border-size, 1px); }
|
|
113
115
|
.border-bs { border-block-start-width: var(--border-size, 1px); }
|
|
114
116
|
.border-be { border-block-end-width: var(--border-size, 1px); }
|
|
117
|
+
|
|
118
|
+
.border-i { border-inline-width: var(--border-size, 1px); }
|
|
115
119
|
.border-is { border-inline-start-width: var(--border-size, 1px); }
|
|
116
120
|
.border-ie { border-inline-end-width: var(--border-size, 1px); }
|
|
117
121
|
|
|
@@ -156,6 +160,7 @@
|
|
|
156
160
|
|
|
157
161
|
.h-full { block-size: 100%; }
|
|
158
162
|
.w-full { inline-size: 100%; }
|
|
163
|
+
.w-min { inline-size: min-content; }
|
|
159
164
|
|
|
160
165
|
.overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; }
|
|
161
166
|
.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
|
data/lib/css_zero/version.rb
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 carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table toggle
|
|
5
|
+
accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input layouts pagination progress prose sheet skeleton switch table tabs toggle
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -32,6 +32,8 @@ flash:
|
|
|
32
32
|
input:
|
|
33
33
|
- app/assets/stylesheets/input.css
|
|
34
34
|
- app/assets/images/select-arrow.svg
|
|
35
|
+
layouts:
|
|
36
|
+
- app/assets/stylesheets/layouts.css
|
|
35
37
|
pagination:
|
|
36
38
|
- app/assets/stylesheets/pagination.css
|
|
37
39
|
- app/assets/images/chevron-right.svg
|
|
@@ -51,5 +53,8 @@ switch:
|
|
|
51
53
|
- app/assets/stylesheets/switch.css
|
|
52
54
|
table:
|
|
53
55
|
- app/assets/stylesheets/table.css
|
|
56
|
+
tabs:
|
|
57
|
+
- app/assets/stylesheets/tabs.css
|
|
58
|
+
- app/javascript/controllers/tabs_controller.js
|
|
54
59
|
toggle:
|
|
55
60
|
- app/assets/stylesheets/toggle.css
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.input {
|
|
2
2
|
appearance: none;
|
|
3
3
|
background-color: var(--color-bg);
|
|
4
|
-
border
|
|
4
|
+
border: var(--border) solid var(--color-border);
|
|
5
5
|
border-radius: var(--rounded-md);
|
|
6
6
|
font-size: var(--text-sm);
|
|
7
7
|
inline-size: var(--size-full);
|
|
@@ -30,11 +30,6 @@
|
|
|
30
30
|
margin-inline-end: var(--size-2);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
&:-webkit-autofill {
|
|
34
|
-
-webkit-text-fill-color: var(--color-text);
|
|
35
|
-
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
33
|
&:user-invalid {
|
|
39
34
|
border-color: var(--color-negative);
|
|
40
35
|
}
|
|
@@ -49,6 +44,24 @@
|
|
|
49
44
|
}
|
|
50
45
|
}
|
|
51
46
|
|
|
47
|
+
/* Containers that act like (and contain) inputs */
|
|
48
|
+
.input--actor {
|
|
49
|
+
&:focus-within {
|
|
50
|
+
outline: var(--border-2) solid var(--color-selected-dark);
|
|
51
|
+
outline-offset: var(--border-2);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:has(:-webkit-autofill) {
|
|
55
|
+
-webkit-text-fill-color: var(--color-text);
|
|
56
|
+
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.input__character {
|
|
60
|
+
border: 0; inline-size: 100%; outline: 0;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Checkbox, radio, and range */
|
|
52
65
|
.checkbox, .radio {
|
|
53
66
|
accent-color: var(--color-primary);
|
|
54
67
|
transform: scale(1.15);
|
|
@@ -58,6 +71,7 @@
|
|
|
58
71
|
accent-color: var(--color-primary);
|
|
59
72
|
}
|
|
60
73
|
|
|
74
|
+
/* Styles that are shared between components */
|
|
61
75
|
:is(.input, .checkbox, .radio, .range) {
|
|
62
76
|
&:focus-visible {
|
|
63
77
|
outline: var(--border-2) solid var(--color-selected-dark);
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.layout-sidebar {
|
|
2
|
+
display: grid;
|
|
3
|
+
grid-template-areas: "header header" "sidebar main";
|
|
4
|
+
grid-template-columns: var(--sidebar-width, 0) 1fr;
|
|
5
|
+
grid-template-rows: auto 1fr;
|
|
6
|
+
min-block-size: 100dvh;
|
|
7
|
+
|
|
8
|
+
@media (width >= 48rem) {
|
|
9
|
+
--sidebar-width: 220px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@media (width >= 64rem) {
|
|
13
|
+
--sidebar-width: 280px;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.layout-pancake {
|
|
18
|
+
display: grid;
|
|
19
|
+
grid-template-rows: auto 1fr auto;
|
|
20
|
+
min-block-size: 100dvh;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.layout-centered {
|
|
24
|
+
display: grid;
|
|
25
|
+
place-content: center;
|
|
26
|
+
min-block-size: 100dvh;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.container {
|
|
30
|
+
margin-inline: auto;
|
|
31
|
+
max-inline-size: var(--container-width, 64rem);
|
|
32
|
+
min-block-size: 100dvh;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Grid areas definition */
|
|
36
|
+
|
|
37
|
+
#header {
|
|
38
|
+
grid-area: header;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
#sidebar {
|
|
42
|
+
grid-area: sidebar;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#main {
|
|
46
|
+
grid-area: main;
|
|
47
|
+
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
block-size: 100%;
|
|
6
6
|
color: var(--color-text);
|
|
7
7
|
inline-size: var(--size-3-4);
|
|
8
|
-
margin-inline
|
|
8
|
+
margin-inline: var(--sheet-margin);
|
|
9
9
|
max-block-size: none;
|
|
10
10
|
max-inline-size: var(--width-sm);
|
|
11
11
|
padding: var(--size-6);
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
/* Setup animation */
|
|
18
|
-
transform:
|
|
18
|
+
transform: var(--sheet-transform);
|
|
19
19
|
transition-behavior: allow-discrete;
|
|
20
20
|
transition-duration: var(--time-500);
|
|
21
21
|
transition-property: display, overlay, transform;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
/* Out animation */
|
|
40
40
|
@starting-style {
|
|
41
41
|
&[open] {
|
|
42
|
-
transform:
|
|
42
|
+
transform: var(--sheet-transform);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
&[open]::backdrop {
|
|
@@ -52,6 +52,16 @@
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
.sheet--left {
|
|
56
|
+
--sheet-margin: 0 auto;
|
|
57
|
+
--sheet-transform: translateX(-100%);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.sheet--right {
|
|
61
|
+
--sheet-margin: auto 0;
|
|
62
|
+
--sheet-transform: translateX(100%);
|
|
63
|
+
}
|
|
64
|
+
|
|
55
65
|
.sheet__close {
|
|
56
66
|
inset-block-start: var(--size-4);
|
|
57
67
|
inset-inline-end: var(--size-4);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.tabs {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: var(--size-2);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.tabs__list {
|
|
8
|
+
background-color: var(--color-border-light);
|
|
9
|
+
block-size: var(--size-10);
|
|
10
|
+
border-radius: var(--rounded-md);
|
|
11
|
+
color: var(--color-text-subtle);
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
gap: var(--size-2);
|
|
14
|
+
padding: var(--size-1);
|
|
15
|
+
|
|
16
|
+
button {
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
color: var(--color-text-subtle);
|
|
19
|
+
inline-size: var(--size-full);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
button[data-selected=true] {
|
|
23
|
+
background-color: var(--color-bg);
|
|
24
|
+
color: var(--color-text);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
export default class extends Controller {
|
|
4
|
+
static targets = [ "button", "tab" ]
|
|
5
|
+
static values = { selected: String }
|
|
6
|
+
|
|
7
|
+
initialize() {
|
|
8
|
+
this.#showSelectedTab()
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
select(event) {
|
|
12
|
+
this.selectedValue = event.target.dataset.value
|
|
13
|
+
this.#showSelectedTab()
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
#showSelectedTab() {
|
|
17
|
+
this.buttonTargets.forEach(element => {
|
|
18
|
+
element.dataset.selected = element.dataset.value === this.selectedValue
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
this.tabTargets.forEach(element => {
|
|
22
|
+
element.hidden = element.dataset.value !== this.selectedValue
|
|
23
|
+
})
|
|
24
|
+
}
|
|
25
|
+
}
|
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.31
|
|
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-08-
|
|
11
|
+
date: 2024-08-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -30,6 +30,7 @@ files:
|
|
|
30
30
|
- app/assets/stylesheets/typography.css
|
|
31
31
|
- app/assets/stylesheets/zutilities.css
|
|
32
32
|
- app/helpers/dialog_helper.rb
|
|
33
|
+
- app/helpers/tabs_helper.rb
|
|
33
34
|
- lib/css-zero.rb
|
|
34
35
|
- lib/css_zero/engine.rb
|
|
35
36
|
- lib/css_zero/version.rb
|
|
@@ -57,6 +58,7 @@ files:
|
|
|
57
58
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
|
|
58
59
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
|
|
59
60
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
|
|
61
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
|
|
60
62
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
|
|
61
63
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
|
62
64
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
|
|
@@ -64,11 +66,13 @@ files:
|
|
|
64
66
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
|
|
65
67
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
66
68
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
69
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css
|
|
67
70
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
|
|
68
71
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
|
69
72
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|
|
70
73
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
|
71
74
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
|
|
75
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
|
|
72
76
|
- lib/generators/css_zero/install/USAGE
|
|
73
77
|
- lib/generators/css_zero/install/install_generator.rb
|
|
74
78
|
- lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
|