css-zero 0.0.5 → 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 +76 -24
- data/app/assets/stylesheets/buttons.css +20 -10
- data/app/assets/stylesheets/colors.css +8 -3
- data/app/assets/stylesheets/filters.css +28 -1
- data/app/assets/stylesheets/zutilities.css +128 -67
- 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: 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,24 +62,44 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
30
62
|
}
|
|
31
63
|
```
|
|
32
64
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
65
|
+
Check the [CSS files](app/assets/stylesheets) in the repository for reference.
|
|
66
|
+
|
|
67
|
+
## Buttons
|
|
68
|
+
|
|
69
|
+
<img width="1010" alt="Buttons Light" src="https://github.com/lazaronixon/css-zero/assets/2651240/df0870ae-86e5-43c4-98c5-86946a467f0c">
|
|
70
|
+
|
|
71
|
+
```html+erb
|
|
72
|
+
<div class="flex items-center gap">
|
|
73
|
+
<button class="btn btn--primary">Primary button</button>
|
|
74
|
+
<button class="btn">Outline button</button>
|
|
75
|
+
<button class="btn btn--plain">Plain button</button>
|
|
76
|
+
<button class="btn" disabled>Disabled button</button>
|
|
77
|
+
|
|
78
|
+
<button class="btn btn--primary">
|
|
79
|
+
<%= image_tag "plus.svg", class: "invert" %> <span>Icon Button</span>
|
|
80
|
+
</button>
|
|
81
|
+
|
|
82
|
+
<button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
83
|
+
Colored button
|
|
84
|
+
</button>
|
|
85
|
+
|
|
86
|
+
<button class="btn btn--small">
|
|
87
|
+
Button small
|
|
88
|
+
</button>
|
|
89
|
+
</div>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Inputs
|
|
93
|
+
|
|
94
|
+
Soon...
|
|
95
|
+
|
|
96
|
+
## Dialog
|
|
97
|
+
|
|
98
|
+
Soon...
|
|
47
99
|
|
|
48
100
|
## Customization
|
|
49
101
|
|
|
50
|
-
|
|
102
|
+
### Root level
|
|
51
103
|
|
|
52
104
|
```css
|
|
53
105
|
:root {
|
|
@@ -60,7 +112,7 @@ Global level
|
|
|
60
112
|
}
|
|
61
113
|
```
|
|
62
114
|
|
|
63
|
-
|
|
115
|
+
### Class level
|
|
64
116
|
|
|
65
117
|
```css
|
|
66
118
|
.btn--colored {
|
|
@@ -69,12 +121,12 @@ Component level
|
|
|
69
121
|
}
|
|
70
122
|
```
|
|
71
123
|
|
|
72
|
-
Style level
|
|
124
|
+
### Style level
|
|
73
125
|
|
|
74
126
|
```html
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
</
|
|
127
|
+
<button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
128
|
+
Colored button
|
|
129
|
+
</button>
|
|
78
130
|
```
|
|
79
131
|
|
|
80
132
|
## Development
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
.btn {
|
|
2
2
|
align-items: center;
|
|
3
|
-
background-color: var(--btn-background,
|
|
3
|
+
background-color: var(--btn-background, transparent);
|
|
4
4
|
border-radius: var(--btn-border-radius, var(--rounded-lg));
|
|
5
|
-
border: 1px solid var(--btn-border-color,
|
|
6
|
-
|
|
5
|
+
border: 1px solid var(--btn-border-color, var(--color-border));
|
|
6
|
+
box-shadow: var(--btn-shadow, var(--shadow-sm));
|
|
7
|
+
color: var(--btn-color, var(--color-text));
|
|
7
8
|
column-gap: var(--btn-column-gap, var(--size-1));
|
|
8
9
|
cursor: pointer;
|
|
9
10
|
display: inline-flex;
|
|
@@ -14,19 +15,28 @@
|
|
|
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 {
|
|
23
|
+
opacity: var(--opacity-50);
|
|
18
24
|
pointer-events: none;
|
|
19
|
-
filter: var(--grayscale) opacity(0.5);
|
|
20
25
|
}
|
|
21
26
|
}
|
|
22
27
|
|
|
28
|
+
.btn--primary {
|
|
29
|
+
--btn-background: var(--color-primary);
|
|
30
|
+
--btn-border-color: transparent;
|
|
31
|
+
--btn-color: white;
|
|
32
|
+
}
|
|
33
|
+
|
|
23
34
|
.btn--plain {
|
|
24
|
-
--btn-
|
|
25
|
-
--btn-
|
|
26
|
-
--btn-color: var(--color-text);
|
|
35
|
+
--btn-border-color: transparent;
|
|
36
|
+
--btn-shadow: none;
|
|
27
37
|
}
|
|
28
38
|
|
|
29
|
-
.btn--
|
|
30
|
-
--btn-
|
|
31
|
-
--btn-
|
|
39
|
+
.btn--small {
|
|
40
|
+
--btn-font-size: var(--text-xs);
|
|
41
|
+
--btn-line-height: var(--leading-5);
|
|
32
42
|
}
|
|
@@ -270,9 +270,13 @@
|
|
|
270
270
|
--color-bg-surface: var(--zinc-100);
|
|
271
271
|
--color-text: var(--zinc-950);
|
|
272
272
|
--color-text-reversed: white;
|
|
273
|
-
--color-text-subtle: var(--zinc-
|
|
273
|
+
--color-text-subtle: var(--zinc-600);
|
|
274
274
|
--color-border: var(--zinc-200);
|
|
275
275
|
|
|
276
|
+
/* Filtered color values */
|
|
277
|
+
--color-filter-black: var(--invert-0);
|
|
278
|
+
--color-filter-white: var(--invert);
|
|
279
|
+
|
|
276
280
|
/* Redefine named color values for dark mode */
|
|
277
281
|
@media (prefers-color-scheme: dark) {
|
|
278
282
|
--color-primary: var(--zinc-600);
|
|
@@ -280,7 +284,8 @@
|
|
|
280
284
|
--color-bg-surface: var(--zinc-950);
|
|
281
285
|
--color-text: white;
|
|
282
286
|
--color-text-reversed: var(--zinc-950);
|
|
283
|
-
--color-
|
|
284
|
-
--color-
|
|
287
|
+
--color-border: rgba(255, 255, 255, 0.15);
|
|
288
|
+
--color-filter-black: var(--invert);
|
|
289
|
+
--color-filter-white: var(--invert-0);
|
|
285
290
|
}
|
|
286
291
|
}
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
/****************************************************************
|
|
47
47
|
* Drop Shadow
|
|
48
48
|
* Variables for applying drop-shadow filters to an element.
|
|
49
|
-
* filter
|
|
49
|
+
* filter: var(--drop-shadow);
|
|
50
50
|
*****************************************************************/
|
|
51
51
|
--drop-shadow-none: drop-shadow(0 0 #0000);
|
|
52
52
|
--drop-shadow-sm: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
|
|
@@ -102,4 +102,31 @@
|
|
|
102
102
|
*****************************************************************/
|
|
103
103
|
--sepia-0: sepia(0);
|
|
104
104
|
--sepia: sepia(100%);
|
|
105
|
+
|
|
106
|
+
/****************************************************************
|
|
107
|
+
* Opacity
|
|
108
|
+
* Utilities for applying backdrop opacity filters to an element.
|
|
109
|
+
* backdrop-filter: var(--opaqueness-45);
|
|
110
|
+
*****************************************************************/
|
|
111
|
+
--opaqueness-0: opacity(0);
|
|
112
|
+
--opaqueness-5: opacity(0.05);
|
|
113
|
+
--opaqueness-10: opacity(0.1);
|
|
114
|
+
--opaqueness-15: opacity(0.15);
|
|
115
|
+
--opaqueness-20: opacity(0.2);
|
|
116
|
+
--opaqueness-25: opacity(0.25);
|
|
117
|
+
--opaqueness-30: opacity(0.3);
|
|
118
|
+
--opaqueness-35: opacity(0.35);
|
|
119
|
+
--opaqueness-40: opacity(0.4);
|
|
120
|
+
--opaqueness-45: opacity(0.45);
|
|
121
|
+
--opaqueness-50: opacity(0.5);
|
|
122
|
+
--opaqueness-55: opacity(0.55);
|
|
123
|
+
--opaqueness-60: opacity(0.6);
|
|
124
|
+
--opaqueness-65: opacity(0.65);
|
|
125
|
+
--opaqueness-70: opacity(0.7);
|
|
126
|
+
--opaqueness-75: opacity(0.75);
|
|
127
|
+
--opaqueness-80: opacity(0.8);
|
|
128
|
+
--opaqueness-85: opacity(0.85);
|
|
129
|
+
--opaqueness-90: opacity(0.9);
|
|
130
|
+
--opaqueness-95: opacity(0.95);
|
|
131
|
+
--opaqueness-100: opacity(1);
|
|
105
132
|
}
|
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--space-sm: var(--size-2); /* 8px */
|
|
3
|
-
--space-md: var(--size-4); /* 16px */
|
|
4
|
-
--space-lg: var(--size-8); /* 32px */
|
|
5
|
-
}
|
|
6
|
-
|
|
7
1
|
/****************************************************************
|
|
8
2
|
* Flex and Grid
|
|
9
3
|
*****************************************************************/
|
|
@@ -28,27 +22,14 @@
|
|
|
28
22
|
.self-start { align-self: start; }
|
|
29
23
|
.self-center { align-self: center; }
|
|
30
24
|
|
|
31
|
-
.gap {
|
|
32
|
-
column-gap: var(--column-gap, var(--space-md));
|
|
33
|
-
row-gap: var(--row-gap, var(--space-md));
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/****************************************************************
|
|
37
|
-
* Alignment
|
|
38
|
-
*****************************************************************/
|
|
39
|
-
.align-top { vertical-align: top; }
|
|
40
|
-
.align-bottom { vertical-align: bottom; }
|
|
41
|
-
.align-middle { vertical-align: middle; }
|
|
42
|
-
|
|
43
|
-
.text-start { text-align: start; }
|
|
44
|
-
.text-end { text-align: end; }
|
|
45
|
-
.text-center { text-align: center; }
|
|
25
|
+
.gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
|
|
46
26
|
|
|
47
27
|
/****************************************************************
|
|
48
28
|
* Text
|
|
49
29
|
*****************************************************************/
|
|
50
|
-
.font-normal { font-weight: var(--font-normal);
|
|
30
|
+
.font-normal { font-weight: var(--font-normal); }
|
|
51
31
|
.font-medium { font-weight: var(--font-medium); }
|
|
32
|
+
.font-semibold { font-weight: var(--font-semibold); }
|
|
52
33
|
.font-bold { font-weight: var(--font-bold); }
|
|
53
34
|
|
|
54
35
|
.underline { text-decoration-line: underline; }
|
|
@@ -71,6 +52,10 @@
|
|
|
71
52
|
.leading-tight { line-height: var(--leading-tight); }
|
|
72
53
|
.leading-normal { line-height: var(--leading-normal); }
|
|
73
54
|
|
|
55
|
+
.text-start { text-align: start; }
|
|
56
|
+
.text-end { text-align: end; }
|
|
57
|
+
.text-center { text-align: center; }
|
|
58
|
+
|
|
74
59
|
.text-primary { color: var(--color-text); }
|
|
75
60
|
.text-reversed { color: var(--color-text-reversed); }
|
|
76
61
|
.text-subtle { color: var(--color-text-subtle); }
|
|
@@ -84,6 +69,10 @@
|
|
|
84
69
|
.text-3xl { font-size: var(--text-3xl); }
|
|
85
70
|
.text-4xl { font-size: var(--text-4xl); }
|
|
86
71
|
.text-5xl { font-size: var(--text-5xl); }
|
|
72
|
+
.text-6xl { font-size: var(--text-6xl); }
|
|
73
|
+
.text-7xl { font-size: var(--text-7xl); }
|
|
74
|
+
.text-8xl { font-size: var(--text-8xl); }
|
|
75
|
+
.text-9xl { font-size: var(--text-9xl); }
|
|
87
76
|
|
|
88
77
|
/****************************************************************
|
|
89
78
|
* Background
|
|
@@ -93,6 +82,10 @@
|
|
|
93
82
|
.bg-surface { background-color: var(--color-bg-surface); }
|
|
94
83
|
.bg-transparent { background-color: transparent; }
|
|
95
84
|
|
|
85
|
+
.invert { filter: var(--invert); }
|
|
86
|
+
.colorize-black { filter: var(--color-filter-black); }
|
|
87
|
+
.colorize-white { filter: var(--color-filter-white); }
|
|
88
|
+
|
|
96
89
|
/****************************************************************
|
|
97
90
|
* Border
|
|
98
91
|
*****************************************************************/
|
|
@@ -105,16 +98,25 @@
|
|
|
105
98
|
|
|
106
99
|
.rounded-sm { border-radius: var(--rounded-sm); }
|
|
107
100
|
.rounded { border-radius: var(--rounded); }
|
|
101
|
+
.rounded-md { border-radius: var(--rounded-md); }
|
|
108
102
|
.rounded-lg { border-radius: var(--rounded-lg); }
|
|
103
|
+
.rounded-xl { border-radius: var(--rounded-xl); }
|
|
104
|
+
.rounded-2xl { border-radius: var(--rounded-2xl); }
|
|
105
|
+
.rounded-3xl { border-radius: var(--rounded-3xl); }
|
|
109
106
|
.rounded-full { border-radius: var(--rounded-full); }
|
|
107
|
+
.rounded-none { border-radius: none; }
|
|
110
108
|
|
|
111
109
|
/****************************************************************
|
|
112
110
|
* Shadow
|
|
113
111
|
*****************************************************************/
|
|
112
|
+
.shadow-xs { box-shadow: var(--shadow-xs); }
|
|
113
|
+
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
114
114
|
.shadow { box-shadow: var(--shadow); }
|
|
115
115
|
.shadow-md { box-shadow: var(--shadow-md); }
|
|
116
116
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
117
117
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
118
|
+
.shadow-2xl { box-shadow: var(--shadow-2xl); }
|
|
119
|
+
.shadow-none { box-shadow: none; }
|
|
118
120
|
|
|
119
121
|
/****************************************************************
|
|
120
122
|
* Layout
|
|
@@ -138,77 +140,136 @@
|
|
|
138
140
|
* Margin
|
|
139
141
|
*****************************************************************/
|
|
140
142
|
.m-0 { margin: 0; }
|
|
141
|
-
.m-
|
|
142
|
-
.m-
|
|
143
|
-
.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); }
|
|
144
150
|
|
|
145
151
|
.mb-0 { margin-block: 0; }
|
|
146
|
-
.mb-
|
|
147
|
-
.mb-
|
|
148
|
-
.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); }
|
|
159
|
+
.mb-auto { margin-block: auto; }
|
|
149
160
|
|
|
150
161
|
.mbs-0 { margin-block-start: 0; }
|
|
151
|
-
.mbs-
|
|
152
|
-
.mbs-
|
|
153
|
-
.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); }
|
|
169
|
+
.mbs-auto { margin-block-start: auto; }
|
|
154
170
|
|
|
155
171
|
.mbe-0 { margin-block-end: 0; }
|
|
156
|
-
.mbe-
|
|
157
|
-
.mbe-
|
|
158
|
-
.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); }
|
|
179
|
+
.mbe-auto { margin-block-end: auto; }
|
|
159
180
|
|
|
160
181
|
.mi-0 { margin-inline: 0; }
|
|
161
|
-
.mi-
|
|
162
|
-
.mi-
|
|
163
|
-
.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); }
|
|
189
|
+
.mi-auto { margin-inline: auto; }
|
|
164
190
|
|
|
165
191
|
.mis-0 { margin-inline-start: 0; }
|
|
166
|
-
.mis-
|
|
167
|
-
.mis-
|
|
168
|
-
.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); }
|
|
199
|
+
.mis-auto { margin-inline-start: auto; }
|
|
169
200
|
|
|
170
201
|
.mie-0 { margin-inline-end: 0; }
|
|
171
|
-
.mie-
|
|
172
|
-
.mie-
|
|
173
|
-
.mie-
|
|
174
|
-
|
|
175
|
-
.
|
|
176
|
-
.
|
|
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); }
|
|
209
|
+
.mie-auto { margin-inline-end: auto; }
|
|
177
210
|
|
|
178
211
|
/****************************************************************
|
|
179
212
|
* Padding
|
|
180
213
|
*****************************************************************/
|
|
181
214
|
.p-0 { padding: 0; }
|
|
182
|
-
.p-
|
|
183
|
-
.p-
|
|
184
|
-
.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); }
|
|
185
222
|
|
|
186
223
|
.pb-0 { padding-block: 0; }
|
|
187
|
-
.pb-
|
|
188
|
-
.pb-
|
|
189
|
-
.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); }
|
|
190
231
|
|
|
191
232
|
.pbs-0 { padding-block-start: 0; }
|
|
192
|
-
.pbs-
|
|
193
|
-
.pbs-
|
|
194
|
-
.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); }
|
|
195
240
|
|
|
196
241
|
.pbe-0 { padding-block-end: 0; }
|
|
197
|
-
.pbe-
|
|
198
|
-
.pbe-
|
|
199
|
-
.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); }
|
|
200
249
|
|
|
201
250
|
.pi-0 { padding-inline: 0; }
|
|
202
|
-
.pi-
|
|
203
|
-
.pi-
|
|
204
|
-
.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); }
|
|
205
258
|
|
|
206
259
|
.pis-0 { padding-inline-start: 0; }
|
|
207
|
-
.pis-
|
|
208
|
-
.pis-
|
|
209
|
-
.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); }
|
|
210
267
|
|
|
211
268
|
.pie-0 { padding-inline-end: 0; }
|
|
212
|
-
.pie-
|
|
213
|
-
.pie-
|
|
214
|
-
.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
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.7
|
|
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-12 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|