1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
@function encodecolor($string) {
@if type-of($string) == 'color' {
$hex: str-slice(ie-hex-str($string), 4);
$string: unquote('#{$hex}');
}
$string: '%23' + $string;
@return $string;
}
@mixin dropzone-background($stroke-color, $stroke-width: 4, $stroke-linecap: 'butt') {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='#{encodecolor($stroke-linecap)}'/%3e%3c/svg%3e");
}
.upload-dropzone-border {
border: 0;
@include dropzone-background($gray-400, 2, 'round');
border-radius: 8px;
}
.upload-dropzone-card {
transition: background $gl-transition-duration-medium $general-hover-transition-curve,
border $gl-transition-duration-medium $general-hover-transition-curve;
color: $gl-text-color;
&:hover,
&:focus,
&:focus-within,
&:active {
outline: none;
@include dropzone-background($blue-500);
color: $gl-text-color;
}
&:focus,
&:focus-within,
&:active {
@include gl-focus;
}
&:hover {
border-color: $gray-300;
}
}
.upload-dropzone-overlay {
background-color: $blue-50;
@include dropzone-background($blue-500);
top: 0;
left: 0;
pointer-events: none;
opacity: 1;
}
.upload-dropzone-fade-enter-active,
.upload-dropzone-fade-leave-active {
transition: opacity $general-hover-transition-duration $general-hover-transition-curve;
}
.upload-dropzone-fade-enter,
.upload-dropzone-fade-leave-to {
opacity: 0;
}
|
