Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 22:49:01 -05:00
Code Issues Activity

🐛 Fix constraints buttons

Browse source
This commit is contained in:
Eva Marco 2024-10-11 16:18:11 +02:00 • committed by Andrey Antukh
parent 784274f8ae
commit bd888dcde2
2 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -28,6 +28,7 @@
### :bug: Bugs fixed ### :bug: Bugs fixed
- Fix problem with constraints buttons [Taiga #8465](https://tree.taiga.io/project/penpot/issue/8465)
- Fix problem with go back button on error page [Taiga #8887](https://tree.taiga.io/project/penpot/issue/8887) - Fix problem with go back button on error page [Taiga #8887](https://tree.taiga.io/project/penpot/issue/8887)
- Fix problem with shadows in text for Safari [Taiga #8770](https://tree.taiga.io/project/penpot/issue/8770) - Fix problem with shadows in text for Safari [Taiga #8770](https://tree.taiga.io/project/penpot/issue/8770)
- Fix a regression with feedback form subject and content limits [Taiga #8908](https://tree.taiga.io/project/penpot/issue/8908) - Fix a regression with feedback form subject and content limits [Taiga #8908](https://tree.taiga.io/project/penpot/issue/8908)

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

@ -36,32 +36,37 @@
.constraints-bottom { .constraints-bottom {
@include flexCenter; @include flexCenter;
grid-area: top; grid-area: top;
.constraint-btn, }
.constraint-btn-special, .constraint-btn,
.constraint-btn-rotated { .constraint-btn-special,
@include buttonStyle; .constraint-btn-rotated {
@include flexCenter; @include buttonStyle;
width: 100%; @include flexCenter;
height: 100%; width: 100%;
.resalted-area { height: 100%;
width: $s-32; --resalted-area-background-color: var(--button-constraint-background-color-rest);
height: $s-3; --resalted-area-border-color: none;
border-radius: $br-8; &.active {
background-color: var(--button-constraint-background-color-rest); --resalted-area-border-color: var(--button-constraint-border-color-hover);
padding: 0; --resalted-area-background-color: var(--button-constraint-background-color-hover);
margin: 0; }
} &:hover,
&.active .resalted-area { &:focus-visible {
outline: $s-4 solid var(--button-constraint-border-color-hover); --resalted-area-border-color: var(--button-constraint-border-color-hover);
background-color: var(--button-constraint-background-color-hover); --resalted-area-background-color: var(--button-constraint-background-color-hover);
}
&:hover .resalted-area,
&:focus .resalted-area {
outline: $s-4 solid var(--button-constraint-border-color-hover);
background-color: var(--button-constraint-background-color-hover);
}
} }
} }
.resalted-area {
width: $s-32;
height: $s-3;
border-radius: $br-8;
background-color: var(--resalted-area-background-color);
outline: $s-4 solid var(--resalted-area-border-color);
padding: 0;
margin: 0;
}
.constraints-left { .constraints-left {
grid-area: left; grid-area: left;
.constraint-btn-rotated { .constraint-btn-rotated {
@ -73,6 +78,7 @@
} }
} }
} }
.constraints-center { .constraints-center {
grid-area: center; grid-area: center;
position: relative; position: relative;
@ -113,7 +119,7 @@
grid-area: bottom; grid-area: bottom;
} }
.contraints-selects { .constraints-selects {
@include flexColumn; @include flexColumn;
} }