css-zero 0.0.89 → 0.0.90

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 446ea1574ed6c57c78aa0e0527a18f0bc35b82d4fc49414a4baaa17891c796be
-  data.tar.gz: 83d6dfd23f2d33251e5eea2adef2023e2046b4e0df546f81175140bc5661a783
+  metadata.gz: b44ee5e7f531ea6761accf968ed464f3766ae14359863a9709668751d7edb340
+  data.tar.gz: f7fe90b26adc996d5021630c42fdc51125c73295f00c4e1ea013e96576396d51
 SHA512:
-  metadata.gz: a1a1368e3330606c44a7c73b52e4c4b0cf6dad249974bafbd985c9a0713ddce1d78a4dd60196885b2a9e78d849dda3ad06686d17b04a26166cb1e753fdad60d6
-  data.tar.gz: 85e68dee76bfe6fd90103a204c453e292a35b0c4c7c2996511d6d4bb90c60a29f806d3f6a0e102afc10d0522c7f0c6355dddc79808d2d5548c65b629dddac5cb
+  metadata.gz: 2a6b206ffbfef92cb16383dde1e66954dcb9f7764dc9c8915d11c60f7e4a122d82212cd2efde6f7b2abf56cbcc526fc9ba1bd4cfffef2bb826017d8b76101335
+  data.tar.gz: 589955584927999aab31a94e6796908dace0bc9326936f9d31c86e871cb07bf60b3d4e359898b86a27555b0cb0ce6e4daecbe679a83d1207563931da5ead8372

data/app/assets/stylesheets/_reset.css

@@ -355,6 +355,14 @@ input:where([type='button'], [type='reset'], [type='submit']),
   block-size: auto;
 }
 
+/*
+  Correct the arrow style of datalist in Chrome.
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1em;
+}
+
 /*
   Enables size interpolation to allow animation.
 */

data/app/assets/stylesheets/zutilities.css

@@ -26,7 +26,7 @@
 .self-center { align-self: center; }
 
 .gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
