css-zero 0.0.15 → 0.0.16
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 -1
- data/app/assets/stylesheets/_reset.css +6 -6
- data/app/assets/stylesheets/zutilities.css +4 -0
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +4 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js +1 -1
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +25 -13
- 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: 25eac2e80a7b075843033e5db405786dd14e9f802cb47ce2fd1f0375e7841565
|
4
|
+
data.tar.gz: 52cd0c2ed8d8eb740d44e29210ff8652088cac7509ccf024a957f837ada2cfc2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 39e8b29cb429cf7e8d4d180682c17cef15e5105f51fc9c0b88ece548f688a41558569f2aeda76bf9365df202b6e01f791dd7520b5225ef0357a80e1d0a39ed70
|
7
|
+
data.tar.gz: 52d7914ad684c3b27766979afa42834796a361846dc679d2a44300ed1858a92490f1f5c09665b0bb40a0e4671303de8402dc4127eda6ab25d8cebc7df389318c
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# CSS Zero
|
2
2
|
|
3
|
-
An opinionated CSS starter kit for your application. You can think of it like a "no build" Tailwind CSS.
|
3
|
+
An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
|
4
4
|
|
5
5
|
## Installation
|
6
6
|
|
@@ -413,6 +413,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
413
413
|
```
|
414
414
|
</details>
|
415
415
|
|
416
|
+
### More components soon...
|
417
|
+
|
416
418
|
## Development
|
417
419
|
|
418
420
|
To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
@@ -60,7 +60,7 @@ body {
|
|
60
60
|
*/
|
61
61
|
|
62
62
|
hr {
|
63
|
-
|
63
|
+
block-size: 0; /* 1 */
|
64
64
|
color: inherit; /* 2 */
|
65
65
|
border-block-start-width: 1px; /* 3 */
|
66
66
|
}
|
@@ -155,11 +155,11 @@ sup {
|
|
155
155
|
}
|
156
156
|
|
157
157
|
sub {
|
158
|
-
|
158
|
+
inset-block-end: -0.25em;
|
159
159
|
}
|
160
160
|
|
161
161
|
sup {
|
162
|
-
|
162
|
+
inset-block-start: -0.5em;
|
163
163
|
}
|
164
164
|
|
165
165
|
/*
|
@@ -242,7 +242,7 @@ progress {
|
|
242
242
|
|
243
243
|
::-webkit-inner-spin-button,
|
244
244
|
::-webkit-outer-spin-button {
|
245
|
-
|
245
|
+
block-size: auto;
|
246
246
|
}
|
247
247
|
|
248
248
|
/*
|
@@ -321,8 +321,8 @@ object {
|
|
321
321
|
|
322
322
|
img,
|
323
323
|
video {
|
324
|
-
max-
|
325
|
-
|
324
|
+
max-inline-size: 100%;
|
325
|
+
block-size: auto;
|
326
326
|
}
|
327
327
|
|
328
328
|
/*
|
@@ -16,6 +16,9 @@
|
|
16
16
|
.items-center { align-items: center; }
|
17
17
|
|
18
18
|
.grow { flex-grow: 1; }
|
19
|
+
.grow-0 { flex-grow: 0; }
|
20
|
+
|
21
|
+
.shrink { flex-shrink: 1; }
|
19
22
|
.shrink-0 { flex-shrink: 0; }
|
20
23
|
|
21
24
|
.self-start { align-self: start; }
|
@@ -85,6 +88,7 @@
|
|
85
88
|
.bg-main { background-color: var(--color-bg); }
|
86
89
|
.bg-black { background-color: var(--color-text); }
|
87
90
|
.bg-white { background-color: var(--color-text-reversed); }
|
91
|
+
.bg-shade { background-color: var(--color-secondary); }
|
88
92
|
.bg-transparent { background-color: transparent; }
|
89
93
|
|
90
94
|
/****************************************************************
|
data/lib/css_zero/version.rb
CHANGED
@@ -11,9 +11,9 @@
|
|
11
11
|
font-weight: var(--font-medium);
|
12
12
|
gap: var(--size-2);
|
13
13
|
justify-content: center;
|
14
|
+
min-inline-size: fit-content;
|
14
15
|
padding: var(--size-2) var(--size-4);
|
15
16
|
text-align: center;
|
16
|
-
white-space: nowrap;
|
17
17
|
|
18
18
|
img:not([class]) {
|
19
19
|
filter: var(--btn-icon-color, var(--color-filter-text-reversed));
|
@@ -7,7 +7,6 @@
|
|
7
7
|
inline-size: var(--size-full);
|
8
8
|
margin: auto;
|
9
9
|
max-inline-size: var(--width-lg);
|
10
|
-
overflow: hidden;
|
11
10
|
padding: var(--size-6);
|
12
11
|
|
13
12
|
&::backdrop {
|
@@ -19,13 +18,13 @@
|
|
19
18
|
transform: var(--scale-95);
|
20
19
|
transition-behavior: allow-discrete;
|
21
20
|
transition-duration: var(--time-150);
|
22
|
-
transition-property: display overlay opacity transform;
|
21
|
+
transition-property: display, overlay, opacity, transform;
|
23
22
|
|
24
23
|
&::backdrop {
|
25
24
|
opacity: 0;
|
26
25
|
transition-behavior: allow-discrete;
|
27
26
|
transition-duration: var(--time-150);
|
28
|
-
transition-property: display overlay opacity;
|
27
|
+
transition-property: display, overlay, opacity;
|
29
28
|
}
|
30
29
|
|
31
30
|
/* In animation */
|
@@ -55,8 +54,9 @@
|
|
55
54
|
}
|
56
55
|
|
57
56
|
.dialog__close {
|
57
|
+
inset-block-start: var(--size-4);
|
58
|
+
inset-inline-end: var(--size-4);
|
58
59
|
position: absolute;
|
59
|
-
inset: var(--size-4) var(--size-4) auto auto;
|
60
60
|
}
|
61
61
|
|
62
62
|
/* Prevent page scroll when dialog is open */
|
@@ -1,20 +1,17 @@
|
|
1
1
|
:root {
|
2
|
-
/* Color Scheme */
|
3
|
-
color-scheme: light dark;
|
4
|
-
|
5
2
|
/* Abstractions */
|
6
|
-
--color-bg:
|
7
|
-
--color-text:
|
8
|
-
--color-text-reversed:
|
9
|
-
--color-text-subtle:
|
10
|
-
--color-border:
|
11
|
-
--color-border-darker:
|
3
|
+
--color-bg: white;
|
4
|
+
--color-text: black;
|
5
|
+
--color-text-reversed: white;
|
6
|
+
--color-text-subtle: var(--zinc-500);
|
7
|
+
--color-border: var(--zinc-200);
|
8
|
+
--color-border-darker: var(--zinc-400);
|
12
9
|
|
13
10
|
/* Accent colors */
|
14
|
-
--color-primary:
|
15
|
-
--color-secondary:
|
16
|
-
--color-negative:
|
17
|
-
--color-positive:
|
11
|
+
--color-primary: var(--zinc-900);
|
12
|
+
--color-secondary: var(--zinc-100);
|
13
|
+
--color-negative: var(--red-600);
|
14
|
+
--color-positive: var(--green-600);
|
18
15
|
|
19
16
|
/* SVG color values */
|
20
17
|
--color-filter-text: invert(0);
|
@@ -23,6 +20,21 @@
|
|
23
20
|
--color-filter-positive: invert(48%) sepia(74%) saturate(520%) hue-rotate(90deg) brightness(89%) contrast(90%);
|
24
21
|
|
25
22
|
@media (prefers-color-scheme: dark) {
|
23
|
+
/* Abstractions */
|
24
|
+
--color-bg: var(--zinc-950);
|
25
|
+
--color-text: white;
|
26
|
+
--color-text-reversed: black;
|
27
|
+
--color-text-subtle: var(--zinc-400);
|
28
|
+
--color-border: var(--zinc-800);
|
29
|
+
--color-border-darker: var(--zinc-300);
|
30
|
+
|
31
|
+
/* Accent colors */
|
32
|
+
--color-primary: var(--zinc-50);
|
33
|
+
--color-secondary: var(--zinc-800);
|
34
|
+
--color-negative: var(--red-900);
|
35
|
+
--color-positive: var(--green-900);
|
36
|
+
|
37
|
+
/* SVG color values */
|
26
38
|
--color-filter-text: invert(100%);
|
27
39
|
--color-filter-text-reversed: invert(0);
|
28
40
|
--color-filter-negative: invert(15%) sepia(83%) saturate(2066%) hue-rotate(345deg) brightness(87%) contrast(88%);
|
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.16
|
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-07-
|
11
|
+
date: 2024-07-04 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email: lazaronixon@hotmail.com
|