css-zero 0.0.23 → 0.0.25

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: 384e68aee1868c3f50f08a62b7f8f7dfa8ccbef7ebcfb8237758f9089c2ca817
4
- data.tar.gz: df90558a73aaf3470093c6eddf9d20ce8372a1d7503809c23544cdd6b7d4b0dd
3
+ metadata.gz: b904762be7cdca0956aa0340d32bdaf524ce2f10b106e30f2487104904ce23cf
4
+ data.tar.gz: cd968a19dfbd06001ba9b009c73cc513d2a5440c0d53146b062e4561e4c5c187
5
5
  SHA512:
6
- metadata.gz: 928d0dd662bd67da78146d1356dcacd04946a57fccb25aaf861224e79f6028fe87888520142c5cb56d492be3367b12c512739871e76e8608f56563216926dc83
7
- data.tar.gz: 55578a5d4ef3a5a6cf1f2e987223bfdf99e2493fd7d649e1a56765859dbe96a9b83d75fa4321159992e04347b3c7dfd9eeec2e25f9b00f18dc0c32cdf0dd801d
6
+ metadata.gz: e2c9fbae5418104337666b1302c9ae824f72adcce8009cde01ed5df1a12e770726598d16d3cf1dd885a0d318328e0889922dc4230975b06129a7f72f8a7ee45d
7
+ data.tar.gz: 1a65d184ce40cce70efcb94afc23100e0c2019668a4aba36eee69b1abae86fd7beb966f061ec15d71c6acf8ecf18e3eef3587535da320497e1d8d086aee17ff9
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 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
@@ -234,6 +234,14 @@ progress {
234
234
  line-height: 1em;
235
235
  }
236
236
 
237
+ /*
238
+ Correct empty date field height on safari IOS.
239
+ */
240
+
241
+ ::-webkit-date-and-time-value {
242
+ height: 1.5em;
243
+ }
244
+
237
245
  /*
238
246
  Remove the inner padding in Chrome and Safari on macOS.
239
247
  */
@@ -242,6 +250,19 @@ progress {
242
250
  -webkit-appearance: none;
243
251
  }
244
252
 
253
+ /*
254
+ Remove the increment cursor for step any.
255
+ */
256
+
257
+ input[step='any']::-webkit-inner-spin-button,
258
+ input[step='any']::-webkit-outer-spin-button {
259
+ -webkit-appearance: none;
260
+ }
261
+
262
+ input[step='any'] {
263
+ -moz-appearance: textfield;
264
+ }
265
+
245
266
  /*
246
267
  Add the correct display in Chrome and Safari.
247
268
  */
@@ -314,12 +335,19 @@ video {
314
335
  block-size: auto;
315
336
  }
316
337
 
338
+ /*
339
+ Prevent page scroll when modal dialog is open
340
+ */
341
+ html:has(dialog:modal[open]) {
342
+ overflow: hidden;
343
+ }
344
+
317
345
  /*
318
346
  Make elements with the HTML hidden attribute stay hidden by default.
319
347
  */
320
348
 
321
349
  [hidden] {
322
- display: none !important;
350
+ display: none;
323
351
  }
324
352
 
325
353
  /*
@@ -327,5 +355,5 @@ video {
327
355
  */
328
356
 
329
357
  [contents] {
330
- display: contents !important;
358
+ display: contents;
331
359
  }
@@ -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.23"
2
+ VERSION = "0.0.25"
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 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,6 +41,12 @@ progress:
38
41
  - app/assets/stylesheets/progress.css
39
42
  prose:
40
43
  - app/assets/stylesheets/prose.css
44
+ sheet:
45
+ - app/assets/stylesheets/sheet.css
46
+ - app/javascript/controllers/dialog_controller.js
47
+ - app/assets/images/x.svg
48
+ skeleton:
49
+ - app/assets/stylesheets/skeleton.css
41
50
  switch:
