3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 15:31:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🔧 Use scroll only on layers and refactor layer element name

Browse source
This commit is contained in:
Elena Torro 2025-05-14 15:47:09 +02:00
parent a575410a29
commit e4644ff506
2 changed files with 26 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
View file

@ -7,46 +7,60 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.element-name { .element-name {
--element-name-color: var(--context-hover-color, var(--layer-row-foreground-color));
--element-name-comp-color: var(--context-hover-color, var(--layer-row-component-foreground-color));
--element-name-opacity: var(--context-hover-opacity, $op-7);
@include textEllipsis; @include textEllipsis;
@include bodySmallTypography; @include bodySmallTypography;
color: var(--element-name-color);
flex-grow: 1; flex-grow: 1;
height: 100%; block-size: 100%;
align-content: center; align-content: center;
color: var(--context-hover-color, var(--layer-row-foreground-color)); min-inline-size: var(--sp-xl);
&.selected { &.selected {
color: var(--layer-row-foreground-color-selected); color: var(--layer-row-foreground-color-selected);
} }
&.type-comp { &.type-comp {
color: var(--context-hover-color, var(--layer-row-component-foreground-color)); color: var(--element-name-comp-color);
&.hidden { &.hidden {
opacity: var(--context-hover-opacity, $op-7); opacity: var(--element-name-opacity);
} }
} }
&.hidden { &.hidden {
opacity: var(--context-hover-opacity, $op-7); opacity: var(--element-name-opacity);
} }
} }
.element-name-input { .element-name-input {
--element-name-input-border-color: var(--input-border-color-focus);
--element-name-input-color: var(--layer-row-foreground-color);
@include textEllipsis; @include textEllipsis;
@include bodySmallTypography; @include bodySmallTypography;
@include removeInputStyle; @include removeInputStyle;
flex-grow: 1; flex-grow: 1;
height: $s-28; height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); max-inline-size: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
margin: 0; margin: 0;
padding-left: $s-6; padding-inline-start: $s-6;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid var(--input-border-color-focus); border: $s-1 solid var(--element-name-input-border-color);
color: var(--layer-row-foreground-color); color: var(--element-name-input-color);
&.selected { &.selected {
min-width: $s-88; min-inline-size: $s-100;
} }
} }
.element-name-touched { .element-name-touched {
color: var(--layer-row-component-foreground-color); --element-name-touched-color: var(--layer-row-component-foreground-color);
color: var(--element-name-touched-color);
} }

2
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -39,7 +39,7 @@
flex-direction: column; flex-direction: column;
height: calc(-38px + var(--height, $s-200)); height: calc(-38px + var(--height, $s-200));
width: var(--width); width: var(--width);
overflow-x: auto; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
scrollbar-gutter: stable; scrollbar-gutter: stable;