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

🐛 Fix extend button style in prototype tab

Browse source
This commit is contained in:
Belén Albeza 2024-02-09 15:44:53 +01:00 • committed by Andrey Antukh
parent 1cb6f43339
commit c89a1b3b27
4 changed files with 164 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -125,10 +125,11 @@
@include buttonStyle;
@include flexCenter;
@include focusTertiary;
--button-tertiary-border-width: $s-2;
border-radius: $br-8;
color: var(--button-tertiary-foreground-color-rest);
background-color: transparent;
border: $s-2 solid transparent;
border: var(--button-tertiary-border-width) solid transparent;
svg,
span svg {
stroke: var(--button-tertiary-foreground-color-rest);
@ -136,7 +137,7 @@
&:hover {
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-hover);
border: $s-2 solid var(--button-secondary-border-color-hover);
border-color: var(--button-secondary-border-color-hover);
svg,
span svg {
stroke: var(--button-tertiary-foreground-color-hover);
@ -144,7 +145,7 @@
}
&:active {
outline: none;
border: $s-2 solid transparent;
border-color: transparent;
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
svg,
@ -169,7 +170,7 @@
.button-icon-selected {
outline: none;
border: $s-2 solid var(--button-icon-border-color-selected);
border-color: var(--button-icon-border-color-selected);
background-color: var(--button-icon-background-color-selected);
color: var(--button-icon-foreground-color-selected);
svg {
@ -183,7 +184,7 @@
@include focusRadio;
border-radius: $br-8;
color: var(--button-radio-foreground-color-rest);
border: $s-1 solid var(--button-radio-background-color-rest);
border-color: $s-1 solid var(--button-radio-background-color-rest);
svg,
span svg {
stroke: var(--button-radio-foreground-color-rest);

4
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -65,6 +65,9 @@
--button-tertiary-border-color-focus: var(--color-accent-primary);
--button-tertiary-foreground-color-focus: var(--color-foreground-primary);
--expand-button-icon-border-width: 0;
--expand-button-icon-border-width-selected: 0;
--button-icon-foreground-color: var(--color-foreground-secondary);
--button-icon-foreground-color-hover: var(--color-foreground-secondary);
--button-icon-background-color-selected: var(--color-background-quaternary);
@ -396,4 +399,5 @@
--assets-item-name-foreground-color: var(--color-foreground-primary);
--text-editor-selection-background-color: var(--la-tertiary-70);
--expand-button-icon-border-width-selected: 2px;
}

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

@ -403,10 +403,10 @@
[:div {:class (stl/css-case :element-set-options-group true
:open extended-open?)}
:element-set-options-group-open extended-open?)}
; Summary
[:div {:class (stl/css :interactions-summary)}
[:div {:class (stl/css-case :extend-btn true
[:button {:class (stl/css-case :extend-btn true
:extended extended-open?)
:on-click toggle-extended}
i/menu-refactor]

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

@ -96,12 +96,15 @@
@include flexColumn($s-12);
}
.element-set-options-group {
&.open {
.element-set-options-group-open {
@include flexColumn;
.extended-options {
}
.extended-options {
@include flexColumn;
.property-row {
}
.property-row {
@extend .attr-row;
&.big-row {
height: 100%;
@ -212,26 +215,13 @@
@extend .input-checkbox;
}
}
}
}
}
}
.interactions-summary {
.interactions-summary {
@extend .asset-element;
height: $s-44;
padding: 0;
gap: $s-4;
.extend-btn {
@extend .button-tertiary;
height: 100%;
width: $s-28;
svg {
@extend .button-icon;
}
&.extended {
@extend .button-icon-selected;
}
}
gap: $s-8;
.remove-btn {
@extend .button-tertiary;
@ -241,6 +231,32 @@
@extend .button-icon-small;
}
}
}
.extend-btn {
@extend .button-tertiary;
--button-tertiary-border-width: var(--expand-button-icon-border-width);
height: 100%;
width: $s-28;
border-end-end-radius: 0;
border-start-end-radius: 0;
padding: 0;
svg {
@extend .button-icon;
}
position: relative;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-inline-end: $s-1 solid var(--panel-background-color);
}
&.extended {
@extend .button-icon-selected;
--button-tertiary-border-width: var(--expand-button-icon-border-width-selected);
}
}