css-zero 0.0.24 → 0.0.26

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.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -1
  3. data/app/assets/stylesheets/_reset.css +12 -4
  4. data/app/assets/stylesheets/zindex.css +13 -0
  5. data/app/assets/stylesheets/zutilities.css +32 -35
  6. data/lib/css_zero/version.rb +1 -1
  7. data/lib/generators/css_zero/add/USAGE +1 -1
  8. data/lib/generators/css_zero/add/resources.yml +7 -2
  9. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +1 -1
  10. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css +0 -1
  11. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +1 -1
  12. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +2 -0
  13. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +1 -1
  14. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +0 -2
  15. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css +22 -0
  16. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +10 -7
  17. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css +1 -1
  18. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +0 -1
  19. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css +5 -0
  20. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
  21. data/lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js +7 -0
  22. data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +10 -0
  23. metadata +6 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a5e73d39707f2126d5d15f5099004ac306aa5acaa584ff7c4441bfec4309d8f3
4
- data.tar.gz: 9eb912c80e2fd2e3f0681390cecb8cb2950e558cf2c42fae5affd846cd4b08e3
3
+ metadata.gz: 2a4abc591fd494e591052a0bc63cb46af6d9a0cbae7c126c07b914a15a097175
4
+ data.tar.gz: d5ed800b2b6a0ef53ccb8f41a6a8706f63dbe0b92e266b3c606afbf21d143aef
5
5
  SHA512:
6
- metadata.gz: 1d9ad5567f702b654d1efca3312b275fd3adec67c95bdf5539d44b01dc845846b171b8850654d3e8182537c3b4b1a757a1291500df589c0575880d6a6629ab68
7
- data.tar.gz: e55ab56ea77eefd60b392afe4c6cda7421739bab9a25c1410e5d8a83ab37a73912849803c2d67a4fe513a8227437486ae2ef93b3046a5d4d456265af7db6c3f8
6
+ metadata.gz: fdf03752432fe469809a8299338cd0726022514b462cb0ab7523bfe533169cd47a6edc97fc7fb34e9ef31432f9c1470a257bcf15bca53eb40e905030f47dff3f
7
+ data.tar.gz: 79397cb9785170dc47b34669592e67478159b2a75585155177174dd19951fc2325837af549a188d97e3e6dff26fcef87855f877e4889863f2a88e63fd1a673f3
data/README.md CHANGED
@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
19
19
  Add only the components you need. (Optional)
20
20
 
21
21
  ```
22
- bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
22
+ bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
23
23
  ```
24
24
 
25
25
  ### Requirements
@@ -54,6 +54,7 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
54
54
  *= require typography
55
55
  *= require_tree .
56
56
  *= require_self
57
+ *= require zindex
57
58
  *= require zutilities
58
59
  */
