css-zero 0.0.23 → 0.0.24

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 384e68aee1868c3f50f08a62b7f8f7dfa8ccbef7ebcfb8237758f9089c2ca817
-  data.tar.gz: df90558a73aaf3470093c6eddf9d20ce8372a1d7503809c23544cdd6b7d4b0dd
+  metadata.gz: a5e73d39707f2126d5d15f5099004ac306aa5acaa584ff7c4441bfec4309d8f3
+  data.tar.gz: 9eb912c80e2fd2e3f0681390cecb8cb2950e558cf2c42fae5affd846cd4b08e3
 SHA512:
-  metadata.gz: 928d0dd662bd67da78146d1356dcacd04946a57fccb25aaf861224e79f6028fe87888520142c5cb56d492be3367b12c512739871e76e8608f56563216926dc83
-  data.tar.gz: 55578a5d4ef3a5a6cf1f2e987223bfdf99e2493fd7d649e1a56765859dbe96a9b83d75fa4321159992e04347b3c7dfd9eeec2e25f9b00f18dc0c32cdf0dd801d
+  metadata.gz: 1d9ad5567f702b654d1efca3312b275fd3adec67c95bdf5539d44b01dc845846b171b8850654d3e8182537c3b4b1a757a1291500df589c0575880d6a6629ab68
+  data.tar.gz: e55ab56ea77eefd60b392afe4c6cda7421739bab9a25c1410e5d8a83ab37a73912849803c2d67a4fe513a8227437486ae2ef93b3046a5d4d456265af7db6c3f8

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 input pagination progress prose switch table
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
 ```
 
 ### Requirements

data/app/assets/stylesheets/_reset.css

@@ -234,6 +234,14 @@ 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.
 */
@@ -242,6 +250,19 @@ progress {
   -webkit-appearance: none;
 }
 
+/*
+  Remove the increment cursor for step any.
+*/
+
+input[step='any']::-webkit-inner-spin-button,
+input[step='any']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+input[step='any'] {
+  -moz-appearance: textfield;
+}
+
 /*
   Add the correct display in Chrome and Safari.
 */
@@ -314,6 +335,13 @@ video {
   block-size: auto;
 }
 
+/*
+  Prevent page scroll when dialog is open
+*/
+html:has(dialog[open]) {
+  overflow: hidden;
+}
+
 /*
   Make elements with the HTML hidden attribute stay hidden by default.
 */

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.23"
+  VERSION = "0.0.24"
 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 input pagination progress prose switch table
+  accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -40,5 +40,9 @@ prose:
   - app/assets/stylesheets/prose.css
 switch:
   - app/assets/stylesheets/switch.css
+sheet:
+  - app/assets/stylesheets/sheet.css
+  - app/javascript/controllers/dialog_controller.js
+  - app/assets/images/x.svg
 table:
   - app/assets/stylesheets/table.css

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

@@ -66,8 +66,3 @@
     display: none;
   }
 }
-
-/* Prevent page scroll when dialog is open */
-html:has(.dialog[open]) {
-  overflow: hidden;
-}

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

@@ -0,0 +1,61 @@
+.sheet {
+  background-color: var(--color-bg);
+  border-inline-start-width: var(--border);
+  box-shadow: var(--shadow-lg);
+  block-size: 100%;
+  color: var(--color-text);
+  inline-size: var(--size-3-4);
+  margin-inline-start: auto;
+  max-block-size: none;
+  max-inline-size: var(--width-sm);
+  padding: var(--size-6);
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, .8);
+  }
+
+  /* Setup animation */
+  transform: translateX(100%);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-500);
+  transition-property: display, overlay, transform;
+
+  &::backdrop {
+    opacity: 0;
+    transition-behavior: allow-discrete;
+    transition-duration: var(--time-150);
+    transition-property: display, overlay, opacity;
+  }
+
+  /* In animation */
+  &[open] {
+    transform: translateX(0);
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+  }
+
+  /* Out animation */
+  @starting-style {
+    &[open] {
+      transform: translateX(100%);
+    }
+
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* Small screens and below */
+  @media (width < 40rem) {
+    max-inline-size: none;
+    text-align: center;
+  }
+}
+
+.sheet__close {
+  inset-block-start: var(--size-4);
+  inset-inline-end: var(--size-4);
+  position: absolute;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.23
+  version: 0.0.24
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-20 00:00:00.000000000 Z
+date: 2024-07-22 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -60,6 +60,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.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/javascript/controllers/carousel_controller.js