2019-10-20 01:40:55 +02:00
|
|
|
.dropzone {
|
2019-10-20 19:59:22 +02:00
|
|
|
border: 0.4rem dashed var(--brand-grey-dimmed);
|
2019-10-20 03:23:38 +02:00
|
|
|
border-radius: var(--border-radius);
|
2019-10-20 01:40:55 +02:00
|
|
|
padding: calc(var(--spacer) * 2) var(--spacer);
|
|
|
|
|
transition: 0.2s ease-out;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
2019-10-20 03:23:38 +02:00
|
|
|
color: var(--brand-grey-light);
|
2019-10-20 01:40:55 +02:00
|
|
|
}
|
|
|
|
|
|
2019-10-20 19:59:22 +02:00
|
|
|
:global(.dark) .dropzone {
|
|
|
|
|
border-color: var(--brand-grey);
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-20 01:40:55 +02:00
|
|
|
.dropzone:hover,
|
|
|
|
|
.dropzone:focus,
|
|
|
|
|
.dropzone:active {
|
2019-10-20 03:23:38 +02:00
|
|
|
border-color: var(--brand-cyan);
|
2019-10-20 01:40:55 +02:00
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dragover {
|
|
|
|
|
composes: dropzone;
|
|
|
|
|
border-color: var(--brand-cyan);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.disabled {
|
|
|
|
|
composes: dropzone;
|
2019-10-20 03:23:38 +02:00
|
|
|
opacity: 0.3;
|
2019-10-20 01:40:55 +02:00
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error {
|
|
|
|
|
font-size: var(--font-size-small);
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropzone p {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
color: var(--brand-grey);
|
|
|
|
|
}
|
