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

🐛 Fix shortcuts menu being clipped

Browse source
This commit is contained in:
Belén Albeza 2024-02-13 14:55:08 +01:00 • committed by Andrey Antukh
parent bc3d268f57
commit f152e30737
1 changed files with 179 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

95
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
View file

@ -7,39 +7,14 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.shortcuts { .shortcuts {
.shortcuts-header { display: grid;
@include flexCenter; grid-template-rows: auto auto 1fr;
@include tabTitleTipography; // TODO: Fix this once we start implementing the DS.
position: relative; // We should not be doign these hardcoded calc's.
height: $s-32; height: calc(100vh - #{$s-60});
padding: $s-2 $s-2 $s-2 0; }
margin: $s-4 $s-4 0 $s-4;
border-radius: $br-6;
background-color: var(--panel-title-background-color);
.shortcuts-title { .search-field {
@include flexCenter;
flex-grow: 1;
color: var(--title-foreground-color-hover);
}
.shortcuts-close-button {
@extend .button-tertiary;
position: absolute;
right: $s-2;
top: $s-2;
height: $s-28;
width: $s-28;
border-radius: $br-5;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
}
.search-field {
display: flex; display: flex;
align-items: center; align-items: center;
height: $s-32; height: $s-32;
@ -98,18 +73,56 @@
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
}
.shortcuts-header {
@include flexCenter;
@include tabTitleTipography;
position: relative;
height: $s-32;
padding: $s-2 $s-2 $s-2 0;
margin: $s-4 $s-4 0 $s-4;
border-radius: $br-6;
background-color: var(--panel-title-background-color);
.shortcuts-title {
@include flexCenter;
flex-grow: 1;
color: var(--title-foreground-color-hover);
} }
.section { .shortcuts-close-button {
margin: 0; @extend .button-tertiary;
position: absolute;
right: $s-2;
top: $s-2;
height: $s-28;
width: $s-28;
border-radius: $br-5;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
} }
.shortcuts-list { }
}
.section {
margin: 0;
}
.not-found {
@include titleTipography;
color: var(--empty-message-foreground-color);
margin: $s-12;
}
.shortcuts-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 90%; height: 100%;
padding: $s-12; padding: $s-12;
margin-bottom: $s-12; overflow-y: scroll;
overflow-y: overlay;
font-size: $fs-12; font-size: $fs-12;
color: var(--title-foreground-color); color: var(--title-foreground-color);
@ -192,10 +205,4 @@
} }
} }
} }
}
.not-found {
@include titleTipography;
color: var(--empty-message-foreground-color);
margin: $s-12;
}
} }