UX: Image preview resizer style

This commit is contained in:
Kris 2019-03-04 21:59:58 -05:00
parent 079b0f4bff
commit 73e4204d20

View File

@ -203,50 +203,39 @@
border: 1px solid $primary-low; border: 1px solid $primary-low;
} }
.d-editor-preview img {
padding-bottom: 20px;
&.emoji,
&.avatar {
padding-bottom: 0;
}
}
.d-editor-preview .image-wrapper { .d-editor-preview .image-wrapper {
position: relative; position: relative;
padding-bottom: 20px;
display: inline-block;
img {
padding-bottom: 0px;
}
&:hover { &:hover {
.button-wrapper { .button-wrapper {
opacity: 1; opacity: 0.9;
} }
} }
.button-wrapper { .button-wrapper {
transition: opacity 0.2s ease-in;
opacity: 0; opacity: 0;
background: $secondary;
position: absolute; position: absolute;
left: 0; transition: all 0.25s;
width: 30px;
bottom: 0px;
display: flex; display: flex;
align-items: center;
bottom: 0.75em;
left: 0.75em;
box-shadow: shadow("dropdown");
.separator { .separator {
margin: 0 5px; color: $primary-low;
} }
.scale-btn { .scale-btn {
color: $tertiary; color: $tertiary;
padding: 0.2em 0.6em;
&.active { &.active {
font-weight: 700; font-weight: bold;
color: $primary;
} }
&:hover { &:not(.active):hover {
text-decoration: underline; text-decoration: underline;
cursor: pointer;
} }
} }
} }