remove z-index mixin

basher · Nov 8, 2024 · 0a964f2 · 0a964f2
1 parent ea621a5
commit 0a964f2
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 44 deletions.
diff --git a/ui/src/css/base/_config.scss b/ui/src/css/base/_config.scss
@@ -28,10 +28,17 @@ Config settings.
     --animation-medium: 250ms ease-in-out;
     --animation-slow: 500ms ease-in-out;
 
+    /* z-index.
+    1. Boilerplate uses native HTML <dialog> for modals, so 'z-modal' is probably redundant now.
+    2. There's a subtle distinction between a modal that sits above everything, and a popup (e.g. dropdown menu). These will probably be replaced by Popover API.
+    */
+    --z-modal: 1000;
+    --z-popup: 999;
+    --z-default: 1;
+    --z-reset: 0;
+    --z-below: -1;
+
     /* Miscellaneous. */
     --media-aspect-ratio: 16/9;
     --base-image-path: '../images/interface';
 }
-
-/* TODO - refactor mixin */
-$grid-item-min-width: 12.5rem !default;
diff --git a/ui/src/css/components/_nav.scss b/ui/src/css/components/_nav.scss
@@ -47,7 +47,7 @@ Dependencies.
         inset-inline-start: 0;
         padding: var(--gutter-m);
         position: absolute;
-        z-index: z('popup');
+        z-index: var(--z-popup);
     }
 
     .nav__item--has-dropdown {
@@ -93,7 +93,7 @@ Dependencies.
                 inset-block-start: 100%;
                 padding: var(--gutter-m);
                 position: absolute;
-                z-index: z('popup');
+                z-index: var(--z-popup);
             }
         }
 

diff --git a/ui/src/css/components/_skiplinks.scss b/ui/src/css/components/_skiplinks.scss
@@ -18,6 +18,6 @@ Dependencies.
         min-inline-size: 10vw;
         padding: var(--gutter-s);
         text-align: center;
-        z-index: z('default') + 1;
+        z-index: var(--z-default);
     }
 }
diff --git a/ui/src/css/mixins/_index.scss b/ui/src/css/mixins/_index.scss
@@ -3,4 +3,3 @@
 @forward 'focus';
 @forward 'form-field-reset';
 @forward 'off-screen';
-@forward 'z-index';
diff --git a/ui/src/css/mixins/_z-index.scss b/ui/src/css/mixins/_z-index.scss
diff --git a/ui/src/css/web-components/_webui-image-gallery.scss b/ui/src/css/web-components/_webui-image-gallery.scss
@@ -42,12 +42,12 @@ webui-image-gallery {
     .modal__header {
         background: transparent;
         padding-block-start: 0;
-        z-index: z('default');
+        z-index: var(--z-default);
     }
 
     .modal__content {
         margin-block-start: 0;
-        z-index: z('reset');
+        z-index: var(--z-reset);
     }
 
     .modal__close {