2019-10-16 17:02:04 +02:00
|
|
|
@import '../styles/_variables.css';
|
|
|
|
|
|
|
|
|
|
.dropzone {
|
|
|
|
|
border: 0.2rem dashed var(--brand-grey-light);
|
|
|
|
|
border-radius: calc(var(--border-radius) * 2);
|
2019-10-16 17:26:46 +02:00
|
|
|
padding: calc(var(--spacer) * 2) var(--spacer);
|
2019-10-16 17:02:04 +02:00
|
|
|
transition: 0.2s ease-out;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropzone:hover,
|
|
|
|
|
.dropzone:focus,
|
|
|
|
|
.dropzone:active {
|
|
|
|
|
border-color: var(--brand-grey-lighter);
|
|
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-16 22:10:03 +02:00
|
|
|
.dragover {
|
|
|
|
|
composes: dropzone;
|
2019-10-16 17:02:04 +02:00
|
|
|
border-color: var(--brand-pink);
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-16 22:10:03 +02:00
|
|
|
.disabled {
|
|
|
|
|
composes: dropzone;
|
2019-10-16 17:02:04 +02:00
|
|
|
opacity: 0.5;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropzone p {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
color: var(--brand-grey-light);
|
|
|
|
|
}
|
