Nertivia-Client/src/components/app/DragDropFileUploadDialog.vue
2019-03-08 10:23:33 +00:00

46 lines
762 B
Vue

<template>
<div class="drop-background">
<div class="box">
<i class="material-icons">insert_drive_file</i>
<div class="info">Drop file</div>
</div>
</div>
</template>
<style scoped>
.drop-background {
position: absolute;
background: rgba(0, 0, 0, 0.521);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: flex;
}
.box {
margin: auto;
height: 230px;
width: 300px;
background: rgba(0, 0, 0, 0.466);
border: solid 1px white;
border-radius: 5px;
color: white;
display: flex;
flex-direction: column;
user-select: none;
}
.material-icons{
font-size: 80px;
color: white;
margin: auto;
margin-top: 50px;
margin-bottom: 10px;
}
.info{
margin: auto;
text-align: center;
margin-top: 20px;
}
</style>