mirror of
https://github.com/penpot/penpot.git
synced 2025-05-13 18:26:37 +02:00
🐛 Fix shortcuts menu being clipped
This commit is contained in:
Belén Albeza
Andrey Antukh
parent
bc3d268f57
commit
f152e30737
1 changed files with 179 additions and 172 deletions
|
|
@ -7,195 +7,202 @@
|
||||||
@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;
|
display: flex;
|
||||||
flex-grow: 1;
|
align-items: center;
|
||||||
color: var(--title-foreground-color-hover);
|
height: $s-32;
|
||||||
}
|
margin: $s-16 $s-12 $s-4 $s-12;
|
||||||
|
border-radius: $br-8;
|
||||||
.shortcuts-close-button {
|
font-family: "worksans", sans-serif;
|
||||||
@extend .button-tertiary;
|
background-color: var(--color-background-tertiary);
|
||||||
position: absolute;
|
.search-box {
|
||||||
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;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: $s-32;
|
display: flex;
|
||||||
margin: $s-16 $s-12 $s-4 $s-12;
|
width: 100%;
|
||||||
border-radius: $br-8;
|
|
||||||
font-family: "worksans", sans-serif;
|
.icon-wrapper {
|
||||||
background-color: var(--color-background-tertiary);
|
|
||||||
.search-box {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
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 {
|
svg {
|
||||||
@extend .button-icon-small;
|
@extend .button-icon-small;
|
||||||
stroke: var(--icon-foreground);
|
stroke: var(--icon-foreground);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
.input-text {
|
||||||
margin: 0;
|
@include removeInputStyle;
|
||||||
}
|
height: $s-32;
|
||||||
.shortcuts-list {
|
width: 100%;
|
||||||
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;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: $s-8 0;
|
padding: $s-4;
|
||||||
cursor: pointer;
|
border: 0;
|
||||||
|
font-size: $fs-12;
|
||||||
.collapsed-shortcuts {
|
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;
|
@include flexCenter;
|
||||||
svg {
|
svg {
|
||||||
@extend .button-icon-small;
|
@extend .button-icon-small;
|
||||||
stroke: var(--icon-foreground);
|
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 {
|
.search-icon {
|
||||||
@include titleTipography;
|
@include flexCenter;
|
||||||
color: var(--empty-message-foreground-color);
|
width: $s-28;
|
||||||
margin: $s-12;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue