css-zero 0.0.3 → 0.0.5
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 +15 -3
- data/app/assets/stylesheets/buttons.css +32 -0
- data/app/assets/stylesheets/colors.css +4 -5
- data/app/assets/stylesheets/zutilities.css +9 -8
- data/lib/css_zero/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6ffc5f62e22b31b31e16f686c8b0bfa28f0705883feba2c8a1e0ee3c3fba899b
|
|
4
|
+
data.tar.gz: d95a6605554c3edaa33467c21f5d3f3c6a444d4d2b52b959b93ead0ba21a82e2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c44ca53734614ef31bc070444a9fe428bb8c74a20b2b067737c81d1dde48e06af1720ae648887757caa70af0ea9959cddf48eb0221dd7e445451997efc1fa960
|
|
7
|
+
data.tar.gz: a65c232a3e2d7e94457572f45ffba5663faabba287a485e9d318e3638d216b82c1e31b3a61e45adaaaad7a8c48e2c30c21cd41de26a88d7f3e6452cf6d4597ac
|
data/README.md
CHANGED
|
@@ -42,23 +42,35 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
42
42
|
- [Transform](app/assets/stylesheets/transform.css)
|
|
43
43
|
- [Transition](app/assets/stylesheets/transition.css)
|
|
44
44
|
- [Animations](app/assets/stylesheets/animations.css)
|
|
45
|
+
- [Buttons](app/assets/stylesheets/buttons.css)
|
|
45
46
|
- [Utilities](app/assets/stylesheets/zutilities.css)
|
|
46
47
|
|
|
47
48
|
## Customization
|
|
48
49
|
|
|
50
|
+
Global level
|
|
51
|
+
|
|
49
52
|
```css
|
|
50
53
|
:root {
|
|
51
|
-
--color-negative: var(--pink-700);
|
|
52
|
-
--color-postive: var(--lime-700);
|
|
53
54
|
--color-bg: white;
|
|
54
55
|
--color-bg-surface: var(--zinc-100);
|
|
55
56
|
--color-text: var(--zinc-950);
|
|
56
57
|
--color-text-reversed: white;
|
|
57
|
-
--color-text-subtle: var(--zinc-
|
|
58
|
+
--color-text-subtle: var(--zinc-500);
|
|
58
59
|
--color-border: var(--zinc-200);
|
|
59
60
|
}
|
|
60
61
|
```
|
|
61
62
|
|
|
63
|
+
Component level
|
|
64
|
+
|
|
65
|
+
```css
|
|
66
|
+
.btn--colored {
|
|
67
|
+
--btn-background: var(--cyan-500);
|
|
68
|
+
--btn-color: var(--cyan-950);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Style level
|
|
73
|
+
|
|
62
74
|
```html
|
|
63
75
|
<div class="flex flex-column w-full gap" style="--row-gap: 0.5rem">
|
|
64
76
|
More HTML tags here...
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.btn {
|
|
2
|
+
align-items: center;
|
|
3
|
+
background-color: var(--btn-background, var(--color-primary));
|
|
4
|
+
border-radius: var(--btn-border-radius, var(--rounded-lg));
|
|
5
|
+
border: 1px solid var(--btn-border-color, transparent);
|
|
6
|
+
color: var(--btn-color, white);
|
|
7
|
+
column-gap: var(--btn-column-gap, var(--size-1));
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
font-size: var(--btn-font-size, var(--text-sm));
|
|
11
|
+
font-weight: var(--btn-font-weight, var(--font-semibold));
|
|
12
|
+
justify-content: center;
|
|
13
|
+
line-height: var(--btn-line-height, var(--leading-6));
|
|
14
|
+
padding: var(--btn-padding, var(--size-1_5) var(--size-3_5));
|
|
15
|
+
text-align: center;
|
|
16
|
+
|
|
17
|
+
&:disabled {
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
filter: var(--grayscale) opacity(0.5);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.btn--plain {
|
|
24
|
+
--btn-background: transparent;
|
|
25
|
+
--btn-border-color: var(--color-border);
|
|
26
|
+
--btn-color: var(--color-text);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.btn--outline {
|
|
30
|
+
--btn-background: transparent;
|
|
31
|
+
--btn-color: var(--color-text);
|
|
32
|
+
}
|
|
@@ -265,23 +265,22 @@
|
|
|
265
265
|
--rose-950: #4c0519;
|
|
266
266
|
|
|
267
267
|
/* Abstractions */
|
|
268
|
-
--color-
|
|
269
|
-
--color-postive: var(--lime-700);
|
|
268
|
+
--color-primary: var(--zinc-900);
|
|
270
269
|
--color-bg: white;
|
|
271
270
|
--color-bg-surface: var(--zinc-100);
|
|
272
271
|
--color-text: var(--zinc-950);
|
|
273
272
|
--color-text-reversed: white;
|
|
274
|
-
--color-text-subtle: var(--zinc-
|
|
273
|
+
--color-text-subtle: var(--zinc-500);
|
|
275
274
|
--color-border: var(--zinc-200);
|
|
276
275
|
|
|
277
276
|
/* Redefine named color values for dark mode */
|
|
278
277
|
@media (prefers-color-scheme: dark) {
|
|
279
|
-
--color-
|
|
280
|
-
--color-postive: var(--lime-300);
|
|
278
|
+
--color-primary: var(--zinc-600);
|
|
281
279
|
--color-bg: var(--zinc-900);
|
|
282
280
|
--color-bg-surface: var(--zinc-950);
|
|
283
281
|
--color-text: white;
|
|
284
282
|
--color-text-reversed: var(--zinc-950);
|
|
283
|
+
--color-text-subtle: var(--zinc-400);
|
|
285
284
|
--color-border: rgba(255, 255, 255, 0.1);
|
|
286
285
|
}
|
|
287
286
|
}
|
|
@@ -74,8 +74,6 @@
|
|
|
74
74
|
.text-primary { color: var(--color-text); }
|
|
75
75
|
.text-reversed { color: var(--color-text-reversed); }
|
|
76
76
|
.text-subtle { color: var(--color-text-subtle); }
|
|
77
|
-
.text-negative { color: var(--color-negative); }
|
|
78
|
-
.text-positive { color: var(--color-positive); }
|
|
79
77
|
|
|
80
78
|
.text-xs { font-size: var(--text-xs); }
|
|
81
79
|
.text-sm { font-size: var(--text-sm); }
|
|
@@ -98,14 +96,17 @@
|
|
|
98
96
|
/****************************************************************
|
|
99
97
|
* Border
|
|
100
98
|
*****************************************************************/
|
|
99
|
+
.border { border: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
100
|
+
.border-t { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
101
|
+
.border-b { border-bottom: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
102
|
+
.border-l { border-left: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
103
|
+
.border-r { border-right: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
|
|
101
104
|
.border-0 { border: 0; }
|
|
102
|
-
.border { border: var(--border-size, 1px) solid var(--color-border); }
|
|
103
|
-
.border-t { border-top: var(--border-size, 1px) solid var(--color-border); }
|
|
104
|
-
.border-b { border-bottom: var(--border-size, 1px) solid var(--color-border); }
|
|
105
|
-
.border-l { border-left: var(--border-size, 1px) solid var(--color-border); }
|
|
106
|
-
.border-r { border-right: var(--border-size, 1px) solid var(--color-border); }
|
|
107
105
|
|
|
108
|
-
.
|
|
106
|
+
.rounded-sm { border-radius: var(--rounded-sm); }
|
|
107
|
+
.rounded { border-radius: var(--rounded); }
|
|
108
|
+
.rounded-lg { border-radius: var(--rounded-lg); }
|
|
109
|
+
.rounded-full { border-radius: var(--rounded-full); }
|
|
109
110
|
|
|
110
111
|
/****************************************************************
|
|
111
112
|
* Shadow
|
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.5
|
|
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-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -21,6 +21,7 @@ files:
|
|
|
21
21
|
- app/assets/stylesheets/_reset.css
|
|
22
22
|
- app/assets/stylesheets/animations.css
|
|
23
23
|
- app/assets/stylesheets/borders.css
|
|
24
|
+
- app/assets/stylesheets/buttons.css
|
|
24
25
|
- app/assets/stylesheets/colors.css
|
|
25
26
|
- app/assets/stylesheets/effects.css
|
|
26
27
|
- app/assets/stylesheets/filters.css
|