css-zero 0.0.28 → 0.0.29

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: 5d00718d05a40dc614c0fda5d71c5959ad693c89e1fd5493c132a5d4144cbe5e
4
- data.tar.gz: b1f8b29d85f5ba031dfd416a80c57dc12d1b0903e0881c2e4cac3d18e2a39aa8
3
+ metadata.gz: 3cda5cb9b3086b51114cccdb4a7a10902beac2812c1998c4cae31ae3563c5b47
4
+ data.tar.gz: c6d552de01e769780b38865095f24ad74a14a1abfbdaff41fe93d8d88af025da
5
5
  SHA512:
6
- metadata.gz: 6e0e3afefccb4f99330a9c3a3942b8619714b8152dd24e04bb421029f55fdff57ec3e1fbde841036151586235e5dcc07a505f0d713d661e15dbfcb37477e9653
7
- data.tar.gz: f4207685a64ce0a9b70cc1553aa6cede199c9eda2238823c1f713a4049d38992e8fe28b76c64678c6854fc627144a283bba92b2314ac2f6958b3546bef9d001c
6
+ metadata.gz: c24dd54fb996f9e988fe204c48c60118d1de4a68effcd67cbda29e821fc00a6b16cacfda5e6e642d8bc3fbffa6497ee098d2c1c1930924d65c4856383a0ea786
7
+ data.tar.gz: 9a085d56fe698c68c736788ae62f193adab29d03761f77c8d03f8246d32c6c423aef5780a940d6fddb210e480d18e92a21bfb3df2df2f57185d1d39707c61520
data/README.md CHANGED
@@ -52,7 +52,6 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
52
52
  *= require transform
53
53
  *= require transition
54
54
  *= require typography
55
- *= require zindex
56
55
  *= require_tree .
57
56
  *= require_self
58
57
  *= require zutilities
@@ -44,7 +44,6 @@ html:has(dialog:modal[open]) {
44
44
  overflow: hidden;
45
45
  }
46
46
 
47
-
48
47
  /*
49
48
  Inherit line-height from `html` so users can set them as a class directly on the `html` element.
50
49
  */
@@ -202,14 +201,6 @@ input:where([type='button'], [type='reset'], [type='submit']),
202
201
  appearance: button;
203
202
  }
204
203
 
205
- /*
206
- Revert padding block, it can be noticed in select with multiple.
207
- */
208
-
209
- option {
210
- padding-block: revert;
211
- }
212
-
213
204
  /*
214
205
  Use the modern Firefox focus style for all focusable elements.
215
206
  */
@@ -303,14 +294,6 @@ textarea {
303
294
  color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
304
295
  }
305
296
 
306
- /*
307
- Make sure disabled buttons don't get the pointer cursor.
308
- */
309
-
310
- :disabled {
311
- cursor: default;
312
- }
313
-
314
297
  /*
315
298
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
316
299
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
@@ -106,27 +106,27 @@
106
106
  /****************************************************************
107
107
  * Opacity
108
108
  * Utilities for applying backdrop opacity filters to an element.
109
- * backdrop-filter: var(--opaqueness-45);
109
+ * backdrop-filter: var(--alpha-45);
110
110
  *****************************************************************/
111
- --opaqueness-0: opacity(0);
112
- --opaqueness-5: opacity(0.05);
113
- --opaqueness-10: opacity(0.1);
114
- --opaqueness-15: opacity(0.15);
115
- --opaqueness-20: opacity(0.2);
116
- --opaqueness-25: opacity(0.25);
117
- --opaqueness-30: opacity(0.3);
118
- --opaqueness-35: opacity(0.35);
119
- --opaqueness-40: opacity(0.4);
120
- --opaqueness-45: opacity(0.45);
121
- --opaqueness-50: opacity(0.5);
122
- --opaqueness-55: opacity(0.55);
123
- --opaqueness-60: opacity(0.6);
124
- --opaqueness-65: opacity(0.65);
125
- --opaqueness-70: opacity(0.7);
126
- --opaqueness-75: opacity(0.75);
127
- --opaqueness-80: opacity(0.8);
128
- --opaqueness-85: opacity(0.85);
129
- --opaqueness-90: opacity(0.9);
130
- --opaqueness-95: opacity(0.95);
131
- --opaqueness-100: opacity(1);
111
+ --alpha-0: opacity(0);
112
+ --alpha-5: opacity(0.05);
113
+ --alpha-10: opacity(0.1);
114
+ --alpha-15: opacity(0.15);
115
+ --alpha-20: opacity(0.2);
116
+ --alpha-25: opacity(0.25);
117
+ --alpha-30: opacity(0.3);
118
+ --alpha-35: opacity(0.35);
119
+ --alpha-40: opacity(0.4);
120
+ --alpha-45: opacity(0.45);
121
+ --alpha-50: opacity(0.5);
122
+ --alpha-55: opacity(0.55);
123
+ --alpha-60: opacity(0.6);
124
+ --alpha-65: opacity(0.65);
125
+ --alpha-70: opacity(0.7);
126
+ --alpha-75: opacity(0.75);
127
+ --alpha-80: opacity(0.8);
128
+ --alpha-85: opacity(0.85);
129
+ --alpha-90: opacity(0.9);
130
+ --alpha-95: opacity(0.95);
131
+ --alpha-100: opacity(1);
132
132
  }
