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

🎉 Add animations to interactions

Browse source
This commit is contained in:
Andrés Moya 2021-10-29 10:43:53 +02:00 • committed by Andrey Antukh
parent 24062beebe
commit 81cbc33dbb
24 changed files with 1479 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/resources/styles/main/partials/sidebar-interactions.scss
View file

@ -80,6 +80,63 @@
}
}
.interactions-way-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
& .input-radio {
margin-bottom: 0;
& label {
color: $color-gray-20;
&:before {
background-color: unset;
}
}
& input[type=radio]:checked {
& + label {
&:before {
background-color: $color-primary;
box-shadow: inset 0 0 0 5px $color-gray-50;
}
}
}
}
}
.interactions-direction-buttons {
margin-top: $size-2;
padding-top: $size-2;
padding-bottom: $size-2;
justify-content: space-around;
.element-set-actions-button {
min-width: 40px;
min-height: 13px;
}
svg {
height: 13px;
width: 13px;
}
}
.interactions-easing-icon {
display: flex;
justify-content: center;
align-items: center;
min-width: 30px;
min-height: 30px;
& svg {
width: 12px;
height: 12px;
stroke: $color-gray-20;
}
}
.flow-element {
display: flex;
align-items: center;

30
frontend/resources/styles/main/partials/viewer.scss
View file

@ -12,19 +12,33 @@
grid-row: 1 / span 2;
grid-column: 1 / span 1;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
.empty-state {
justify-content: center;
align-items: center;
}
overflow: auto;
svg {
transform-origin: center;
& .viewer-wrapper {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
justify-items: center;
align-items: center;
overflow: hidden;
.empty-state {
justify-content: center;
align-items: center;
}
svg {
transform-origin: center;
}
}
}
.viewport-container {
grid-column: 1 / 1;
grid-row: 1 / 1;
}