css-zero 0.0.22 → 0.0.24

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5d4d17fb32c6c3bfd5762fcc8343faee461b303382b2f99a36b8d45ad31eba2
-  data.tar.gz: 8e77a9d7121a81064b67cc28bca86d0b3fe41d7ba8add75e973a84fc83d45cb8
+  metadata.gz: a5e73d39707f2126d5d15f5099004ac306aa5acaa584ff7c4441bfec4309d8f3
+  data.tar.gz: 9eb912c80e2fd2e3f0681390cecb8cb2950e558cf2c42fae5affd846cd4b08e3
 SHA512:
-  metadata.gz: cb0ed49bdd5bd806f10720b998cefcffbf781cd4507fa67f07e75812eb73d87bdb1df7b4d237aee347d7f732ac6eed97582bbe41b423a19459cbbfae8b4ec800
-  data.tar.gz: 2c85562ca2d1a2f893cd29333d2a3099babc649a48cde4575ae5bf08ae950a3ce62226c9a9bb040f3701d37b2785b4e051290a281a3b49dbf417466475b1768d
+  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 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/app/assets/stylesheets/sizes.css

@@ -84,6 +84,16 @@
   --width-6xl:   72rem; /* 1152px */
   --width-7xl:   80rem; /* 1280px */
 
+  /****************************************************************
+  * Aspect Ratio
+  *****************************************************************/
+  --aspect-square: 1/1;
+  --aspect-landscape: 4/3;
+  --aspect-portrait: 3/4;
+  --aspect-widescreen: 16/9;
+  --aspect-ultrawide: 18/5;
+  --aspect-golden: 1.6180/1;
+
   /****************************************************************
   * Breakpoints
   *****************************************************************/

data/app/assets/stylesheets/zutilities.css

@@ -163,6 +163,12 @@
 .overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
 .overflow-hidden { overflow: hidden; }
 
+.object-contain	{ object-fit: contain; }
+.object-cover {	object-fit: cover; }
+
+.aspect-square { aspect-ratio: 1; }
+.aspect-widescreen { aspect-ratio: 16 / 9; }
+
 /****************************************************************
 * Margin
 *****************************************************************/

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.22"
+  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 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

@@ -15,12 +15,17 @@ button:
   - app/assets/images/loader-circle.svg
 card:
   - app/assets/stylesheets/card.css
+carousel:
+  - app/assets/stylesheets/carousel.css
+  - app/javascript/controllers/carousel_controller.js
+  - app/assets/images/arrow-left.svg
+  - app/assets/images/arrow-right.svg
 collapsible:
   - app/javascript/controllers/collapsible_controller.js
 dialog:
   - app/assets/stylesheets/dialog.css
-  - app/assets/images/x.svg
   - app/javascript/controllers/dialog_controller.js
+  - app/assets/images/x.svg
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg
@@ -35,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/images/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>

data/lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>

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

@@ -22,6 +22,10 @@
     justify-content: space-between;
     padding-block: var(--size-4);
 
+    &:hover {
+      text-decoration: underline;
+    }
+
     &:focus-visible {
       outline: var(--border-2) solid var(--color-primary);
       outline-offset: var(--border-2);

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

@@ -9,7 +9,7 @@
   overflow: hidden;
 
   img {
-    aspect-ratio: 1;
+    aspect-ratio: var(--aspect-square);
     block-size: var(--size-full);
     inline-size: var(--size-full);
     object-fit: cover;

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

@@ -0,0 +1,20 @@
+.carousel {
+  align-items: center;
+  display: flex;
+  gap: var(--size-4);
+}
+
+.carousel__content {
+  display: flex;
+  gap: var(--size-6);
+  overflow-x: auto;
+  padding: var(--size-1);
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+
+  > * {
+    flex: 1 0 100%;
+    scroll-snap-stop: always;
+    scroll-snap-align: center;
+  }
+}

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/input.css

@@ -7,7 +7,6 @@
   font-size: var(--text-sm);
   inline-size: var(--size-full);
   padding: var(--size-2) var(--size-3);
-  resize: none;
 
   option {
     padding-block: var(--size-1);
@@ -17,6 +16,7 @@
     field-sizing: content;
     max-block-size: calc(10lh + var(--size-6));
     min-block-size: calc(3lh  + var(--size-6));
+    resize: none;
   }
 
   &:is(select):not([multiple], [size]) {

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;
+}

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

@@ -20,7 +20,7 @@
   }
 
   &::before {
-    aspect-ratio: 1;
+    aspect-ratio: var(--aspect-square);
     background-color: var(--color-text-reversed);
     block-size: var(--size-full);
     border-radius: var(--rounded-full);

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

@@ -10,6 +10,10 @@
     border-block-start-width: var(--border);
   }
 
+  tr:hover {
+    background-color: var(--color-border-light);
+  }
+
   th {
     font-weight: var(--font-medium);
     text-align: start;

data/lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "content" ]
+
+  next() {
+    this.contentTarget.scrollTo({ left: this.#scrollLeft + this.#slideSize, behavior: "smooth" })
+  }
+
+  previous() {
+    this.contentTarget.scrollTo({ left: this.#scrollLeft - this.#slideSize, behavior: "smooth" })
+  }
+
+  get #scrollLeft() {
+    return this.contentTarget.scrollLeft
+  }
+
+  get #slideSize() {
+    return this.contentTarget.clientWidth
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.22
+  version: 0.0.24
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-18 00:00:00.000000000 Z
+date: 2024-07-22 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -37,6 +37,8 @@ files:
 - lib/generators/css_zero/add/USAGE
 - lib/generators/css_zero/add/add_generator.rb
 - lib/generators/css_zero/add/resources.yml
+- lib/generators/css_zero/add/templates/app/assets/images/arrow-left.svg
+- lib/generators/css_zero/add/templates/app/assets/images/arrow-right.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-left.svg
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-right.svg
@@ -52,13 +54,16 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
 - 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
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/install/USAGE