@shohojdhara/atomix 0.4.6 → 0.4.8

package/src/styles/06-components/_components.chart.scss

@@ -798,6 +798,8 @@
   &__data-point {
     cursor: pointer;
     transition: all $chart-transition-duration $chart-transition-timing;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       opacity: 0.8;
@@ -866,6 +868,8 @@
     transition: all $chart-treemap-node-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale($chart-treemap-node-hover-scale);
@@ -907,10 +911,11 @@
     transition: all $chart-funnel-segment-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
 
     &:hover {
       opacity: $chart-funnel-segment-hover-opacity;
-      filter: drop-shadow($chart-funnel-segment-hover-shadow);
+      filter: drop-shadow($chart-funnel-segment-hover-shadow) brightness(1.1);
       stroke-width: calc($chart-funnel-segment-border-width * 1.5);
     }
 
@@ -925,7 +930,7 @@
     dominant-baseline: middle;
     pointer-events: none;
     user-select: none;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   }
 
   &__funnel-conversion {
@@ -936,7 +941,9 @@
     dominant-baseline: middle;
     pointer-events: none;
     user-select: none;
-    opacity: 0.8;
+    opacity: 0.9;
+    letter-spacing: 0.05em;
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
   }
 
   // Heatmap Chart Elements
@@ -949,10 +956,11 @@
     transition: all $chart-heatmap-cell-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale($chart-heatmap-cell-hover-scale);
-      transform-origin: center;
       filter: drop-shadow($chart-heatmap-cell-hover-shadow);
       stroke-width: $chart-heatmap-cell-hover-border-width;
       z-index: 10;
@@ -960,7 +968,6 @@
 
     &--hovered {
       transform: scale($chart-heatmap-cell-hover-scale);
-      transform-origin: center;
       filter: drop-shadow($chart-heatmap-cell-hover-shadow);
       stroke-width: $chart-heatmap-cell-hover-border-width;
       z-index: 10;
@@ -1107,6 +1114,8 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale(1.2);
@@ -1165,6 +1174,7 @@
     cursor: pointer;
     shape-rendering: geometricPrecision;
     transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale(1.02);
@@ -1226,6 +1236,8 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale(1.2);
@@ -1250,6 +1262,8 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale(1.1);
@@ -1310,6 +1324,8 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale(1.3);
@@ -1382,6 +1398,8 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     cursor: pointer;
     shape-rendering: geometricPrecision;
+    transform-origin: center;
+    transform-box: fill-box;
 
     &:hover {
       transform: scale(1.3);

package/src/styles/06-components/_components.edge-panel.scss

@@ -349,16 +349,12 @@
 
 // Glass Variant Styles
 .c-edge-panel--glass {
-  position: absolute;
-  z-index: unset;
-
   .c-edge-panel__container {
     background: transparent;
     box-shadow: none;
     overflow: hidden;
     border: none;
     padding: 0;
-    z-index: unset;
     will-change: initial;
     transform: none !important;
     border-radius: inherit;
@@ -413,7 +409,7 @@
       $background-transparency-enable: true
     );
     animation: fadeIn 0.3s ease forwards;
-    z-index: 0;
+    z-index: map.get($z-layers, 1);
 
     &.is-animating-out {
       animation: fadeOut 0.3s ease forwards;

package/src/styles/06-components/_components.modal.scss

@@ -44,10 +44,7 @@
   inset: 0;
   @include square(100%);
   display: none;
-
-  &:not(.c-modal--glass) {
-    z-index: map.get($z-layers, modal);
-  }
+  z-index: map.get($z-layers, modal);
 
   &__backdrop {
     position: absolute;

package/src/styles/06-components/_components.navbar.scss

@@ -252,7 +252,7 @@
   &--glass {
     position: relative;
     background-color: transparent;
-    border-bottom: none;
+    @include dynamic-background(var(--#{$prefix}navbar-bg), $background-transparency-enable: true);
   }
 
   &--fixed-bottom {

package/src/styles/06-components/_components.tooltip.scss

@@ -84,22 +84,26 @@
   }
 
   &--glass {
-    z-index: unset;
     #{$root}__content {
       @include dynamic-background(
         var(--#{$prefix}tooltip-bg),
         $background-transparency-enable: true,
-        $transparency: 0.4
+        $transparency: 0.3
       );
     }
     #{$root}__arrow {
       @include dynamic-background(
         var(--#{$prefix}tooltip-bg),
         $background-transparency-enable: true,
-        $transparency: 0.4
+        $transparency: 0.3
+      );
+    }
+    #{$root}__arrow {
+      @include dynamic-background(
+        var(--#{$prefix}tooltip-bg),
+        $background-transparency-enable: true,
+        $transparency: 0.3
       );
-      clip-path: polygon(0 100%, 100% 100%, 100% 0);
-      backdrop-filter: var(--atomix-glass-container-backdrop);
     }
   }
 }