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
Andrey Antukh
parent
bc3d268f57
commit
f152e30737
1 changed files with 179 additions and 172 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue