UNPKG

cloud-ui.vusion

Version:
138 lines (125 loc) 3.07 kB
$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; } .text .u-tooltip { display: none; } .text:hover { z-index: 1; } .text:hover .u-tooltip { display: block; position: absolute; margin-left: 100%; left: 8px; top: 0; } .u-tooltip{ display:inline-block; position: relative; box-sizing: border-box; max-width:200px; padding:4px 8px; font-size:12px; background: #333; color:#eee; } .u-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; }