From 47fad1b3491f4dc1a25175f0e0e360f1e8aad741 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Tue, 30 Nov 2021 14:38:46 -0500 Subject: [PATCH] Redefine z-index tokens --- src/components/Backdrop/Backdrop.scss | 4 +-- src/components/Filters/Filters.scss | 2 +- src/components/Frame/Frame.scss | 14 +++++------ .../components/ToastManager/ToastManager.scss | 2 +- src/components/MediaCard/MediaCard.scss | 2 +- .../Modal/components/Dialog/Dialog.scss | 2 +- .../PositionedOverlay/PositionedOverlay.scss | 2 +- src/components/Sheet/Sheet.scss | 2 +- src/components/TopBar/TopBar.scss | 2 +- .../TopBar/components/Search/Search.scss | 2 +- .../SearchDismissOverlay.scss | 2 +- .../components/SearchField/SearchField.scss | 2 +- src/tokens/_z-index.ts | 25 +++++++++---------- 13 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/components/Backdrop/Backdrop.scss b/src/components/Backdrop/Backdrop.scss index c23883aab5e..904382a1fce 100644 --- a/src/components/Backdrop/Backdrop.scss +++ b/src/components/Backdrop/Backdrop.scss @@ -4,7 +4,7 @@ $entry-iterations: 1; .Backdrop { position: fixed; - z-index: var(--p-z-backdrop); + z-index: var(--p-z-10); top: 0; right: 0; bottom: 0; @@ -21,7 +21,7 @@ $entry-iterations: 1; } .belowNavigation { - z-index: var(--p-z-nav-backdrop); + z-index: var(--p-z-7); } @keyframes fade-in { diff --git a/src/components/Filters/Filters.scss b/src/components/Filters/Filters.scss index e9340a6a897..4d6efec15a1 100644 --- a/src/components/Filters/Filters.scss +++ b/src/components/Filters/Filters.scss @@ -199,7 +199,7 @@ $list-filters-footer-height: rem(70px); .Backdrop { position: fixed; - z-index: var(--p-z-backdrop); + z-index: var(--p-z-10); top: 0; right: 0; bottom: 0; diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss index d88fedc42b1..8251b2bc291 100644 --- a/src/components/Frame/Frame.scss +++ b/src/components/Frame/Frame.scss @@ -22,7 +22,7 @@ $skip-vertical-offset: rem(10px); .Navigation { @include hidden-when-printing; position: fixed; - z-index: var(--p-z-nav); + z-index: var(--p-z-8); top: 0; left: 0; display: none; @@ -121,7 +121,7 @@ $skip-vertical-offset: rem(10px); .TopBar { @include hidden-when-printing; position: fixed; - z-index: var(--p-z-top-bar); + z-index: var(--p-z-4); top: 0; left: 0; width: 100%; @@ -135,7 +135,7 @@ $skip-vertical-offset: rem(10px); .ContextualSaveBar { position: fixed; - z-index: var(--p-z-context-bar); + z-index: var(--p-z-5); top: 0; left: 0; width: 100%; @@ -184,7 +184,7 @@ $skip-vertical-offset: rem(10px); .GlobalRibbonContainer { position: fixed; - z-index: var(--p-z-global-ribbon); + z-index: var(--p-z-3); bottom: 0; width: 100%; @@ -206,7 +206,7 @@ $skip-vertical-offset: rem(10px); .LoadingBar { @include hidden-when-printing; position: fixed; - z-index: var(--p-z-small-screen-loading-bar); + z-index: var(--p-z-6); top: 0; right: 0; left: 0; @@ -217,14 +217,14 @@ $skip-vertical-offset: rem(10px); } .hasTopBar & { - z-index: var(--p-z-small-screen-loading-bar); + z-index: var(--p-z-6); } } } .Skip { position: fixed; - z-index: var(--p-z-skip-to-content); + z-index: var(--p-z-9); top: $skip-vertical-offset; left: calc(var(--p-space-2) + var(--p-frame-offset)); opacity: 0; diff --git a/src/components/Frame/components/ToastManager/ToastManager.scss b/src/components/Frame/components/ToastManager/ToastManager.scss index 27eea908061..f84c41a798e 100644 --- a/src/components/Frame/components/ToastManager/ToastManager.scss +++ b/src/components/Frame/components/ToastManager/ToastManager.scss @@ -10,7 +10,7 @@ .ToastManager { position: fixed; - z-index: var(--p-z-toast); + z-index: var(--p-z-12); right: 0; left: 0; text-align: center; diff --git a/src/components/MediaCard/MediaCard.scss b/src/components/MediaCard/MediaCard.scss index f021fa1394f..4f5ae510f0c 100644 --- a/src/components/MediaCard/MediaCard.scss +++ b/src/components/MediaCard/MediaCard.scss @@ -53,7 +53,7 @@ $portrait-breakpoint: 804px; .Popover { position: absolute; - z-index: var(--p-z-overlay); + z-index: var(--p-z-2); top: var(--p-space-4); right: var(--p-space-4); } diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss index 66638ac598a..cf70794b56a 100644 --- a/src/components/Modal/components/Dialog/Dialog.scss +++ b/src/components/Modal/components/Dialog/Dialog.scss @@ -11,7 +11,7 @@ $dangerous-magic-space-16: rem(64px); .Container { position: fixed; - z-index: var(--p-z-modal); + z-index: var(--p-z-11); top: 0; right: 0; bottom: 0; diff --git a/src/components/PositionedOverlay/PositionedOverlay.scss b/src/components/PositionedOverlay/PositionedOverlay.scss index 54d2ac99d48..73e3682b97f 100644 --- a/src/components/PositionedOverlay/PositionedOverlay.scss +++ b/src/components/PositionedOverlay/PositionedOverlay.scss @@ -2,7 +2,7 @@ .PositionedOverlay { position: absolute; - z-index: var(--p-z-overlay); + z-index: var(--p-z-2); } .fixed { diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss index 596f2960946..8a758811305 100644 --- a/src/components/Sheet/Sheet.scss +++ b/src/components/Sheet/Sheet.scss @@ -26,7 +26,7 @@ $sheet-desktop-width: rem(380px); .Container { position: fixed; - z-index: var(--p-z-modal); + z-index: var(--p-z-11); top: 0; right: 0; bottom: 0; diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss index 6ec54d49092..45636bbc0e3 100644 --- a/src/components/TopBar/TopBar.scss +++ b/src/components/TopBar/TopBar.scss @@ -91,7 +91,7 @@ $context-control-expand-after: 1400px; } .Contents { - z-index: var(--p-z-content); + z-index: var(--p-z-1); display: flex; flex: 1 1 auto; align-items: center; diff --git a/src/components/TopBar/components/Search/Search.scss b/src/components/TopBar/components/Search/Search.scss index 6a55543641f..e5f252ec4b2 100644 --- a/src/components/TopBar/components/Search/Search.scss +++ b/src/components/TopBar/components/Search/Search.scss @@ -4,7 +4,7 @@ .Search { position: fixed; visibility: hidden; - z-index: var(--p-z-nav); + z-index: var(--p-z-8); pointer-events: none; top: top-bar-height(); left: 0; diff --git a/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss b/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss index 1135967eb5a..cef30ee6279 100644 --- a/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss +++ b/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss @@ -6,7 +6,7 @@ top: 0; left: 0; right: 0; - z-index: var(--p-z-nav-backdrop); + z-index: var(--p-z-7); height: 100%; } diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss index 59251cd3c3c..97f453dd0e8 100644 --- a/src/components/TopBar/components/SearchField/SearchField.scss +++ b/src/components/TopBar/components/SearchField/SearchField.scss @@ -11,7 +11,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4)); --pc-input: 2; --pc-icon: 3; --pc-action: 3; - z-index: var(--p-z-modal); + z-index: var(--p-z-11); position: relative; display: flex; flex: 1 1 auto; diff --git a/src/tokens/_z-index.ts b/src/tokens/_z-index.ts index eca70c6eac8..ebbe8edf367 100644 --- a/src/tokens/_z-index.ts +++ b/src/tokens/_z-index.ts @@ -1,17 +1,16 @@ import type {TokenGroup} from './tokens'; export const zIndex: TokenGroup = { - 'z-content': '100', - 'z-overlay': '400', - 'z-global-ribbon': '510', - 'z-top-bar': '512', - 'z-context-bar': '513', - 'z-small-screen-loading-bar': '514', - 'z-nav-backdrop': '515', - 'z-nav': '516', - 'z-skip-to-content': '517', - 'z-backdrop': '518', - 'z-modal': '519', - 'z-toast': '520', - 'z-devUi': '521', + 'z-1': '100', + 'z-2': '400', + 'z-3': '510', + 'z-4': '512', + 'z-5': '513', + 'z-6': '514', + 'z-7': '515', + 'z-8': '516', + 'z-9': '517', + 'z-10': '518', + 'z-11': '519', + 'z-12': '520', };