css-zero 0.0.6 → 0.0.7
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 +55 -30
- data/app/assets/stylesheets/buttons.css +6 -0
- data/app/assets/stylesheets/zutilities.css +98 -109
- data/lib/css_zero/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2543882ee28f358c8e32084ce02eb912b3c52d07cf3d71c3f8f02bf622d4d036
|
|
4
|
+
data.tar.gz: c7d87cc7daecaf84976ed9079eef1af562583125bfbf43ab85eb270343fba589
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5876999cd7a670a39f0fd96cca3c36bde45bf8e753af5c324a5a501b776a8e5cf4191f90843971b716829fb762c3b8837f255ce372f6feee59b583b2a88a16dd
|
|
7
|
+
data.tar.gz: b3a44196688b7145ccaa3ae738f124b0334c9511e70198c674d3353852b10eb0a43061d4506ec0175eb15d73532a63b28daa9d78a9e083cfefe2ab4572a65d46
|
data/README.md
CHANGED
|
@@ -8,17 +8,49 @@ An opinionated CSS starter kit for your application. You can think of it like a
|
|
|
8
8
|
bundle add css-zero
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
|
|
12
|
+
|
|
13
|
+
<details>
|
|
14
|
+
<summary>Click here to see how</summary>
|
|
15
|
+
|
|
16
|
+
```html+erb
|
|
17
|
+
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
|
|
18
|
+
```
|
|
19
|
+
</details>
|
|
20
|
+
|
|
21
|
+
If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
|
|
22
|
+
|
|
23
|
+
<details>
|
|
24
|
+
<summary>Click here to see how</summary>
|
|
25
|
+
|
|
26
|
+
```css
|
|
27
|
+
*= require _reset
|
|
28
|
+
*= require animations
|
|
29
|
+
*= require borders
|
|
30
|
+
*= require buttons
|
|
31
|
+
*= require colors
|
|
32
|
+
*= require effects
|
|
33
|
+
*= require filters
|
|
34
|
+
*= require grid
|
|
35
|
+
*= require sizes
|
|
36
|
+
*= require transform
|
|
37
|
+
*= require transition
|
|
38
|
+
*= require typography
|
|
39
|
+
*= require_tree .
|
|
40
|
+
*= require_self
|
|
41
|
+
*= require zutilities
|
|
42
|
+
```
|
|
43
|
+
</details>
|
|
12
44
|
|
|
13
45
|
## Usage
|
|
14
46
|
|
|
15
47
|
```html
|
|
16
|
-
<h1 class="text-xl font-bold mb-
|
|
17
|
-
Write most page content using utility classes.
|
|
48
|
+
<h1 class="text-xl font-bold mb-4">
|
|
49
|
+
Write most page content using utility classes.
|
|
18
50
|
</h1>
|
|
19
51
|
|
|
20
52
|
<div class="component">
|
|
21
|
-
Write custom CSS using predefined variables for
|
|
53
|
+
Write custom CSS using predefined variables for components.
|
|
22
54
|
</div>
|
|
23
55
|
```
|
|
24
56
|
|
|
@@ -30,14 +62,14 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
30
62
|
}
|
|
31
63
|
```
|
|
32
64
|
|
|
33
|
-
|
|
65
|
+
Check the [CSS files](app/assets/stylesheets) in the repository for reference.
|
|
34
66
|
|
|
35
|
-
|
|
36
|
-
<img width="302" alt="Button Dark" src="https://github.com/lazaronixon/css-zero/assets/2651240/7079d7f9-5141-447d-9a4e-0d098a642d32">
|
|
67
|
+
## Buttons
|
|
37
68
|
|
|
69
|
+
<img width="1010" alt="Buttons Light" src="https://github.com/lazaronixon/css-zero/assets/2651240/df0870ae-86e5-43c4-98c5-86946a467f0c">
|
|
38
70
|
|
|
39
71
|
```html+erb
|
|
40
|
-
<div class="flex
|
|
72
|
+
<div class="flex items-center gap">
|
|
41
73
|
<button class="btn btn--primary">Primary button</button>
|
|
42
74
|
<button class="btn">Outline button</button>
|
|
43
75
|
<button class="btn btn--plain">Plain button</button>
|
|
@@ -47,7 +79,7 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
47
79
|
<%= image_tag "plus.svg", class: "invert" %> <span>Icon Button</span>
|
|
48
80
|
</button>
|
|
49
81
|
|
|
50
|
-
<button class="btn btn--primary" style="--btn-background:
|
|
82
|
+
<button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
51
83
|
Colored button
|
|
52
84
|
</button>
|
|
53
85
|
|
|
@@ -57,9 +89,17 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
57
89
|
</div>
|
|
58
90
|
```
|
|
59
91
|
|
|
92
|
+
## Inputs
|
|
93
|
+
|
|
94
|
+
Soon...
|
|
95
|
+
|
|
96
|
+
## Dialog
|
|
97
|
+
|
|
98
|
+
Soon...
|
|
99
|
+
|
|
60
100
|
## Customization
|
|
61
101
|
|
|
62
|
-
|
|
102
|
+
### Root level
|
|
63
103
|
|
|
64
104
|
```css
|
|
65
105
|
:root {
|
|
@@ -72,7 +112,7 @@ Global level
|
|
|
72
112
|
}
|
|
73
113
|
```
|
|
74
114
|
|
|
75
|
-
|
|
115
|
+
### Class level
|
|
76
116
|
|
|
77
117
|
```css
|
|
78
118
|
.btn--colored {
|
|
@@ -81,29 +121,14 @@ Component level
|
|
|
81
121
|
}
|
|
82
122
|
```
|
|
83
123
|
|
|
84
|
-
Style level
|
|
124
|
+
### Style level
|
|
85
125
|
|
|
86
126
|
```html
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
</
|
|
127
|
+
<button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
128
|
+
Colored button
|
|
129
|
+
</button>
|
|
90
130
|
```
|
|
91
131
|
|
|
92
|
-
## Reference
|
|
93
|
-
|
|
94
|
-
- [Animations](app/assets/stylesheets/animations.css)
|
|
95
|
-
- [Border](app/assets/stylesheets/borders.css)
|
|
96
|
-
- [Buttons](app/assets/stylesheets/buttons.css)
|
|
97
|
-
- [Colors](app/assets/stylesheets/colors.css)
|
|
98
|
-
- [Effects](app/assets/stylesheets/effects.css)
|
|
99
|
-
- [Filters](app/assets/stylesheets/filters.css)
|
|
100
|
-
- [Grid](app/assets/stylesheets/grid.css)
|
|
101
|
-
- [Sizes](app/assets/stylesheets/sizes.css)
|
|
102
|
-
- [Transform](app/assets/stylesheets/transform.css)
|
|
103
|
-
- [Transition](app/assets/stylesheets/transition.css)
|
|
104
|
-
- [Typography](app/assets/stylesheets/typography.css)
|
|
105
|
-
- [Utilities](app/assets/stylesheets/zutilities.css)
|
|
106
|
-
|
|
107
132
|
## Development
|
|
108
133
|
|
|
109
134
|
To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
background-color: var(--btn-background, transparent);
|
|
4
4
|
border-radius: var(--btn-border-radius, var(--rounded-lg));
|
|
5
5
|
border: 1px solid var(--btn-border-color, var(--color-border));
|
|
6
|
+
box-shadow: var(--btn-shadow, var(--shadow-sm));
|
|
6
7
|
color: var(--btn-color, var(--color-text));
|
|
7
8
|
column-gap: var(--btn-column-gap, var(--size-1));
|
|
8
9
|
cursor: pointer;
|
|
@@ -14,6 +15,10 @@
|
|
|
14
15
|
padding: var(--btn-padding, var(--size-1_5) var(--size-3_5));
|
|
15
16
|
text-align: center;
|
|
16
17
|
|
|
18
|
+
&:hover {
|
|
19
|
+
filter: var(--brightness-90);
|
|
20
|
+
}
|
|
21
|
+
|
|
17
22
|
&:disabled {
|
|
18
23
|
opacity: var(--opacity-50);
|
|
19
24
|
pointer-events: none;
|
|
@@ -28,6 +33,7 @@
|
|
|
28
33
|
|
|
29
34
|
.btn--plain {
|
|
30
35
|
--btn-border-color: transparent;
|
|
36
|
+
--btn-shadow: none;
|
|
31
37
|
}
|
|
32
38
|
|
|
33
39
|
.btn--small {
|
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--space-2xs: var(--size-0_5); /* 2px */
|
|
3
|
-
--space-xs: var(--size-1); /* 4px */
|
|
4
|
-
--space-sm: var(--size-2); /* 8px */
|
|
5
|
-
--space-md: var(--size-4); /* 16px */
|
|
6
|
-
--space-lg: var(--size-6); /* 24px */
|
|
7
|
-
--space-xl: var(--size-8); /* 32px */
|
|
8
|
-
--space-2xl: var(--size-10); /* 40px */
|
|
9
|
-
}
|
|
10
|
-
|
|
11
1
|
/****************************************************************
|
|
12
2
|
* Flex and Grid
|
|
13
3
|
*****************************************************************/
|
|
@@ -37,7 +27,6 @@
|
|
|
37
27
|
/****************************************************************
|
|
38
28
|
* Text
|
|
39
29
|
*****************************************************************/
|
|
40
|
-
.font-light { font-weight: var(--font-light); }
|
|
41
30
|
.font-normal { font-weight: var(--font-normal); }
|
|
42
31
|
.font-medium { font-weight: var(--font-medium); }
|
|
43
32
|
.font-semibold { font-weight: var(--font-semibold); }
|
|
@@ -151,136 +140,136 @@
|
|
|
151
140
|
* Margin
|
|
152
141
|
*****************************************************************/
|
|
153
142
|
.m-0 { margin: 0; }
|
|
154
|
-
.m-
|
|
155
|
-
.m-
|
|
156
|
-
.m-
|
|
157
|
-
.m-
|
|
158
|
-
.m-
|
|
159
|
-
.m-
|
|
160
|
-
.m-
|
|
143
|
+
.m-0\.5 { margin: var(--size-0_5); }
|
|
144
|
+
.m-1 { margin: var(--size-1); }
|
|
145
|
+
.m-2 { margin: var(--size-2); }
|
|
146
|
+
.m-4 { margin: var(--size-4); }
|
|
147
|
+
.m-6 { margin: var(--size-6); }
|
|
148
|
+
.m-8 { margin: var(--size-8); }
|
|
149
|
+
.m-10 { margin: var(--size-10); }
|
|
161
150
|
|
|
162
151
|
.mb-0 { margin-block: 0; }
|
|
163
|
-
.mb-
|
|
164
|
-
.mb-
|
|
165
|
-
.mb-
|
|
166
|
-
.mb-
|
|
167
|
-
.mb-
|
|
168
|
-
.mb-
|
|
169
|
-
.mb-
|
|
152
|
+
.mb-0\.5 { margin-block: var(--size-0_5); }
|
|
153
|
+
.mb-1 { margin-block: var(--size-1); }
|
|
154
|
+
.mb-2 { margin-block: var(--size-2); }
|
|
155
|
+
.mb-4 { margin-block: var(--size-4); }
|
|
156
|
+
.mb-6 { margin-block: var(--size-6); }
|
|
157
|
+
.mb-8 { margin-block: var(--size-8); }
|
|
158
|
+
.mb-10 { margin-block: var(--size-10); }
|
|
170
159
|
.mb-auto { margin-block: auto; }
|
|
171
160
|
|
|
172
161
|
.mbs-0 { margin-block-start: 0; }
|
|
173
|
-
.mbs-
|
|
174
|
-
.mbs-
|
|
175
|
-
.mbs-
|
|
176
|
-
.mbs-
|
|
177
|
-
.mbs-
|
|
178
|
-
.mbs-
|
|
179
|
-
.mbs-
|
|
162
|
+
.mbs-0\.5 { margin-block-start: var(--size-0_5); }
|
|
163
|
+
.mbs-1 { margin-block-start: var(--size-1); }
|
|
164
|
+
.mbs-2 { margin-block-start: var(--size-2); }
|
|
165
|
+
.mbs-4 { margin-block-start: var(--size-4); }
|
|
166
|
+
.mbs-6 { margin-block-start: var(--size-6); }
|
|
167
|
+
.mbs-8 { margin-block-start: var(--size-8); }
|
|
168
|
+
.mbs-10 { margin-block-start: var(--size-10); }
|
|
180
169
|
.mbs-auto { margin-block-start: auto; }
|
|
181
170
|
|
|
182
171
|
.mbe-0 { margin-block-end: 0; }
|
|
183
|
-
.mbe-
|
|
184
|
-
.mbe-
|
|
185
|
-
.mbe-
|
|
186
|
-
.mbe-
|
|
187
|
-
.mbe-
|
|
188
|
-
.mbe-
|
|
189
|
-
.mbe-
|
|
172
|
+
.mbe-0\.5 { margin-block-end: var(--size-0_5); }
|
|
173
|
+
.mbe-1 { margin-block-end: var(--size-1); }
|
|
174
|
+
.mbe-2 { margin-block-end: var(--size-2); }
|
|
175
|
+
.mbe-4 { margin-block-end: var(--size-4); }
|
|
176
|
+
.mbe-6 { margin-block-end: var(--size-6); }
|
|
177
|
+
.mbe-8 { margin-block-end: var(--size-8); }
|
|
178
|
+
.mbe-10 { margin-block-end: var(--size-10); }
|
|
190
179
|
.mbe-auto { margin-block-end: auto; }
|
|
191
180
|
|
|
192
181
|
.mi-0 { margin-inline: 0; }
|
|
193
|
-
.mi-
|
|
194
|
-
.mi-
|
|
195
|
-
.mi-
|
|
196
|
-
.mi-
|
|
197
|
-
.mi-
|
|
198
|
-
.mi-
|
|
199
|
-
.mi-
|
|
182
|
+
.mi-0\.5 { margin-inline: var(--size-0_5); }
|
|
183
|
+
.mi-1 { margin-inline: var(--size-1); }
|
|
184
|
+
.mi-2 { margin-inline: var(--size-2); }
|
|
185
|
+
.mi-4 { margin-inline: var(--size-4); }
|
|
186
|
+
.mi-6 { margin-inline: var(--size-6); }
|
|
187
|
+
.mi-8 { margin-inline: var(--size-8); }
|
|
188
|
+
.mi-10 { margin-inline: var(--size-10); }
|
|
200
189
|
.mi-auto { margin-inline: auto; }
|
|
201
190
|
|
|
202
191
|
.mis-0 { margin-inline-start: 0; }
|
|
203
|
-
.mis-
|
|
204
|
-
.mis-
|
|
205
|
-
.mis-
|
|
206
|
-
.mis-
|
|
207
|
-
.mis-
|
|
208
|
-
.mis-
|
|
209
|
-
.mis-
|
|
192
|
+
.mis-0\.5 { margin-inline-start: var(--size-0_5); }
|
|
193
|
+
.mis-1 { margin-inline-start: var(--size-1); }
|
|
194
|
+
.mis-2 { margin-inline-start: var(--size-2); }
|
|
195
|
+
.mis-4 { margin-inline-start: var(--size-4); }
|
|
196
|
+
.mis-6 { margin-inline-start: var(--size-6); }
|
|
197
|
+
.mis-8 { margin-inline-start: var(--size-8); }
|
|
198
|
+
.mis-10 { margin-inline-start: var(--size-10); }
|
|
210
199
|
.mis-auto { margin-inline-start: auto; }
|
|
211
200
|
|
|
212
201
|
.mie-0 { margin-inline-end: 0; }
|
|
213
|
-
.mie-
|
|
214
|
-
.mie-
|
|
215
|
-
.mie-
|
|
216
|
-
.mie-
|
|
217
|
-
.mie-
|
|
218
|
-
.mie-
|
|
219
|
-
.mie-
|
|
202
|
+
.mie-0\.5 { margin-inline-end: var(--size-0_5); }
|
|
203
|
+
.mie-1 { margin-inline-end: var(--size-1); }
|
|
204
|
+
.mie-2 { margin-inline-end: var(--size-2); }
|
|
205
|
+
.mie-4 { margin-inline-end: var(--size-4); }
|
|
206
|
+
.mie-6 { margin-inline-end: var(--size-6); }
|
|
207
|
+
.mie-8 { margin-inline-end: var(--size-8); }
|
|
208
|
+
.mie-10 { margin-inline-end: var(--size-10); }
|
|
220
209
|
.mie-auto { margin-inline-end: auto; }
|
|
221
210
|
|
|
222
211
|
/****************************************************************
|
|
223
212
|
* Padding
|
|
224
213
|
*****************************************************************/
|
|
225
214
|
.p-0 { padding: 0; }
|
|
226
|
-
.p-
|
|
227
|
-
.p-
|
|
228
|
-
.p-
|
|
229
|
-
.p-
|
|
230
|
-
.p-
|
|
231
|
-
.p-
|
|
232
|
-
.p-
|
|
215
|
+
.p-0\.5 { padding: var(--size-0_5); }
|
|
216
|
+
.p-1 { padding: var(--size-1); }
|
|
217
|
+
.p-2 { padding: var(--size-2); }
|
|
218
|
+
.p-4 { padding: var(--size-4); }
|
|
219
|
+
.p-6 { padding: var(--size-6); }
|
|
220
|
+
.p-8 { padding: var(--size-8); }
|
|
221
|
+
.p-10 { padding: var(--size-10); }
|
|
233
222
|
|
|
234
223
|
.pb-0 { padding-block: 0; }
|
|
235
|
-
.pb-
|
|
236
|
-
.pb-
|
|
237
|
-
.pb-
|
|
238
|
-
.pb-
|
|
239
|
-
.pb-
|
|
240
|
-
.pb-
|
|
241
|
-
.pb-
|
|
224
|
+
.pb-0\.5 { padding-block: var(--size-0_5); }
|
|
225
|
+
.pb-1 { padding-block: var(--size-1); }
|
|
226
|
+
.pb-2 { padding-block: var(--size-2); }
|
|
227
|
+
.pb-4 { padding-block: var(--size-4); }
|
|
228
|
+
.pb-6 { padding-block: var(--size-6); }
|
|
229
|
+
.pb-8 { padding-block: var(--size-8); }
|
|
230
|
+
.pb-10 { padding-block: var(--size-10); }
|
|
242
231
|
|
|
243
232
|
.pbs-0 { padding-block-start: 0; }
|
|
244
|
-
.pbs-
|
|
245
|
-
.pbs-
|
|
246
|
-
.pbs-
|
|
247
|
-
.pbs-
|
|
248
|
-
.pbs-
|
|
249
|
-
.pbs-
|
|
250
|
-
.pbs-
|
|
233
|
+
.pbs-0\.5 { padding-block-start: var(--size-0_5); }
|
|
234
|
+
.pbs-1 { padding-block-start: var(--size-1); }
|
|
235
|
+
.pbs-2 { padding-block-start: var(--size-2); }
|
|
236
|
+
.pbs-4 { padding-block-start: var(--size-4); }
|
|
237
|
+
.pbs-6 { padding-block-start: var(--size-6); }
|
|
238
|
+
.pbs-8 { padding-block-start: var(--size-8); }
|
|
239
|
+
.pbs-10 { padding-block-start: var(--size-10); }
|
|
251
240
|
|
|
252
241
|
.pbe-0 { padding-block-end: 0; }
|
|
253
|
-
.pbe-
|
|
254
|
-
.pbe-
|
|
255
|
-
.pbe-
|
|
256
|
-
.pbe-
|
|
257
|
-
.pbe-
|
|
258
|
-
.pbe-
|
|
259
|
-
.pbe-
|
|
242
|
+
.pbe-0\.5 { padding-block-end: var(--size-0_5); }
|
|
243
|
+
.pbe-1 { padding-block-end: var(--size-1); }
|
|
244
|
+
.pbe-2 { padding-block-end: var(--size-2); }
|
|
245
|
+
.pbe-4 { padding-block-end: var(--size-4); }
|
|
246
|
+
.pbe-6 { padding-block-end: var(--size-6); }
|
|
247
|
+
.pbe-8 { padding-block-end: var(--size-8); }
|
|
248
|
+
.pbe-10 { padding-block-end: var(--size-10); }
|
|
260
249
|
|
|
261
250
|
.pi-0 { padding-inline: 0; }
|
|
262
|
-
.pi-
|
|
263
|
-
.pi-
|
|
264
|
-
.pi-
|
|
265
|
-
.pi-
|
|
266
|
-
.pi-
|
|
267
|
-
.pi-
|
|
268
|
-
.pi-
|
|
251
|
+
.pi-0\.5 { padding-inline: var(--size-0_5); }
|
|
252
|
+
.pi-1 { padding-inline: var(--size-1); }
|
|
253
|
+
.pi-2 { padding-inline: var(--size-2); }
|
|
254
|
+
.pi-4 { padding-inline: var(--size-4); }
|
|
255
|
+
.pi-6 { padding-inline: var(--size-6); }
|
|
256
|
+
.pi-8 { padding-inline: var(--size-8); }
|
|
257
|
+
.pi-10 { padding-inline: var(--size-10); }
|
|
269
258
|
|
|
270
259
|
.pis-0 { padding-inline-start: 0; }
|
|
271
|
-
.pis-
|
|
272
|
-
.pis-
|
|
273
|
-
.pis-
|
|
274
|
-
.pis-
|
|
275
|
-
.pis-
|
|
276
|
-
.pis-
|
|
277
|
-
.pis-
|
|
260
|
+
.pis-0\.5 { padding-inline-start: var(--size-0_5); }
|
|
261
|
+
.pis-1 { padding-inline-start: var(--size-1); }
|
|
262
|
+
.pis-2 { padding-inline-start: var(--size-2); }
|
|
263
|
+
.pis-4 { padding-inline-start: var(--size-4); }
|
|
264
|
+
.pis-6 { padding-inline-start: var(--size-6); }
|
|
265
|
+
.pis-8 { padding-inline-start: var(--size-8); }
|
|
266
|
+
.pis-10 { padding-inline-start: var(--size-10); }
|
|
278
267
|
|
|
279
268
|
.pie-0 { padding-inline-end: 0; }
|
|
280
|
-
.pie-
|
|
281
|
-
.pie-
|
|
282
|
-
.pie-
|
|
283
|
-
.pie-
|
|
284
|
-
.pie-
|
|
285
|
-
.pie-
|
|
286
|
-
.pie-
|
|
269
|
+
.pie-0\.5 { padding-inline-end: var(--size-0_5); }
|
|
270
|
+
.pie-1 { padding-inline-end: var(--size-1); }
|
|
271
|
+
.pie-2 { padding-inline-end: var(--size-2); }
|
|
272
|
+
.pie-4 { padding-inline-end: var(--size-4); }
|
|
273
|
+
.pie-6 { padding-inline-end: var(--size-6); }
|
|
274
|
+
.pie-8 { padding-inline-end: var(--size-8); }
|
|
275
|
+
.pie-10 { padding-inline-end: var(--size-10); }
|
data/lib/css_zero/version.rb
CHANGED