@@ -88,11 +88,7 @@
88
88
  * Aspect Ratio
89
89
  *****************************************************************/
90
90
  --aspect-square: 1/1;
91
- --aspect-landscape: 4/3;
92
- --aspect-portrait: 3/4;
93
91
  --aspect-widescreen: 16/9;
94
- --aspect-ultrawide: 18/5;
95
- --aspect-golden: 1.6180/1;
96
92
 
97
93
  /****************************************************************
98
94
  * Breakpoints
@@ -4,8 +4,8 @@
4
4
  * Variables for controlling which CSS properties transition.
5
5
  * transition-property: var(--transition);
6
6
  *****************************************************************/
7
- --transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
8
- --transition-colors: background-color, border-color, color, fill, stroke;
7
+ --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
8
+ --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
9
9
 
10
10
  /****************************************************************
11
11
  * Transition Timing
@@ -24,9 +24,8 @@
24
24
  /****************************************************************
25
25
  * Transition Timing Function
26
26
  * Variables for controlling the easing of CSS transitions.
27
- * transition-timing-function: var(--ease-linear);
27
+ * transition-timing-function: var(--ease-in);
28
28
  *****************************************************************/
29
- --ease-linear: linear;
30
29
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
31
30
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
32
31
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -28,37 +28,6 @@
28
28
  .gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
29
29
  .gap-sm { column-gap: 0.5rem; row-gap: 0.5rem; }
30
30
 
31
- /****************************************************************
32
- * Grid
33
- *****************************************************************/
34
- .grid { display: grid; }
35
-
36
- .grid-cols-1 { grid-template-columns: var(--grid-1); }
37
- .grid-cols-2 { grid-template-columns: var(--grid-2); }
38
- .grid-cols-3 { grid-template-columns: var(--grid-3); }
39
- .grid-cols-4 { grid-template-columns: var(--grid-4); }
40
- .grid-cols-5 { grid-template-columns: var(--grid-5); }
41
- .grid-cols-6 { grid-template-columns: var(--grid-6); }
42
- .grid-cols-7 { grid-template-columns: var(--grid-7); }
43
- .grid-cols-8 { grid-template-columns: var(--grid-8); }
44
- .grid-cols-9 { grid-template-columns: var(--grid-9); }
45
- .grid-cols-10 { grid-template-columns: var(--grid-10); }
46
- .grid-cols-11 { grid-template-columns: var(--grid-11); }
47
- .grid-cols-12 { grid-template-columns: var(--grid-12); }
48
-
49
- .col-span-1 { grid-column: var(--span-1); }
50
- .col-span-2 { grid-column: var(--span-2); }
51
- .col-span-3 { grid-column: var(--span-3); }
52
- .col-span-4 { grid-column: var(--span-4); }
53
- .col-span-5 { grid-column: var(--span-5); }
54
- .col-span-6 { grid-column: var(--span-6); }
55
- .col-span-7 { grid-column: var(--span-7); }
56
- .col-span-8 { grid-column: var(--span-8); }
57
- .col-span-9 { grid-column: var(--span-9); }
58
- .col-span-10 { grid-column: var(--span-10); }
59
- .col-span-11 { grid-column: var(--span-11); }
60
- .col-span-12 { grid-column: var(--span-12); }
61
-
62
31
  /****************************************************************
63
32
  * Text
64
33
  *****************************************************************/
@@ -151,6 +120,7 @@
151
120
 
152
121
  .border-solid { border-style: solid; }
153
122
  .border-dashed { border-style: dashed; }
123
+ .border-dotted { border-style: dotted; }
154
124
 
155
125
  .rounded-none { border-radius: none; }
156
126
  .rounded-sm { border-radius: var(--rounded-sm); }
@@ -340,11 +310,10 @@
340
310
  * Accessibility
341
311
  *****************************************************************/
