css-zero 0.0.26 → 0.0.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a4abc591fd494e591052a0bc63cb46af6d9a0cbae7c126c07b914a15a097175
-  data.tar.gz: d5ed800b2b6a0ef53ccb8f41a6a8706f63dbe0b92e266b3c606afbf21d143aef
+  metadata.gz: 5d00718d05a40dc614c0fda5d71c5959ad693c89e1fd5493c132a5d4144cbe5e
+  data.tar.gz: b1f8b29d85f5ba031dfd416a80c57dc12d1b0903e0881c2e4cac3d18e2a39aa8
 SHA512:
-  metadata.gz: fdf03752432fe469809a8299338cd0726022514b462cb0ab7523bfe533169cd47a6edc97fc7fb34e9ef31432f9c1470a257bcf15bca53eb40e905030f47dff3f
-  data.tar.gz: 79397cb9785170dc47b34669592e67478159b2a75585155177174dd19951fc2325837af549a188d97e3e6dff26fcef87855f877e4889863f2a88e63fd1a673f3
+  metadata.gz: 6e0e3afefccb4f99330a9c3a3942b8619714b8152dd24e04bb421029f55fdff57ec3e1fbde841036151586235e5dcc07a505f0d713d661e15dbfcb37477e9653
+  data.tar.gz: f4207685a64ce0a9b70cc1553aa6cede199c9eda2238823c1f713a4049d38992e8fe28b76c64678c6854fc627144a283bba92b2314ac2f6958b3546bef9d001c

data/README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-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
+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 toggle
 ```
 
 ### Requirements
@@ -52,9 +52,9 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
 *= require transform
 *= require transition
 *= require typography
+*= require zindex
 *= require_tree .
 *= require_self
-*= require zindex
 *= require zutilities
 */
 ```

data/app/assets/stylesheets/_reset.css

@@ -36,6 +36,15 @@ html,
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
+/*
+  Prevent page scroll when modal dialog is open.
+*/
+
+html:has(dialog:modal[open]) {
+  overflow: hidden;
+}
+
+
 /*
   Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
@@ -242,14 +251,6 @@ progress {
   line-height: 1em;
 }
 
-/*
-  Correct empty date field height on safari IOS.
-*/
-
-::-webkit-date-and-time-value {
-  height: 1.5em;
-}
-
 /*
   Remove the inner padding in Chrome and Safari on macOS.
 */
@@ -259,16 +260,11 @@ progress {
 }
 
 /*
-  Remove the increment cursor for step any.
+  Correct empty date field height on safari IOS.
 */
 
-input[step='any']::-webkit-inner-spin-button,
-input[step='any']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-
-input[step='any'] {
-  -moz-appearance: textfield;
+::-webkit-date-and-time-value {
+  height: 1.5em;
 }
 
 /*
@@ -344,10 +340,11 @@ video {
 }
 
 /*
-  Prevent page scroll when modal dialog is open
+  Make turbo frame become pseudo-box by default.
 */
-html:has(dialog:modal[open]) {
-  overflow: hidden;
+
+turbo-frame {
+  display: contents;
 }
 
 /*

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.26"
+  VERSION = "0.0.28"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
+  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table toggle
 
 Example:
     bin/rails generate css_zero:add [components...]

data/lib/generators/css_zero/add/resources.yml

@@ -51,3 +51,5 @@ switch:
   - app/assets/stylesheets/switch.css
 table:
   - app/assets/stylesheets/table.css
+toggle:
+  - app/assets/stylesheets/toggle.css

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css

@@ -1,6 +1,4 @@
 :where(.accordion) {
-  inline-size: var(--size-full);
-
   details {
     border-block-end-width: var(--border);
     transition: padding var(--time-150) var(--ease-in-out);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css

@@ -1,5 +1,4 @@
 .badge {
-  align-items: center;
   background-color: var(--badge-background, var(--color-primary));
   border-radius: var(--rounded-full);
   border-width: var(--badge-border-width, 0);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css

@@ -1,7 +1,6 @@
 .btn {
   align-items: center;
   background-color: var(--btn-background, var(--color-primary));
-  border-color: var(--color-border);
   border-radius: var(--rounded-md);
   border-width: var(--btn-border-width, 0);
   color: var(--btn-color, var(--color-text-reversed));
@@ -71,6 +70,7 @@
 
     &::after {
       animation: var(--animate-spin);
+      animation-duration: 1s;
       background-image: url("loader-circle.svg");
       background-size: cover;
       block-size: var(--size-4);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css

@@ -1,8 +1,6 @@
 .card {
-  background-color: var(--color-bg);
   border-radius: var(--rounded-lg);
   border-width: var(--border);
-  color: var(--color-text);
   padding: var(--size-6);
   box-shadow: var(--shadow-sm);
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css

@@ -12,6 +12,10 @@
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
 
+  &::-webkit-scrollbar {
+    display: none;
+  }  
+
   > * {
     flex: 0 0 100%;
     scroll-snap-stop: always;

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css

@@ -51,7 +51,7 @@
     border-end-end-radius: 0;
     border-end-start-radius: 0;
     margin-block-end: 0;
-    max-inline-size: none !important;
+    max-inline-size: none;
   }
 }
 
@@ -59,8 +59,4 @@
   inset-block-start: var(--size-4);
   inset-inline-end: var(--size-4);
   position: absolute;
-
-  @media (width < 40rem) {
-    display: none;
-  }
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css

@@ -1,7 +1,6 @@
 .flash {
   animation: appear-then-fade 4s 300ms both;
-  backdrop-filter: var(--blur) var(--contrast-75);
-  background-color: hsl(from var(--color-text) h s l / .65);
+  background-color: var(--color-text);
   border-radius: var(--rounded-full);
   color: var(--color-text-reversed);
   margin-block-start: var(--size-4);
@@ -9,11 +8,6 @@
   padding: var(--size-2) var(--size-4);
   position: fixed;
   text-align: center;
-
-  img {
-    display: inline;
-    margin-block-end: var(--size-1);
-  }
 }
 
 @keyframes appear-then-fade {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css

@@ -3,7 +3,6 @@
   background-color: var(--color-bg);
   border-color: var(--color-border);
   border-radius: var(--rounded-md);
-  border-width: var(--border);
   font-size: var(--text-sm);
   inline-size: var(--size-full);
   padding: var(--size-2) var(--size-3);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css

@@ -0,0 +1,17 @@
+.toggle {
+  display: inline-flex;
+  position: relative;
+
+  &:has(:focus-visible) .btn {
+    outline: var(--border-2) solid var(--color-selected-dark);
+    outline-offset: var(--border-2);
+  }
+
+  [type="checkbox"] {
+    position: absolute; clip: rect(0, 0, 0, 0);
+  }
+
+  [type="checkbox"]:checked + .btn {
+    --btn-background: var(--color-secondary);
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.26
+  version: 0.0.28
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-23 00:00:00.000000000 Z
+date: 2024-07-26 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -66,6 +66,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
 - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js