theme-bootstrap/src/assets/scss/components/_upload.scss at main · oruga-ui/theme-bootstrap · GitHub

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
63
64
65
66
67
@use "sass:map";

/* @docs */
$upload-draggable-bg: transparent !default;
$upload-draggable-bg-hover: transparent !default;
$upload-draggable-border-color: var(--#{$prefix}border-color) !default;
$upload-draggable-border-color-hover: var(--#{$prefix}dark-bg-subtle) !default;
$upload-draggable-border-width: var(--#{$prefix}border-width) !default;
$upload-draggable-border-radius: var(--#{$prefix}border-radius) !default;
$upload-draggable-padding: 2em !default;
$upload-disabled-opacity: 0.5 !default;
/* @docs */

.upload {
    --#{$prefix}upload-disabled-opacity: #{$upload-disabled-opacity};

    input {
        display: none;
    }

    &.expanded {
        width: 100%;
    }

    &.disabled {
        cursor: not-allowed;
        opacity: var(--#{$prefix}upload-disabled-opacity);
    }

    .upload-draggable {
        --#{$prefix}upload-draggable-bg: #{$upload-draggable-bg};
        --#{$prefix}upload-draggable-bg-hover: #{$upload-draggable-bg-hover};
        --#{$prefix}upload-draggable-border-color: #{$upload-draggable-border-color};
        --#{$prefix}upload-draggable-border-color-hover: #{$upload-draggable-border-color-hover};
        --#{$prefix}upload-draggable-border-width: #{$upload-draggable-border-width};
        --#{$prefix}upload-draggable-border-radius: #{$upload-draggable-border-radius};
        --#{$prefix}upload-draggable-padding: #{$upload-draggable-padding};

        background: var(--#{$prefix}upload-draggable-bg);
        border-width: var(--#{$prefix}upload-draggable-border-width);
        border-style: dashed;
        border-color: var(--#{$prefix}upload-draggable-border-color);
        border-radius: var(--#{$prefix}upload-draggable-border-radius);
        padding: var(--#{$prefix}upload-draggable-padding);

        &:hover,
        &.hovered {
            background-color: var(--#{$prefix}upload-draggable-bg-hover);
            border-color: var(--#{$prefix}upload-draggable-border-color-hover);
        }
    }

    // Color variant
    @each $name, $color-light in $theme-colors {
        &.variant-#{$name} .upload-draggable {
            --#{$prefix}upload-draggable-bg-hover: var(
                --#{$prefix}#{$name}-bg-subtle
            );
            --#{$prefix}upload-draggable-border-color-hover: var(
                --#{$prefix}#{$name}
            );
            --#{$prefix}upload-draggable-border-color: var(
                --#{$prefix}#{$name}-bg-subtle
            );
        }
    }
}