62 lines
1.6 KiB
SCSS
62 lines
1.6 KiB
SCSS
@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;
|
|
}
|