-.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }
+.gap-half { column-gap: 0.5rem; row-gap: 0.5rem; }
 
 /****************************************************************
 * Text

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.89"
+  VERSION = "0.0.90"
 end

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

@@ -1,12 +1,13 @@
 :where(.accordion) {
   details {
     border-block-end-width: var(--border);
+    font-size: var(--text-sm);
     overflow: hidden;
 
     &::details-content {
       block-size: 0;
       transition-behavior: allow-discrete;
-      transition-duration: var(--time-150);
+      transition-duration: var(--time-200);
       transition-property: content-visibility block-size;
     }
 

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

@@ -3,8 +3,9 @@
   border-radius: var(--rounded-lg);
   border-width: var(--border);
   color: var(--alert-color, var(--color-text));
-  padding: var(--size-4);
+  font-size: var(--text-sm);
   inline-size: var(--size-full);
+  padding: var(--size-4);
 
   img {
     filter: var(--alert-icon-color, var(--color-filter-text));

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

@@ -1,7 +1,8 @@
 .badge {
   background-color: var(--badge-background, var(--color-bg));
-  border-radius: var(--rounded-full);
+  border-radius: var(--rounded-md);
   border: 1px solid var(--badge-border-color, var(--color-border));
+  box-shadow: var(--badge-box-shadow, none);
   color: var(--badge-color, var(--color-text));
   display: inline-flex;
   font-size: var(--text-xs);
@@ -12,23 +13,27 @@
 .badge--primary {
   --badge-background: var(--color-primary);
   --badge-border-color: transparent;
+  --badge-box-shadow: var(--shadow);
   --badge-color: var(--color-text-reversed);
 }
 
 .badge--secondary {
   --badge-background: var(--color-secondary);
   --badge-border-color: transparent;
+  --badge-box-shadow: none;
   --badge-color: var(--color-text);
 }
 
 .badge--positive {
   --badge-background: var(--color-positive);
   --badge-border-color: transparent;
+  --badge-box-shadow: var(--shadow);
   --badge-color: white;
 }
 
 .badge--negative {
   --badge-background: var(--color-negative);
   --badge-border-color: transparent;
+  --badge-box-shadow: var(--shadow);
   --badge-color: white;
 }

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

@@ -5,6 +5,7 @@
   background-color: var(--btn-background);
   border-radius: var(--btn-radius, var(--rounded-md));
   border: 1px solid var(--btn-border-color, var(--color-border));
+  box-shadow: var(--btn-box-shadow, var(--shadow-sm));
   color: var(--btn-color, var(--color-text));
   cursor: pointer;
   display: inline-flex;
@@ -13,7 +14,7 @@
   gap: var(--size-2);
   inline-size: var(--btn-inline-size, auto);
   justify-content: var(--btn-justify-content, center);
-  padding: var(--btn-padding, 0.5rem 1rem);
+  padding: var(--btn-padding, 0.375rem 1rem);
   text-align: center;
   white-space: nowrap;
 
@@ -50,6 +51,7 @@
 
 .btn--borderless {
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
 }
 
 .btn--positive {
@@ -71,6 +73,7 @@
   --btn-border-color: transparent;
   --btn-hover-color: transparent;
   --btn-padding: 0;
+  --btn-box-shadow: none;
 }
 
 .btn--icon {
@@ -91,9 +94,9 @@
     animation: spin 1s linear infinite;
     background-image: url("loader-circle.svg");
     background-size: cover;
-    block-size: var(--size-4);
+    block-size: var(--size-5);
     content: "";
-    inline-size: var(--size-4);
+    inline-size: var(--size-5);
     position: absolute;
   }
 }

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

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

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

@@ -10,7 +10,7 @@
   --input-background: transparent;
   --input-border-color: transparent;
   --input-outline-size: 0;
-  --input-padding: 0.75rem 1rem;
+  --input-padding: var(--size-2_5);
 }
 
 .command__list {
@@ -44,11 +44,12 @@
 
 .command__item {
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
   --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
-  --btn-padding: var(--size-1_5) var(--size-2);
+  --btn-padding: 0.375rem 0.5rem;
 
   &[aria-selected=true] {
     --btn-background: var(--color-secondary);

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

@@ -16,13 +16,13 @@
   opacity: 0;
   transform: var(--scale-95);
   transition-behavior: allow-discrete;
-  transition-duration: var(--time-150);
+  transition-duration: var(--time-200);
   transition-property: display, overlay, opacity, transform;
 
   &::backdrop {
     opacity: 0;
     transition-behavior: allow-discrete;
-    transition-duration: var(--time-150);
+    transition-duration: var(--time-200);
     transition-property: display, overlay, opacity;
   }
 

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

@@ -3,10 +3,11 @@
   background-color: var(--input-background, var(--color-bg));
   border: 1px solid var(--input-border-color, var(--color-border));
   border-radius: var(--input-radius, var(--rounded-md));
+  box-shadow: var(--input-box-shadow, var(--shadow-sm));
   font-size: var(--input-font-size, var(--text-sm));
   inline-size: var(--input-inline-size, var(--size-full));
-  min-block-size: var(--input-block-size, var(--size-10));
-  padding: var(--input-padding, 0.5rem 0.75rem);
+  min-block-size: var(--input-block-size, var(--size-9));
+  padding: var(--input-padding, 0.375rem 0.75rem);
 
   option {
     padding-block: 2px;

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

@@ -22,11 +22,12 @@
 
 .menu__item {
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
   --btn-font-weight: var(--font-normal);
   --btn-hover-color: var(--color-secondary);
   --btn-justify-content: start;
   --btn-outline-size: 0;
-  --btn-padding: var(--size-1_5) var(--size-2);
+  --btn-padding: 0.375rem 0.5rem;
 
   &:focus-visible {
     --btn-background: var(--color-secondary);

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

@@ -20,7 +20,7 @@
   }
 
   th, td {
-    padding: var(--size-4);
+    padding: var(--size-2);
   }
 
   tfoot {

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

@@ -1,6 +1,6 @@
 .tabs__list {
   background-color: var(--color-border-light);
-  block-size: var(--size-10);
+  block-size: var(--size-9);
   border-radius: var(--rounded-md);
   color: var(--color-text-subtle);
   display: inline-flex;
@@ -11,6 +11,7 @@
 .btn--tab {
   --btn-background: transparent;
   --btn-border-color: transparent;
+  --btn-box-shadow: none;
   --btn-hover-color: transparent;
   --btn-inline-size: var(--size-full);
 

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

@@ -25,6 +25,26 @@
   font-size: var(--text-sm);
   line-height: inherit;
 
+  /* Setup animation */
+  opacity: 0;
+  transform: var(--scale-95);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-150);
+  transition-property: display, opacity, transform;
+
+  /* In animation */
+  .dropdown-active & {
+    opacity: 1;
+    transform: var(--scale-100);
+  }
+
+  /* Out animation */
+  @starting-style {
+    .dropdown-active & {
+      opacity: 0; transform: var(--scale-95);
+    }
+  }
+
   .ts-dropdown-content:not(:has(.optgroup)) {
     padding: var(--size-1);
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.89
+  version: 0.0.90
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-15 00:00:00.000000000 Z
+date: 2025-01-16 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com