css-zero 0.0.6 → 0.0.8
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 +57 -32
- data/app/assets/stylesheets/buttons.css +7 -1
- data/app/assets/stylesheets/colors.css +3 -4
- data/app/assets/stylesheets/zutilities.css +123 -118
- data/lib/css_zero/version.rb +1 -1
- 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: 5b048fb340838c3565b28feb61f03eb45b47e263da4d61870b9139fabdfc32cb
|
|
4
|
+
data.tar.gz: 5f90621c345a20caa5ef5f2f29fb25de6a2410aa39f796a2bb0144fa1fed4fb2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 23cb9762d9420521fcf3b2c66282bd0836673b73690e5ada0500106b7af9d7d4687b78d782eb3ad6968f2e69da6404b18b12a7ab532cb3269407dae899622306
|
|
7
|
+
data.tar.gz: 8033263c2ad3c3468ee5b0156f0418795891ab215e8c5804500933993a80a92aaef60566083c7c5942560f474f7eb1d109f7cbc9a8cda38442e0bd099c1910d2
|
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,24 +62,25 @@ 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" src="https://github.com/lazaronixon/css-zero/assets/2651240/ec073c9d-d3b7-4a1e-8e7f-d772ff0e0cb8">
|
|
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>
|
|
44
76
|
<button class="btn" disabled>Disabled button</button>
|
|
45
77
|
|
|
46
78
|
<button class="btn btn--primary">
|
|
47
|
-
<%= image_tag "plus.svg", class: "invert" %>
|
|
79
|
+
<%= image_tag "plus.svg", role: "presentation", class: "invert" %>
|
|
80
|
+
<span>Icon button</span>
|
|
48
81
|
</button>
|
|
49
82
|
|
|
50
|
-
<button class="btn btn--primary" style="--btn-background:
|
|
83
|
+
<button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
51
84
|
Colored button
|
|
52
85
|
</button>
|
|
53
86
|
|
|
@@ -57,14 +90,21 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
57
90
|
</div>
|
|
58
91
|
```
|
|
59
92
|
|
|
93
|
+
## Inputs
|
|
94
|
+
|
|
95
|
+
Soon...
|
|
96
|
+
|
|
97
|
+
## Dialog
|
|
98
|
+
|
|
99
|
+
Soon...
|
|
100
|
+
|
|
60
101
|
## Customization
|
|
61
102
|
|
|
62
|
-
|
|
103
|
+
### Root level
|
|
63
104
|
|
|
64
105
|
```css
|
|
65
106
|
:root {
|
|
66
107
|
--color-bg: white;
|
|
67
|
-
--color-bg-surface: var(--zinc-100);
|
|
68
108
|
--color-text: var(--zinc-950);
|
|
69
109
|
--color-text-reversed: white;
|
|
70
110
|
--color-text-subtle: var(--zinc-500);
|
|
@@ -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,8 +3,9 @@
|
|
|
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
|
-
column-gap: var(--
|
|
8
|
+
column-gap: var(--size-2);
|
|
8
9
|
cursor: pointer;
|
|
9
10
|
display: inline-flex;
|
|
10
11
|
font-size: var(--btn-font-size, var(--text-sm));
|
|
@@ -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: contrast(0.85);
|
|
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 {
|
|
@@ -267,10 +267,9 @@
|
|
|
267
267
|
/* Abstractions */
|
|
268
268
|
--color-primary: var(--zinc-900);
|
|
269
269
|
--color-bg: white;
|
|
270
|
-
--color-bg-surface: var(--zinc-100);
|
|
271
270
|
--color-text: var(--zinc-950);
|
|
272
271
|
--color-text-reversed: white;
|
|
273
|
-
--color-text-subtle: var(--zinc-
|
|
272
|
+
--color-text-subtle: var(--zinc-500);
|
|
274
273
|
--color-border: var(--zinc-200);
|
|
275
274
|
|
|
276
275
|
/* Filtered color values */
|
|
@@ -281,10 +280,10 @@
|
|
|
281
280
|
@media (prefers-color-scheme: dark) {
|
|
282
281
|
--color-primary: var(--zinc-600);
|
|
283
282
|
--color-bg: var(--zinc-900);
|
|
284
|
-
--color-bg-surface: var(--zinc-950);
|
|
285
283
|
--color-text: white;
|
|
286
284
|
--color-text-reversed: var(--zinc-950);
|
|
287
|
-
--color-
|
|
285
|
+
--color-text-subtle: var(--zinc-400);
|
|
286
|
+
--color-border: var(--zinc-700);
|
|
288
287
|
--color-filter-black: var(--invert);
|
|
289
288
|
--color-filter-white: var(--invert-0);
|
|
290
289
|
}
|
|
@@ -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
|
*****************************************************************/
|
|
@@ -16,28 +6,28 @@
|
|
|
16
6
|
.flex-wrap { flex-wrap: wrap; }
|
|
17
7
|
.inline-flex { display: inline-flex; }
|
|
18
8
|
|
|
19
|
-
.justify-end { justify-content: end; }
|
|
20
9
|
.justify-start { justify-content: start; }
|
|
21
10
|
.justify-center { justify-content: center; }
|
|
11
|
+
.justify-end { justify-content: end; }
|
|
22
12
|
.justify-between { justify-content: space-between; }
|
|
23
13
|
|
|
24
|
-
.items-end { align-items: end; }
|
|
25
14
|
.items-start { align-items: start; }
|
|
15
|
+
.items-end { align-items: end; }
|
|
26
16
|
.items-center { align-items: center; }
|
|
27
17
|
|
|
28
18
|
.grow { flex-grow: 1; }
|
|
29
19
|
.shrink-0 { flex-shrink: 0; }
|
|
30
20
|
|
|
31
|
-
.self-end { align-self: end; }
|
|
32
21
|
.self-start { align-self: start; }
|
|
22
|
+
.self-end { align-self: end; }
|
|
33
23
|
.self-center { align-self: center; }
|
|
34
24
|
|
|
35
25
|
.gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
|
|
26
|
+
.gap-half { column-gap: 0.5rem); row-gap: 0.5rem); }
|
|
36
27
|
|
|
37
28
|
/****************************************************************
|
|
38
29
|
* Text
|
|
39
30
|
*****************************************************************/
|
|
40
|
-
.font-light { font-weight: var(--font-light); }
|
|
41
31
|
.font-normal { font-weight: var(--font-normal); }
|
|
42
32
|
.font-medium { font-weight: var(--font-medium); }
|
|
43
33
|
.font-semibold { font-weight: var(--font-semibold); }
|
|
@@ -55,7 +45,8 @@
|
|
|
55
45
|
.break-words { word-break: break-word; }
|
|
56
46
|
.break-all { word-break: break-all; }
|
|
57
47
|
|
|
58
|
-
.
|
|
48
|
+
.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
|
|
49
|
+
.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
|
|
59
50
|
|
|
60
51
|
.opacity-75 { opacity: var(--opacity-75); }
|
|
61
52
|
.opacity-50 { opacity: var(--opacity-50); }
|
|
@@ -89,8 +80,9 @@
|
|
|
89
80
|
* Background
|
|
90
81
|
*****************************************************************/
|
|
91
82
|
.bg-main { background-color: var(--color-bg); }
|
|
83
|
+
.bg-black { background-color: var(--color-text); }
|
|
92
84
|
.bg-white { background-color: var(--color-text-reversed); }
|
|
93
|
-
.bg-
|
|
85
|
+
.bg-shade { background-color: var(--color-border); }
|
|
94
86
|
.bg-transparent { background-color: transparent; }
|
|
95
87
|
|
|
96
88
|
.invert { filter: var(--invert); }
|
|
@@ -100,13 +92,14 @@
|
|
|
100
92
|
/****************************************************************
|
|
101
93
|
* Border
|
|
102
94
|
*****************************************************************/
|
|
95
|
+
.border-0 { border: 0; }
|
|
103
96
|
.border { border: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
104
97
|
.border-t { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
105
98
|
.border-b { border-bottom: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
106
99
|
.border-l { border-left: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
107
100
|
.border-r { border-right: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
108
|
-
.border-0 { border: 0; }
|
|
109
101
|
|
|
102
|
+
.rounded-none { border-radius: none; }
|
|
110
103
|
.rounded-sm { border-radius: var(--rounded-sm); }
|
|
111
104
|
.rounded { border-radius: var(--rounded); }
|
|
112
105
|
.rounded-md { border-radius: var(--rounded-md); }
|
|
@@ -115,11 +108,11 @@
|
|
|
115
108
|
.rounded-2xl { border-radius: var(--rounded-2xl); }
|
|
116
109
|
.rounded-3xl { border-radius: var(--rounded-3xl); }
|
|
117
110
|
.rounded-full { border-radius: var(--rounded-full); }
|
|
118
|
-
.rounded-none { border-radius: none; }
|
|
119
111
|
|
|
120
112
|
/****************************************************************
|
|
121
113
|
* Shadow
|
|
122
114
|
*****************************************************************/
|
|
115
|
+
.shadow-none { box-shadow: none; }
|
|
123
116
|
.shadow-xs { box-shadow: var(--shadow-xs); }
|
|
124
117
|
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
125
118
|
.shadow { box-shadow: var(--shadow); }
|
|
@@ -127,7 +120,6 @@
|
|
|
127
120
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
128
121
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
129
122
|
.shadow-2xl { box-shadow: var(--shadow-2xl); }
|
|
130
|
-
.shadow-none { box-shadow: none; }
|
|
131
123
|
|
|
132
124
|
/****************************************************************
|
|
133
125
|
* Layout
|
|
@@ -137,6 +129,7 @@
|
|
|
137
129
|
.inline-block { display: inline-block; }
|
|
138
130
|
|
|
139
131
|
.relative { position: relative; }
|
|
132
|
+
.sticky { position: sticky; }
|
|
140
133
|
|
|
141
134
|
.min-w-0 { min-inline-size: 0; }
|
|
142
135
|
.max-w-full { max-inline-size: 100%; }
|
|
@@ -144,143 +137,155 @@
|
|
|
144
137
|
.h-full { block-size: 100%; }
|
|
145
138
|
.w-full { inline-size: 100%; }
|
|
146
139
|
|
|
147
|
-
.overflow-auto { overflow: auto; }
|
|
140
|
+
.overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
|
|
141
|
+
.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
|
|
148
142
|
.overflow-hidden { overflow: hidden; }
|
|
149
143
|
|
|
144
|
+
.sr-only {
|
|
145
|
+
position: absolute;
|
|
146
|
+
width: 1px; height: 1px;
|
|
147
|
+
padding: 0; margin: -1px;
|
|
148
|
+
overflow: hidden;
|
|
149
|
+
clip: rect(0, 0, 0, 0);
|
|
150
|
+
white-space: nowrap;
|
|
151
|
+
border-width: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
150
154
|
/****************************************************************
|
|
151
155
|
* Margin
|
|
152
156
|
*****************************************************************/
|
|
153
157
|
.m-0 { margin: 0; }
|
|
154
|
-
.m-
|
|
155
|
-
.m-
|
|
156
|
-
.m-
|
|
157
|
-
.m-
|
|
158
|
-
.m-
|
|
159
|
-
.m-
|
|
160
|
-
.m-
|
|
158
|
+
.m-0\.5 { margin: var(--size-0_5); }
|
|
159
|
+
.m-1 { margin: var(--size-1); }
|
|
160
|
+
.m-2 { margin: var(--size-2); }
|
|
161
|
+
.m-4 { margin: var(--size-4); }
|
|
162
|
+
.m-6 { margin: var(--size-6); }
|
|
163
|
+
.m-8 { margin: var(--size-8); }
|
|
164
|
+
.m-10 { margin: var(--size-10); }
|
|
165
|
+
.m-auto { margin: auto; }
|
|
161
166
|
|
|
162
167
|
.mb-0 { margin-block: 0; }
|
|
163
|
-
.mb-
|
|
164
|
-
.mb-
|
|
165
|
-
.mb-
|
|
166
|
-
.mb-
|
|
167
|
-
.mb-
|
|
168
|
-
.mb-
|
|
169
|
-
.mb-
|
|
168
|
+
.mb-0\.5 { margin-block: var(--size-0_5); }
|
|
169
|
+
.mb-1 { margin-block: var(--size-1); }
|
|
170
|
+
.mb-2 { margin-block: var(--size-2); }
|
|
171
|
+
.mb-4 { margin-block: var(--size-4); }
|
|
172
|
+
.mb-6 { margin-block: var(--size-6); }
|
|
173
|
+
.mb-8 { margin-block: var(--size-8); }
|
|
174
|
+
.mb-10 { margin-block: var(--size-10); }
|
|
170
175
|
.mb-auto { margin-block: auto; }
|
|
171
176
|
|
|
172
177
|
.mbs-0 { margin-block-start: 0; }
|
|
173
|
-
.mbs-
|
|
174
|
-
.mbs-
|
|
175
|
-
.mbs-
|
|
176
|
-
.mbs-
|
|
177
|
-
.mbs-
|
|
178
|
-
.mbs-
|
|
179
|
-
.mbs-
|
|
178
|
+
.mbs-0\.5 { margin-block-start: var(--size-0_5); }
|
|
179
|
+
.mbs-1 { margin-block-start: var(--size-1); }
|
|
180
|
+
.mbs-2 { margin-block-start: var(--size-2); }
|
|
181
|
+
.mbs-4 { margin-block-start: var(--size-4); }
|
|
182
|
+
.mbs-6 { margin-block-start: var(--size-6); }
|
|
183
|
+
.mbs-8 { margin-block-start: var(--size-8); }
|
|
184
|
+
.mbs-10 { margin-block-start: var(--size-10); }
|
|
180
185
|
.mbs-auto { margin-block-start: auto; }
|
|
181
186
|
|
|
182
187
|
.mbe-0 { margin-block-end: 0; }
|
|
183
|
-
.mbe-
|
|
184
|
-
.mbe-
|
|
185
|
-
.mbe-
|
|
186
|
-
.mbe-
|
|
187
|
-
.mbe-
|
|
188
|
-
.mbe-
|
|
189
|
-
.mbe-
|
|
188
|
+
.mbe-0\.5 { margin-block-end: var(--size-0_5); }
|
|
189
|
+
.mbe-1 { margin-block-end: var(--size-1); }
|
|
190
|
+
.mbe-2 { margin-block-end: var(--size-2); }
|
|
191
|
+
.mbe-4 { margin-block-end: var(--size-4); }
|
|
192
|
+
.mbe-6 { margin-block-end: var(--size-6); }
|
|
193
|
+
.mbe-8 { margin-block-end: var(--size-8); }
|
|
194
|
+
.mbe-10 { margin-block-end: var(--size-10); }
|
|
190
195
|
.mbe-auto { margin-block-end: auto; }
|
|
191
196
|
|
|
192
197
|
.mi-0 { margin-inline: 0; }
|
|
193
|
-
.mi-
|
|
194
|
-
.mi-
|
|
195
|
-
.mi-
|
|
196
|
-
.mi-
|
|
197
|
-
.mi-
|
|
198
|
-
.mi-
|
|
199
|
-
.mi-
|
|
198
|
+
.mi-0\.5 { margin-inline: var(--size-0_5); }
|
|
199
|
+
.mi-1 { margin-inline: var(--size-1); }
|
|
200
|
+
.mi-2 { margin-inline: var(--size-2); }
|
|
201
|
+
.mi-4 { margin-inline: var(--size-4); }
|
|
202
|
+
.mi-6 { margin-inline: var(--size-6); }
|
|
203
|
+
.mi-8 { margin-inline: var(--size-8); }
|
|
204
|
+
.mi-10 { margin-inline: var(--size-10); }
|
|
200
205
|
.mi-auto { margin-inline: auto; }
|
|
201
206
|
|
|
202
207
|
.mis-0 { margin-inline-start: 0; }
|
|
203
|
-
.mis-
|
|
204
|
-
.mis-
|
|
205
|
-
.mis-
|
|
206
|
-
.mis-
|
|
207
|
-
.mis-
|
|
208
|
-
.mis-
|
|
209
|
-
.mis-
|
|
208
|
+
.mis-0\.5 { margin-inline-start: var(--size-0_5); }
|
|
209
|
+
.mis-1 { margin-inline-start: var(--size-1); }
|
|
210
|
+
.mis-2 { margin-inline-start: var(--size-2); }
|
|
211
|
+
.mis-4 { margin-inline-start: var(--size-4); }
|
|
212
|
+
.mis-6 { margin-inline-start: var(--size-6); }
|
|
213
|
+
.mis-8 { margin-inline-start: var(--size-8); }
|
|
214
|
+
.mis-10 { margin-inline-start: var(--size-10); }
|
|
210
215
|
.mis-auto { margin-inline-start: auto; }
|
|
211
216
|
|
|
212
217
|
.mie-0 { margin-inline-end: 0; }
|
|
213
|
-
.mie-
|
|
214
|
-
.mie-
|
|
215
|
-
.mie-
|
|
216
|
-
.mie-
|
|
217
|
-
.mie-
|
|
218
|
-
.mie-
|
|
219
|
-
.mie-
|
|
218
|
+
.mie-0\.5 { margin-inline-end: var(--size-0_5); }
|
|
219
|
+
.mie-1 { margin-inline-end: var(--size-1); }
|
|
220
|
+
.mie-2 { margin-inline-end: var(--size-2); }
|
|
221
|
+
.mie-4 { margin-inline-end: var(--size-4); }
|
|
222
|
+
.mie-6 { margin-inline-end: var(--size-6); }
|
|
223
|
+
.mie-8 { margin-inline-end: var(--size-8); }
|
|
224
|
+
.mie-10 { margin-inline-end: var(--size-10); }
|
|
220
225
|
.mie-auto { margin-inline-end: auto; }
|
|
221
226
|
|
|
222
227
|
/****************************************************************
|
|
223
228
|
* Padding
|
|
224
229
|
*****************************************************************/
|
|
225
230
|
.p-0 { padding: 0; }
|
|
226
|
-
.p-
|
|
227
|
-
.p-
|
|
228
|
-
.p-
|
|
229
|
-
.p-
|
|
230
|
-
.p-
|
|
231
|
-
.p-
|
|
232
|
-
.p-
|
|
231
|
+
.p-0\.5 { padding: var(--size-0_5); }
|
|
232
|
+
.p-1 { padding: var(--size-1); }
|
|
233
|
+
.p-2 { padding: var(--size-2); }
|
|
234
|
+
.p-4 { padding: var(--size-4); }
|
|
235
|
+
.p-6 { padding: var(--size-6); }
|
|
236
|
+
.p-8 { padding: var(--size-8); }
|
|
237
|
+
.p-10 { padding: var(--size-10); }
|
|
233
238
|
|
|
234
239
|
.pb-0 { padding-block: 0; }
|
|
235
|
-
.pb-
|
|
236
|
-
.pb-
|
|
237
|
-
.pb-
|
|
238
|
-
.pb-
|
|
239
|
-
.pb-
|
|
240
|
-
.pb-
|
|
241
|
-
.pb-
|
|
240
|
+
.pb-0\.5 { padding-block: var(--size-0_5); }
|
|
241
|
+
.pb-1 { padding-block: var(--size-1); }
|
|
242
|
+
.pb-2 { padding-block: var(--size-2); }
|
|
243
|
+
.pb-4 { padding-block: var(--size-4); }
|
|
244
|
+
.pb-6 { padding-block: var(--size-6); }
|
|
245
|
+
.pb-8 { padding-block: var(--size-8); }
|
|
246
|
+
.pb-10 { padding-block: var(--size-10); }
|
|
242
247
|
|
|
243
248
|
.pbs-0 { padding-block-start: 0; }
|
|
244
|
-
.pbs-
|
|
245
|
-
.pbs-
|
|
246
|
-
.pbs-
|
|
247
|
-
.pbs-
|
|
248
|
-
.pbs-
|
|
249
|
-
.pbs-
|
|
250
|
-
.pbs-
|
|
249
|
+
.pbs-0\.5 { padding-block-start: var(--size-0_5); }
|
|
250
|
+
.pbs-1 { padding-block-start: var(--size-1); }
|
|
251
|
+
.pbs-2 { padding-block-start: var(--size-2); }
|
|
252
|
+
.pbs-4 { padding-block-start: var(--size-4); }
|
|
253
|
+
.pbs-6 { padding-block-start: var(--size-6); }
|
|
254
|
+
.pbs-8 { padding-block-start: var(--size-8); }
|
|
255
|
+
.pbs-10 { padding-block-start: var(--size-10); }
|
|
251
256
|
|
|
252
257
|
.pbe-0 { padding-block-end: 0; }
|
|
253
|
-
.pbe-
|
|
254
|
-
.pbe-
|
|
255
|
-
.pbe-
|
|
256
|
-
.pbe-
|
|
257
|
-
.pbe-
|
|
258
|
-
.pbe-
|
|
259
|
-
.pbe-
|
|
258
|
+
.pbe-0\.5 { padding-block-end: var(--size-0_5); }
|
|
259
|
+
.pbe-1 { padding-block-end: var(--size-1); }
|
|
260
|
+
.pbe-2 { padding-block-end: var(--size-2); }
|
|
261
|
+
.pbe-4 { padding-block-end: var(--size-4); }
|
|
262
|
+
.pbe-6 { padding-block-end: var(--size-6); }
|
|
263
|
+
.pbe-8 { padding-block-end: var(--size-8); }
|
|
264
|
+
.pbe-10 { padding-block-end: var(--size-10); }
|
|
260
265
|
|
|
261
266
|
.pi-0 { padding-inline: 0; }
|
|
262
|
-
.pi-
|
|
263
|
-
.pi-
|
|
264
|
-
.pi-
|
|
265
|
-
.pi-
|
|
266
|
-
.pi-
|
|
267
|
-
.pi-
|
|
268
|
-
.pi-
|
|
267
|
+
.pi-0\.5 { padding-inline: var(--size-0_5); }
|
|
268
|
+
.pi-1 { padding-inline: var(--size-1); }
|
|
269
|
+
.pi-2 { padding-inline: var(--size-2); }
|
|
270
|
+
.pi-4 { padding-inline: var(--size-4); }
|
|
271
|
+
.pi-6 { padding-inline: var(--size-6); }
|
|
272
|
+
.pi-8 { padding-inline: var(--size-8); }
|
|
273
|
+
.pi-10 { padding-inline: var(--size-10); }
|
|
269
274
|
|
|
270
275
|
.pis-0 { padding-inline-start: 0; }
|
|
271
|
-
.pis-
|
|
272
|
-
.pis-
|
|
273
|
-
.pis-
|
|
274
|
-
.pis-
|
|
275
|
-
.pis-
|
|
276
|
-
.pis-
|
|
277
|
-
.pis-
|
|
276
|
+
.pis-0\.5 { padding-inline-start: var(--size-0_5); }
|
|
277
|
+
.pis-1 { padding-inline-start: var(--size-1); }
|
|
278
|
+
.pis-2 { padding-inline-start: var(--size-2); }
|
|
279
|
+
.pis-4 { padding-inline-start: var(--size-4); }
|
|
280
|
+
.pis-6 { padding-inline-start: var(--size-6); }
|
|
281
|
+
.pis-8 { padding-inline-start: var(--size-8); }
|
|
282
|
+
.pis-10 { padding-inline-start: var(--size-10); }
|
|
278
283
|
|
|
279
284
|
.pie-0 { padding-inline-end: 0; }
|
|
280
|
-
.pie-
|
|
281
|
-
.pie-
|
|
282
|
-
.pie-
|
|
283
|
-
.pie-
|
|
284
|
-
.pie-
|
|
285
|
-
.pie-
|
|
286
|
-
.pie-
|
|
285
|
+
.pie-0\.5 { padding-inline-end: var(--size-0_5); }
|
|
286
|
+
.pie-1 { padding-inline-end: var(--size-1); }
|
|
287
|
+
.pie-2 { padding-inline-end: var(--size-2); }
|
|
288
|
+
.pie-4 { padding-inline-end: var(--size-4); }
|
|
289
|
+
.pie-6 { padding-inline-end: var(--size-6); }
|
|
290
|
+
.pie-8 { padding-inline-end: var(--size-8); }
|
|
291
|
+
.pie-10 { padding-inline-end: var(--size-10); }
|
data/lib/css_zero/version.rb
CHANGED
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.8
|
|
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-06-
|
|
11
|
+
date: 2024-06-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|