css-zero 0.0.7 → 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 +3 -3
- data/app/assets/stylesheets/buttons.css +2 -2
- data/app/assets/stylesheets/colors.css +3 -4
- data/app/assets/stylesheets/zutilities.css +25 -9
- 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
|
@@ -66,7 +66,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository for reference.
|
|
|
66
66
|
|
|
67
67
|
## Buttons
|
|
68
68
|
|
|
69
|
-
<img width="1010" alt="
|
|
69
|
+
<img width="1010" alt="buttons" src="https://github.com/lazaronixon/css-zero/assets/2651240/ec073c9d-d3b7-4a1e-8e7f-d772ff0e0cb8">
|
|
70
70
|
|
|
71
71
|
```html+erb
|
|
72
72
|
<div class="flex items-center gap">
|
|
@@ -76,7 +76,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository for reference.
|
|
|
76
76
|
<button class="btn" disabled>Disabled button</button>
|
|
77
77
|
|
|
78
78
|
<button class="btn btn--primary">
|
|
79
|
-
<%= image_tag "plus.svg", class: "invert" %>
|
|
79
|
+
<%= image_tag "plus.svg", role: "presentation", class: "invert" %>
|
|
80
|
+
<span>Icon button</span>
|
|
80
81
|
</button>
|
|
81
82
|
|
|
82
83
|
<button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
@@ -104,7 +105,6 @@ Soon...
|
|
|
104
105
|
```css
|
|
105
106
|
:root {
|
|
106
107
|
--color-bg: white;
|
|
107
|
-
--color-bg-surface: var(--zinc-100);
|
|
108
108
|
--color-text: var(--zinc-950);
|
|
109
109
|
--color-text-reversed: white;
|
|
110
110
|
--color-text-subtle: var(--zinc-500);
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
border: 1px solid var(--btn-border-color, var(--color-border));
|
|
6
6
|
box-shadow: var(--btn-shadow, var(--shadow-sm));
|
|
7
7
|
color: var(--btn-color, var(--color-text));
|
|
8
|
-
column-gap: var(--
|
|
8
|
+
column-gap: var(--size-2);
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
font-size: var(--btn-font-size, var(--text-sm));
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
text-align: center;
|
|
17
17
|
|
|
18
18
|
&:hover {
|
|
19
|
-
filter:
|
|
19
|
+
filter: contrast(0.85);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
&:disabled {
|
|
@@ -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
|
}
|
|
@@ -6,23 +6,24 @@
|
|
|
6
6
|
.flex-wrap { flex-wrap: wrap; }
|
|
7
7
|
.inline-flex { display: inline-flex; }
|
|
8
8
|
|
|
9
|
-
.justify-end { justify-content: end; }
|
|
10
9
|
.justify-start { justify-content: start; }
|
|
11
10
|
.justify-center { justify-content: center; }
|
|
11
|
+
.justify-end { justify-content: end; }
|
|
12
12
|
.justify-between { justify-content: space-between; }
|
|
13
13
|
|
|
14
|
-
.items-end { align-items: end; }
|
|
15
14
|
.items-start { align-items: start; }
|
|
15
|
+
.items-end { align-items: end; }
|
|
16
16
|
.items-center { align-items: center; }
|
|
17
17
|
|
|
18
18
|
.grow { flex-grow: 1; }
|
|
19
19
|
.shrink-0 { flex-shrink: 0; }
|
|
20
20
|
|
|
21
|
-
.self-end { align-self: end; }
|
|
22
21
|
.self-start { align-self: start; }
|
|
22
|
+
.self-end { align-self: end; }
|
|
23
23
|
.self-center { align-self: center; }
|
|
24
24
|
|
|
25
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); }
|
|
26
27
|
|
|
27
28
|
/****************************************************************
|
|
28
29
|
* Text
|
|
@@ -44,7 +45,8 @@
|
|
|
44
45
|
.break-words { word-break: break-word; }
|
|
45
46
|
.break-all { word-break: break-all; }
|
|
46
47
|
|
|
47
|
-
.
|
|
48
|
+
.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
|
|
49
|
+
.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
|
|
48
50
|
|
|
49
51
|
.opacity-75 { opacity: var(--opacity-75); }
|
|
50
52
|
.opacity-50 { opacity: var(--opacity-50); }
|
|
@@ -78,8 +80,9 @@
|
|
|
78
80
|
* Background
|
|
79
81
|
*****************************************************************/
|
|
80
82
|
.bg-main { background-color: var(--color-bg); }
|
|
83
|
+
.bg-black { background-color: var(--color-text); }
|
|
81
84
|
.bg-white { background-color: var(--color-text-reversed); }
|
|
82
|
-
.bg-
|
|
85
|
+
.bg-shade { background-color: var(--color-border); }
|
|
83
86
|
.bg-transparent { background-color: transparent; }
|
|
84
87
|
|
|
85
88
|
.invert { filter: var(--invert); }
|
|
@@ -89,13 +92,14 @@
|
|
|
89
92
|
/****************************************************************
|
|
90
93
|
* Border
|
|
91
94
|
*****************************************************************/
|
|
95
|
+
.border-0 { border: 0; }
|
|
92
96
|
.border { border: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
93
97
|
.border-t { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
94
98
|
.border-b { border-bottom: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
95
99
|
.border-l { border-left: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
96
100
|
.border-r { border-right: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
97
|
-
.border-0 { border: 0; }
|
|
98
101
|
|
|
102
|
+
.rounded-none { border-radius: none; }
|
|
99
103
|
.rounded-sm { border-radius: var(--rounded-sm); }
|
|
100
104
|
.rounded { border-radius: var(--rounded); }
|
|
101
105
|
.rounded-md { border-radius: var(--rounded-md); }
|
|
@@ -104,11 +108,11 @@
|
|
|
104
108
|
.rounded-2xl { border-radius: var(--rounded-2xl); }
|
|
105
109
|
.rounded-3xl { border-radius: var(--rounded-3xl); }
|
|
106
110
|
.rounded-full { border-radius: var(--rounded-full); }
|
|
107
|
-
.rounded-none { border-radius: none; }
|
|
108
111
|
|
|
109
112
|
/****************************************************************
|
|
110
113
|
* Shadow
|
|
111
114
|
*****************************************************************/
|
|
115
|
+
.shadow-none { box-shadow: none; }
|
|
112
116
|
.shadow-xs { box-shadow: var(--shadow-xs); }
|
|
113
117
|
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
114
118
|
.shadow { box-shadow: var(--shadow); }
|
|
@@ -116,7 +120,6 @@
|
|
|
116
120
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
117
121
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
118
122
|
.shadow-2xl { box-shadow: var(--shadow-2xl); }
|
|
119
|
-
.shadow-none { box-shadow: none; }
|
|
120
123
|
|
|
121
124
|
/****************************************************************
|
|
122
125
|
* Layout
|
|
@@ -126,6 +129,7 @@
|
|
|
126
129
|
.inline-block { display: inline-block; }
|
|
127
130
|
|
|
128
131
|
.relative { position: relative; }
|
|
132
|
+
.sticky { position: sticky; }
|
|
129
133
|
|
|
130
134
|
.min-w-0 { min-inline-size: 0; }
|
|
131
135
|
.max-w-full { max-inline-size: 100%; }
|
|
@@ -133,9 +137,20 @@
|
|
|
133
137
|
.h-full { block-size: 100%; }
|
|
134
138
|
.w-full { inline-size: 100%; }
|
|
135
139
|
|
|
136
|
-
.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; }
|
|
137
142
|
.overflow-hidden { overflow: hidden; }
|
|
138
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
|
+
|
|
139
154
|
/****************************************************************
|
|
140
155
|
* Margin
|
|
141
156
|
*****************************************************************/
|
|
@@ -147,6 +162,7 @@
|
|
|
147
162
|
.m-6 { margin: var(--size-6); }
|
|
148
163
|
.m-8 { margin: var(--size-8); }
|
|
149
164
|
.m-10 { margin: var(--size-10); }
|
|
165
|
+
.m-auto { margin: auto; }
|
|
150
166
|
|
|
151
167
|
.mb-0 { margin-block: 0; }
|
|
152
168
|
.mb-0\.5 { margin-block: var(--size-0_5); }
|
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
|