z-index fix

freshworks · Jul 7, 2020 · d6f2c4e · d6f2c4e
1 parent c34eb68
commit d6f2c4e
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 11 deletions.
diff --git a/packages/banner/addon/styles/components/_nucleus-banner.scss b/packages/banner/addon/styles/components/_nucleus-banner.scss
@@ -4,7 +4,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  z-index: 999;
+  z-index: map-get($nucleus-zindex, banner);
   background: white;
   justify-content: center;
   align-items: center;

diff --git a/packages/core/app/styles/global/variables/_index.scss b/packages/core/app/styles/global/variables/_index.scss
@@ -1,5 +1,6 @@
 @import "./colors";
 @import "./typography";
+@import "./zindex";
 $mobile-screen-min-width: 320px;
 $mobile-screen-max-width: 480px;
 $tablet-screen-min-width: 768px;

diff --git a/packages/core/app/styles/global/variables/_zindex.scss b/packages/core/app/styles/global/variables/_zindex.scss
@@ -0,0 +1,14 @@
+
+// Z-index Map to better control the vertical stacking in nucleus
+
+$nucleus-zindex: (
+  modal     : 999,
+  banner    : 999,
+  toast     : 9999999999,
+  // Default utilities
+  minusone  : -1,
+  zero      : 0,
+  one       : 1,
+  nine      : 9,
+  max       : 2147483638
+);
diff --git a/packages/datepicker/addon/styles/components/_nucleus-datepicker.scss b/packages/datepicker/addon/styles/components/_nucleus-datepicker.scss
@@ -70,7 +70,7 @@
       }
 
       &-day {
-        z-index: 1;
+        z-index: map-get($nucleus-zindex, one);
 
         &:focus {
           border: 1px solid $color-azure-800;
@@ -177,7 +177,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 2147483638;  // maximum value to override other components in the app/page
+    z-index: map-get($nucleus-zindex, max);  // maximum value to override other components in the app/page
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -188,12 +188,12 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      z-index: 0;
+      z-index: map-get($nucleus-zindex, zero);
     }
 
     &__content {
       position: absolute;
-      z-index: 1;
+      z-index: map-get($nucleus-zindex, one);
     }
   }
 
@@ -246,7 +246,7 @@
         width: 10px;
         height: calc(100% + 2px);
         background: $color-azure-50;
-        z-index: -1;
+        z-index: map-get($nucleus-zindex, minusone);
       }
 
       &--range-end::after {

diff --git a/packages/modal/addon/styles/components/_nucleus-modal.scss b/packages/modal/addon/styles/components/_nucleus-modal.scss
@@ -4,7 +4,7 @@ $slider-width: 600px;
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 2147483638;  // maximum value to override other components in the app/page
+  z-index: map-get($nucleus-zindex, modal);
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -68,7 +68,7 @@ $slider-width: 600px;
     &.sticky {
       position: sticky;
       top: 0;
-      z-index: 9;
+      z-index: map-get($nucleus-zindex, nine);
       padding: 16px 32px;
       box-shadow: 0 2px 4px 0 rgba(18, 52, 77, .08);
     }
@@ -140,7 +140,7 @@ $slider-width: 600px;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: -1;  // CSS trick used in bootstrap backdrop
+    z-index: map-get($nucleus-zindex, minusone);  // CSS trick used in bootstrap backdrop
     background-color: rgba($color-elephant-900, .5);
   }
 

diff --git a/packages/table/addon/styles/components/_nucleus-table.scss b/packages/table/addon/styles/components/_nucleus-table.scss
@@ -109,7 +109,7 @@
       position: absolute;
       top: 0;
       right: 0;
-      z-index: 9;
+      z-index: map-get($nucleus-zindex, nine);
       height: 48px;
       width: 48px;
       background: $color-milk;

diff --git a/packages/toast-message/addon/styles/components/_nucleus-toast-message.scss b/packages/toast-message/addon/styles/components/_nucleus-toast-message.scss
@@ -1,6 +1,6 @@
 .nucleus-toast-messages {
   position: fixed;
-  z-index: 9999999999;
+  z-index: map-get($nucleus-zindex, toast);
 
   @extend %font-antialias;