342
312
  .sr-only {
343
- position: absolute;
344
- width: 1px; height: 1px;
345
- padding: 0; margin: -1px;
313
+ block-size: 1px;
314
+ clip-path: inset(50%);
315
+ inline-size: 1px;
346
316
  overflow: hidden;
347
- clip: rect(0, 0, 0, 0);
317
+ position: absolute;
348
318
  white-space: nowrap;
349
- border-width: 0;
350
319
  }
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.28"
2
+ VERSION = "0.0.29"
3
3
  end
@@ -1,10 +1,16 @@
1
1
  :where(.accordion) {
2
2
  details {
3
3
  border-block-end-width: var(--border);
4
- transition: padding var(--time-150) var(--ease-in-out);
5
4
 
6
- &[open] {
7
- padding-block-end: var(--size-4);
5
+ &::details-content {
6
+ block-size: 0; overflow: hidden;
7
+ transition-behavior: allow-discrete;
8
+ transition-duration: var(--time-150);
9
+ transition-property: content-visibility height;
10
+ }
11
+
12
+ &[open]::details-content {
13
+ block-size: calc-size(auto);
8
14
  }
9
15
 
10
16
  &[open] summary::after {
@@ -40,7 +46,7 @@
40
46
  content: "";
41
47
  filter: var(--color-filter-text);
42
48
  inline-size: var(--size-4);
43
- transition: transform var(--time-200) var(--ease-in-out);
49
+ transition: transform var(--time-200);
44
50
  }
45
51
  }
46
52
  }
@@ -10,7 +10,7 @@
10
10
  font-weight: var(--font-medium);
11
11
  gap: var(--size-2);
12
12
  justify-content: center;
13
- min-inline-size: fit-content;
13
+ white-space: nowrap;
14
14
  padding: var(--size-2) var(--size-4);
15
15
  text-align: center;
16
16
 
@@ -60,25 +60,19 @@
60
60
  --btn-icon-color: var(--color-filter-negative);
61
61
  }
62
62
 
