css-zero 0.0.8 → 0.0.9
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 +62 -17
- data/app/assets/stylesheets/base.css +4 -0
- data/app/assets/stylesheets/buttons.css +24 -20
- data/app/assets/stylesheets/colors.css +17 -17
- data/app/assets/stylesheets/dialog.css +34 -0
- data/app/assets/stylesheets/inputs.css +43 -0
- data/app/assets/stylesheets/separators.css +4 -0
- data/app/assets/stylesheets/zutilities.css +22 -15
- data/lib/css_zero/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e1f5501303185bf9a119ea52aaaf5cbc03cef023cb3cd3fc2f3f884239d130e5
|
|
4
|
+
data.tar.gz: 49ca85bd7206b421c6ea37b5ad672beeaa0824843d3d4e9c7c97077d8044c75d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7a5bd42832b1db0e2be98bea5421743311af95e1252f62a4b71497bee8e487172b914fe999b9dfecf507d267d4f4b8fb2292c4d18f967341550bb235acfa61ee
|
|
7
|
+
data.tar.gz: 99d987f57ca8c09000ac836ed175c6ad288af18d50b8a54fc8eff06523f7fb354e71208fcc40e6a4c99c12cb7932564698746124805639b69830bc602537514e
|
data/README.md
CHANGED
|
@@ -26,12 +26,16 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
|
|
|
26
26
|
```css
|
|
27
27
|
*= require _reset
|
|
28
28
|
*= require animations
|
|
29
|
+
*= require base
|
|
29
30
|
*= require borders
|
|
30
31
|
*= require buttons
|
|
31
32
|
*= require colors
|
|
33
|
+
*= require dialog
|
|
32
34
|
*= require effects
|
|
33
35
|
*= require filters
|
|
34
36
|
*= require grid
|
|
37
|
+
*= require inputs
|
|
38
|
+
*= require separators
|
|
35
39
|
*= require sizes
|
|
36
40
|
*= require transform
|
|
37
41
|
*= require transition
|
|
@@ -64,39 +68,80 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
|
|
|
64
68
|
|
|
65
69
|
Check the [CSS files](app/assets/stylesheets) in the repository for reference.
|
|
66
70
|
|
|
71
|
+
## Inputs
|
|
72
|
+
|
|
73
|
+
<img width="469" alt="Inputs" src="https://github.com/lazaronixon/css-zero/assets/2651240/987201b3-2583-43af-b1f2-db6af1eabbaa">
|
|
74
|
+
|
|
75
|
+
```html+erb
|
|
76
|
+
<div class="flex flex-col w-full gap" style="max-inline-size: 24rem;">
|
|
77
|
+
<div class="flex flex-col grow gap-small">
|
|
78
|
+
<label for="name_field" class="text-sm font-medium">Full name</label>
|
|
79
|
+
<input type="text" id="name_field" class="input">
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="flex flex-col grow gap-small">
|
|
83
|
+
<label for="file_field" class="text-sm font-medium">File</label>
|
|
84
|
+
<input type="file" id="file_field" class="input">
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div class="flex flex-col grow gap-small">
|
|
88
|
+
<label for="age_range_Field" class="text-sm font-medium">Age Range</label>
|
|
89
|
+
<select id="age_range_Field" class="input">
|
|
90
|
+
<option value="0-13">0-13</option>
|
|
91
|
+
<option value="14-17">14-17</option>
|
|
92
|
+
</select>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="flex flex-col grow gap-small">
|
|
96
|
+
<label for="comment_field" class="text-sm font-medium">Comment</label>
|
|
97
|
+
<textarea id="comment_field" class="input"></textarea>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="flex items-center gap-small">
|
|
101
|
+
<input type="checkbox" id="terms">
|
|
102
|
+
<label for="terms" class="text-sm font-medium">Accept terms and conditions</label>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
```
|
|
106
|
+
|
|
67
107
|
## Buttons
|
|
68
108
|
|
|
69
|
-
<img width="
|
|
109
|
+
<img width="779" alt="Buttons" src="https://github.com/lazaronixon/css-zero/assets/2651240/ea0bdafe-7bd9-46a4-a87c-b11dd0836707">
|
|
70
110
|
|
|
71
111
|
```html+erb
|
|
72
112
|
<div class="flex items-center gap">
|
|
73
|
-
<button class="btn
|
|
74
|
-
<button class="btn">Outline button</button>
|
|
113
|
+
<button class="btn">Primary button</button>
|
|
114
|
+
<button class="btn btn--outline">Outline button</button>
|
|
75
115
|
<button class="btn btn--plain">Plain button</button>
|
|
76
|
-
<button class="btn" disabled>Disabled button</button>
|
|
77
116
|
|
|
78
|
-
<button class="btn
|
|
79
|
-
<%= image_tag "plus.svg", role: "presentation",
|
|
117
|
+
<button class="btn">
|
|
118
|
+
<%= image_tag "plus.svg", role: "presentation", size: 20 %>
|
|
80
119
|
<span>Icon button</span>
|
|
81
120
|
</button>
|
|
82
121
|
|
|
83
|
-
<button class="btn
|
|
84
|
-
|
|
85
|
-
</button>
|
|
86
|
-
|
|
87
|
-
<button class="btn btn--small">
|
|
88
|
-
Button small
|
|
122
|
+
<button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
123
|
+
Custom button
|
|
89
124
|
</button>
|
|
90
125
|
</div>
|
|
91
126
|
```
|
|
92
127
|
|
|
93
|
-
##
|
|
128
|
+
## Dialog
|
|
94
129
|
|
|
95
|
-
|
|
130
|
+
<img width="572" alt="Dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/381dd7eb-8024-4ffc-992a-d47d370a3c24">
|
|
96
131
|
|
|
97
|
-
|
|
132
|
+
```html+erb
|
|
133
|
+
<dialog id="my_modal" class="dialog">
|
|
134
|
+
<h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
|
|
135
|
+
<p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
|
|
136
|
+
|
|
137
|
+
<div class="flex gap-small justify-end mbs-4">
|
|
138
|
+
<form method="dialog"><button class="btn btn--outline">Cancel</button></form>
|
|
139
|
+
<button class="btn">Continue</button>
|
|
140
|
+
</div>
|
|
141
|
+
</dialog>
|
|
98
142
|
|
|
99
|
-
|
|
143
|
+
<button class="btn" onClick="my_modal.showModal();">Show modal</button>
|
|
144
|
+
```
|
|
100
145
|
|
|
101
146
|
## Customization
|
|
102
147
|
|
|
@@ -124,7 +169,7 @@ Soon...
|
|
|
124
169
|
### Style level
|
|
125
170
|
|
|
126
171
|
```html
|
|
127
|
-
<button class="btn
|
|
172
|
+
<button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
128
173
|
Colored button
|
|
129
174
|
</button>
|
|
130
175
|
```
|
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
.btn {
|
|
2
2
|
align-items: center;
|
|
3
|
-
background-color: var(--btn-background,
|
|
4
|
-
border-radius: var(--btn-border-radius, var(--rounded-
|
|
5
|
-
border: 1px solid var(--btn-border-color,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
column-gap: var(--size-2);
|
|
3
|
+
background-color: var(--btn-background, var(--color-primary));
|
|
4
|
+
border-radius: var(--btn-border-radius, var(--rounded-md));
|
|
5
|
+
border: 1px solid var(--btn-border-color, transparent);
|
|
6
|
+
color: var(--btn-color, var(--color-text-reversed));
|
|
7
|
+
column-gap: var(--btn-gap, var(--size-2));
|
|
9
8
|
cursor: pointer;
|
|
10
9
|
display: inline-flex;
|
|
11
10
|
font-size: var(--btn-font-size, var(--text-sm));
|
|
12
|
-
font-weight: var(--btn-font-weight, var(--font-
|
|
11
|
+
font-weight: var(--btn-font-weight, var(--font-medium));
|
|
13
12
|
justify-content: center;
|
|
14
|
-
|
|
15
|
-
padding: var(--btn-padding, var(--size-1_5) var(--size-3_5));
|
|
13
|
+
padding: var(--btn-padding, .5rem 1rem);
|
|
16
14
|
text-align: center;
|
|
15
|
+
white-space: nowrap;
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
filter:
|
|
17
|
+
img:not([class]) {
|
|
18
|
+
filter: var(--btn-icon-color, var(--color-filter-text-reversed));
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
&:disabled {
|
|
@@ -25,18 +24,23 @@
|
|
|
25
24
|
}
|
|
26
25
|
}
|
|
27
26
|
|
|
28
|
-
.btn--
|
|
29
|
-
--btn-background:
|
|
30
|
-
--btn-border-color:
|
|
31
|
-
--btn-color:
|
|
27
|
+
.btn--outline {
|
|
28
|
+
--btn-background: transparent;
|
|
29
|
+
--btn-border-color: var(--color-border);
|
|
30
|
+
--btn-color: var(--color-text);
|
|
31
|
+
--btn-icon-color: var(--color-filter-text);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.btn--plain {
|
|
35
|
-
--btn-
|
|
36
|
-
--btn-
|
|
35
|
+
--btn-background: transparent;
|
|
36
|
+
--btn-color: var(--color-text);
|
|
37
|
+
--btn-icon-color: var(--color-filter-text);
|
|
37
38
|
}
|
|
38
39
|
|
|
39
|
-
.btn--
|
|
40
|
-
--btn-
|
|
41
|
-
|
|
40
|
+
.btn--positive {
|
|
41
|
+
--btn-background: var(--color-positive);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.btn--negative {
|
|
45
|
+
--btn-background: var(--color-negative);
|
|
42
46
|
}
|
|
@@ -264,27 +264,27 @@
|
|
|
264
264
|
--rose-900: #881337;
|
|
265
265
|
--rose-950: #4c0519;
|
|
266
266
|
|
|
267
|
+
color-scheme: light dark;
|
|
268
|
+
|
|
267
269
|
/* Abstractions */
|
|
268
|
-
--color-
|
|
269
|
-
--color-
|
|
270
|
-
--color-text: var(--zinc-950);
|
|
271
|
-
--color-text-
|
|
272
|
-
--color-
|
|
273
|
-
--color-border:
|
|
270
|
+
--color-bg: light-dark(white, var(--zinc-950));
|
|
271
|
+
--color-text: light-dark(var(--zinc-950), var(--zinc-50));
|
|
272
|
+
--color-text-reversed: light-dark(var(--zinc-50), var(--zinc-950));
|
|
273
|
+
--color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
|
|
274
|
+
--color-border-light: light-dark(var(--zinc-100), var(--zinc-900));
|
|
275
|
+
--color-border: light-dark(var(--zinc-200), var(--zinc-800));
|
|
276
|
+
|
|
277
|
+
/* Accent colors */
|
|
278
|
+
--color-primary: light-dark(var(--zinc-900), var(--zinc-50));
|
|
279
|
+
--color-negative: light-dark(var(--red-600), var(--red-900));
|
|
280
|
+
--color-positive: light-dark(var(--green-600), var(--green-900));
|
|
274
281
|
|
|
275
282
|
/* Filtered color values */
|
|
276
|
-
--color-filter-
|
|
277
|
-
--color-filter-
|
|
283
|
+
--color-filter-text: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
|
|
284
|
+
--color-filter-text-reversed: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
|
|
278
285
|
|
|
279
|
-
/* Redefine named color values for dark mode */
|
|
280
286
|
@media (prefers-color-scheme: dark) {
|
|
281
|
-
--color-
|
|
282
|
-
--color-
|
|
283
|
-
--color-text: white;
|
|
284
|
-
--color-text-reversed: var(--zinc-950);
|
|
285
|
-
--color-text-subtle: var(--zinc-400);
|
|
286
|
-
--color-border: var(--zinc-700);
|
|
287
|
-
--color-filter-black: var(--invert);
|
|
288
|
-
--color-filter-white: var(--invert-0);
|
|
287
|
+
--color-filter-text: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
|
|
288
|
+
--color-filter-text-reversed: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
|
|
289
289
|
}
|
|
290
290
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.dialog {
|
|
2
|
+
background-color: var(--dialog-background, var(--color-bg));
|
|
3
|
+
border: 1px solid var(--dialog-border-color, var(--color-border));
|
|
4
|
+
border-radius: var(--dialog-border-radius, var(--rounded-lg));
|
|
5
|
+
box-shadow: var(--dialog-shadow, var(--shadow-lg));
|
|
6
|
+
color: var(--dialog-color, var(--color-text));
|
|
7
|
+
margin: auto; inline-size: 100%;
|
|
8
|
+
max-inline-size: var(--dialog-size, var(--width-lg));
|
|
9
|
+
padding: var(--dialog-padding, var(--size-6));
|
|
10
|
+
|
|
11
|
+
&::backdrop {
|
|
12
|
+
background-color: var(--dialog-backdrop-background, #000c);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Setup transition */
|
|
16
|
+
&, &::backdrop {
|
|
17
|
+
opacity: 0; transition: all var(--time-300) allow-discrete;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Fade in */
|
|
21
|
+
&[open], &[open]::backdrop {
|
|
22
|
+
opacity: 1
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Fade out */
|
|
26
|
+
@starting-style {
|
|
27
|
+
&[open], &[open]::backdrop { opacity: 0; }
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Responsiveness */
|
|
31
|
+
@media (width <= 40rem) {
|
|
32
|
+
border-radius: 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
.input {
|
|
2
|
+
appearance: none;
|
|
3
|
+
background-color: var(--input-background, transparent);
|
|
4
|
+
border-radius: var(--input-border-radius, var(--rounded-md));
|
|
5
|
+
border: 1px solid var(--input-border-color, var(--color-border));
|
|
6
|
+
box-shadow: var(--input-shadow, var(--shadow-xs));
|
|
7
|
+
font-size: var(--input-font-size, var(--text-sm));
|
|
8
|
+
inline-size: 100%;
|
|
9
|
+
padding: var(--input-padding, .5rem .75rem);
|
|
10
|
+
|
|
11
|
+
&::file-selector-button {
|
|
12
|
+
font-weight: var(--font-medium);
|
|
13
|
+
margin-inline-end: var(--size-2);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&:is(textarea) {
|
|
17
|
+
field-sizing: content;
|
|
18
|
+
min-block-size: var(--input-lines, 4lh);
|
|
19
|
+
resize: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:is(select):not([multiple]) {
|
|
23
|
+
background-image: var(--icon-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(113,113,122)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E"));
|
|
24
|
+
background-position: center right var(--icon-chevron-padding, .75rem);
|
|
25
|
+
background-size: 1rem auto;
|
|
26
|
+
background-repeat: no-repeat;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:disabled {
|
|
30
|
+
cursor: not-allowed;
|
|
31
|
+
opacity: var(--opacity-50);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&::placeholder {
|
|
35
|
+
color: var(--color-text-subtle);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[type="checkbox"], [type="radio"] {
|
|
40
|
+
accent-color: var(--color-primary);
|
|
41
|
+
height: var(--check-size, var(--size-4));
|
|
42
|
+
width: var(--check-size, var(--size-4));
|
|
43
|
+
}
|
|
@@ -23,7 +23,7 @@
|
|
|
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-
|
|
26
|
+
.gap-small { column-gap: 0.5rem; row-gap: 0.5rem; }
|
|
27
27
|
|
|
28
28
|
/****************************************************************
|
|
29
29
|
* Text
|
|
@@ -60,6 +60,8 @@
|
|
|
60
60
|
|
|
61
61
|
.text-primary { color: var(--color-text); }
|
|
62
62
|
.text-reversed { color: var(--color-text-reversed); }
|
|
63
|
+
.text-negative { color: var(--color-negative); }
|
|
64
|
+
.text-positive { color: var(--color-positive); }
|
|
63
65
|
.text-subtle { color: var(--color-text-subtle); }
|
|
64
66
|
|
|
65
67
|
.text-xs { font-size: var(--text-xs); }
|
|
@@ -82,12 +84,14 @@
|
|
|
82
84
|
.bg-main { background-color: var(--color-bg); }
|
|
83
85
|
.bg-black { background-color: var(--color-text); }
|
|
84
86
|
.bg-white { background-color: var(--color-text-reversed); }
|
|
85
|
-
.bg-shade { background-color: var(--color-border); }
|
|
87
|
+
.bg-shade { background-color: var(--color-border-light); }
|
|
86
88
|
.bg-transparent { background-color: transparent; }
|
|
87
89
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
90
|
+
/****************************************************************
|
|
91
|
+
* SVG colors
|
|
92
|
+
*****************************************************************/
|
|
93
|
+
.colorize-black { filter: var(--color-filter-text); }
|
|
94
|
+
.colorize-white { filter: var(--color-filter-text-reversed); }
|
|
91
95
|
|
|
92
96
|
/****************************************************************
|
|
93
97
|
* Border
|
|
@@ -141,16 +145,6 @@
|
|
|
141
145
|
.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
|
|
142
146
|
.overflow-hidden { overflow: hidden; }
|
|
143
147
|
|
|
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
|
-
|
|
154
148
|
/****************************************************************
|
|
155
149
|
* Margin
|
|
156
150
|
*****************************************************************/
|
|
@@ -289,3 +283,16 @@
|
|
|
289
283
|
.pie-6 { padding-inline-end: var(--size-6); }
|
|
290
284
|
.pie-8 { padding-inline-end: var(--size-8); }
|
|
291
285
|
.pie-10 { padding-inline-end: var(--size-10); }
|
|
286
|
+
|
|
287
|
+
/****************************************************************
|
|
288
|
+
* Accessibility
|
|
289
|
+
*****************************************************************/
|
|
290
|
+
.sr-only {
|
|
291
|
+
position: absolute;
|
|
292
|
+
width: 1px; height: 1px;
|
|
293
|
+
padding: 0; margin: -1px;
|
|
294
|
+
overflow: hidden;
|
|
295
|
+
clip: rect(0, 0, 0, 0);
|
|
296
|
+
white-space: nowrap;
|
|
297
|
+
border-width: 0;
|
|
298
|
+
}
|
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.9
|
|
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-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -20,12 +20,16 @@ files:
|
|
|
20
20
|
- Rakefile
|
|
21
21
|
- app/assets/stylesheets/_reset.css
|
|
22
22
|
- app/assets/stylesheets/animations.css
|
|
23
|
+
- app/assets/stylesheets/base.css
|
|
23
24
|
- app/assets/stylesheets/borders.css
|
|
24
25
|
- app/assets/stylesheets/buttons.css
|
|
25
26
|
- app/assets/stylesheets/colors.css
|
|
27
|
+
- app/assets/stylesheets/dialog.css
|
|
26
28
|
- app/assets/stylesheets/effects.css
|
|
27
29
|
- app/assets/stylesheets/filters.css
|
|
28
30
|
- app/assets/stylesheets/grid.css
|
|
31
|
+
- app/assets/stylesheets/inputs.css
|
|
32
|
+
- app/assets/stylesheets/separators.css
|
|
29
33
|
- app/assets/stylesheets/sizes.css
|
|
30
34
|
- app/assets/stylesheets/transform.css
|
|
31
35
|
- app/assets/stylesheets/transition.css
|