Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 14:12:36 -05:00
Code Issues Activity

Style the form to fit the color ramp exactly

Browse source
This commit is contained in:
Florian Schroedl 2024-09-18 17:23:42 +02:00
parent 8804d1432e
commit f5b62a5fc1
3 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -326,7 +326,8 @@ Token names should only contain letters and digits separated by . characters.")}
(st/emit! (wtu/update-workspace-tokens)) (st/emit! (wtu/update-workspace-tokens))
(modal/hide!)))))))))] (modal/hide!)))))))))]
[:form [:form
{:on-submit on-submit} {:class (stl/css :form-wrapper)
:on-submit on-submit}
[:div {:class (stl/css :token-rows)} [:div {:class (stl/css :token-rows)}
[:div [:div
[:& tokens.common/labeled-input {:label "Name" [:& tokens.common/labeled-input {:label "Name"

6
frontend/src/app/main/ui/workspace/tokens/form.scss
View file

@ -7,6 +7,10 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
@import "./common.scss"; @import "./common.scss";
.form-wrapper {
width: $s-260;
}
.button-row { .button-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -30,7 +34,7 @@
@include bodySmallTypography; @include bodySmallTypography;
padding: $s-4 $s-6; padding: $s-4 $s-6;
font-weight: medium; font-weight: medium;
height: $s-24; min-height: 1lh;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
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);

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

@ -8,6 +8,9 @@
.shadow { .shadow {
@extend .modal-container-base; @extend .modal-container-base;
width: auto;
max-width: auto;
min-width: auto;
@include menuShadow; @include menuShadow;
position: absolute; position: absolute;
z-index: 11; z-index: 11;