css-zero 0.0.25 → 0.0.27

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b904762be7cdca0956aa0340d32bdaf524ce2f10b106e30f2487104904ce23cf
-  data.tar.gz: cd968a19dfbd06001ba9b009c73cc513d2a5440c0d53146b062e4561e4c5c187
+  metadata.gz: 6042a247b900f1c53ca209d67a3cd9de65cea06889a70ad5b13643b915195a08
+  data.tar.gz: 5cd927896caf176105f857803a676f26e802041578a255777f371b79b8df8555
 SHA512:
-  metadata.gz: e2c9fbae5418104337666b1302c9ae824f72adcce8009cde01ed5df1a12e770726598d16d3cf1dd885a0d318328e0889922dc4230975b06129a7f72f8a7ee45d
-  data.tar.gz: 1a65d184ce40cce70efcb94afc23100e0c2019668a4aba36eee69b1abae86fd7beb966f061ec15d71c6acf8ecf18e3eef3587535da320497e1d8d086aee17ff9
+  metadata.gz: 4adc0e6555602ace413d7da7205bbff33de92a2372130f7f3646f05f6951deb04b858746115adce32bdda70bd52497b85a12cff03afa21beeff4751a3639beae
+  data.tar.gz: 14a8a5733e07206451923270e5e042635a40edbcacda8225ce80f1fe8a4387d490dd4fea58d204d31b0f9494ea1f09644d3fe3ddaeb27a5ca0a84f045d7f7aae

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,6 +52,7 @@ 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 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.
 */
@@ -193,6 +202,14 @@ input:where([type='button'], [type='reset'], [type='submit']),
   appearance: button;
 }
 
+/*
+  Revert padding block, it can be noticed in select with multiple.
+*/
+
+option {
+  padding-block: revert;
+}
+
 /*
   Use the modern Firefox focus style for all focusable elements.
 */
@@ -234,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.
 */
@@ -251,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;
 }
 
 /*
@@ -336,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/app/assets/stylesheets/zindex.css

@@ -0,0 +1,13 @@
+/****************************************************************
+* Z-Index
+* Utilities for controlling the stack order of an element.
+* z-index: var(--z-10);
+*****************************************************************/
+
+:root {
+  --z-10:	10;
+  --z-20:	20;
+  --z-30:	30;
+  --z-40:	40;
+  --z-50:	50;
+}

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.25"
+  VERSION = "0.0.27"
 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/breadcrumb.css

@@ -15,7 +15,6 @@
     color: var(--color-text);
   }
 
-  /* Small screens and below */
   @media (width < 40rem) {
     gap: var(--size-1_5);
   }

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,12 +70,13 @@
 
     &::after {
       animation: var(--animate-spin);
+      animation-duration: 1s;
       background-image: url("loader-circle.svg");
       background-size: cover;
-      block-size: var(--size-4);
+      block-size: var(--size-6);
       content: "";
       filter: var(--btn-icon-color, var(--color-filter-text-reversed));
-      inline-size: var(--size-4);
+      inline-size: var(--size-6);
       margin-inline: auto;
       position: absolute;
     }

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

@@ -47,7 +47,6 @@
     }
   }
 
-  /* Small screens and below */
   @media (width < 40rem) {
     border-end-end-radius: 0;
     border-end-start-radius: 0;
@@ -60,9 +59,4 @@
   inset-block-start: var(--size-4);
   inset-inline-end: var(--size-4);
   position: absolute;
-
-  /* Small screens and below */
-  @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,15 +3,10 @@
   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);
 
-  option {
-    padding-block: var(--size-1);
-  }
-
   &:is(textarea):not([rows]) {
     field-sizing: content;
     max-block-size: calc(10lh + var(--size-6));
@@ -64,13 +59,11 @@
 }
 
 :is(.input, .range, .checkbox, .radio) {
-  /* Keyboard navigation */
   &:focus-visible {
     outline: var(--border-2) solid var(--color-selected-dark);
     outline-offset: var(--border-2);
   }
 
-  /* Server side validation */
   .field_with_errors & {
     border-color: var(--color-negative);
   }

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

@@ -47,7 +47,6 @@
     }
   }
 
-  /* Small screens and below */
   @media (width < 40rem) {
     max-inline-size: none;
     text-align: center;

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.25
+  version: 0.0.27
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-23 00:00:00.000000000 Z
+date: 2024-07-25 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -29,6 +29,7 @@ files:
 - app/assets/stylesheets/transform.css
 - app/assets/stylesheets/transition.css
 - app/assets/stylesheets/typography.css
+- app/assets/stylesheets/zindex.css
 - app/assets/stylesheets/zutilities.css
 - app/helpers/dialog_helper.rb
 - lib/css-zero.rb
@@ -65,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