0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00

🐛 Fix shortcuts menu being clipped

This commit is contained in:
Belén Albeza 2024-02-13 14:55:08 +01:00 committed by Andrey Antukh
parent bc3d268f57
commit f152e30737

View file

@ -7,195 +7,202 @@
@import "refactor/common-refactor.scss";
.shortcuts {
.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);
display: grid;
grid-template-rows: auto auto 1fr;
// TODO: Fix this once we start implementing the DS.
// We should not be doign these hardcoded calc's.
height: calc(100vh - #{$s-60});
}
.shortcuts-title {
@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;
.search-field {
display: flex;
align-items: center;
height: $s-32;
margin: $s-16 $s-12 $s-4 $s-12;
border-radius: $br-8;
font-family: "worksans", sans-serif;
background-color: var(--color-background-tertiary);
.search-box {
align-items: center;
height: $s-32;
margin: $s-16 $s-12 $s-4 $s-12;
border-radius: $br-8;
font-family: "worksans", sans-serif;
background-color: var(--color-background-tertiary);
.search-box {
align-items: center;
display: flex;
width: 100%;
.icon-wrapper {
display: flex;
width: 100%;
.icon-wrapper {
display: flex;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
.input-text {
@include removeInputStyle;
height: $s-32;
width: 100%;
margin: 0;
padding: $s-4;
border: 0;
font-size: $fs-12;
color: var(--color-foreground-primary);
&::placeholder {
color: var(--color-foreground-secondary);
}
&:focus-visible {
border-color: var(--color-accent-primary-muted);
}
}
.clear-btn {
@include buttonStyle;
@include flexCenter;
height: $s-16;
width: $s-16;
.clear-icon {
@include flexCenter;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
}
}
.search-icon {
@include flexCenter;
width: $s-28;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
}
.section {
margin: 0;
}
.shortcuts-list {
display: flex;
flex-direction: column;
height: 90%;
padding: $s-12;
margin-bottom: $s-12;
overflow-y: overlay;
font-size: $fs-12;
color: var(--title-foreground-color);
.section-title,
.subsection-title {
@include tabTitleTipography;
display: flex;
align-items: center;
.input-text {
@include removeInputStyle;
height: $s-32;
width: 100%;
margin: 0;
padding: $s-8 0;
cursor: pointer;
.collapsed-shortcuts {
padding: $s-4;
border: 0;
font-size: $fs-12;
color: var(--color-foreground-primary);
&::placeholder {
color: var(--color-foreground-secondary);
}
&:focus-visible {
border-color: var(--color-accent-primary-muted);
}
}
.clear-btn {
@include buttonStyle;
@include flexCenter;
height: $s-16;
width: $s-16;
.clear-icon {
@include flexCenter;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
&.open {
transform: rotate(90deg);
}
}
.subsection-name,
.section-name {
padding-left: $s-4;
}
&:hover {
color: var(--title-foreground-color-hover);
.collapsed-shortcuts {
svg {
stroke: var(--title-foreground-color-hover);
}
}
}
}
.subsection-title {
text-transform: none;
padding-left: $s-12;
}
.subsection-menu {
margin-bottom: $s-4;
}
.sub-menu {
margin-bottom: $s-4;
.shortcuts-name {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: $s-32;
padding: $s-6;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--pill-background-color);
.command-name {
@include titleTipography;
margin-left: $s-2;
color: var(--pill-foreground-color);
}
.keys {
@include flexCenter;
gap: $s-2;
color: var(--pill-foreground-color);
.key {
@include titleTipography;
@include flexCenter;
text-transform: capitalize;
height: $s-20;
padding: $s-2 $s-6;
border-radius: $s-6;
background-color: var(--menu-shortcut-background-color);
}
.space {
margin: 0 $s-2;
}
}
}
}
}
.not-found {
@include titleTipography;
color: var(--empty-message-foreground-color);
margin: $s-12;
.search-icon {
@include flexCenter;
width: $s-28;
svg {
@extend .button-icon-small;
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);
}
.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);
}
}
}
.section {
margin: 0;
}
.not-found {
@include titleTipography;
color: var(--empty-message-foreground-color);
margin: $s-12;
}
.shortcuts-list {
display: flex;
flex-direction: column;
height: 100%;
padding: $s-12;
overflow-y: scroll;
font-size: $fs-12;
color: var(--title-foreground-color);
.section-title,
.subsection-title {
@include tabTitleTipography;
display: flex;
align-items: center;
margin: 0;
padding: $s-8 0;
cursor: pointer;
.collapsed-shortcuts {
@include flexCenter;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
&.open {
transform: rotate(90deg);
}
}
.subsection-name,
.section-name {
padding-left: $s-4;
}
&:hover {
color: var(--title-foreground-color-hover);
.collapsed-shortcuts {
svg {
stroke: var(--title-foreground-color-hover);
}
}
}
}
.subsection-title {
text-transform: none;
padding-left: $s-12;
}
.subsection-menu {
margin-bottom: $s-4;
}
.sub-menu {
margin-bottom: $s-4;
.shortcuts-name {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: $s-32;
padding: $s-6;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--pill-background-color);
.command-name {
@include titleTipography;
margin-left: $s-2;
color: var(--pill-foreground-color);
}
.keys {
@include flexCenter;
gap: $s-2;
color: var(--pill-foreground-color);
.key {
@include titleTipography;
@include flexCenter;
text-transform: capitalize;
height: $s-20;
padding: $s-2 $s-6;
border-radius: $s-6;
background-color: var(--menu-shortcut-background-color);
}
.space {
margin: 0 $s-2;
}
}
}
}
}