Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using custom properties for z-index values #6733

Merged
merged 5 commits into from
Dec 13, 2022
Merged

Using custom properties for z-index values #6733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d2f007
Using custom properties for z-index values
aleksfront Dec 12, 2022
0e8714f
Reorder values
aleksfront Dec 12, 2022
27f58e1
Remove unused styles
aleksfront Dec 12, 2022
b96cfc9
Different set of z-index css vars
aleksfront Dec 13, 2022
a91f4d2
Revert z-index to main layout
aleksfront Dec 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion ...e-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
height: 100%;
left: 0;
opacity: 0.15;
z-index: -1;
transition: opacity 0.1s;
}
}
Expand Down
1 change: 0 additions & 1 deletion src/renderer/components/+namespaces/namespace-select-filter.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
&::before, &::after {
content: ' ';
position: absolute;
z-index: 20;
ixrock marked this conversation as resolved.
Show resolved Hide resolved
display: block;
width: 8px;
height: var(--font-size);
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/+welcome/welcome.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
text-align: center;
width: 100%;
height: 100%;
z-index: 1;
z-index: var(--z-index-base);
ixrock marked this conversation as resolved.
Show resolved Hide resolved

h2 {
color: var(--textColorAccent);
Expand Down
1 change: 0 additions & 1 deletion src/renderer/components/add-remove-buttons/add-remove-buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
margin-right: $padding * 4;
bottom: 0;
right: 0;
z-index: 99;

.Button {
&.remove-button {
Expand Down
19 changes: 6 additions & 13 deletions src/renderer/components/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/cluster-manager/cluster-manager.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.error {
z-index: 1;
z-index: var(--z-index-base);
aleksfront marked this conversation as resolved.
Show resolved Hide resolved
}

#lens-views {
Expand Down
1 change: 0 additions & 1 deletion src/renderer/components/cluster-manager/cluster-status.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
min-width: 350px;
margin: auto;
text-align: center;
z-index: 1;
background: var(--mainBackground);
width: 100%;
height: 100%;
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/dock/dock-tabs.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
content: "\00A0";
position: sticky;
min-width: 8px;
z-index: 1;
z-index: var(--z-index-base);
}

&::before {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/dock/dock.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
right: 0;
left: 0;
bottom: 0;
z-index: 100;
z-index: var(--z-index-base);
aleksfront marked this conversation as resolved.
Show resolved Hide resolved
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 0 additions & 1 deletion src/renderer/components/editable-list/editable-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@
&::before, &::after {
content: ' ';
position: absolute;
z-index: 20;
display: block;
width: 8px;
height: var(--font-size);
Expand Down
1 change: 1 addition & 0 deletions src/renderer/components/hotbar/hotbar-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
padding-top: 1px;
width: var(--hotbar-width);
overflow: hidden;
isolation: isolate;
ixrock marked this conversation as resolved.
Show resolved Hide resolved

&.draggingOver::after {
content: " ";
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/hotbar/hotbar-selector.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}

&:focus-visible {
z-index: 1;
z-index: var(--z-index-base);
}
}
}
2 changes: 0 additions & 2 deletions src/renderer/components/kube-object-details/kube-object-details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
*/

.KubeObjectDetails {
z-index: $zIndex-drawer + 1 !important;

.drawer-title {
.Menu {
border: none;
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/layout/main-layout.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
aleksfront marked this conversation as resolved.
Show resolved Hide resolved
height: 100%;
}

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/layout/setting-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/layout/top-bar/top-bar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/markdown-viewer/markdown-viewer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,7 @@

:checked + .radio-label {
position: relative;
z-index: 1;
z-index: var(--z-index-base);
border-color: #4078c0;
}

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/menu/menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/notifications/notifications.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/resizing-anchor/resizing-anchor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ body.resizing {
$dimension: 12px;

position: absolute;
z-index: 10;
z-index: var(--z-index-base);

&::after {
content: " ";
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/select/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 0 additions & 2 deletions src/renderer/components/table/table-head.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@
}

&.sticky {
position: -webkit-sticky; // safari
position: sticky;
z-index: 1;
top: 0;
}

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/tooltip/tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 0 additions & 6 deletions src/renderer/components/vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down