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

🐛 Fix modal overflow and column gap #9055

Browse source
This commit is contained in:
Juanfran 2024-11-19 13:59:54 +01:00
parent 97e5232b7d
commit db01b66905
3 changed files with 19 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/common/refactor/spacing.scss
View file

@ -152,6 +152,7 @@ $s-648: #{0.25 * 162}rem;
$s-664: #{0.25 * 166}rem; $s-664: #{0.25 * 166}rem;
$s-688: #{0.25 * 172}rem; $s-688: #{0.25 * 172}rem;
$s-712: #{0.25 * 178}rem; $s-712: #{0.25 * 178}rem;
$s-720: #{0.25 * 180}rem;
$s-736: #{0.25 * 184}rem; $s-736: #{0.25 * 184}rem;
$s-744: #{0.25 * 186}rem; $s-744: #{0.25 * 186}rem;
$s-800: #{0.25 * 200}rem; $s-800: #{0.25 * 200}rem;

2
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -301,7 +301,7 @@
[:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)} [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
(tr "workspace.token.edit-theme-title")] (tr "workspace.token.edit-theme-title")]
[:form {:on-submit on-save-form} [:form {:on-submit on-save-form :class (stl/css :edit-theme-form)}
[:div {:class (stl/css :edit-theme-wrapper)} [:div {:class (stl/css :edit-theme-wrapper)}
[:button {:on-click on-back [:button {:on-click on-back
:class (stl/css :back-btn) :class (stl/css :back-btn)

22
frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
View file

@ -12,10 +12,12 @@
.modal-dialog { .modal-dialog {
@extend .modal-container-base; @extend .modal-container-base;
display: grid;
grid-template-rows: auto 1fr auto; display: flex;
flex-direction: column;
width: 100%; width: 100%;
max-width: $s-468; max-width: $s-512;
max-height: $s-720;
user-select: none; user-select: none;
} }
@ -32,6 +34,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $s-24; gap: $s-24;
overflow: auto;
}
.edit-theme-form {
display: flex;
overflow-y: auto;
} }
.themes-modal-title { .themes-modal-title {
@ -101,6 +109,8 @@
.theme-group-label { .theme-group-label {
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
margin: 0 0 $s-12 0;
padding: 0;
} }
.group-title { .group-title {
@ -114,12 +124,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $s-6; gap: $s-6;
margin: 0;
} }
.theme-group-wrapper { .theme-group-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $s-8; overflow-y: auto;
gap: $s-32;
} }
.theme-row { .theme-row {
@ -166,7 +178,7 @@
.sets-list-wrapper { .sets-list-wrapper {
border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
border-radius: $s-8; border-radius: $s-8;
overflow: hidden; overflow-y: auto;
} }
.sets-count-empty-button { .sets-count-empty-button {