css-zero 0.0.92 → 0.0.94

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 (26) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +4 -26
  3. data/lib/css_zero/version.rb +1 -1
  4. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +2 -1
  5. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +1 -0
  6. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +3 -4
  7. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +11 -3
  8. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +9 -19
  9. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css +3 -7
  10. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +9 -19
  11. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +5 -4
  12. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +6 -0
  13. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css +1 -1
  14. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css +5 -6
  15. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css +1 -1
  16. data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js +2 -18
  17. data/lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js +2 -2
  18. data/lib/generators/css_zero/add/templates/app/javascript/controllers/datepicker_controller.js +1 -2
  19. data/lib/generators/css_zero/add/templates/app/javascript/controllers/otp_input_controller.js +1 -3
  20. data/lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js +6 -4
  21. data/lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js +1 -1
  22. data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js +1 -1
  23. data/lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js +1 -3
  24. data/lib/generators/css_zero/install/install_generator.rb +1 -1
  25. data/lib/generators/css_zero/scaffold/templates/_form.html.erb.tt +3 -3
  26. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3c1c919ca22e297fc9aed948e7f9eda8a17d341dd32c8b4df5c70b4bb1823cda
4
- data.tar.gz: b3feb5c0d25ae33d70f76cdfded1a64ac65b562784fdaab32412c1b7f043e825
3
+ metadata.gz: 421e49460a3f5afe3b7ba8f87faa35d1e8a44050f5b0fd8696cd1b175a415d2d
4
+ data.tar.gz: a6240eac2e50923e843a354fe607d1e02f135a797fae05c5030cdb9f3c961db5
5
5
  SHA512:
6
- metadata.gz: 1e784e20f4e8cf7878e68400fd3c9eb72cdf1d5314e73f897fd606c28f05b8c9bd5f5d43805125ec246bcfed81c2ddcff108a0b3731c09897b4c621c69c02fb3
7
- data.tar.gz: e2326b48f1d6261f90d33688d6b69e0791610e456790fb8ed737508e0c35f683d20e058f0d37bcbc396a95f5d66d4aad69534018ff37785c83b1f82854f76195
6
+ metadata.gz: a86bd1229145b84313451d9997b887ae0b9c5d60bc143e73b891113d22f3521c26945a410b3a713cf9dc6ac0c109bb13bd50c12183ca28c9417ae44027b25ff8
7
+ data.tar.gz: fa092a46a4ab911f999c0a115323150752a783e1914a00fe6cdbed53710f5849b4396d632fa2a8dc1a996cb91522a053f3e7a0177e560f72934f6b5550ab0945
data/README.md CHANGED
@@ -22,39 +22,17 @@ Add the additional components you need. (Optional)
22
22
  bin/rails generate css_zero:add --help
23
23
  ```
24
24
 
25
- ## Usage
26
-
27
- ```html
28
- <h1 class="text-xl font-bold mb-4">
29
- Write most page content using utility classes.
30
- </h1>
31
-
32
- <div class="custom-component">
33
- Create components using CSS variables.
34
- </div>
25
+ ## Components
35
26
 
