[OP#162] Use the correct z index for the sidebar (#234)

This PR updates the sidebar to use the correct Z Index. It also renames the drawer token to be sidebar specific.
RoleModel · Dec 14, 2024 · a17cf16 · a17cf16
1 parent e5cd64f
commit a17cf16
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/src/addons/panel.scss b/src/addons/panel.scss
@@ -2,7 +2,7 @@
   --op-panel-width: 40%;
 
   position: absolute;
-  z-index: var(--op-z-index-drawer);
+  z-index: var(--op-z-index-sidebar);
   right: calc(-1 * var(--op-panel-width)); // this pushes the panel off the sceen to the right
   width: var(--op-panel-width);
   height: 100vh;

diff --git a/src/components/sidebar.scss b/src/components/sidebar.scss
@@ -69,6 +69,7 @@
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
   --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
 
+  z-index: var(--op-z-index-sidebar);
   display: flex;
   width: var(--__op-sidebar-width);
   min-width: var(--__op-sidebar-width);

diff --git a/src/core/tokens/base_tokens.scss b/src/core/tokens/base_tokens.scss
@@ -297,7 +297,7 @@ $breakpoint-x-large: 1440px; // medium laptop
   */
   --op-z-index-header: 500;
   --op-z-index-footer: 500;
-  --op-z-index-drawer: 700;
+  --op-z-index-sidebar: 700;
   --op-z-index-dialog: 800;
   --op-z-index-dialog-backdrop: 801;
   --op-z-index-dialog-content: 802;