59
60
  ```
@@ -193,6 +193,14 @@ input:where([type='button'], [type='reset'], [type='submit']),
193
193
  appearance: button;
194
194
  }
195
195
 
196
+ /*
197
+ Revert padding block, it can be noticed in select with multiple.
198
+ */
199
+
200
+ option {
201
+ padding-block: revert;
202
+ }
203
+
196
204
  /*
197
205
  Use the modern Firefox focus style for all focusable elements.
198
206
  */
@@ -336,9 +344,9 @@ video {
336
344
  }
337
345
 
338
346
  /*
339
- Prevent page scroll when dialog is open
347
+ Prevent page scroll when modal dialog is open
340
348
  */
341
- html:has(dialog[open]) {
349
+ html:has(dialog:modal[open]) {
342
350
  overflow: hidden;
343
351
  }
344
352
 
@@ -347,7 +355,7 @@ html:has(dialog[open]) {
347
355
  */
348
356
 
349
357
  [hidden] {
350
- display: none !important;
358
+ display: none;
351
359
  }
352
360
 
353
361
  /*
@@ -355,5 +363,5 @@ html:has(dialog[open]) {
355
363
  */
356
364
 
357
365
  [contents] {
358
- display: contents !important;
366
+ display: contents;
359
367
  }
@@ -0,0 +1,13 @@
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
+ }
@@ -1,5 +1,5 @@
1
1
  /****************************************************************
2
- * Flex and Grid
2
+ * Flex
3
3
  *****************************************************************/
4
4
  .flex { display: flex; }
5
5
  .flex-col { flex-direction: column; }
@@ -28,6 +28,37 @@
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
+
31
62
  /****************************************************************
32
63
  * Text
33
64
  *****************************************************************/
@@ -127,8 +158,6 @@
127
158
  .rounded-md { border-radius: var(--rounded-md); }
128
159
  .rounded-lg { border-radius: var(--rounded-lg); }
129
160
  .rounded-xl { border-radius: var(--rounded-xl); }
130
- .rounded-2xl { border-radius: var(--rounded-2xl); }
131
- .rounded-3xl { border-radius: var(--rounded-3xl); }
132
161
  .rounded-full { border-radius: var(--rounded-full); }
133
162
 
134
163
  /****************************************************************
@@ -141,7 +170,6 @@
141
170
  .shadow-lg { box-shadow: var(--shadow-lg); }
142
171
  .shadow-xl { box-shadow: var(--shadow-xl); }
143
172
  .shadow-2xl { box-shadow: var(--shadow-2xl); }
144
- .shadow-inner { box-shadow: var(--shadow-inner); }
145
173
 
146
174
  /****************************************************************
147
175
  * Layout
@@ -308,37 +336,6 @@
308
336
  .pie-8 { padding-inline-end: var(--size-8); }
309
337
  .pie-10 { padding-inline-end: var(--size-10); }
310
338
 
311
- /****************************************************************
312
- * Grid system
313
- *****************************************************************/
314
- .grid { display: grid; }
315
-
316
- .grid-cols-1 { grid-template-columns: var(--grid-1); }
317
- .grid-cols-2 { grid-template-columns: var(--grid-2); }
318
- .grid-cols-3 { grid-template-columns: var(--grid-3); }
319
- .grid-cols-4 { grid-template-columns: var(--grid-4); }
320
- .grid-cols-5 { grid-template-columns: var(--grid-5); }
321
- .grid-cols-6 { grid-template-columns: var(--grid-6); }
322
- .grid-cols-7 { grid-template-columns: var(--grid-7); }
323
- .grid-cols-8 { grid-template-columns: var(--grid-8); }
324
- .grid-cols-9 { grid-template-columns: var(--grid-9); }
325
- .grid-cols-10 { grid-template-columns: var(--grid-10); }
326
- .grid-cols-11 { grid-template-columns: var(--grid-11); }
327
- .grid-cols-12 { grid-template-columns: var(--grid-12); }
328
-
329
- .col-span-1 { grid-column: var(--span-1); }
330
- .col-span-2 { grid-column: var(--span-2); }
331
- .col-span-3 { grid-column: var(--span-3); }
332
- .col-span-4 { grid-column: var(--span-4); }
333
- .col-span-5 { grid-column: var(--span-5); }
334
- .col-span-6 { grid-column: var(--span-6); }
335
- .col-span-7 { grid-column: var(--span-7); }
336
- .col-span-8 { grid-column: var(--span-8); }
337
- .col-span-9 { grid-column: var(--span-9); }
338
- .col-span-10 { grid-column: var(--span-10); }
339
- .col-span-11 { grid-column: var(--span-11); }
340
- .col-span-12 { grid-column: var(--span-12); }
341
-
342
339
  /****************************************************************
343
340
  * Accessibility
344
341
  *****************************************************************/
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.24"
2
+ VERSION = "0.0.26"
3
3
  end
@@ -2,7 +2,7 @@ Description:
2
2
  This will add components into your project.
3
3
 
4
4
  Components:
5
- accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
5
+ accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
6
6
 
7
7
  Example:
8
8
  bin/rails generate css_zero:add [components...]
@@ -26,6 +26,9 @@ dialog:
26
26
  - app/assets/stylesheets/dialog.css
27
27
  - app/javascript/controllers/dialog_controller.js
28
28
  - app/assets/images/x.svg
29
+ flash:
30
+ - app/assets/stylesheets/flash.css
31
+ - app/javascript/controllers/element_removal_controller.js
29
32
  input:
30
33
  - app/assets/stylesheets/input.css
31
34
  - app/assets/images/select-arrow.svg
@@ -38,11 +41,13 @@ progress:
38
41
  - app/assets/stylesheets/progress.css
39
42
  prose:
40
43
  - app/assets/stylesheets/prose.css
41
- switch:
42
- - app/assets/stylesheets/switch.css
43
44
  sheet:
44
45
  - app/assets/stylesheets/sheet.css
45
46
  - app/javascript/controllers/dialog_controller.js
46
47
  - app/assets/images/x.svg
48
+ skeleton:
49
+ - app/assets/stylesheets/skeleton.css
50
+ switch:
51
+ - app/assets/stylesheets/switch.css
47
52
  table:
48
53
  - app/assets/stylesheets/table.css
@@ -27,7 +27,7 @@
27
27
  }
28
28
 
29
29
  &:focus-visible {
30
- outline: var(--border-2) solid var(--color-primary);
30
+ outline: var(--border-2) solid var(--color-selected-dark);
31
31
  outline-offset: var(--border-2);
32
32
  }
33
33
 
@@ -15,7 +15,6 @@
15
15
  color: var(--color-text);
16
16
  }
17
17
 
18
- /* Small screens and below */
19
18
  @media (width < 40rem) {
20
19
  gap: var(--size-1_5);
21
20
  }
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  &:focus-visible {
23
- outline: var(--border-2) solid var(--color-primary);
23
+ outline: var(--border-2) solid var(--color-selected-dark);
24
24
  outline-offset: var(--border-2);
25
25
  }
26
26
 
@@ -1,6 +1,8 @@
1
1
  .card {
2
+ background-color: var(--color-bg);
2
3
  border-radius: var(--rounded-lg);
3
4
  border-width: var(--border);
5
+ color: var(--color-text);
4
6
  padding: var(--size-6);
5
7
  box-shadow: var(--shadow-sm);
6
8
  }
@@ -13,7 +13,7 @@
13
13
  scroll-snap-type: x mandatory;
14
14
 
15
15
  > * {
16
- flex: 1 0 100%;
16
+ flex: 0 0 100%;
17
17
  scroll-snap-stop: always;
18
18
  scroll-snap-align: center;
19
19
  }
@@ -47,7 +47,6 @@
47
47
  }
48
48
  }
49
49
 
50
- /* Small screens and below */
51
50
  @media (width < 40rem) {
52
51
  border-end-end-radius: 0;
53
52
  border-end-start-radius: 0;
@@ -61,7 +60,6 @@
61
60
  inset-inline-end: var(--size-4);
62
61
  position: absolute;
63
62
 
64
- /* Small screens and below */
65
63
  @media (width < 40rem) {
66
64
  display: none;
67
65
  }
@@ -0,0 +1,22 @@
1
+ .flash {
2
+ animation: appear-then-fade 4s 300ms both;
3
+ backdrop-filter: var(--blur) var(--contrast-75);
4
+ background-color: hsl(from var(--color-text) h s l / .65);
5
+ border-radius: var(--rounded-full);
6
+ color: var(--color-text-reversed);
7
+ margin-block-start: var(--size-4);
8
+ margin-inline: auto;
9
+ padding: var(--size-2) var(--size-4);
10
+ position: fixed;
11
+ text-align: center;
12
+
13
+ img {
14
+ display: inline;
15
+ margin-block-end: var(--size-1);
16
+ }
17
+ }
18
+
19
+ @keyframes appear-then-fade {
20
+ 0%, 100% { opacity: 0; }
21
+ 5%, 60% { opacity: 1; }
22
+ }
@@ -8,10 +8,6 @@
8
8
  inline-size: var(--size-full);
9
9
  padding: var(--size-2) var(--size-3);
10
10
 
11
- option {
12
- padding-block: var(--size-1);
13
- }
14
-
15
11
  &:is(textarea):not([rows]) {
16
12
  field-sizing: content;
17
13
  max-block-size: calc(10lh + var(--size-6));
@@ -31,6 +27,11 @@
31
27
  margin-inline-end: var(--size-2);
32
28
  }
33
29
 
30
+ &:autofill {
31
+ -webkit-text-fill-color: var(--color-text);
32
+ -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
33
+ }
34
+
34
35
  &::placeholder {
35
36
  color: var(--color-text-subtle);
36
37
  }
@@ -39,6 +40,10 @@
39
40
  border-color: var(--color-negative);
40
41
  }
41
42
 
43
+ &:user-invalid ~ .invalid-feedback {
44
+ display: block;
45
+ }
46
+
42
47
  &:disabled {
43
48
  cursor: not-allowed;
44
49
  opacity: var(--opacity-50);
@@ -55,13 +60,11 @@
55
60
  }
56
61
 
57
62
  :is(.input, .range, .checkbox, .radio) {
58
- /* Keyboard navigation */
59
63
  &:focus-visible {
60
- outline: var(--border-2) solid var(--color-primary);
64
+ outline: var(--border-2) solid var(--color-selected-dark);
61
65
  outline-offset: var(--border-2);
62
66
  }
63
67
 
64
- /* Server side validation */
65
68
  .field_with_errors & {
66
69
  border-color: var(--color-negative);
67
70
  }
@@ -131,7 +131,7 @@
131
131
  }
132
132
 
133
133
  a {
134
- font-weight: 500;
134
+ color: var(--color-link);
135
135
  text-decoration: underline;
136
136
  text-decoration-skip-ink: auto;
137
137
  }
@@ -47,7 +47,6 @@
47
47
  }
48
48
  }
49
49
 
50
- /* Small screens and below */
51
50
  @media (width < 40rem) {
52
51
  max-inline-size: none;
53
52
  text-align: center;
@@ -0,0 +1,5 @@
1
+ .skeleton {
2
+ animation: var(--animate-blink);
3
+ border-radius: var(--rounded-md);
4
+ background-color: var(--color-border-light);
5
+ }
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  &:focus-visible {
33
- outline: var(--border-2) solid var(--color-primary);
33
+ outline: var(--border-2) solid var(--color-selected-dark);
34
34
  outline-offset: var(--border-2);
35
35
  }
36
36
 
@@ -0,0 +1,7 @@
1
+ import { Controller } from "@hotwired/stimulus"
2
+
3
+ export default class extends Controller {
4
+ remove() {
5
+ this.element.remove()
6
+ }
7
+ }
@@ -4,9 +4,12 @@
4
4
  --color-text: black;
5
5
  --color-text-reversed: white;
6
6
  --color-text-subtle: var(--zinc-500);
7
+ --color-link: var(--blue-700);
7
8
  --color-border-light: var(--zinc-100);
8
9
  --color-border: var(--zinc-200);
9
10
  --color-border-dark: var(--zinc-400);
11
+ --color-selected: var(--blue-100);
12
+ --color-selected-dark: var(--blue-300);
10
13
 
11
14
  /* Accent colors */
12
15
  --color-primary: var(--zinc-900);
@@ -27,9 +30,12 @@
27
30
  --color-text: white;
28
31
  --color-text-reversed: black;
29
32
  --color-text-subtle: var(--zinc-400);
33
+ --color-link: var(--sky-400);
30
34
  --color-border-light: var(--zinc-800);
31
35
  --color-border: var(--zinc-800);
32
36
  --color-border-dark: var(--zinc-600);
37
+ --color-selected: var(--blue-950);
38
+ --color-selected-dark: var(--blue-800);
33
39
 
34
40
  /* Accent colors */
35
41
  --color-primary: var(--zinc-50);
@@ -60,3 +66,7 @@ body {
60
66
  font-synthesis-weight: none;
61
67
  text-rendering: optimizeLegibility;
62
68
  }
69
+
70
+ ::selection {
71
+ background-color: var(--color-selected);
72
+ }
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.24
4
+ version: 0.0.26
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-22 00:00:00.000000000 Z
11
+ date: 2024-07-23 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com
@@ -29,6 +29,7 @@ files:
29
29
  - app/assets/stylesheets/transform.css
30
30
  - app/assets/stylesheets/transition.css
31
31
  - app/assets/stylesheets/typography.css
32
+ - app/assets/stylesheets/zindex.css
32
33
  - app/assets/stylesheets/zutilities.css
33
34
  - app/helpers/dialog_helper.rb
34
35
  - lib/css-zero.rb
@@ -56,16 +57,19 @@ files:
56
57
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
57
58
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
58
59
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
60
+ - lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
59
61
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
60
62
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
61
63
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
62
64
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
63
65
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
66
+ - lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
64
67
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
65
68
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
66
69
  - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
67
70
  - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
68
71
  - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
72
+ - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
69
73
  - lib/generators/css_zero/install/USAGE
70
74
  - lib/generators/css_zero/install/install_generator.rb
71
75
  - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css