Organise CSS Z-index (#2095)

* rough z-index variables Signed-off-by: Sajid Alam <[email protected]> * update var Signed-off-by: Sajid Alam <[email protected]> * Update _group.scss Signed-off-by: Sajid Alam <[email protected]> * simplify Signed-off-by: Sajid Alam <[email protected]> * add zindex entry Signed-off-by: Sajid Alam <[email protected]> * group by levels Signed-off-by: Sajid Alam <[email protected]> * Update _variables.scss Signed-off-by: Sajid Alam <[email protected]> * Update _variables.scss Signed-off-by: Sajid Alam <[email protected]> --------- Signed-off-by: Sajid Alam <[email protected]> Signed-off-by: Sajid Alam <[email protected]>
kedro-org · Sep 26, 2024 · 977fe86 · 977fe86
1 parent 1a3006f
commit 977fe86
Show file tree

Hide file tree

Showing 23 changed files with 171 additions and 119 deletions.
diff --git a/src/components/experiment-tracking/run-plots-modal/run-plots-modal.scss b/src/components/experiment-tracking/run-plots-modal/run-plots-modal.scss
@@ -17,7 +17,7 @@
   flex-direction: column;
   overflow-y: scroll;
   position: absolute;
-  z-index: 3;
+  z-index: variables.$zindex-plot-modal;;
 }
 
 .pipeline-run-plots-modal__top {

diff --git a/src/components/experiment-tracking/runs-list/runs-list.scss b/src/components/experiment-tracking/runs-list/runs-list.scss
@@ -1,7 +1,7 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as variables;
 
 .kui-theme--light {
-  --header-border-bottom: #{colors.$white-300};
+  --header-border-bottom: #{variables.$white-300};
 }
 
 .kui-theme--dark {
@@ -11,15 +11,15 @@
 .runs-list-top-wrapper {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: variables.$zindex-sticky-elements;
 }
 
 .search-bar-wrapper {
   background: var(--color-bg-2);
   padding-top: 24px;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: variables.$zindex-sticky-elements;
 }
 
 .runs-list__wrapper {
@@ -40,7 +40,7 @@
   padding: 3.5em 3.5em 1.2em 3em;
   position: sticky;
   top: 64px;
-  z-index: 1;
+  z-index: variables.$zindex-sticky-elements;
 }
 
 .compare-switch-wrapper__text {

diff --git a/src/components/feature-hints/feature-hints.scss b/src/components/feature-hints/feature-hints.scss
@@ -1,17 +1,17 @@
-@use '../../styles/variables' as colors;
+@use '../../styles/variables' as variables;
 
 .feature-hints {
-  background-color: colors.$yellow-0;
+  background-color: variables.$yellow-0;
   bottom: 36px;
-  color: colors.$black-900;
+  color: variables.$black-900;
   display: flex;
   flex-direction: column;
   height: auto;
   padding: 32px 36px 36px;
   position: absolute;
   transition: height 0.3s ease-in-out, right ease 0.4s;
   width: 365px;
-  z-index: 5;
+  z-index: variables.$zindex-feature-hints;
 
   &__reopen-message {
     font-size: 14px;
@@ -20,7 +20,7 @@
   }
 
   &__nav {
-    color: colors.$black-300;
+    color: variables.$black-300;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.024px;
@@ -69,17 +69,17 @@
     }
 
     .button button {
-      color: colors.$black-900;
-      border-color: colors.$black-900;
+      color: variables.$black-900;
+      border-color: variables.$black-900;
 
       &:hover:not(.button__btn--secondary) {
-        background: colors.$black-900;
-        color: colors.$white-0;
+        background: variables.$black-900;
+        color: variables.$white-0;
       }
     }
 
     .button__btn--secondary:hover::after {
-      background: colors.$black-900;
+      background: variables.$black-900;
     }
 
     .button__btn--secondary:active {
@@ -101,7 +101,6 @@
   pointer-events: none;
   position: absolute;
   transform: translate(-50%, -50%);
-  transition: left 0.3s ease-in-out, top 0.3s ease-in-out,
-    opacity 0.1s ease-in-out;
-  z-index: 5;
+  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, opacity 0.1s ease-in-out;
+  z-index: variables.$zindex-feature-hints;
 }
diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.scss b/src/components/flowchart-wrapper/flowchart-wrapper.scss
@@ -36,7 +36,7 @@ $sidebar-toolbar-width-open: variables.$sidebar-width-open +
   opacity: 0;
   pointer-events: none;
   position: relative;
-  z-index: 3;
+  z-index: variables.$zindex-go-back-btn;
 
   .button button {
     background-color: variables.$yellow-300;

diff --git a/src/components/global-toolbar/global-toolbar.scss b/src/components/global-toolbar/global-toolbar.scss
@@ -11,7 +11,7 @@
   position: absolute;
   top: 0;
   width: variables.$global-toolbar-width;
-  z-index: 5;
+  z-index: variables.$zindex-global-toolbar;
 }
 
 .pipeline-global-routes-toolbar {

diff --git a/src/components/metadata-modal/metadata-modal.scss b/src/components/metadata-modal/metadata-modal.scss
@@ -23,7 +23,7 @@
   height: 100%; /* Full height (cover the whole page) */
   inset: 0 0 0 variables.$global-toolbar-width;
   position: absolute;
-  z-index: 6;
+  z-index: variables.$zindex-metadata-modal;
 
   /* We don't need full width as sometime the preview table can take up more than a width of the page */
   background-color: var(--color-bg-plot);

diff --git a/src/components/metadata/styles/metadata-code.scss b/src/components/metadata/styles/metadata-code.scss
@@ -26,7 +26,7 @@
   padding: 0 variables.$metadata-sidebar-width-open 0 0;
   transform: translateX(100vw);
   transition: transform ease 0.5s 0.1s, left ease 0.5s;
-  z-index: variables.$z-index-metadata-code;
+  z-index: variables.$zindex-metadata-code;
 
   &--visible {
     transform: translateX(variables.$global-toolbar-width);

diff --git a/src/components/metadata/styles/metadata.scss b/src/components/metadata/styles/metadata.scss
@@ -28,7 +28,7 @@
   top: -1px; /* Avoids pixel rounding gaps */
   right: -1px;
   bottom: -1px;
-  z-index: variables.$z-index-metadata-panel;
+  z-index: variables.$zindex-metadata-panel;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -254,7 +254,7 @@ $list-inline-spacing: 0.2em;
   flex-direction: row;
   justify-content: center;
   padding: 0;
-  z-index: 1;
+  z-index: variables.$zindex-metadata-link;
 
   &:hover {
     background-color: var(--color-button-plot-hovered);

diff --git a/src/components/node-list/styles/_group.scss b/src/components/node-list/styles/_group.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as var;
 @use './variables';
 
 %nolist {
@@ -28,7 +28,7 @@ $placeholder-fade: 120px;
 
 .pipeline-nodelist__placeholder-upper,
 .pipeline-nodelist__placeholder-lower {
-  z-index: 2;
+  z-index: var.$zindex-nodelist-placeholder;
   pointer-events: none;
 }
 
@@ -72,7 +72,7 @@ $placeholder-fade: 120px;
 .pipeline-nodelist__heading {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var.$zindex-nodelist-heading;
   margin: 0;
 
   // Avoid pixel gap above when scrolling.
@@ -94,7 +94,7 @@ $placeholder-fade: 120px;
   &::after {
     position: absolute;
     bottom: -19px;
-    z-index: -1;
+    z-index: var.$zindex-group-background-fade;
     width: 100%;
     height: 20px;
     background: linear-gradient(
@@ -114,7 +114,7 @@ $placeholder-fade: 120px;
   &::after {
     position: absolute;
     bottom: -19px;
-    z-index: -1;
+    z-index: var.$zindex-group-background-fade;
     width: 100%;
     height: 20px;
     background: linear-gradient(
@@ -148,7 +148,7 @@ $placeholder-fade: 120px;
     outline: none;
 
     [data-whatintent='keyboard'] & {
-      box-shadow: 0 0 0 3px colors.$blue-300 inset;
+      box-shadow: 0 0 0 3px var.$blue-300 inset;
     }
   }
 
@@ -167,7 +167,7 @@ $placeholder-fade: 120px;
   }
 
   &--disabled {
-    color: colors.$black-400;
+    color: var.$black-400;
     transform: rotate(90deg);
   }
 }
diff --git a/src/components/node-list/styles/_panels.scss b/src/components/node-list/styles/_panels.scss
@@ -1,8 +1,8 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as var;
 @use './variables';
 
 .pipeline-nodelist__filter-panel {
-  z-index: 1;
+  z-index: var.$zindex-filter-panel;
   background: var(--color-nodelist-filter-panel);
   border-top: 1px solid var(--color-border-line);
 
@@ -64,8 +64,8 @@
 
   // Handle has keyboard focus, show outline.
   &:focus {
-    z-index: 1;
-    outline: 3px solid colors.$blue-300;
+    z-index: var.$zindex-split-handle-focus;
+    outline: 3px solid var.$blue-300;
   }
 
   // Handle is hovered, highlight border.
@@ -80,7 +80,7 @@
 
   // Handle is active resizing, highlight border.
   .pipeline-nodelist__split--resizing & {
-    border-top: 1px solid colors.$blue-300;
+    border-top: 1px solid var.$blue-300;
   }
 }
 

diff --git a/src/components/node-list/styles/_row.scss b/src/components/node-list/styles/_row.scss
@@ -2,7 +2,7 @@
 @use './variables';
 
 .MuiTreeItem-iconContainer svg {
-  z-index: var.$z-index-MuiTreeItem-icon;
+  z-index: var.$zindex-MuiTreeItem-icon;
 }
 
 .pipeline-nodelist__row {

diff --git a/src/components/preview-table/preview-table.scss b/src/components/preview-table/preview-table.scss
@@ -48,7 +48,7 @@
     background: var(--color-bg);
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: variables.$zindex-preview-table-header;
   }
 
   .preview-table__row:hover,

diff --git a/src/components/search-list/search-list.scss b/src/components/search-list/search-list.scss
@@ -14,7 +14,7 @@
     right: 2px;
     top: 18px;
     width: 20px;
-    z-index: 1;
+    z-index: variables.$zindex-search-close-icon;
   }
 
   .search-bar .icon__graphics {
@@ -42,7 +42,7 @@
 
   .search-input--focused {
     position: relative;
-    z-index: 1;
+    z-index: variables.$zindex-search-input-focused;
     outline-color: variables.$blue-300;
   }
 

diff --git a/src/components/sidebar/sidebar.scss b/src/components/sidebar/sidebar.scss
@@ -14,14 +14,14 @@
   }
 
   // Ensures sidebar tooltips are above code panel
-  z-index: 1;
+  z-index: variables.$zindex-sidebar;
   display: flex;
   width: 100%;
   transform: translateX(calc(-100% + #{variables.$sidebar-width-closed}));
   transition: transform ease 0.4s;
 
   @media (min-width: variables.$metadata-sidebar-code-breakpoint) {
-    z-index: 3;
+    z-index: variables.$zindex-sidebar-expanded;
   }
 
   @media (min-width: variables.$sidebar-width-breakpoint) {
@@ -55,7 +55,7 @@
   position: relative;
   transition: visibility 0.3s;
   visibility: hidden;
-  z-index: 2;
+  z-index: variables.$zindex-ui;
 
   .pipeline-sidebar--visible & {
     visibility: visible;
@@ -75,7 +75,7 @@
   height: 100%;
   position: relative;
   width: variables.$sidebar-width-closed;
-  z-index: 2;
+  z-index: variables.$zindex-toolbar;
 }
 
 .compare-switch-wrapper__text {

diff --git a/src/components/ui/banner/banner.scss b/src/components/ui/banner/banner.scss
@@ -25,7 +25,7 @@
   justify-content: space-between;
   padding: 16px;
   width: 100%;
-  z-index: variables.$z-index-banner;
+  z-index: variables.$zindex-banner;
   font-family: inherit;
   box-shadow: var(--banner-box-shadow);
   background-color: var(--banner--background);

diff --git a/src/components/ui/dropdown/dropdown.scss b/src/components/ui/dropdown/dropdown.scss
@@ -66,7 +66,7 @@ $menu-item-padding: 12px;
   position: relative;
   user-select: none;
   width: 100%;
-  z-index: 8;
+  z-index: variables.$zindex-dropdown-label;
 
   &:disabled {
     cursor: not-allowed;
@@ -107,7 +107,7 @@ $menu-item-padding: 12px;
 }
 
 .dropdown__options {
-  z-index: 2; // fix closing transition animation bug
+  z-index: variables.$zindex-dropdown-options;
   background: var(--dropdown-options-bg);
   border-top: none;
   box-shadow: 0 0 2px variables.$black-800;
@@ -144,5 +144,5 @@ $menu-item-padding: 12px;
   justify-content: space-around;
   padding: 24px 0;
   position: sticky;
-  z-index: 1;
+  z-index: variables.$zindex-dropdown-btn-wrapper;
 }
diff --git a/src/components/ui/icon-button/icon-button.scss b/src/components/ui/icon-button/icon-button.scss
@@ -68,7 +68,7 @@ $triangle-size: 7px;
   white-space: nowrap;
 
   // to ensure the tooltip will show on the top of the bookmark dropdown
-  z-index: 1;
+  z-index: variables.$zindex-toolbar-label;
 
   @media (max-width: variables.$sidebar-width-breakpoint) {
     .pipeline-sidebar--visible & {