tooltip.scss 3.3 KB
Newer Older
1 2
// light样式
.el-tooltip__popper.is-light{
3
    background-color: var(--ey-color-gray-250);
4 5 6
    box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px 0px rgba(0, 0, 0, 0.12);
    border: 0;
7 8 9 10
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--ey-color-black);    
11 12 13 14 15
}

.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=bottom-start] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=bottom-end] .popper__arrow{
16
    border-bottom-color: var(--ey-color-gray-250);       
17
    &::after{
18
        border-bottom-color: var(--ey-color-gray-250);   
19 20 21 22 23
    } 
}
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow, 
.el-tooltip__popper.is-light[x-placement^=top-start] .popper__arrow, 
.el-tooltip__popper.is-light[x-placement^=top-end] .popper__arrow{
24
    border-top-color: var(--ey-color-gray-250);       
25
    &::after{
26
        border-top-color: var(--ey-color-gray-250);   
27 28 29 30 31
    }      
}
.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=left-start] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=left-end] .popper__arrow{
32
    border-left-color: var(--ey-color-gray-250);       
33
    &::after{
34
        border-left-color: var(--ey-color-gray-250);   
35 36 37 38 39
    }      
}
.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=right-start] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=right-end] .popper__arrow{
40
    border-right-color: var(--ey-color-gray-250);    
41
    &::after{
42
        border-right-color: var(--ey-color-gray-250);   
43 44 45 46 47
    }         
}

// dark样式
.el-tooltip__popper.is-dark{
48
    background-color: var(--ey-color-gray-250);
49 50 51
    box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px 0px rgba(0, 0, 0, 0.12);
    border: 0;
52 53 54 55
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--ey-color-black);    
56 57 58 59 60
}

.el-tooltip__popper.is-dark[x-placement^=bottom] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=bottom-start] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=bottom-end] .popper__arrow{
61
    border-bottom-color: var(--ey-color-gray-250);       
62
    &::after{
63
        border-bottom-color: var(--ey-color-gray-250);   
64 65 66 67 68
    } 
}
.el-tooltip__popper.is-dark[x-placement^=top] .popper__arrow, 
.el-tooltip__popper.is-dark[x-placement^=top-start] .popper__arrow, 
.el-tooltip__popper.is-dark[x-placement^=top-end] .popper__arrow{
69
    border-top-color: var(--ey-color-gray-250);       
70
    &::after{
71
        border-top-color: var(--ey-color-gray-250);   
72 73 74 75 76
    }      
}
.el-tooltip__popper.is-dark[x-placement^=left] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=left-start] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=left-end] .popper__arrow{
77
    border-left-color: var(--ey-color-gray-250);       
78
    &::after{
79
        border-left-color: var(--ey-color-gray-250);   
80 81 82 83 84
    }      
}
.el-tooltip__popper.is-dark[x-placement^=right] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=right-start] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=right-end] .popper__arrow{
85
    border-right-color: var(--ey-color-gray-250);    
86
    &::after{
87
        border-right-color: var(--ey-color-gray-250);   
88 89
    }         
}