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

🐛 Fix radio buttons UI for boolean operations

Browse source
This commit is contained in:
Belén Albeza 2024-02-20 13:00:54 +01:00
parent f1e12015d6
commit 4097dec5a4
3 changed files with 15 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -21,7 +21,6 @@
flex-grow: 1; flex-grow: 1;
border-radius: $s-8; border-radius: $s-8;
box-sizing: border-box; box-sizing: border-box;
border: $s-2 solid var(--radio-btn-border-color);
input { input {
display: none; display: none;
} }

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
View file

@ -85,13 +85,11 @@
:title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")") :title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")
:id "bool-opt-exclude"}]]] :id "bool-opt-exclude"}]]]
[:div {:class (stl/css :bool-group)} [:button
[:button {:title (tr "workspace.shape.menu.flatten")
{:title (tr "workspace.shape.menu.flatten") :class (stl/css-case
:class (stl/css-case :flatten-button true
:flatten-button true :disabled disabled-flatten)
:disabled disabled-flatten) :disabled disabled-flatten
:disabled disabled-flatten :on-click flatten-objects}
:on-click flatten-objects} flatten-icon]])))
flatten-icon]]])))

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
View file

@ -7,15 +7,16 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.boolean-options { .boolean-options {
display: flex; display: grid;
gap: $s-4; grid-template-columns: repeat(8, $s-28);
column-gap: $s-4;
height: $s-32; height: $s-32;
margin: 0 calc(-1 * $s-2);
} }
.bool-group { .bool-group {
display: flex; display: grid;
align-items: center; grid-template-columns: subgrid;
grid-column: 1 / span 4;
} }
.flatten-button { .flatten-button {
@ -23,6 +24,7 @@
height: $s-32; height: $s-32;
width: $s-32; width: $s-32;
border-radius: $br-8; border-radius: $br-8;
grid-column: 5 / span 1;
--flatten-icon-foreground-color: var(--icon-foreground); --flatten-icon-foreground-color: var(--icon-foreground);
&.disabled { &.disabled {