react-enhanced-dropzone/styles.module.scss at main · TheMagicianDev/react-enhanced-dropzone · 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
.dropZone {
    position: relative;
    width: 100%;
    height: 100%;

    border-radius: 50px;
    border: solid rgba(123, 123, 251, 0.568) 2px;

    background: rgba(101, 114, 250, 0.089);

    padding: 30px;

    cursor: pointer;

    outline: none !important;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background: rgba(101, 113, 250, 0.109);
        .DropMessage {
            .dragActiveMessage, .dragInactiveMessage {
                color: rgba(0, 204, 255, 0.493);
            }
        }
    }

    &.dragActive {
        position: relative;
        &::before {
            content: '';
            // background-image: url('data:image/svg+xml;utf8, <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"                 width="475.078px" height="475.077px" viewBox="0 0 475.078 475.077" style="enable-background:new 0 0 475.078 475.077;"                 xml:space="preserve">            <g>                <g>                    <path d="M467.081,327.767c-5.321-5.331-11.797-7.994-19.411-7.994h-121.91c-3.994,10.657-10.705,19.411-20.126,26.262                        c-9.425,6.852-19.938,10.28-31.546,10.28h-73.096c-11.609,0-22.126-3.429-31.545-10.28c-9.423-6.851-16.13-15.604-20.127-26.262                        H27.408c-7.612,0-14.083,2.663-19.414,7.994C2.664,333.092,0,339.563,0,347.178v91.361c0,7.61,2.664,14.089,7.994,19.41                        c5.33,5.329,11.801,7.991,19.414,7.991h420.266c7.61,0,14.086-2.662,19.41-7.991c5.332-5.328,7.994-11.8,7.994-19.41v-91.361                        C475.078,339.563,472.416,333.099,467.081,327.767z M360.025,423.978c-3.621,3.617-7.905,5.428-12.854,5.428                        s-9.227-1.811-12.847-5.428c-3.614-3.613-5.421-7.898-5.421-12.847s1.807-9.236,5.421-12.847c3.62-3.613,7.898-5.428,12.847-5.428                        s9.232,1.814,12.854,5.428c3.613,3.61,5.421,7.898,5.421,12.847S363.638,420.364,360.025,423.978z M433.109,423.978                        c-3.614,3.617-7.898,5.428-12.848,5.428c-4.948,0-9.229-1.811-12.847-5.428c-3.613-3.613-5.42-7.898-5.42-12.847                        s1.807-9.236,5.42-12.847c3.617-3.613,7.898-5.428,12.847-5.428c4.949,0,9.233,1.814,12.848,5.428                        c3.617,3.61,5.427,7.898,5.427,12.847S436.729,420.364,433.109,423.978z"/>                    <path d="M109.632,173.59h73.089v127.909c0,4.948,1.809,9.232,5.424,12.847c3.617,3.613,7.9,5.427,12.847,5.427h73.096                        c4.948,0,9.227-1.813,12.847-5.427c3.614-3.614,5.421-7.898,5.421-12.847V173.59h73.091c7.997,0,13.613-3.809,16.844-11.42                        c3.237-7.422,1.902-13.99-3.997-19.701L250.385,14.562c-3.429-3.617-7.706-5.426-12.847-5.426c-5.136,0-9.419,1.809-12.847,5.426                        L96.786,142.469c-5.902,5.711-7.233,12.275-3.999,19.701C96.026,169.785,101.64,173.59,109.632,173.59z"/>                </g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            <g>            </g>            </svg>            ');

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            width: 20%;
            height: 20%;
        }
    }

    .DropMessage {
        .dragActiveMessage, .dragInactiveMessage {
            color: rgba(0, 0, 255, 0.493);
        }
    }


    .dropzoneInner {

    }
}