cloud-ui.vusion/src/u-pie-chart.vue/module.css

Vusion Cloud UI

$g_size: 120px;

.elsvg {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}
.elsvg .elg {
    width: $g_size;
    height: $g_size;
}

.item {
    fill: blue;
    stroke: white;
    stroke-width: 0.5px;
    transition: opacity 0.2s ease;
}

.item:hover {
    opacity: 0.8;
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    font-size: 12px;
    transform: translate(-50%,-50%);
    color: white;
    cursor: default;
}

.tooltip {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    max-width: 200px;
    padding: 4px 8px;
    font-size: 12px;
    background: #333;
    color: #eee;
}

.text .tooltip {
    display: none;
}

.text:hover {
    z-index: 1;
}

.text:hover .tooltip {
    display: block;
    position: absolute;
    margin-left: 100%;
    left: 8px;
    top: 0;
}

.tooltip::after {
    content: '';
    display: block;
    position: absolute;
    border: 5px solid #333;
    left: -5px;
    top: 10px;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.emptyitem {
    fill: white;
    stroke: #d8d8d8;
    stroke-width: 0.5px;
    stroke-dasharray: 2, 2;
}

.emptytext {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 22px;
    line-height: 22px;
    margin-top: -11px;
    margin-left: -11px;
    cursor: pointer;
}

.emptytooltip {
    position: relative;
    left: 28px;
    top: -15px;
    margin-top: -11px;
    padding: 4px 8px;
    font-size: 12px;
    background: #333;
    color: #eee;
    display: none;
}

.emptytooltip::after {
    content: '';
    display: block;
    position: absolute;
    border: 5px solid #333;
    left: -5px;
    top: 10px;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.emptytext:hover .emptytooltip {
    display: block;
}

.root .item:nth-of-type(1) { fill: $theme-chart-color1; }
.root .item:nth-of-type(2) { fill: $theme-chart-color2; }
.root .item:nth-of-type(3) { fill: $theme-chart-color3; }
.root .item:nth-of-type(4) { fill: $theme-chart-color4; }
.root .item:nth-of-type(5) { fill: $theme-chart-color5; }
.root .item:nth-of-type(6) { fill: $theme-chart-color6; }
.root .item:nth-of-type(7) { fill: $theme-chart-color7; }
.root .item:nth-of-type(8) { fill: $theme-chart-color8; }
.root .item:nth-of-type(9) { fill: $theme-chart-color9; }
.root .item:nth-of-type(10) { fill: $theme-chart-color10; }
.root .item:nth-of-type(11) { fill: $theme-chart-color11; }
.root .item:nth-of-type(12) { fill: $theme-chart-color12; }
.root .item:nth-of-type(13) { fill: $theme-chart-color13; }
.root .item:nth-of-type(14) { fill: $theme-chart-color14; }
.root .item:nth-of-type(15) { fill: $theme-chart-color15; }
.root .item:nth-of-type(16) { fill: $theme-chart-color16; }
.root .item:nth-of-type(17) { fill: $theme-chart-color17; }
.root .item:nth-of-type(18) { fill: $theme-chart-color18; }
.root .item:nth-of-type(19) { fill: $theme-chart-color19; }
.root .item:nth-of-type(20) { fill: $theme-chart-color20; }