42
51
  - app/assets/stylesheets/switch.css
43
52
  table:
@@ -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
 
@@ -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
  }
@@ -66,8 +66,3 @@
66
66
  display: none;
67
67
  }
68
68
  }
69
-
70
- /* Prevent page scroll when dialog is open */
71
- html:has(.dialog[open]) {
72
- overflow: hidden;
73
- }
@@ -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
+ }
@@ -31,6 +31,11 @@
31
31
  margin-inline-end: var(--size-2);
32
32
  }
33
33
 
34
+ &:autofill {
35
+ -webkit-text-fill-color: var(--color-text);
36
+ -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
37
+ }
38
+
34
39
  &::placeholder {
35
40
  color: var(--color-text-subtle);
36
41
  }
@@ -39,6 +44,10 @@
39
44
  border-color: var(--color-negative);
40
45
  }
41
46
 
47
+ &:user-invalid ~ .invalid-feedback {
48
+ display: block;
49
+ }
50
+
42
51
  &:disabled {
43
52
  cursor: not-allowed;
44
53
  opacity: var(--opacity-50);
@@ -57,7 +66,7 @@
57
66
  :is(.input, .range, .checkbox, .radio) {
58
67
  /* Keyboard navigation */
59
68
  &:focus-visible {
60
- outline: var(--border-2) solid var(--color-primary);
69
+ outline: var(--border-2) solid var(--color-selected-dark);
61
70
  outline-offset: var(--border-2);
62
71
  }
63
72
 
@@ -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
  }
@@ -0,0 +1,61 @@
1
+ .sheet {
2
+ background-color: var(--color-bg);
3
+ border-inline-start-width: var(--border);
4
+ box-shadow: var(--shadow-lg);
5
+ block-size: 100%;
6
+ color: var(--color-text);
7
+ inline-size: var(--size-3-4);
8
+ margin-inline-start: auto;
9
+ max-block-size: none;
10
+ max-inline-size: var(--width-sm);
11
+ padding: var(--size-6);
12
+
13
+ &::backdrop {
14
+ background-color: rgba(0, 0, 0, .8);
15
+ }
16
+
17
+ /* Setup animation */
18
+ transform: translateX(100%);
19
+ transition-behavior: allow-discrete;
20
+ transition-duration: var(--time-500);
21
+ transition-property: display, overlay, transform;
22
+
23
+ &::backdrop {
24
+ opacity: 0;
25
+ transition-behavior: allow-discrete;
26
+ transition-duration: var(--time-150);
27
+ transition-property: display, overlay, opacity;
28
+ }
29
+
30
+ /* In animation */
31
+ &[open] {
32
+ transform: translateX(0);
33
+ }
34
+
35
+ &[open]::backdrop {
36
+ opacity: 1;
37
+ }
38
+
39
+ /* Out animation */
40
+ @starting-style {
41
+ &[open] {
42
+ transform: translateX(100%);
43
+ }
44
+
45
+ &[open]::backdrop {
46
+ opacity: 0;
47
+ }
48
+ }
49
+
50
+ /* Small screens and below */
51
+ @media (width < 40rem) {
52
+ max-inline-size: none;
53
+ text-align: center;
54
+ }
55
+ }
56
+
57
+ .sheet__close {
58
+ inset-block-start: var(--size-4);
59
+ inset-inline-end: var(--size-4);
60
+ position: absolute;
61
+ }
@@ -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.23
4
+ version: 0.0.25
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-20 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
@@ -56,15 +56,19 @@ files:
56
56
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
57
57
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
58
58
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
59
+ - lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
59
60
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
60
61
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
61
62
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
62
63
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
64
+ - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
65
+ - lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
63
66
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
64
67
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
65
68
  - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
66
69
  - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
67
70
  - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
71
+ - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
68
72
  - lib/generators/css_zero/install/USAGE
69
73
  - lib/generators/css_zero/install/install_generator.rb
70
74
  - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css