From 4af8fbaa345ddf714ea68947e265c9d2842bc214 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 13 Dec 2022 16:36:51 +0300 Subject: [PATCH] Using custom properties for z-index values (#6733) * Using custom properties for z-index values Signed-off-by: Alex Andreev * Reorder values Signed-off-by: Alex Andreev * Remove unused styles Signed-off-by: Alex Andreev * Different set of z-index css vars Signed-off-by: Alex Andreev * Revert z-index to main layout Signed-off-by: Alex Andreev Signed-off-by: Alex Andreev --- .../update-button/styles.module.scss | 1 - .../+namespaces/namespace-select-filter.scss | 1 - src/renderer/components/+welcome/welcome.scss | 2 +- .../add-remove-buttons.scss | 1 - src/renderer/components/app.scss | 19 ++++++------------- .../cluster-manager/cluster-manager.scss | 2 +- .../cluster-status.module.scss | 1 - src/renderer/components/dialog/dialog.scss | 2 +- .../components/dock/dock-tabs.module.scss | 2 +- src/renderer/components/dock/dock.scss | 2 +- src/renderer/components/drawer/drawer.scss | 2 +- .../editable-list/editable-list.scss | 1 - .../components/hotbar/hotbar-menu.scss | 1 + .../hotbar/hotbar-selector.module.scss | 2 +- .../kube-object-details.scss | 2 -- .../components/layout/main-layout.module.scss | 2 +- .../components/layout/setting-layout.scss | 2 +- .../layout/top-bar/top-bar.module.scss | 2 +- .../markdown-viewer/markdown-viewer.scss | 2 +- src/renderer/components/menu/menu.scss | 2 +- .../notifications/notifications.scss | 2 +- .../resizing-anchor/resizing-anchor.scss | 2 +- src/renderer/components/select/select.scss | 2 +- src/renderer/components/table/table-head.scss | 2 -- src/renderer/components/tooltip/tooltip.scss | 2 +- src/renderer/components/vars.scss | 6 ------ 26 files changed, 23 insertions(+), 44 deletions(-) diff --git a/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss b/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss index 14b607327b..ade34c8a76 100644 --- a/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss +++ b/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss @@ -33,7 +33,6 @@ height: 100%; left: 0; opacity: 0.15; - z-index: -1; transition: opacity 0.1s; } } diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss index f227976b46..de82c192a0 100644 --- a/src/renderer/components/+namespaces/namespace-select-filter.scss +++ b/src/renderer/components/+namespaces/namespace-select-filter.scss @@ -33,7 +33,6 @@ &::before, &::after { content: ' '; position: absolute; - z-index: 20; display: block; width: 8px; height: var(--font-size); diff --git a/src/renderer/components/+welcome/welcome.scss b/src/renderer/components/+welcome/welcome.scss index 0c87c062df..6e1ebbbced 100644 --- a/src/renderer/components/+welcome/welcome.scss +++ b/src/renderer/components/+welcome/welcome.scss @@ -7,7 +7,7 @@ text-align: center; width: 100%; height: 100%; - z-index: 1; + z-index: var(--z-index-base); h2 { color: var(--textColorAccent); diff --git a/src/renderer/components/add-remove-buttons/add-remove-buttons.scss b/src/renderer/components/add-remove-buttons/add-remove-buttons.scss index b2b462c027..ef3951c5e3 100644 --- a/src/renderer/components/add-remove-buttons/add-remove-buttons.scss +++ b/src/renderer/components/add-remove-buttons/add-remove-buttons.scss @@ -9,7 +9,6 @@ margin-right: $padding * 4; bottom: 0; right: 0; - z-index: 99; .Button { &.remove-button { diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index 434159eee0..38beffe3c3 100755 --- a/src/renderer/components/app.scss +++ b/src/renderer/components/app.scss @@ -27,6 +27,12 @@ --font-weight-normal: 400; --font-weight-bold: 500; --main-layout-header: 40px; + + --z-index-base: 0; + --z-index-above: 1; + --z-index-modals: 2; + --z-index-menus: 3; + --z-index-topmost: 9999; } *, *:before, *:after { @@ -249,19 +255,6 @@ iframe { } } -// app's common loading indicator, displaying on the route transitions -#loading { - position: absolute; - left: 50%; - top: 50%; - margin: -15px; - z-index: 1000; - - &.hidden { - display: none; - } -} - // hack-fix: remove crappy yellow background from auto-filled inputs in chrome @keyframes autofill-remove-bgc { to { diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index 7644d1f4d3..67d17676d0 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/src/renderer/components/cluster-manager/cluster-manager.scss @@ -27,7 +27,7 @@ } .error { - z-index: 1; + z-index: var(--z-index-base); } #lens-views { diff --git a/src/renderer/components/cluster-manager/cluster-status.module.scss b/src/renderer/components/cluster-manager/cluster-status.module.scss index 194ef467db..a009434196 100644 --- a/src/renderer/components/cluster-manager/cluster-status.module.scss +++ b/src/renderer/components/cluster-manager/cluster-status.module.scss @@ -5,7 +5,6 @@ min-width: 350px; margin: auto; text-align: center; - z-index: 1; background: var(--mainBackground); width: 100%; height: 100%; diff --git a/src/renderer/components/dialog/dialog.scss b/src/renderer/components/dialog/dialog.scss index 4efb628881..ddc7590915 100644 --- a/src/renderer/components/dialog/dialog.scss +++ b/src/renderer/components/dialog/dialog.scss @@ -12,7 +12,7 @@ width: 100%; height: 100%; padding: $unit * 5; - z-index: $zIndex-dialog; + z-index: var(--z-index-modals); overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX overflow: auto; diff --git a/src/renderer/components/dock/dock-tabs.module.scss b/src/renderer/components/dock/dock-tabs.module.scss index 4a68a00c8a..48edc4d22c 100644 --- a/src/renderer/components/dock/dock-tabs.module.scss +++ b/src/renderer/components/dock/dock-tabs.module.scss @@ -44,7 +44,7 @@ content: "\00A0"; position: sticky; min-width: 8px; - z-index: 1; + z-index: var(--z-index-base); } &::before { diff --git a/src/renderer/components/dock/dock.scss b/src/renderer/components/dock/dock.scss index 365d74bad1..2db21de66f 100644 --- a/src/renderer/components/dock/dock.scss +++ b/src/renderer/components/dock/dock.scss @@ -26,7 +26,7 @@ right: 0; left: 0; bottom: 0; - z-index: 100; + z-index: var(--z-index-base); } } diff --git a/src/renderer/components/drawer/drawer.scss b/src/renderer/components/drawer/drawer.scss index 2ef81a82dc..cb2944beeb 100644 --- a/src/renderer/components/drawer/drawer.scss +++ b/src/renderer/components/drawer/drawer.scss @@ -11,7 +11,7 @@ position: absolute; background: var(--contentColor); box-shadow: 0 0 $unit * 2 var(--boxShadow); - z-index: $zIndex-drawer; + z-index: var(--z-index-above); height: 100%; &.left { diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss index 089c92bce0..cb61178099 100644 --- a/src/renderer/components/editable-list/editable-list.scss +++ b/src/renderer/components/editable-list/editable-list.scss @@ -37,7 +37,6 @@ &::before, &::after { content: ' '; position: absolute; - z-index: 20; display: block; width: 8px; height: var(--font-size); diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss index d92e325350..9d09e04c1a 100644 --- a/src/renderer/components/hotbar/hotbar-menu.scss +++ b/src/renderer/components/hotbar/hotbar-menu.scss @@ -12,6 +12,7 @@ padding-top: 1px; width: var(--hotbar-width); overflow: hidden; + isolation: isolate; &.draggingOver::after { content: " "; diff --git a/src/renderer/components/hotbar/hotbar-selector.module.scss b/src/renderer/components/hotbar/hotbar-selector.module.scss index a8154c4579..1318b30d1f 100644 --- a/src/renderer/components/hotbar/hotbar-selector.module.scss +++ b/src/renderer/components/hotbar/hotbar-selector.module.scss @@ -40,7 +40,7 @@ } &:focus-visible { - z-index: 1; + z-index: var(--z-index-base); } } } diff --git a/src/renderer/components/kube-object-details/kube-object-details.scss b/src/renderer/components/kube-object-details/kube-object-details.scss index 678652a244..58676aff2e 100644 --- a/src/renderer/components/kube-object-details/kube-object-details.scss +++ b/src/renderer/components/kube-object-details/kube-object-details.scss @@ -4,8 +4,6 @@ */ .KubeObjectDetails { - z-index: $zIndex-drawer + 1 !important; - .drawer-title { .Menu { border: none; diff --git a/src/renderer/components/layout/main-layout.module.scss b/src/renderer/components/layout/main-layout.module.scss index e882310427..d12331cb3b 100644 --- a/src/renderer/components/layout/main-layout.module.scss +++ b/src/renderer/components/layout/main-layout.module.scss @@ -11,7 +11,7 @@ grid-template-rows: [contents] 1fr [footer] auto; grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr; width: 100%; - z-index: 1; + z-index: var(--z-index-base); height: 100%; } diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss index b37a68a569..611fd0aa7b 100644 --- a/src/renderer/components/layout/setting-layout.scss +++ b/src/renderer/components/layout/setting-layout.scss @@ -10,7 +10,7 @@ display: grid; color: var(--settingsColor); position: fixed; - z-index: 13!important; + z-index: var(--z-index-modals); left: 0; top: 0; right: 0; diff --git a/src/renderer/components/layout/top-bar/top-bar.module.scss b/src/renderer/components/layout/top-bar/top-bar.module.scss index 7b3646dec3..acb0d51b09 100644 --- a/src/renderer/components/layout/top-bar/top-bar.module.scss +++ b/src/renderer/components/layout/top-bar/top-bar.module.scss @@ -5,7 +5,7 @@ .topBar { background-color: var(--layoutBackground); - z-index: 2; + z-index: var(--z-index-above); grid-area: topbar; height: var(--main-layout-header); diff --git a/src/renderer/components/markdown-viewer/markdown-viewer.scss b/src/renderer/components/markdown-viewer/markdown-viewer.scss index 62397dba24..e38ccda5c8 100644 --- a/src/renderer/components/markdown-viewer/markdown-viewer.scss +++ b/src/renderer/components/markdown-viewer/markdown-viewer.scss @@ -658,7 +658,7 @@ :checked + .radio-label { position: relative; - z-index: 1; + z-index: var(--z-index-base); border-color: #4078c0; } diff --git a/src/renderer/components/menu/menu.scss b/src/renderer/components/menu/menu.scss index 30e92d2a75..baee399b7f 100644 --- a/src/renderer/components/menu/menu.scss +++ b/src/renderer/components/menu/menu.scss @@ -12,7 +12,7 @@ background: var(--bgc); list-style: none; border: 1px solid var(--borderColor); - z-index: 101; + z-index: var(--z-index-menus); box-shadow: rgb(0 0 0 / 17%) 0px 6px 9px 0px; border-radius: 4px; diff --git a/src/renderer/components/notifications/notifications.scss b/src/renderer/components/notifications/notifications.scss index f91ebde44c..82d1246b4f 100644 --- a/src/renderer/components/notifications/notifications.scss +++ b/src/renderer/components/notifications/notifications.scss @@ -11,7 +11,7 @@ top: 0; padding: $padding * 2; max-height: 100vh; - z-index: 100000; + z-index: var(--z-index-topmost); height: min-content!important; &:empty { diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss index bcdb159a43..7e18e789c5 100644 --- a/src/renderer/components/resizing-anchor/resizing-anchor.scss +++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss @@ -13,7 +13,7 @@ body.resizing { $dimension: 12px; position: absolute; - z-index: 10; + z-index: var(--z-index-base); &::after { content: " "; diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss index 1cc50a2c00..68532e844c 100644 --- a/src/renderer/components/select/select.scss +++ b/src/renderer/components/select/select.scss @@ -145,7 +145,7 @@ html { //-- Themes .Select__menu { - z-index: $zIndex-select-portal; // render at the top when used inside dialog + z-index: var(--z-index-menus); // render at the top when used inside dialog } .Select, .Select__menu { diff --git a/src/renderer/components/table/table-head.scss b/src/renderer/components/table/table-head.scss index ff9c6afec7..e926d5e1f0 100644 --- a/src/renderer/components/table/table-head.scss +++ b/src/renderer/components/table/table-head.scss @@ -15,9 +15,7 @@ } &.sticky { - position: -webkit-sticky; // safari position: sticky; - z-index: 1; top: 0; } diff --git a/src/renderer/components/tooltip/tooltip.scss b/src/renderer/components/tooltip/tooltip.scss index 10b7669679..38af5f709e 100644 --- a/src/renderer/components/tooltip/tooltip.scss +++ b/src/renderer/components/tooltip/tooltip.scss @@ -24,7 +24,7 @@ text-align: center; pointer-events: none; transition: opacity 150ms 150ms ease-in-out; - z-index: 100000; + z-index: var(--z-index-topmost); box-shadow: 0 8px 16px rgba(0,0,0,0.24); left: 0; top: 0; diff --git a/src/renderer/components/vars.scss b/src/renderer/components/vars.scss index 2a4deb6f30..b22341d572 100755 --- a/src/renderer/components/vars.scss +++ b/src/renderer/components/vars.scss @@ -21,12 +21,6 @@ $font-weight-thin: var(--font-weight-thin); $font-weight-normal: var(--font-weight-normal); $font-weight-bold: var(--font-weight-bold); -// Z-index correlations -$zIndex-sidebar-hover: 500; -$zIndex-select-portal: 300; -$zIndex-dialog: 200; -$zIndex-drawer: 100; - // Animation timing functions $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1); $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);