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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7304e9420f4574059f34a6be6f69f7dca6d94b3e2fd0be6d497cc59bdab99a52
4
- data.tar.gz: ed1bc4913357f8eac01ab39cf26f05b60399bafd9c707520d1fb59853a55de5b
3
+ metadata.gz: 25eac2e80a7b075843033e5db405786dd14e9f802cb47ce2fd1f0375e7841565
4
+ data.tar.gz: 52cd0c2ed8d8eb740d44e29210ff8652088cac7509ccf024a957f837ada2cfc2
5
5
  SHA512:
6
- metadata.gz: ac3e38e755a91f8b33a88f0880ceb12ff6a582a861bad0e5031147d070b0e794d779524b96e46bf4cc8640e002b8342f64b58c685afa76e04ae59c1f72484568
7
- data.tar.gz: 82a577ab39f939842b1e1d1b30827f43cf692acb3cf6feeac56364793a8a6e95f0de33779971851d6ff17dfb7fc91a97d55348743674db3b309a682a0ac000da
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
- height: 0; /* 1 */
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
- bottom: -0.25em;
158
+ inset-block-end: -0.25em;
159
159
  }
160
160
 
161
161
  sup {
162
- top: -0.5em;
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
- height: auto;
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-width: 100%;
325
- height: auto;
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
  /****************************************************************
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.15"
2
+ VERSION = "0.0.16"
3
3
  end
@@ -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 */
@@ -12,7 +12,7 @@
12
12
 
13
13
  th {
14
14
  font-weight: var(--font-medium);
15
- text-align: left;
15
+ text-align: start;
16
16
  }
17
17
 
18
18
  th, td {
@@ -12,7 +12,7 @@ export default class extends Controller {
12
12
  }
13
13
 
14
14
  close() {
15
- this.boxTarget.close("dismiss")
15
+ this.boxTarget.close()
16
16
  }
17
17
 
18
18
  closeOnClickOutside({ target }) {
@@ -1,20 +1,17 @@
1
1
  :root {
2
- /* Color Scheme */
3
- color-scheme: light dark;
4
-
5
2
  /* Abstractions */
6
- --color-bg: light-dark(white, var(--zinc-950));
7
- --color-text: light-dark(black, white);
8
- --color-text-reversed: light-dark(white, black);
9
- --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
10
- --color-border: light-dark(var(--zinc-200), var(--zinc-800));
11
- --color-border-darker: light-dark(var(--zinc-400), var(--zinc-300));
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: light-dark(var(--zinc-900), var(--zinc-50));
15
- --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
16
- --color-negative: light-dark(var(--red-600), var(--red-900));
17
- --color-positive: light-dark(var(--green-600), var(--green-900));
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.15
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-03 00:00:00.000000000 Z
11
+ date: 2024-07-04 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com