🎉 Add resize constraints to shapes

This commit is contained in:
Andrés Moya 2021-06-01 12:38:00 +02:00 committed by Alonso Torres
parent 55b0f6e950
commit 092a973f9a
9 changed files with 602 additions and 43 deletions

View file

@ -1257,4 +1257,154 @@
}
}
.row-flex.align-top {
align-items: flex-start;
}
.constraints-widget {
min-width: 72px;
min-height: 72px;
position: relative;
background-color: $color-gray-60;
flex-grow: 0;
.constraints-box {
width: 28px;
height: 28px;
position: absolute;
top: 22px;
left: 22px;
border: 2px solid $color-gray-50;
}
.constraint-button {
position: absolute;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&::after {
content: ' ';
background-color: $color-gray-20;
}
&.active,
&:hover {
&::after {
background-color: $color-primary;
}
}
&.top,
&.bottom {
width: 28px;
height: 22px;
left: calc(50% - 14px);
&::after {
width: 3px;
height: 15px;
}
}
&.top {
top: 0;
}
&.bottom {
bottom: 0;
}
&.left,
&.right {
width: 22px;
height: 28px;
top: calc(50% - 14px);
&::after {
width: 15px;
height: 3px;
}
}
&.left {
left: 0;
}
&.right {
right: 0;
}
&.centerv {
width: 28px;
height: 28px;
left: calc(50% - 14px);
top: calc(50% - 14px);
&::after {
width: 3px;
height: 15px;
}
}
&.centerh {
width: 28px;
height: 15px;
left: calc(50% - 14px);
top: calc(50% - 7px);
&::after {
width: 15px;
height: 3px;
}
}
}
}
.constraints-form {
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
.input-select {
font-size: $fs11;
margin: 0 $x-small;
}
svg {
width: 15px;
height: 15px;
margin-left: $medium;
fill: $color-gray-20;
}
.left-right svg {
transform: rotate(45deg);
}
.top-down svg {
transform: rotate(-45deg);
}
.fix-when {
font-size: $fs11;
cursor: pointer;
span {
margin-left: $small;
}
&:hover,
&.active {
color: $color-primary;
svg {
fill: $color-primary;
}
}
}
}