deleted: Countries/de/.fuse_hidden00010cbb0000001e

main
anthony 4 months ago
parent 13bed63054
commit af3e429116

@ -1,64 +0,0 @@
// =============Multi Semi Donut Chart=================
.multi-graph{
width: 300px;
height: 150px;
position: relative;
color: #00d791;
font-size: 22px;
font-weight: 600;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
box-sizing : border-box;
&:before{
content: '';
width: 300px;
height: 150px;
border:50px solid rgba(0,0,0,.15);
border-bottom: none;
position: absolute;
box-sizing : border-box;
transform-origin: 50% 0%;
border-radius: 300px 300px 0 0 ;
left: 0;
top: 0;
}
.graph{
width: 300px;
height: 150px;
border:50px solid var(--fill);
border-top: none;
position: absolute;
transform-origin :50% 0% 0;
border-radius: 0 0 300px 300px ;
left: 0;
top: 100%;
z-index: 5;
animation : 1s fillGraphAnimation ease-in;
transform: rotate( calc( 1deg * ( var(--percentage) * 1.8 ) ) );
box-sizing : border-box;
cursor: pointer;
&:after{
// content: attr(data-name) ;
content: attr(data-name) ' ' counter(varible) '%';
counter-reset: varible var(--percentage);
background: var(--fill) ;
box-sizing : border-box;
border-radius : 2px;
color: #fff;
font-weight: 200;
font-size: 12px;
height: 20px;
padding: 3px 5px;
top: 0px;
position: absolute;
left: 0;
transform: rotate(calc( -1deg * var(--percentage) * 1.8 )) translate(-30px , 0px);
transition:0.2s ease-in;
transform-origin: 0 50% 0;
opacity: 0;
}
}
}
Loading…
Cancel
Save