muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-26 05:16:41 +07:00
Code Packages Activity Actions

adding cover to node

Browse source
This commit is contained in:
Fedor Katurov 2019-10-22 15:14:58 +07:00
parent f9a269137a
commit c8593b7e7a
8 changed files with 204 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/components/editors/EditorUploadCoverButton/styles.scss Normal file
View file

@ -0,0 +1,80 @@
.wrap {
@include outer_shadow();
height: $upload_button_height;
border-radius: ($upload_button_height / 2) !important;
position: relative;
border-radius: $radius;
cursor: pointer;
transition: opacity 0.5s;
background: lighten($content_bg, 4%);
flex: 0 1 $upload_button_height * 4;
display: flex;
align-items: center;
justify-content: center;
&:hover {
opacity: 1;
}
input {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
}
.input {
position: relative;
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font: $font_16_medium;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px;
}
.preview {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: ($upload_button_height / 2) !important;
background: 50% 50% no-repeat;
background-size: cover;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-end;
}
.button {
width: $upload_button_height;
flex: 0 0 $upload_button_height;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0;
border-radius: $upload_button_height;
background: transparentize($color: lighten($content_bg, 4%), $amount: 0);
&:hover {
svg {
fill: $red;
}
}
svg {
width: 32px;
height: 32px;
}
}