@shohojdhara/atomix 0.4.7 → 0.4.9

package/dist/atomix.css

@@ -1896,13 +1896,8 @@ a, a:hover {
 }
 .c-atomix-glass {
   position: relative;
-  --atomix-glass-radius: var(--atomix-radius-md, 16px);
-  --atomix-glass-transform: none;
-  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
-    cubic-bezier(0.22, 1, 0.36, 1);
+  --atomix-glass-transition: all 0.15s ease;
   --atomix-glass-position: absolute;
-  --atomix-glass-container-width: 100%;
-  --atomix-glass-container-height: 100%;
   --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
   --atomix-glass-base-z-index: 0;
   --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
@@ -1914,10 +1909,12 @@ a, a:hover {
   --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
   --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
   --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
+  position: relative;
 }
 .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
-  position: absolute;
-  inset: 0;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
   pointer-events: none;
   border-radius: var(--atomix-glass-radius);
   transform: var(--atomix-glass-transform);
@@ -1925,8 +1922,6 @@ a, a:hover {
   z-index: var(--_glass-z-hover);
 }
 .c-atomix-glass__base, .c-atomix-glass__overlay {
-  position: absolute;
-  inset: 0;
   pointer-events: none;
   border-radius: var(--atomix-glass-radius);
   transform: var(--atomix-glass-transform);
@@ -2002,25 +1997,26 @@ a, a:hover {
   mix-blend-mode: screen;
   z-index: var(--_glass-z-border-1);
   background: var(--atomix-glass-border-gradient-1, none);
-  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
 }
 .c-atomix-glass__border-2 {
   mix-blend-mode: overlay;
   z-index: var(--_glass-z-border-2);
   background: var(--atomix-glass-border-gradient-2, none);
-  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
 }
 .c-atomix-glass__container {
-  width: var(--atomix-glass-container-width);
-  height: var(--atomix-glass-container-height);
-  position: relative;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
   border-radius: var(--atomix-glass-radius);
   transition: var(--atomix-glass-transition);
+  transform: var(--atomix-glass-transform);
   z-index: var(--_glass-z-container);
 }
 .c-atomix-glass__inner {
-  width: var(--atomix-glass-container-width);
-  height: var(--atomix-glass-container-height);
+  width: 100%;
+  height: 100%;
   position: relative;
   border-radius: var(--atomix-glass-radius);
   padding: var(--atomix-glass-container-padding);
@@ -5918,19 +5914,12 @@ a, a:hover {
     transform: translateY(100%);
   }
 }
-.c-edge-panel--glass {
-  position: absolute;
-  z-index: auto;
-  z-index: initial;
-}
 .c-edge-panel--glass .c-edge-panel__container {
   background: transparent;
   box-shadow: none;
   overflow: hidden;
   border: none;
   padding: 0;
-  z-index: auto;
-  z-index: initial;
   will-change: initial;
   transform: none !important;
   border-radius: inherit;
@@ -5972,7 +5961,7 @@ a, a:hover {
 .c-edge-panel--glass .c-edge-panel__backdrop {
   background-color: color-mix(in srgb, var(--atomix-edge-panel-backdrop-bg) 50%, transparent);
   animation: fadeIn 0.3s ease forwards;
-  z-index: 0;
+  z-index: 1;
 }
 .c-edge-panel--glass .c-edge-panel__backdrop.is-animating-out {
   animation: fadeOut 0.3s ease forwards;
@@ -8055,8 +8044,6 @@ a, a:hover {
   width: 100%;
   height: 100%;
   display: none;
-}
-.c-modal:not(.c-modal--glass) {
   z-index: 1040;
 }
 .c-modal__backdrop {
@@ -8488,7 +8475,11 @@ a, a:hover {
 .c-navbar--glass {
   position: relative;
   background-color: transparent;
-  border-bottom: none;
+}
+@supports (color: color-mix(in lch, red, blue)){
+.c-navbar--glass {
+  background-color: color-mix(in srgb, var(--atomix-navbar-bg) 50%, transparent);
+}
 }
 .c-navbar--fixed-bottom {
   bottom: 0;
@@ -10999,18 +10990,14 @@ a, a:hover {
 .c-tooltip--bottom .c-tooltip__arrow {
   transform: rotate(225deg);
 }
-.c-tooltip--glass {
-  z-index: auto;
-  z-index: initial;
-}
 .c-tooltip--glass .c-tooltip__content {
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent);
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
 }
 .c-tooltip--glass .c-tooltip__arrow {
-  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 40%, transparent);
-  clip-path: polygon(0 100%, 100% 100%, 100% 0);
-  -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
-          backdrop-filter: var(--atomix-glass-container-backdrop);
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
+}
+.c-tooltip--glass .c-tooltip__arrow {
+  background-color: color-mix(in srgb, var(--atomix-tooltip-bg) 30%, transparent);
 }
 .c-upload {
   --atomix-upload-width: 31.25rem;
@@ -12788,6 +12775,34 @@ body.is-open-photoviewer {
   width: 1px;
   white-space: nowrap;
 }
+/**
+ * Touch Target Optimization
+ * Ensures interactive elements have a minimum touch target size of 44px
+ * as per WCAG 2.1 Success Criterion 2.5.5 (Target Size).
+ */
+@media (max-width: 991.98px) {
+  .u-touch-target {
+    min-height: 44px;
+    min-width: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+@media (max-width: 991.98px) {
+  .c-btn--sm,
+  .c-form-check-input,
+  .c-form-select-sm,
+  .c-form-control-sm {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  .c-form-check {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}
 @media (min-width: 0) {
   .u-bg-primary {
     background-color: #8b5cf6;
@@ -31952,374 +31967,374 @@ body.is-open-photoviewer {
   }
 }
 @media (min-width: 0) {
-  .u-fs-xs {
+  .u-text-xs {
     font-size: 0.75rem;
   }
-  .u-fs-sm {
+  .u-text-sm {
     font-size: 0.875rem;
   }
-  .u-fs-base {
+  .u-text-base {
     font-size: 1rem;
   }
-  .u-fs-md {
+  .u-text-md {
     font-size: 1.125rem;
   }
-  .u-fs-lg {
+  .u-text-lg {
     font-size: 1.25rem;
   }
-  .u-fs-xl {
+  .u-text-xl {
     font-size: 1.5rem;
   }
-  .u-fs-2xl {
+  .u-text-2xl {
     font-size: 2rem;
   }
-  .u-fs-h1 {
+  .u-text-h1 {
     font-size: 2.5rem;
   }
-  .u-fs-h2 {
+  .u-text-h2 {
     font-size: 2rem;
   }
-  .u-fs-h3 {
+  .u-text-h3 {
     font-size: 1.5rem;
   }
-  .u-fs-h4 {
+  .u-text-h4 {
     font-size: 1.25rem;
   }
-  .u-fs-h5 {
+  .u-text-h5 {
     font-size: 1.125rem;
   }
-  .u-fs-h6 {
+  .u-text-h6 {
     font-size: 1rem;
   }
-  .u-fs-display-1 {
+  .u-text-display-1 {
     font-size: 4rem;
   }
-  .u-fs-1 {
+  .u-text-1 {
     font-size: 2.5rem;
   }
-  .u-fs-2 {
+  .u-text-2 {
     font-size: 2rem;
   }
-  .u-fs-3 {
+  .u-text-3 {
     font-size: 1.5rem;
   }
-  .u-fs-4 {
+  .u-text-4 {
     font-size: 1.25rem;
   }
-  .u-fs-5 {
+  .u-text-5 {
     font-size: 1.125rem;
   }
-  .u-fs-6 {
+  .u-text-6 {
     font-size: 1rem;
   }
 }
 @media (min-width: 576px) {
-  .u-fs-sm-xs {
+  .u-text-sm-xs {
     font-size: 0.75rem;
   }
-  .u-fs-sm-sm {
+  .u-text-sm-sm {
     font-size: 0.875rem;
   }
-  .u-fs-sm-base {
+  .u-text-sm-base {
     font-size: 1rem;
   }
-  .u-fs-sm-md {
+  .u-text-sm-md {
     font-size: 1.125rem;
   }
-  .u-fs-sm-lg {
+  .u-text-sm-lg {
     font-size: 1.25rem;
   }
-  .u-fs-sm-xl {
+  .u-text-sm-xl {
     font-size: 1.5rem;
   }
-  .u-fs-sm-2xl {
+  .u-text-sm-2xl {
     font-size: 2rem;
   }
-  .u-fs-sm-h1 {
+  .u-text-sm-h1 {
     font-size: 2.5rem;
   }
-  .u-fs-sm-h2 {
+  .u-text-sm-h2 {
     font-size: 2rem;
   }
-  .u-fs-sm-h3 {
+  .u-text-sm-h3 {
     font-size: 1.5rem;
   }
-  .u-fs-sm-h4 {
+  .u-text-sm-h4 {
     font-size: 1.25rem;
   }
-  .u-fs-sm-h5 {
+  .u-text-sm-h5 {
     font-size: 1.125rem;
   }
-  .u-fs-sm-h6 {
+  .u-text-sm-h6 {
     font-size: 1rem;
   }
-  .u-fs-sm-display-1 {
+  .u-text-sm-display-1 {
     font-size: 4rem;
   }
-  .u-fs-sm-1 {
+  .u-text-sm-1 {
     font-size: 2.5rem;
   }
-  .u-fs-sm-2 {
+  .u-text-sm-2 {
     font-size: 2rem;
   }
-  .u-fs-sm-3 {
+  .u-text-sm-3 {
     font-size: 1.5rem;
   }
-  .u-fs-sm-4 {
+  .u-text-sm-4 {
     font-size: 1.25rem;
   }
-  .u-fs-sm-5 {
+  .u-text-sm-5 {
     font-size: 1.125rem;
   }
-  .u-fs-sm-6 {
+  .u-text-sm-6 {
     font-size: 1rem;
   }
 }
 @media (min-width: 768px) {
-  .u-fs-md-xs {
+  .u-text-md-xs {
     font-size: 0.75rem;
   }
-  .u-fs-md-sm {
+  .u-text-md-sm {
     font-size: 0.875rem;
   }
-  .u-fs-md-base {
+  .u-text-md-base {
     font-size: 1rem;
   }
-  .u-fs-md-md {
+  .u-text-md-md {
     font-size: 1.125rem;
   }
-  .u-fs-md-lg {
+  .u-text-md-lg {
     font-size: 1.25rem;
   }
-  .u-fs-md-xl {
+  .u-text-md-xl {
     font-size: 1.5rem;
   }
-  .u-fs-md-2xl {
+  .u-text-md-2xl {
     font-size: 2rem;
   }
-  .u-fs-md-h1 {
+  .u-text-md-h1 {
     font-size: 2.5rem;
   }
-  .u-fs-md-h2 {
+  .u-text-md-h2 {
     font-size: 2rem;
   }
-  .u-fs-md-h3 {
+  .u-text-md-h3 {
     font-size: 1.5rem;
   }
-  .u-fs-md-h4 {
+  .u-text-md-h4 {
     font-size: 1.25rem;
   }
-  .u-fs-md-h5 {
+  .u-text-md-h5 {
     font-size: 1.125rem;
   }
-  .u-fs-md-h6 {
+  .u-text-md-h6 {
     font-size: 1rem;
   }
-  .u-fs-md-display-1 {
+  .u-text-md-display-1 {
     font-size: 4rem;
   }
-  .u-fs-md-1 {
+  .u-text-md-1 {
     font-size: 2.5rem;
   }
-  .u-fs-md-2 {
+  .u-text-md-2 {
     font-size: 2rem;
   }
-  .u-fs-md-3 {
+  .u-text-md-3 {
     font-size: 1.5rem;
   }
-  .u-fs-md-4 {
+  .u-text-md-4 {
     font-size: 1.25rem;
   }
-  .u-fs-md-5 {
+  .u-text-md-5 {
     font-size: 1.125rem;
   }
-  .u-fs-md-6 {
+  .u-text-md-6 {
     font-size: 1rem;
   }
 }
 @media (min-width: 992px) {
-  .u-fs-lg-xs {
+  .u-text-lg-xs {
     font-size: 0.75rem;
   }
-  .u-fs-lg-sm {
+  .u-text-lg-sm {
     font-size: 0.875rem;
   }
-  .u-fs-lg-base {
+  .u-text-lg-base {
     font-size: 1rem;
   }
-  .u-fs-lg-md {
+  .u-text-lg-md {
     font-size: 1.125rem;
   }
-  .u-fs-lg-lg {
+  .u-text-lg-lg {
     font-size: 1.25rem;
   }
-  .u-fs-lg-xl {
+  .u-text-lg-xl {
     font-size: 1.5rem;
   }
-  .u-fs-lg-2xl {
+  .u-text-lg-2xl {
     font-size: 2rem;
   }
-  .u-fs-lg-h1 {
+  .u-text-lg-h1 {
     font-size: 2.5rem;
   }
-  .u-fs-lg-h2 {
+  .u-text-lg-h2 {
     font-size: 2rem;
   }
-  .u-fs-lg-h3 {
+  .u-text-lg-h3 {
     font-size: 1.5rem;
   }
-  .u-fs-lg-h4 {
+  .u-text-lg-h4 {
     font-size: 1.25rem;
   }
-  .u-fs-lg-h5 {
+  .u-text-lg-h5 {
     font-size: 1.125rem;
   }
-  .u-fs-lg-h6 {
+  .u-text-lg-h6 {
     font-size: 1rem;
   }
-  .u-fs-lg-display-1 {
+  .u-text-lg-display-1 {
     font-size: 4rem;
   }
-  .u-fs-lg-1 {
+  .u-text-lg-1 {
     font-size: 2.5rem;
   }
-  .u-fs-lg-2 {
+  .u-text-lg-2 {
     font-size: 2rem;
   }
-  .u-fs-lg-3 {
+  .u-text-lg-3 {
     font-size: 1.5rem;
   }
-  .u-fs-lg-4 {
+  .u-text-lg-4 {
     font-size: 1.25rem;
   }
-  .u-fs-lg-5 {
+  .u-text-lg-5 {
     font-size: 1.125rem;
   }
-  .u-fs-lg-6 {
+  .u-text-lg-6 {
     font-size: 1rem;
   }
 }
 @media (min-width: 1200px) {
-  .u-fs-xl-xs {
+  .u-text-xl-xs {
     font-size: 0.75rem;
   }
-  .u-fs-xl-sm {
+  .u-text-xl-sm {
     font-size: 0.875rem;
   }
-  .u-fs-xl-base {
+  .u-text-xl-base {
     font-size: 1rem;
   }
-  .u-fs-xl-md {
+  .u-text-xl-md {
     font-size: 1.125rem;
   }
-  .u-fs-xl-lg {
+  .u-text-xl-lg {
     font-size: 1.25rem;
   }
-  .u-fs-xl-xl {
+  .u-text-xl-xl {
     font-size: 1.5rem;
   }
-  .u-fs-xl-2xl {
+  .u-text-xl-2xl {
     font-size: 2rem;
   }
-  .u-fs-xl-h1 {
+  .u-text-xl-h1 {
     font-size: 2.5rem;
   }
-  .u-fs-xl-h2 {
+  .u-text-xl-h2 {
     font-size: 2rem;
   }
-  .u-fs-xl-h3 {
+  .u-text-xl-h3 {
     font-size: 1.5rem;
   }
-  .u-fs-xl-h4 {
+  .u-text-xl-h4 {
     font-size: 1.25rem;
   }
-  .u-fs-xl-h5 {
+  .u-text-xl-h5 {
     font-size: 1.125rem;
   }
-  .u-fs-xl-h6 {
+  .u-text-xl-h6 {
     font-size: 1rem;
   }
-  .u-fs-xl-display-1 {
+  .u-text-xl-display-1 {
     font-size: 4rem;
   }
-  .u-fs-xl-1 {
+  .u-text-xl-1 {
     font-size: 2.5rem;
   }
-  .u-fs-xl-2 {
+  .u-text-xl-2 {
     font-size: 2rem;
   }
-  .u-fs-xl-3 {
+  .u-text-xl-3 {
     font-size: 1.5rem;
   }
-  .u-fs-xl-4 {
+  .u-text-xl-4 {
     font-size: 1.25rem;
   }
-  .u-fs-xl-5 {
+  .u-text-xl-5 {
     font-size: 1.125rem;
   }
-  .u-fs-xl-6 {
+  .u-text-xl-6 {
     font-size: 1rem;
   }
 }
 @media (min-width: 1440px) {
-  .u-fs-xxl-xs {
+  .u-text-xxl-xs {
     font-size: 0.75rem;
   }
-  .u-fs-xxl-sm {
+  .u-text-xxl-sm {
     font-size: 0.875rem;
   }
-  .u-fs-xxl-base {
+  .u-text-xxl-base {
     font-size: 1rem;
   }
-  .u-fs-xxl-md {
+  .u-text-xxl-md {
     font-size: 1.125rem;
   }
-  .u-fs-xxl-lg {
+  .u-text-xxl-lg {
     font-size: 1.25rem;
   }
-  .u-fs-xxl-xl {
+  .u-text-xxl-xl {
     font-size: 1.5rem;
   }
-  .u-fs-xxl-2xl {
+  .u-text-xxl-2xl {
     font-size: 2rem;
   }
-  .u-fs-xxl-h1 {
+  .u-text-xxl-h1 {
     font-size: 2.5rem;
   }
-  .u-fs-xxl-h2 {
+  .u-text-xxl-h2 {
     font-size: 2rem;
   }
-  .u-fs-xxl-h3 {
+  .u-text-xxl-h3 {
     font-size: 1.5rem;
   }
-  .u-fs-xxl-h4 {
+  .u-text-xxl-h4 {
     font-size: 1.25rem;
   }
-  .u-fs-xxl-h5 {
+  .u-text-xxl-h5 {
     font-size: 1.125rem;
   }
-  .u-fs-xxl-h6 {
+  .u-text-xxl-h6 {
     font-size: 1rem;
   }
-  .u-fs-xxl-display-1 {
+  .u-text-xxl-display-1 {
     font-size: 4rem;
   }
-  .u-fs-xxl-1 {
+  .u-text-xxl-1 {
     font-size: 2.5rem;
   }
-  .u-fs-xxl-2 {
+  .u-text-xxl-2 {
     font-size: 2rem;
   }
-  .u-fs-xxl-3 {
+  .u-text-xxl-3 {
     font-size: 1.5rem;
   }
-  .u-fs-xxl-4 {
+  .u-text-xxl-4 {
     font-size: 1.25rem;
   }
-  .u-fs-xxl-5 {
+  .u-text-xxl-5 {
     font-size: 1.125rem;
   }
-  .u-fs-xxl-6 {
+  .u-text-xxl-6 {
     font-size: 1rem;
   }
 }