63
- .btn--loading {
64
- [aria-busy] &:disabled {
65
- position: relative;
66
-
67
- > * {
68
- visibility: hidden;
69
- }
63
+ [aria-busy] .btn--loading:disabled {
64
+ > * {
65
+ visibility: hidden;
66
+ }
70
67
 
71
- &::after {
72
- animation: var(--animate-spin);
73
- animation-duration: 1s;
74
- background-image: url("loader-circle.svg");
75
- background-size: cover;
76
- block-size: var(--size-4);
77
- content: "";
78
- filter: var(--btn-icon-color, var(--color-filter-text-reversed));
79
- inline-size: var(--size-4);
80
- margin-inline: auto;
81
- position: absolute;
82
- }
68
+ &::after {
69
+ animation: spin 1s linear infinite;
70
+ background-image: url("loader-circle.svg");
71
+ background-size: cover;
72
+ block-size: var(--size-4);
73
+ content: "";
74
+ filter: var(--btn-icon-color, var(--color-filter-text-reversed));
75
+ inline-size: var(--size-4);
76
+ position: absolute;
83
77
  }
84
78
  }
@@ -14,7 +14,7 @@
14
14
 
15
15
  &::-webkit-scrollbar {
16
16
  display: none;
17
- }
17
+ }
18
18
 
19
19
  > * {
20
20
  flex: 0 0 100%;
@@ -7,6 +7,10 @@
7
7
  inline-size: var(--size-full);
8
8
  padding: var(--size-2) var(--size-3);
9
9
 
10
+ option {
11
+ padding-block: revert;
12
+ }
13
+
10
14
  &:is(textarea):not([rows]) {
11
15
  field-sizing: content;
12
16
  max-block-size: calc(10lh + var(--size-6));
@@ -26,15 +30,11 @@
26
30
  margin-inline-end: var(--size-2);
27
31
  }
28
32
 
29
- &:autofill {
33
+ &:-webkit-autofill {
30
34
  -webkit-text-fill-color: var(--color-text);
31
35
  -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
32
36
  }
33
37
 
34
- &::placeholder {
35
- color: var(--color-text-subtle);
36
- }
37
-
38
38
  &:user-invalid {
39
39
  border-color: var(--color-negative);
40
40
  }
@@ -49,16 +49,16 @@
49
49
  }
50
50
  }
51
51
 
52
- .range {
52
+ .checkbox, .radio {
53
53
  accent-color: var(--color-primary);
54
+ transform: scale(1.15);
54
55
  }
55
56
 
56
- .checkbox, .radio {
57
+ .range {
57
58
  accent-color: var(--color-primary);
58
- transform: scale(1.15);
59
59
  }
60
60
 
61
- :is(.input, .range, .checkbox, .radio) {
61
+ :is(.input, .checkbox, .radio, .range) {
62
62
  &:focus-visible {
63
63
  outline: var(--border-2) solid var(--color-selected-dark);
64
64
  outline-offset: var(--border-2);
@@ -15,7 +15,6 @@
15
15
  font-weight: var(--font-medium);
16
16
  gap: var(--size-2);
17
17
  justify-content: center;
18
- min-inline-size: fit-content;
19
18
  padding: var(--size-2) var(--size-4);
20
19
  }
21
20
 
@@ -49,7 +49,6 @@
49
49
 
50
50
  @media (width < 40rem) {
51
51
  max-inline-size: none;
52
- text-align: center;
53
52
  }
54
53
  }
55
54
 
@@ -9,7 +9,6 @@
9
9
  inline-size: var(--size-11);
10
10
  transition-duration: var(--time-150);
11
11
  transition-property: var(--transition-colors);
12
- transition-timing-function: var(--ease-in-out);
13
12
 
14
13
  &:checked {
15
14
  background-color: var(--color-primary);
@@ -26,7 +25,7 @@
26
25
  border-radius: var(--rounded-full);
27
26
  content: "";
28
27
  display: block;
29
- transition: margin var(--time-150) var(--ease-in-out);
28
+ transition: margin var(--time-150);
30
29
  }
31
30
 
32
31
  &:focus-visible {
@@ -1,6 +1,5 @@
1
1
  .toggle {
2
2
  display: inline-flex;
3
- position: relative;
4
3
 
5
4
  &:has(:focus-visible) .btn {
6
5
  outline: var(--border-2) solid var(--color-selected-dark);
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.28
4
+ version: 0.0.29
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-26 00:00:00.000000000 Z
11
+ date: 2024-08-07 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com
@@ -24,12 +24,10 @@ files:
24
24
  - app/assets/stylesheets/colors.css
25
25
  - app/assets/stylesheets/effects.css
26
26
  - app/assets/stylesheets/filters.css
27
- - app/assets/stylesheets/grid.css
28
27
  - app/assets/stylesheets/sizes.css
29
28
  - app/assets/stylesheets/transform.css
30
29
  - app/assets/stylesheets/transition.css
31
30
  - app/assets/stylesheets/typography.css
32
- - app/assets/stylesheets/zindex.css
33
31
  - app/assets/stylesheets/zutilities.css
34
32
  - app/helpers/dialog_helper.rb
35
33
  - lib/css-zero.rb
@@ -1,38 +0,0 @@
1
- :root {
2
- /****************************************************************
3
- * Grid Template
4
- * Variables for specifying the columns/rows in a grid layout.
5
- * grid-template-columns|grid-template-rows: var(--grid-1);
6
- *****************************************************************/
7
- --grid-1: repeat(1, minmax(0, 1fr));
8
- --grid-2: repeat(2, minmax(0, 1fr));
9
- --grid-3: repeat(3, minmax(0, 1fr));
10
- --grid-4: repeat(4, minmax(0, 1fr));
11
- --grid-5: repeat(5, minmax(0, 1fr));
12
- --grid-6: repeat(6, minmax(0, 1fr));
13
- --grid-7: repeat(7, minmax(0, 1fr));
14
- --grid-8: repeat(8, minmax(0, 1fr));
15
- --grid-9: repeat(9, minmax(0, 1fr));
16
- --grid-10: repeat(10, minmax(0, 1fr));
17
- --grid-11: repeat(11, minmax(0, 1fr));
18
- --grid-12: repeat(12, minmax(0, 1fr));
19
-
20
- /****************************************************************
21
- * Grid Start / End
22
- * Variables for controlling how elements are sized and placed across grid columns/rows.
23
- * grid-column|grid-row: var(--span-1);
24
- *****************************************************************/
25
- --span-1: span 1 / span 1;
26
- --span-2: span 2 / span 2;
27
- --span-3: span 3 / span 3;
28
- --span-4: span 4 / span 4;
29
- --span-5: span 5 / span 5;
30
- --span-6: span 6 / span 6;
31
- --span-7: span 7 / span 7;
32
- --span-8: span 8 / span 8;
33
- --span-9: span 9 / span 9;
34
- --span-10: span 10 / span 10;
35
- --span-11: span 11 / span 11;
36
- --span-12: span 12 / span 12;
37
- --span-full: 1 / -1;
38
- }
@@ -1,13 +0,0 @@
1
- /****************************************************************
2
- * Z-Index
3
- * Utilities for controlling the stack order of an element.
4
- * z-index: var(--z-10);
5
- *****************************************************************/
6
-
7
- :root {
8
- --z-10: 10;
9
- --z-20: 20;
10
- --z-30: 30;
11
- --z-40: 40;
12
- --z-50: 50;
13
- }