src.app.molecules.forms.import-file.import-file.component.scss Maven / Gradle / Ivy
.drop-box {
width: 426px;
height: 240px;
display:flex;
align-items:center;
justify-content:center;
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
color: #bbb;
transition: border-width 0.5s linear;
.btn-file-browser {
height: 75px;
width: 75px;
border-radius: 100px;
position: relative;
display:flex;
justify-content:center;
align-items: center;
overflow: hidden;
background-image: linear-gradient(to bottom, var(--bs-teal-100) 50%, var(--bs-white 50%));
background-size: 100% 200%;
transition: all 1s;
color: var(--bs-white);
background-color: var(--bs-info);
font-size: 30px;
input[type='file'] {
height: 75px;
width: 75px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
&:hover {
background-position: 0 -100%;
color: var(--bs-primary);
}
}
}
.hover {
border: 2px solid var(--bs-primary);
}