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

🐛 Fix collapsable palette position

Browse source
This commit is contained in:
Belén Albeza 2024-02-14 16:48:00 +01:00
parent 5cbb3f76c7
commit 4c9174969f
1 changed files with 56 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

109
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -39,10 +39,7 @@
&.wide { &.wide {
width: 100%; width: 100%;
} }
&.mid-palette,
&.small-palette {
grid-template-columns: $s-64 auto 1fr;
}
.resize-area { .resize-area {
grid-area: resize; grid-area: resize;
height: $s-8; height: $s-8;
@ -108,56 +105,62 @@
width: 100%; width: 100%;
min-width: 0; min-width: 0;
} }
.handler { }
@include buttonStyle;
@include flexCenter; .handler {
width: $s-12; @include buttonStyle;
@include flexCenter;
width: $s-12;
height: 100%;
.handler-btn {
width: $s-4;
height: 100%; height: 100%;
.handler-btn { max-height: $s-40;
width: $s-4; margin: $s-8 $s-4;
height: 100%;
max-height: $s-40;
margin: $s-8 $s-4;
padding: 0;
border-radius: $s-4;
background-color: var(--palette-handler-background-color);
}
}
&.hidden-bts {
right: 10px;
z-index: 1;
width: 22px;
grid-template-columns: $s-8 auto 1fr;
padding: 0; padding: 0;
&.small-palette, border-radius: $s-4;
&.mid-palette { background-color: var(--palette-handler-background-color);
right: 10px; }
} }
.palette-btn-list {
opacity: $op-0; .mid-palette,
visibility: hidden; .small-palette {
width: 0; grid-template-columns: $s-64 auto 1fr;
.palette-item { }
opacity: $op-0;
visibility: hidden; .hidden-bts {
z-index: 0; right: $s-2;
} z-index: $z-index-1;
} width: 22px;
.resize-area { grid-template-columns: $s-8 auto 1fr;
visibility: hidden; padding: 0;
z-index: 0; border-inline-start: 0;
width: 0; border-start-start-radius: 0;
} border-end-start-radius: 0;
.palette-actions { .palette-btn-list {
visibility: hidden; opacity: $op-0;
z-index: 0; visibility: hidden;
} width: 0;
.palette { .palette-item {
visibility: hidden; opacity: $op-0;
z-index: 0; visibility: hidden;
} z-index: 0;
.handler { }
padding-bottom: $s-8; }
} .resize-area {
visibility: hidden;
z-index: 0;
width: 0;
}
.palette-actions {
visibility: hidden;
z-index: 0;
}
.palette {
visibility: hidden;
z-index: 0;
}
.handler {
padding-bottom: $s-8;
} }
} }