css-zero 0.0.7 → 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 +63 -18
- data/app/assets/stylesheets/base.css +4 -0
- data/app/assets/stylesheets/buttons.css +24 -20
- data/app/assets/stylesheets/colors.css +17 -18
- 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 +35 -12
- 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,38 +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",
|
|
117
|
+
<button class="btn">
|
|
118
|
+
<%= image_tag "plus.svg", role: "presentation", size: 20 %>
|
|
119
|
+
<span>Icon button</span>
|
|
80
120
|
</button>
|
|
81
121
|
|
|
82
|
-
<button class="btn
|
|
83
|
-
|
|
84
|
-
</button>
|
|
85
|
-
|
|
86
|
-
<button class="btn btn--small">
|
|
87
|
-
Button small
|
|
122
|
+
<button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
|
|
123
|
+
Custom button
|
|
88
124
|
</button>
|
|
89
125
|
</div>
|
|
90
126
|
```
|
|
91
127
|
|
|
92
|
-
##
|
|
128
|
+
## Dialog
|
|
93
129
|
|
|
94
|
-
|
|
130
|
+
<img width="572" alt="Dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/381dd7eb-8024-4ffc-992a-d47d370a3c24">
|
|
95
131
|
|
|
96
|
-
|
|
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>
|
|
97
142
|
|
|
98
|
-
|
|
143
|
+
<button class="btn" onClick="my_modal.showModal();">Show modal</button>
|
|
144
|
+
```
|
|
99
145
|
|
|
100
146
|
## Customization
|
|
101
147
|
|
|
@@ -104,7 +150,6 @@ Soon...
|
|
|
104
150
|
```css
|
|
105
151
|
:root {
|
|
106
152
|
--color-bg: white;
|
|
107
|
-
--color-bg-surface: var(--zinc-100);
|
|
108
153
|
--color-text: var(--zinc-950);
|
|
109
154
|
--color-text-reversed: white;
|
|
110
155
|
--color-text-subtle: var(--zinc-500);
|
|
@@ -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(--btn-column-gap, var(--size-1));
|
|
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: var(--
|
|
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,28 +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-
|
|
271
|
-
--color-text: var(--zinc-
|
|
272
|
-
--color-
|
|
273
|
-
--color-
|
|
274
|
-
|
|
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));
|
|
275
281
|
|
|
276
282
|
/* Filtered color values */
|
|
277
|
-
--color-filter-
|
|
278
|
-
--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%);
|
|
279
285
|
|
|
280
|
-
/* Redefine named color values for dark mode */
|
|
281
286
|
@media (prefers-color-scheme: dark) {
|
|
282
|
-
--color-
|
|
283
|
-
--color-
|
|
284
|
-
--color-bg-surface: var(--zinc-950);
|
|
285
|
-
--color-text: white;
|
|
286
|
-
--color-text-reversed: var(--zinc-950);
|
|
287
|
-
--color-border: rgba(255, 255, 255, 0.15);
|
|
288
|
-
--color-filter-black: var(--invert);
|
|
289
|
-
--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%);
|
|
290
289
|
}
|
|
291
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
|
+
}
|
|
@@ -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-small { 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); }
|
|
@@ -58,6 +60,8 @@
|
|
|
58
60
|
|
|
59
61
|
.text-primary { color: var(--color-text); }
|
|
60
62
|
.text-reversed { color: var(--color-text-reversed); }
|
|
63
|
+
.text-negative { color: var(--color-negative); }
|
|
64
|
+
.text-positive { color: var(--color-positive); }
|
|
61
65
|
.text-subtle { color: var(--color-text-subtle); }
|
|
62
66
|
|
|
63
67
|
.text-xs { font-size: var(--text-xs); }
|
|
@@ -78,24 +82,28 @@
|
|
|
78
82
|
* Background
|
|
79
83
|
*****************************************************************/
|
|
80
84
|
.bg-main { background-color: var(--color-bg); }
|
|
85
|
+
.bg-black { background-color: var(--color-text); }
|
|
81
86
|
.bg-white { background-color: var(--color-text-reversed); }
|
|
82
|
-
.bg-
|
|
87
|
+
.bg-shade { background-color: var(--color-border-light); }
|
|
83
88
|
.bg-transparent { background-color: transparent; }
|
|
84
89
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
90
|
+
/****************************************************************
|
|
91
|
+
* SVG colors
|
|
92
|
+
*****************************************************************/
|
|
93
|
+
.colorize-black { filter: var(--color-filter-text); }
|
|
94
|
+
.colorize-white { filter: var(--color-filter-text-reversed); }
|
|
88
95
|
|
|
89
96
|
/****************************************************************
|
|
90
97
|
* Border
|
|
91
98
|
*****************************************************************/
|
|
99
|
+
.border-0 { border: 0; }
|
|
92
100
|
.border { border: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
93
101
|
.border-t { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
94
102
|
.border-b { border-bottom: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
95
103
|
.border-l { border-left: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
96
104
|
.border-r { border-right: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
97
|
-
.border-0 { border: 0; }
|
|
98
105
|
|
|
106
|
+
.rounded-none { border-radius: none; }
|
|
99
107
|
.rounded-sm { border-radius: var(--rounded-sm); }
|
|
100
108
|
.rounded { border-radius: var(--rounded); }
|
|
101
109
|
.rounded-md { border-radius: var(--rounded-md); }
|
|
@@ -104,11 +112,11 @@
|
|
|
104
112
|
.rounded-2xl { border-radius: var(--rounded-2xl); }
|
|
105
113
|
.rounded-3xl { border-radius: var(--rounded-3xl); }
|
|
106
114
|
.rounded-full { border-radius: var(--rounded-full); }
|
|
107
|
-
.rounded-none { border-radius: none; }
|
|
108
115
|
|
|
109
116
|
/****************************************************************
|
|
110
117
|
* Shadow
|
|
111
118
|
*****************************************************************/
|
|
119
|
+
.shadow-none { box-shadow: none; }
|
|
112
120
|
.shadow-xs { box-shadow: var(--shadow-xs); }
|
|
113
121
|
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
114
122
|
.shadow { box-shadow: var(--shadow); }
|
|
@@ -116,7 +124,6 @@
|
|
|
116
124
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
117
125
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
|
118
126
|
.shadow-2xl { box-shadow: var(--shadow-2xl); }
|
|
119
|
-
.shadow-none { box-shadow: none; }
|
|
120
127
|
|
|
121
128
|
/****************************************************************
|
|
122
129
|
* Layout
|
|
@@ -126,6 +133,7 @@
|
|
|
126
133
|
.inline-block { display: inline-block; }
|
|
127
134
|
|
|
128
135
|
.relative { position: relative; }
|
|
136
|
+
.sticky { position: sticky; }
|
|
129
137
|
|
|
130
138
|
.min-w-0 { min-inline-size: 0; }
|
|
131
139
|
.max-w-full { max-inline-size: 100%; }
|
|
@@ -133,7 +141,8 @@
|
|
|
133
141
|
.h-full { block-size: 100%; }
|
|
134
142
|
.w-full { inline-size: 100%; }
|
|
135
143
|
|
|
136
|
-
.overflow-auto { overflow: auto; }
|
|
144
|
+
.overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
|
|
145
|
+
.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
|
|
137
146
|
.overflow-hidden { overflow: hidden; }
|
|
138
147
|
|
|
139
148
|
/****************************************************************
|
|
@@ -147,6 +156,7 @@
|
|
|
147
156
|
.m-6 { margin: var(--size-6); }
|
|
148
157
|
.m-8 { margin: var(--size-8); }
|
|
149
158
|
.m-10 { margin: var(--size-10); }
|
|
159
|
+
.m-auto { margin: auto; }
|
|
150
160
|
|
|
151
161
|
.mb-0 { margin-block: 0; }
|
|
152
162
|
.mb-0\.5 { margin-block: var(--size-0_5); }
|
|
@@ -273,3 +283,16 @@
|
|
|
273
283
|
.pie-6 { padding-inline-end: var(--size-6); }
|
|
274
284
|
.pie-8 { padding-inline-end: var(--size-8); }
|
|
275
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
|