Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 00:58:26 -05:00
Code Issues Activity

🐛 Fix overaly checkboxes in prototype tab

Browse source
This commit is contained in:
Belén Albeza 2024-02-09 16:22:59 +01:00 • committed by Andrey Antukh
parent c89a1b3b27
commit 4e152f470b
2 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -573,7 +573,9 @@
[:span {:class (stl/css :rectangle)}]]]]
;; Overlay click outside
[:div {:class (stl/css :property-row)}
[:ul {:class (stl/css :property-list)}
[:li {:class (stl/css :property-row)}
[:div {:class (stl/css :checkbox-option)}
[:label {:for (str "close-" index)
:class (stl/css-case :global/checked close-click-outside?)}
@ -587,7 +589,7 @@
:on-change change-close-click-outside}]]]]
;; Overlay background
[:div {:class (stl/css :property-row)}
[:li {:class (stl/css :property-row)}
[:div {:class (stl/css :checkbox-option)}
[:label {:for (str "background-" index)
:class (stl/css-case :global/checked background-overlay?)}
@ -598,7 +600,7 @@
[:input {:type "checkbox"
:id (str "background-" index)
:checked background-overlay?
:on-change change-background-overlay}]]]]])
:on-change change-background-overlay}]]]]]])
(when (ctsi/has-animation? interaction)
[:*

22
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -104,8 +104,17 @@
@include flexColumn;
}
.property-list {
list-style: none;
margin: 0;
display: grid;
row-gap: $s-16;
margin-block: calc(#{$s-16} - #{$s-4});
}
.property-row {
@extend .attr-row;
height: auto;
&.big-row {
height: 100%;
}
@ -136,10 +145,7 @@
@extend .input-element;
grid-area: content;
}
.checkbox-option {
@extend .input-checkbox;
grid-area: content;
}
.position-btns-wrapper {
grid-area: content;
display: grid;
@ -216,6 +222,14 @@
}
}
}
.checkbox-option {
@extend .input-checkbox;
grid-area: content;
line-height: 1.2;
label {
align-items: start;
}
}
.interactions-summary {
@extend .asset-element;