css-zero 0.0.18 → 0.0.19
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/animations.css +144 -16
- data/app/assets/stylesheets/effects.css +0 -1
- 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 +2 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +1 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css +135 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e634509687f5553344bef169e20e981f450b6b07df35aa6dd274392858ed3834
|
|
4
|
+
data.tar.gz: 3d16de104cfa4eeb9265a4738cf472e222b95354b9097e92030f61bbd51538bd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 306343a85beba9d8d8b94686a00278ad037ff1682f2420b69e05d82fb4c57e051d973903e3ee764f856e8e85f5ff38b366c7466f192ad20d2f7b5c3cadd6071f
|
|
7
|
+
data.tar.gz: 2b4f9569b4f006aedaf62fbbaddcce87d98ebc4b03e0fcb922efaf72d1c45e5be0af9ced635f3b5d9b7bb874c3f7c0cd92969683c6ca5a7261665257f672cef9
|
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 switch table
|
|
22
|
+
bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress prose switch table
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
### Requirements
|
|
@@ -1,36 +1,164 @@
|
|
|
1
1
|
/****************************************************************
|
|
2
2
|
* Animation
|
|
3
3
|
* Variables for animating elements with CSS animations.
|
|
4
|
-
* animation: var(--animate-
|
|
4
|
+
* animation: var(--animate-fade-in) forwards;
|
|
5
5
|
*****************************************************************/
|
|
6
6
|
|
|
7
7
|
:root {
|
|
8
|
-
--animate-
|
|
9
|
-
--animate-
|
|
10
|
-
--animate-
|
|
11
|
-
--animate-
|
|
8
|
+
--animate-fade-in: fade-in .5s cubic-bezier(.25, 0, .3, 1);
|
|
9
|
+
--animate-fade-in-bloom: fade-in-bloom 2s cubic-bezier(.25, 0, .3, 1);
|
|
10
|
+
--animate-fade-out: fade-out .5s cubic-bezier(.25, 0, .3, 1);
|
|
11
|
+
--animate-fade-out-bloom: fade-out-bloom 2s cubic-bezier(.25, 0, .3, 1);
|
|
12
|
+
--animate-scale-up: scale-up .5s cubic-bezier(.25, 0, .3, 1);
|
|
13
|
+
--animate-scale-down: scale-down .5s cubic-bezier(.25, 0, .3, 1);
|
|
14
|
+
--animate-slide-out-up: slide-out-up .5s cubic-bezier(.25, 0, .3, 1);
|
|
15
|
+
--animate-slide-out-down: slide-out-down .5s cubic-bezier(.25, 0, .3, 1);
|
|
16
|
+
--animate-slide-out-right: slide-out-right .5s cubic-bezier(.25, 0, .3, 1);
|
|
17
|
+
--animate-slide-out-left: slide-out-left .5s cubic-bezier(.25, 0, .3, 1);
|
|
18
|
+
--animate-slide-in-up: slide-in-up .5s cubic-bezier(.25, 0, .3, 1);
|
|
19
|
+
--animate-slide-in-down: slide-in-down .5s cubic-bezier(.25, 0, .3, 1);
|
|
20
|
+
--animate-slide-in-right: slide-in-right .5s cubic-bezier(.25, 0, .3, 1);
|
|
21
|
+
--animate-slide-in-left: slide-in-left .5s cubic-bezier(.25, 0, .3, 1);
|
|
22
|
+
--animate-shake-x: shake-x .75s cubic-bezier(0, 0, 0, 1);
|
|
23
|
+
--animate-shake-y: shake-y .75s cubic-bezier(0, 0, 0, 1);
|
|
24
|
+
--animate-shake-z: shake-z 1s cubic-bezier(0, 0, 0, 1);
|
|
25
|
+
--animate-spin: spin 2s linear infinite;
|
|
26
|
+
--animate-ping: ping 5s cubic-bezier(0, 0, .3, 1) infinite;
|
|
27
|
+
--animate-blink: blink 1s cubic-bezier(0, 0, .3, 1) infinite;
|
|
28
|
+
--animate-float: float 3s cubic-bezier(0, 0, 0, 1) infinite;
|
|
29
|
+
--animate-bounce: bounce 2s cubic-bezier(.5, -.3, .1, 1.5) infinite;
|
|
30
|
+
--animate-pulse: pulse 2s cubic-bezier(0, 0, .3, 1) infinite;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@keyframes fade-in {
|
|
34
|
+
to { opacity: 1 }
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@keyframes fade-in-bloom {
|
|
38
|
+
0% { opacity: 0; filter: brightness(1) blur(20px) }
|
|
39
|
+
10% { opacity: 1; filter: brightness(2) blur(10px) }
|
|
40
|
+
100% { opacity: 1; filter: brightness(1) blur(0) }
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes fade-out {
|
|
44
|
+
to { opacity: 0 }
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@keyframes fade-out-bloom {
|
|
48
|
+
100% { opacity: 0; filter: brightness(1) blur(20px) }
|
|
49
|
+
10% { opacity: 1; filter: brightness(2) blur(10px) }
|
|
50
|
+
0% { opacity: 1; filter: brightness(1) blur(0) }
|
|
51
|
+
}
|
|
52
|
+
@keyframes scale-up {
|
|
53
|
+
to { transform: scale(1.25) }
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@keyframes scale-down {
|
|
57
|
+
to { transform: scale(.75) }
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@keyframes slide-out-up {
|
|
61
|
+
to { transform: translateY(-100%) }
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@keyframes slide-out-down {
|
|
65
|
+
to { transform: translateY(100%) }
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes slide-out-right {
|
|
69
|
+
to { transform: translateX(100%) }
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes slide-out-left {
|
|
73
|
+
to { transform: translateX(-100%) }
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@keyframes slide-in-up {
|
|
77
|
+
from { transform: translateY(100%) }
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@keyframes slide-in-down {
|
|
81
|
+
from { transform: translateY(-100%) }
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@keyframes slide-in-right {
|
|
85
|
+
from { transform: translateX(-100%) }
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@keyframes slide-in-left {
|
|
89
|
+
from { transform: translateX(100%) }
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@keyframes shake-x {
|
|
93
|
+
0%, 100% { transform: translateX(0%) }
|
|
94
|
+
20% { transform: translateX(-5%) }
|
|
95
|
+
40% { transform: translateX(5%) }
|
|
96
|
+
60% { transform: translateX(-5%) }
|
|
97
|
+
80% { transform: translateX(5%) }
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@keyframes shake-y {
|
|
101
|
+
0%, 100% { transform: translateY(0%) }
|
|
102
|
+
20% { transform: translateY(-5%) }
|
|
103
|
+
40% { transform: translateY(5%) }
|
|
104
|
+
60% { transform: translateY(-5%) }
|
|
105
|
+
80% { transform: translateY(5%) }
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@keyframes shake-z {
|
|
109
|
+
0%, 100% { transform: rotate(0deg) }
|
|
110
|
+
20% { transform: rotate(-2deg) }
|
|
111
|
+
40% { transform: rotate(2deg) }
|
|
112
|
+
60% { transform: rotate(-2deg) }
|
|
113
|
+
80% { transform: rotate(2deg) }
|
|
12
114
|
}
|
|
13
115
|
|
|
14
116
|
@keyframes spin {
|
|
15
|
-
to { transform: rotate(
|
|
117
|
+
to { transform: rotate(1turn) }
|
|
16
118
|
}
|
|
17
119
|
|
|
18
120
|
@keyframes ping {
|
|
19
|
-
|
|
121
|
+
90%, 100% {
|
|
122
|
+
transform: scale(2);
|
|
123
|
+
opacity: 0;
|
|
124
|
+
}
|
|
20
125
|
}
|
|
21
126
|
|
|
22
|
-
@keyframes
|
|
23
|
-
|
|
127
|
+
@keyframes blink {
|
|
128
|
+
0%, 100% {
|
|
129
|
+
opacity: 1
|
|
130
|
+
}
|
|
131
|
+
50% {
|
|
132
|
+
opacity: .5
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@keyframes float {
|
|
137
|
+
50% { transform: translateY(-25%) }
|
|
24
138
|
}
|
|
25
139
|
|
|
26
140
|
@keyframes bounce {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
141
|
+
25% { transform: translateY(-20%) }
|
|
142
|
+
40% { transform: translateY(-3%) }
|
|
143
|
+
0%, 60%, 100% { transform: translateY(0) }
|
|
144
|
+
}
|
|
31
145
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
146
|
+
@keyframes pulse {
|
|
147
|
+
50% { transform: scale(.9,.9) }
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@media (prefers-color-scheme: dark) {
|
|
151
|
+
@keyframes fade-in-bloom {
|
|
152
|
+
0% { opacity: 0; filter: brightness(1) blur(20px) }
|
|
153
|
+
10% { opacity: 1; filter: brightness(0.5) blur(10px) }
|
|
154
|
+
100% { opacity: 1; filter: brightness(1) blur(0) }
|
|
35
155
|
}
|
|
36
156
|
}
|
|
157
|
+
|
|
158
|
+
@media (prefers-color-scheme: dark) {
|
|
159
|
+
@keyframes fade-out-bloom {
|
|
160
|
+
100% { opacity: 0; filter: brightness(1) blur(20px) }
|
|
161
|
+
10% { opacity: 1; filter: brightness(0.5) blur(10px) }
|
|
162
|
+
0% { opacity: 1; filter: brightness(1) blur(0) }
|
|
163
|
+
}
|
|
164
|
+
}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
* Variables for controlling the box shadow of an element.
|
|
5
5
|
* box-shadow: var(--shadow);
|
|
6
6
|
****************************************************************/
|
|
7
|
-
--shadow-xs: 0 1px rgb(0 0 0 / 0.05);
|
|
8
7
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
9
8
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
10
9
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
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 collapsible dialog input pagination progress switch table
|
|
5
|
+
accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress prose switch table
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
border-color: var(--color-border);
|
|
5
5
|
border-radius: var(--rounded-md);
|
|
6
6
|
border-width: var(--border);
|
|
7
|
-
box-shadow: var(--shadow-xs);
|
|
8
7
|
font-size: var(--text-sm);
|
|
9
8
|
inline-size: var(--size-full);
|
|
10
9
|
padding: var(--size-2) var(--size-3);
|
|
@@ -58,7 +57,7 @@
|
|
|
58
57
|
:is(.input, .range, .checkbox, .radio) {
|
|
59
58
|
/* Keyboard navigation */
|
|
60
59
|
&:focus-visible {
|
|
61
|
-
outline: var(--border-2) solid var(--color-
|
|
60
|
+
outline: var(--border-2) solid var(--color-primary);
|
|
62
61
|
outline-offset: var(--border-2);
|
|
63
62
|
}
|
|
64
63
|
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
:where(.prose) {
|
|
2
|
+
-moz-osx-font-smoothing: grayscale;
|
|
3
|
+
-webkit-font-smoothing: antialiased;
|
|
4
|
+
font-size: clamp(1rem, 2.5cqi, 1.4rem);
|
|
5
|
+
|
|
6
|
+
:is(h1, h2, h3, h4, h5, h6) {
|
|
7
|
+
font-weight: 800;
|
|
8
|
+
hyphens: auto;
|
|
9
|
+
letter-spacing: -0.02ch;
|
|
10
|
+
line-height: 1.1;
|
|
11
|
+
margin-block: 0.65em;
|
|
12
|
+
overflow-wrap: break-word;
|
|
13
|
+
text-wrap: balance;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
h1 {
|
|
17
|
+
font-size: 2em;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h2 {
|
|
21
|
+
font-size: 1.5em;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
h3 {
|
|
25
|
+
font-size: 1.17em;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h4 {
|
|
29
|
+
font-size: 1em;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h5 {
|
|
33
|
+
font-size: 0.83em;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
h6 {
|
|
37
|
+
font-size: 0.67em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:is(ul, ol, menu) {
|
|
41
|
+
list-style: revert;
|
|
42
|
+
padding-inline-start: revert;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
|
|
46
|
+
margin-block: 0.65lh;
|
|
47
|
+
overflow-wrap: break-word;
|
|
48
|
+
text-wrap: pretty;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
hr {
|
|
52
|
+
border-color: var(--color-border-dark);
|
|
53
|
+
border-style: var(--border-style, solid) none none;
|
|
54
|
+
margin: 2lh auto;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:is(b, strong) {
|
|
58
|
+
font-weight: 700;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
:is(pre, code) {
|
|
62
|
+
background-color: var(--color-border-light);
|
|
63
|
+
border: 1px solid var(--color-border);
|
|
64
|
+
border-radius: 0.3em;
|
|
65
|
+
font-family: var(--font-monospace-code);
|
|
66
|
+
font-size: 0.85em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
code {
|
|
70
|
+
padding: 0.1em 0.3em;
|
|
71
|
+
white-space: pre-wrap;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
pre {
|
|
75
|
+
border-radius: 0.5em;
|
|
76
|
+
padding: 0.5lh 2ch;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
pre code {
|
|
80
|
+
background-color: transparent;
|
|
81
|
+
border: 0;
|
|
82
|
+
font-size: 1em;
|
|
83
|
+
padding: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
p {
|
|
87
|
+
hyphens: auto;
|
|
88
|
+
letter-spacing: -0.005ch;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
blockquote {
|
|
92
|
+
font-style: italic;
|
|
93
|
+
margin: 0 3ch;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
blockquote p {
|
|
97
|
+
hyphens: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
table {
|
|
101
|
+
border: 1px solid var(--color-border-dark);
|
|
102
|
+
border-collapse: collapse;
|
|
103
|
+
margin: 1lh 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
th {
|
|
107
|
+
font-weight: 700;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
:is(th, td) {
|
|
111
|
+
border: 1px solid var(--color-border-dark);
|
|
112
|
+
padding: 0.2lh 1ch;
|
|
113
|
+
text-align: start;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
th {
|
|
117
|
+
border-block-end-width: 3px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
del {
|
|
121
|
+
background-color: hsl(from var(--color-negative) h s l / .1);
|
|
122
|
+
color: var(--color-negative);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
ins {
|
|
126
|
+
background-color: hsl(from var(--color-positive) h s l / .1);
|
|
127
|
+
color: var(--color-positive);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
a {
|
|
131
|
+
color: var(--blue-700);
|
|
132
|
+
text-decoration: underline;
|
|
133
|
+
text-decoration-skip-ink: auto;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
--color-text-subtle: var(--zinc-400);
|
|
30
30
|
--color-border-light: var(--zinc-800);
|
|
31
31
|
--color-border: var(--zinc-800);
|
|
32
|
-
--color-border-dark: var(--zinc-
|
|
32
|
+
--color-border-dark: var(--zinc-600);
|
|
33
33
|
|
|
34
34
|
/* Accent colors */
|
|
35
35
|
--color-primary: var(--zinc-50);
|
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.19
|
|
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-
|
|
11
|
+
date: 2024-07-16 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -56,6 +56,7 @@ files:
|
|
|
56
56
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
|
|
57
57
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
|
|
58
58
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
|
59
|
+
- lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
|
|
59
60
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
|
60
61
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
|
61
62
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
|