github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-28 21:40:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Move the path editing bar styles to the DS

Browse Source 
Drop the deprecated styles import, resolve --panel-border-color to
--color-background-quaternary and use logical properties, except top and
height of the bar, which its transition names.

Delete the selectors the DS buttons left unused: .handler-trigger and
.flyout-indicator (the DS icon button draws its own indicator).

No visual change.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-28 16:23:36 +01:00
parent 9876a1469f
commit 4942b31df2
1 changed files with 11 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/app/main/ui/workspace/viewport/path_actions.scss
View File

@ -4,7 +4,6 @@
//
// Copyright (c) KALEIDOS SUBSIDIARY SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@ -12,20 +11,21 @@
cursor: initial;
pointer-events: initial;
position: absolute;
// top and height stay physical: the transition below names them.
top: var(--sp-xl);
left: 50%;
inset-inline-start: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: flex-start;
// Keep the bar stable as actions change.
width: $sz-430;
inline-size: $sz-430;
height: $sz-48;
padding: var(--sp-s);
border-radius: $br-8;
gap: var(--sp-s);
border: $b-2 solid var(--panel-border-color);
border: $b-2 solid var(--color-background-quaternary);
z-index: var(--z-index-panels);
background-color: var(--color-background-primary);
transition:
@ -45,15 +45,15 @@
// Pin the snap toggle to the right.
.snap-group {
margin-left: auto;
margin-inline-start: auto;
}
.separator {
flex-shrink: 0;
width: $sz-1;
height: $sz-24;
inline-size: $sz-1;
block-size: $sz-24;
margin: 0 var(--sp-xs);
background-color: var(--panel-border-color);
background-color: var(--color-background-quaternary);
}
.handler-menu {
@ -62,34 +62,17 @@
align-items: center;
}
// Handler behavior flyout trigger.
.handler-trigger {
position: relative;
}
// Flyout corner indicator.
.flyout-indicator {
position: absolute;
inset-block-end: var(--sp-xs);
inset-inline-end: var(--sp-xs);
inline-size: $sz-6;
block-size: $sz-6;
stroke: var(--pathbar-icon-color);
fill: none;
pointer-events: none;
}
.handler-popover {
position: absolute;
top: calc(100% + var(--sp-s));
left: 50%;
inset-block-start: calc(100% + var(--sp-s));
inset-inline-start: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
padding: var(--sp-xs);
gap: var(--sp-xxs);
border-radius: $br-8;
border: $b-2 solid var(--panel-border-color);
border: $b-2 solid var(--color-background-quaternary);
background-color: var(--color-background-primary);
z-index: var(--z-index-dropdown);