36
- <div class="card">
37
- Optionally, copy pre-built components into your application.
38
- </div>
39
- ```
27
+ [<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
40
28
 
41
- ```css
42
- .custom-component {
43
- background-color: var(--red-500);
44
- border-radius: var(--rounded);
45
- block-size: var(--size-4);
46
- }
47
- ```
29
+ ## Utility classes and variables
48
30
 
49
31
  Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
50
32
 
51
- ## Components
52
-
53
- [<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
54
-
55
33
  ## Icons
56
34
 
57
- Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
35
+ If you're looking for high-quality icons, I recommend checking out [Lucide](https://lucide.dev).
58
36
 
59
37
  ## Scaffold
60
38
 
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.92"
2
+ VERSION = "0.0.94"
3
3
  end
@@ -48,7 +48,8 @@
48
48
  content: "";
49
49
  filter: var(--color-filter-text);
50
50
  inline-size: var(--size-4);
51
- transition: transform var(--time-200);
51
+ transition-duration: var(--time-200);
52
+ transition-property: transform;
52
53
  }
53
54
  }
54
55
  }
@@ -21,6 +21,7 @@
21
21
  }
22
22
 
23
23
  img {
24
+ align-content: center;
24
25
  aspect-ratio: var(--aspect-square);
25
26
  block-size: var(--size-full);
26
27
  inline-size: var(--size-full);
@@ -1,5 +1,6 @@
1
1
  .btn {
2
2
  --btn-background: var(--color-bg);
3
+ --hover-color: oklch(from var(--btn-background) calc(l * .95) c h);
3
4
 
4
5
  align-items: center;
5
6
  background-color: var(--btn-background);
@@ -24,7 +25,7 @@
24
25
  }
25
26
 
26
27
  &:hover {
27
- background-color: var(--btn-hover-color, oklch(from var(--btn-background) calc(l * .95) c h));
28
+ background-color: var(--btn-hover-color, var(--hover-color));
28
29
  }
29
30
 
30
31
  &:focus-visible {
@@ -84,9 +85,7 @@
84
85
  }
85
86
 
86
87
  [aria-busy] .btn--loading:disabled {
87
- > * {
88
- visibility: hidden;
89
- }
88
+ > * { visibility: hidden; }
90
89
 
91
90
  &::after {
92
91
  filter: var(--btn-icon-color, var(--color-filter-text));
@@ -6,14 +6,22 @@
6
6
 
7
7
  .carousel__content {
8
8
  display: flex;
9
- gap: var(--size-6);
9
+ gap: var(--size-4);
10
10
  inline-size: var(--size-full);
11
- overflow: hidden;
11
+ overflow-x: hidden;
12
+ scroll-behavior: smooth;
12
13
  scroll-snap-type: x mandatory;
14
+
15
+ @supports (-moz-appearance: none) {
16
+ scroll-behavior: auto;
17
+ }
13
18
  }
14
19
 
15
20
  .carousel__item {
16
- flex: 0 0 var(--carousel-item-size, 100%);
21
+ --items: var(--carousel-items, 1);
22
+ --items-gap: calc(100% - 1rem * (var(--items) - 1));
23
+
24
+ flex: 0 0 calc(var(--items-gap) / var(--items));
17
25
  padding: var(--size-1);
18
26
  scroll-snap-stop: always;
19
27
  scroll-snap-align: start;
@@ -12,7 +12,7 @@
12
12
  background-color: rgba(0, 0, 0, .8);
13
13
  }
14
14
 
15
- /* Setup animation */
15
+ /* Final state of exit animation and setup */
16
16
  opacity: 0;
17
17
  transform: var(--scale-95);
18
18
  transition-behavior: allow-discrete;
@@ -26,24 +26,14 @@
26
26
  transition-property: display, overlay, opacity;
27
27
  }
28
28
 
29
- /* In animation */
30
- &[open] {
31
- opacity: 1; transform: var(--scale-100);
32
- }
33
-
34
- &[open]::backdrop {
35
- opacity: 1;
36
- }
29
+ /* Final state of entry animation */
30
+ &[open] { opacity: 1; transform: var(--scale-100); }
31
+ &[open]::backdrop { opacity: 1; }
37
32
 
38
- /* Out animation */
33
+ /* Initial state of entry animation */
39
34
  @starting-style {
40
- &[open] {
41
- opacity: 0; transform: var(--scale-95);
42
- }
43
-
44
- &[open]::backdrop {
45
- opacity: 0;
46
- }
35
+ &[open] { opacity: 0; transform: var(--scale-95); }
36
+ &[open]::backdrop { opacity: 0; }
47
37
  }
48
38
 
49
39
  /* Drawer component on mobile */
@@ -60,7 +50,7 @@
60
50
  }
61
51
 
62
52
  .dialog__close {
63
- inset-block-start: var(--size-4);
64
- inset-inline-end: var(--size-4);
53
+ inset-block-start: var(--size-3);
54
+ inset-inline-end: var(--size-3);
65
55
  position: absolute;
66
56
  }
@@ -6,26 +6,22 @@
6
6
  color: var(--color-text);
7
7
  inline-size: var(--popover-size, max-content);
8
8
 
9
- /* Setup animation */
9
+ /* Final state of exit animation and setup */
10
10
  opacity: 0;
11
11
  transform: var(--scale-95);
12
12
  transition-behavior: allow-discrete;
13
13
  transition-duration: var(--time-150);
14
14
  transition-property: display, overlay, opacity, transform;
15
15
 
16
- /* In animation */
16
+ /* Final state of entry animation */
17
17
  &:popover-open {
18
18
  opacity: 1; transform: var(--scale-100);
19
19
  }
20
20
 
21
- /* Out animation */
21
+ /* Initial state of entry animation */
22
22
  @starting-style {
23
23
  &:popover-open {
24
24
  opacity: 0; transform: var(--scale-95);
25
25
  }
26
26
  }
27
27
  }
28
-
29
- .popover--tooltip {
30
- font-size: var(--text-sm); padding: var(--size-1_5) var(--size-3);
31
- }
@@ -12,7 +12,7 @@
12
12
  background-color: rgba(0, 0, 0, .8);
13
13
  }
14
14
 
15
- /* Setup animation */
15
+ /* Final state of exit animation and setup */
16
16
  transform: var(--sheet-transform);
17
17
  transition-behavior: allow-discrete;
18
18
  transition-duration: var(--time-500);
@@ -25,24 +25,14 @@
25
25
  transition-property: display, overlay, opacity;
26
26
  }
27
27
 
28
- /* In animation */
29
- &[open] {
30
- transform: translateX(0);
31
- }
32
-
33
- &[open]::backdrop {
34
- opacity: 1;
35
- }
28
+ /* Final state of entry animation */
29
+ &[open] { transform: translateX(0); }
30
+ &[open]::backdrop { opacity: 1; }
36
31
 
37
- /* Out animation */
32
+ /* Initial state of entry animation */
38
33
  @starting-style {
39
- &[open] {
40
- transform: var(--sheet-transform);
41
- }
42
-
43
- &[open]::backdrop {
44
- opacity: 0;
45
- }
34
+ &[open] { transform: var(--sheet-transform); }
35
+ &[open]::backdrop { opacity: 0;}
46
36
  }
47
37
 
48
38
  @media (width >= 40rem) {
@@ -66,7 +56,7 @@
66
56
  }
67
57
 
68
58
  .sheet__close {
69
- inset-block-start: var(--size-4);
70
- inset-inline-end: var(--size-4);
59
+ inset-block-start: var(--size-3);
60
+ inset-inline-end: var(--size-3);
71
61
  position: absolute;
72
62
  }
@@ -4,9 +4,9 @@
4
4
  border-color: transparent;
5
5
  border-radius: var(--rounded-full);
6
6
  border-width: var(--border-2);
7
- block-size: var(--size-6);
7
+ block-size: var(--size-5);
8
8
  cursor: pointer;
9
- inline-size: var(--size-11);
9
+ inline-size: var(--size-9);
10
10
  transition-duration: var(--time-150);
11
11
  transition-property: var(--transition-colors);
12
12
 
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  &:checked::before {
18
- margin-inline-start: var(--size-5);
18
+ margin-inline-start: var(--size-4);
19
19
  }
20
20
 
21
21
  &::before {
@@ -25,7 +25,8 @@
25
25
  border-radius: var(--rounded-full);
26
26
  content: "";
27
27
  display: block;
28
- transition: margin var(--time-150);
28
+ transition-duration: var(--time-150);
29
+ transition-property: margin;
29
30
  }
30
31
 
31
32
  &:focus-visible {
@@ -1,7 +1,13 @@
1
1
  :where(.table) {
2
+ caption-side: bottom;
2
3
  font-size: var(--text-sm);
3
4
  inline-size: var(--size-full);
4
5
 
6
+ caption {
7
+ color: var(--color-text-subtle);
8
+ margin-block-start: var(--size-4);
9
+ }
10
+
5
11
  thead {
6
12
  color: var(--color-text-subtle);
7
13
  }
@@ -3,7 +3,7 @@
3
3
  position: absolute; clip: rect(0, 0, 0, 0);
4
4
  }
5
5
 
6
- &:has([type="checkbox"]:checked) {
6
+ &:has(:checked) {
7
7
  --btn-background: var(--color-secondary);
8
8
  }
9
9
 
@@ -25,20 +25,19 @@
25
25
  font-size: var(--text-sm);
26
26
  line-height: inherit;
27
27
 
28
- /* Setup animation */
28
+ /* Final state of exit animation and setup */
29
29
  opacity: 0;
30
30
  transform: var(--scale-95);
31
31
  transition-behavior: allow-discrete;
32
32
  transition-duration: var(--time-150);
33
33
  transition-property: display, opacity, transform;
34
34
 
35
- /* In animation */
35
+ /* Final state of entry animation */
36
36
  .dropdown-active & {
37
- opacity: 1;
38
- transform: var(--scale-100);
37
+ opacity: 1; transform: var(--scale-100);
39
38
  }
40
39
 
41
- /* Out animation */
40
+ /* Initial state of entry animation */
42
41
  @starting-style {
43
42
  .dropdown-active & {
44
43
  opacity: 0; transform: var(--scale-95);
@@ -120,6 +119,6 @@
120
119
  border-color: var(--color-negative);
121
120
  }
122
121
 
123
- [data-controller*="combobox"] {
122
+ [data-controller~="combobox"] {
124
123
  clip: rect(0 0 0 0); position: absolute;
125
124
  }
@@ -55,7 +55,7 @@ trix-toolbar {
55
55
  color: var(--color-text-reversed);
56
56
  }
57
57
 
58
- @media (max-width: 768px) {
58
+ @media (max-width: 48rem) {
59
59
  .trix-button-group--history-tools { display: none; }
60
60
  }
61
61
  }
@@ -4,26 +4,10 @@ export default class extends Controller {
4
4
  static targets = [ "content" ]
5
5
 
6
6
  next() {
7
- this.contentTarget.scrollTo({ left: this.#nextPosition, behavior: "smooth" })
7
+ this.contentTarget.scrollBy(100, 0)
8
8
  }
9
9
 
10
10
  prev() {
11
- this.contentTarget.scrollTo({ left: this.#prevPosition, behavior: "smooth" })
12
- }
13
-
14
- get #nextPosition() {
15
- return this.#scrollLeft + this.#slideSize
16
- }
17
-
18
- get #prevPosition() {
19
- return this.#scrollLeft - this.#slideSize
20
- }
21
-
22
- get #scrollLeft() {
23
- return this.contentTarget.scrollLeft
24
- }
25
-
26
- get #slideSize() {
27
- return this.contentTarget.clientWidth
11
+ this.contentTarget.scrollBy(-100, 0)
28
12
  }
29
13
  }
@@ -38,13 +38,13 @@ export default class extends Controller {
38
38
  }
39
39
 
40
40
  #reset() {
41
- this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach((element) => {
41
+ this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(element => {
42
42
  element.classList.remove(this.selectedClass)
43
43
  })
44
44
  }
45
45
 
46
46
  #selectMatches(value) {
47
- this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach((element) => {
47
+ this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach(element => {
48
48
  element.classList.add(this.selectedClass)
49
49
  })
50
50
  }
@@ -4,8 +4,7 @@ import flatpickr from "https://esm.sh/flatpickr@4.6.13?standalone"
4
4
  export default class extends Controller {
5
5
  static targets = [ "details" ]
6
6
  static values = {
7
- type: String,
8
- disable: Array,
7
+ type: String, disable: Array,
9
8
  mode: { type: String, default: "single" },
10
9
  dateFormat: { type: String, default: "F d, Y" },
11
10
  dateTimeFormat: { type: String, default: "F d, Y H:i" }
@@ -16,9 +16,7 @@ export default class extends Controller {
16
16
  #requestOTP() {
17
17
  navigator.credentials.get(this.#options).then(otp => {
18
18
  this.element.value = otp.code
19
- }).catch(error => {
20
- console.log(error)
21
- })
19
+ }).catch(error => {})
22
20
  }
23
21
 
24
22
  get #options() {
@@ -5,6 +5,8 @@ export default class extends Controller {
5
5
  static targets = [ "button", "menu" ]
6
6
  static values = { placement: { type: String, default: "bottom" } }
7
7
 
8
+ #showTimer = null
9
+
8
10
  initialize() {
9
11
  this.orient = this.orient.bind(this)
10
12
  }
@@ -21,12 +23,12 @@ export default class extends Controller {
21
23
  this.menuTarget.showPopover()
22
24
  }
23
25
 
24
- showLater() {
25
- setTimeout(() => this.show(), 700)
26
+ hide() {
27
+ clearTimeout(this.#showTimer); this.menuTarget.hidePopover()
26
28
  }
27
29
 
28
- hide() {
29
- this.menuTarget.hidePopover()
30
+ showLater() {
31
+ this.#showTimer = setTimeout(() => this.show(), 700)
30
32
  }
31
33
 
32
34
  orient() {
@@ -13,7 +13,7 @@ export default class extends Controller {
13
13
  }
14
14
 
15
15
  #update() {
16
- this.inputTarget.type = this.#inputType
16
+ this.inputTarget.type = this.#inputType
17
17
  this.showIconTarget.hidden = this.revealedValue
18
18
  this.hideIconTarget.hidden = !this.revealedValue
19
19
  }
@@ -29,7 +29,7 @@ export default class extends Controller {
29
29
  }
30
30
  }
31
31
 
32
- #showCurrentTab(shouldFocus) {
32
+ #showCurrentTab() {
33
33
  this.buttonTargets.forEach((element, index) => {
34
34
  element.ariaSelected = index === this.indexValue
35
35
  element.tabIndex = index === this.indexValue ? 0 : -1
@@ -12,9 +12,7 @@ export default class extends Controller {
12
12
  async share() {
13
13
  try {
14
14
  await navigator.share(await this.#getShareData())
15
- } catch(error) {
16
- console.warn(error.message)
17
- }
15
+ } catch {}
18
16
  }
19
17
 
20
18
  async #getShareData() {
@@ -18,7 +18,7 @@ class CssZero::InstallGenerator < Rails::Generators::Base
18
18
  end
19
19
 
20
20
  def add_basic_components
21
- invoke "css_zero:add", %w(layouts input switch button flash alert)
21
+ invoke "css_zero:add", %w(layouts flash alert input button)
22
22
  end
23
23
 
24
24
  private
@@ -12,13 +12,13 @@
12
12
  <%% end %>
13
13
 
14
14
  <% attributes.each do |attribute| -%>
15
- <div class="flex flex-col gap-half mbe-4">
15
+ <div class="flex flex-col items-start gap-half mbe-4">
16
16
  <% if attribute.password_digest? -%>
17
17
  <%%= form.label :password, class: "text-sm font-medium leading-none" %>
18
18
  <%%= form.password_field :password, class: "input" %>
19
19
  </div>
20
20
 
21
- <div class="flex flex-col gap-half mbe-4">
21
+ <div class="flex flex-col items-start gap-half mbe-4">
22
22
  <%%= form.label :password_confirmation, class: "text-sm font-medium leading-none" %>
23
23
  <%%= form.password_field :password_confirmation, class: "input" %>
24
24
  <% elsif attribute.attachments? -%>
@@ -29,7 +29,7 @@
29
29
  <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: "auto", class: "input" %>
30
30
  <% elsif attribute.field_type == :checkbox -%>
31
31
  <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
32
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "switch" %>
32
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "checkbox" %>
33
33
  <% else -%>
34
34
  <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
35
35
  <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "input" %>
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.92
4
+ version: 0.0.94
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: 2025-01-16 00:00:00.000000000 Z
11
+ date: 2025-01-20 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com