debian-mirror-gitlab/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss
2022-10-11 01:57:18 +05:30

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) {
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='#{$border-radius-default}' ry='#{$border-radius-default}' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='butt' /%3e %3c/svg%3e");
}
.upload-dropzone-border {
border: 0;
@include dropzone-background($gray-400, 2);
border-radius: $border-radius-default;
}
.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;
}