@shohojdhara/atomix 0.4.7 → 0.4.8

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;