Improve staged attachment designs

This commit is contained in:
Evan Hahn 2021-09-20 20:23:55 -05:00 committed by GitHub
parent 4e6c415ad8
commit a68e3a6d20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 20 deletions

View file

@ -3811,14 +3811,7 @@ button.module-image__border-overlay:focus {
}
.module-image__close-button {
@include button-reset;
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
z-index: 2;
@include staged-attachment-close-button;
background-image: url('../images/x-shadow-16.svg');
@ -3989,12 +3982,34 @@ button.module-image__border-overlay:focus {
margin-bottom: 6px;
}
.module-staged-attachment {
margin-right: 8px;
&.module-image::before {
background: linear-gradient(
180deg,
$color-black-alpha-30 0%,
transparent 100%
);
content: '';
display: block;
height: 40px;
opacity: 0;
position: absolute;
transition: opacity 0.2s ease-out;
width: 100%;
}
&.module-image:hover::before {
opacity: 1;
}
}
// Module: Staged Generic Attachment
.module-staged-generic-attachment {
height: 120px;
width: 120px;
margin: 1px;
display: inline-block;
position: relative;
border-radius: 4px;
@ -4013,14 +4028,7 @@ button.module-image__border-overlay:focus {
}
.module-staged-generic-attachment__close-button {
@include button-reset;
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
z-index: 2;
@include staged-attachment-close-button;
@include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-black);