github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 11:18:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix layer hierarchy to match old and new SCSS (#9126)

Browse Source
This commit is contained in:
Luis de Dios 2026-04-23 18:00:40 +02:00 committed by GitHub
parent c6b6b9ce00
commit cd417443f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/resources/styles/common/refactor/basic-rules.scss
View File

@ -800,7 +800,7 @@
position: absolute; position: absolute;
padding: $s-4; padding: $s-4;
border-radius: $br-8; border-radius: $br-8;
z-index: $z-index-10; z-index: $z-index-dropdown;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
border: $s-2 solid var(--panel-border-color); border: $s-2 solid var(--panel-border-color);

4
frontend/resources/styles/common/refactor/z-index.scss
View File

@ -11,5 +11,5 @@ $z-index-4: 4; // context menu
$z-index-5: 5; // modal $z-index-5: 5; // modal
$z-index-10: 10; $z-index-10: 10;
$z-index-20: 20; $z-index-20: 20;
$z-index-modal: 30; // When refactor finish we can reduce this number, $z-index-modal: 300;
$z-index-alert: 40; // When refactor finish we can reduce this number, $z-index-dropdown: 400;

3
frontend/src/app/main/ui/components/context_menu_a11y.scss
View File

@ -5,12 +5,13 @@
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
@use "ds/z-index.scss" as *;
.context-menu { .context-menu {
position: relative; position: relative;
visibility: hidden; visibility: hidden;
opacity: deprecated.$op-0; opacity: deprecated.$op-0;
z-index: deprecated.$z-index-4; z-index: var(--z-index-dropdown);
&.is-open { &.is-open {
position: relative; position: relative;

12
frontend/src/app/main/ui/dashboard/deleted.scss
View File

@ -6,11 +6,11 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
@use "common/refactor/common-dashboard"; @use "common/refactor/common-dashboard";
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../ds/_borders.scss" as *; @use "ds/spacing.scss" as *;
@use "../ds/spacing.scss" as *; @use "ds/z-index.scss" as *;
@use "../ds/_sizes.scss" as *; @use "ds/_borders.scss" as *;
@use "../ds/z-index.scss" as *; @use "ds/_sizes.scss" as *;
.dashboard-container { .dashboard-container {
flex: 1 0 0; flex: 1 0 0;
@ -51,7 +51,7 @@
padding: var(--sp-xxl) var(--sp-xxl) var(--sp-s) var(--sp-xxl); padding: var(--sp-xxl) var(--sp-xxl) var(--sp-s) var(--sp-xxl);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: $z-index-100; z-index: var(--z-index-panels);
} }
.nav-inside { .nav-inside {

3
frontend/src/app/main/ui/dashboard/files.scss
View File

@ -6,6 +6,8 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
@use "common/refactor/common-dashboard"; @use "common/refactor/common-dashboard";
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
.dashboard-container { .dashboard-container {
flex: 1 0 0; flex: 1 0 0;
@ -13,6 +15,7 @@
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: deprecated.$s-1 solid var(--color-background-quaternary); border-top: deprecated.$s-1 solid var(--color-background-quaternary);
padding-block-end: var(--sp-xxxl);
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;

2
frontend/src/app/main/ui/dashboard/grid.scss
View File

@ -17,7 +17,7 @@ $thumbnail-default-height: deprecated.$s-168; // Default width
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 0 deprecated.$s-16; padding: 0 var(--sp-l) deprecated.$s-16;
} }
.grid-row { .grid-row {

5
frontend/src/app/main/ui/dashboard/projects.scss
View File

@ -19,16 +19,15 @@
margin-inline-end: var(--sp-l); margin-inline-end: var(--sp-l);
border-block-start: $b-1 solid var(--panel-border-color); border-block-start: $b-1 solid var(--panel-border-color);
overflow-y: auto; overflow-y: auto;
padding-block-end: var(--sp-xxxl);
} }
.dashboard-projects { .dashboard-projects {
user-select: none; user-select: none;
block-size: calc(100vh - px2rem(64)); block-size: calc(100vh - px2rem(80));
} }
.with-team-hero { .with-team-hero {
block-size: calc(100vh - px2rem(280)); block-size: calc(100vh - px2rem(360));
} }
.dashboard-shared { .dashboard-shared {

9
frontend/src/app/main/ui/dashboard/templates.scss
View File

@ -4,10 +4,11 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "ds/_borders.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "ds/z-index.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
.dashboard-templates-section { .dashboard-templates-section {
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
@ -26,6 +27,8 @@
transition: bottom 300ms; transition: bottom 300ms;
width: calc(100% - $sz-12); width: calc(100% - $sz-12);
pointer-events: none; pointer-events: none;
z-index: var(--z-index-set);
&.collapsed { &.collapsed {
inset-block-end: calc(-1 * px2rem(228)); inset-block-end: calc(-1 * px2rem(228));
background-color: transparent; background-color: transparent;