* {
box-sizing: bover-box;
}
.piechart-flatmin {
position: relative;
width: 100%;
}
.piechart-flatmin .piehole {
position: absolute;
width: 70%;
height: 70%;
top: 15%;
z-index: 2;
border-radius: 50%;
left: 15%;
overflow: hidden;
text-align: center;
padding: 2em;
}
.piehole .piehole-text {
font-weight: 300;
display: none;
position: absolute;
left: 15%;
top: 30%;
width: 70%;
}
.piechart-flatmin.m .piehole-text {
font-size: 70%;
}
.piechart-flatmin.s .piehole-text {
top: 22%;
font-size: 70%;
}
.piechart-flatmin .piehole-text p {
line-height: 1;
margin: 0;
font-weight: 300;
}
.piehole-text .flatmin-percentage {
font-size: 4em;
}
.piehole-text .flatmin-percentage:after {
content: '%';
font-size: 0.4em;
vertical-align: top;
line-height: 1.5;
}
.piehole-text .flatmin-value {
font-size: 1.2em;
font-weight: 400;
}
.piehole-text .flatmin-title {
font-size: 1.2em;
font-weight: 400;
}
.piechart-flatmin.m .piehole-text .flatmin-title, .piechart-flatmin.m .piehole-text .flatmin-value, .piechart-flatmin.s .piehole-text .flatmin-title, .piechart-flatmin.s .piehole-text .flatmin-value {
font-size: 1.4em;
}
.piechart-flatmin.s .piehole-text .flatmin-percentage {
font-size: 3em;
}
.piechart-flatmin .ratio {
padding-top: 100%;
}
.piechart-flatmin .sector {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
}
.sector.hover .sector-s {
border: 0.5em rgba(255,255,255,0.5) solid;
}
.sector-f {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
border-radius: 50%;
left: 0;
}
.sector-s {
cursor: pointer;
pointer-events: auto;
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.example {
width: 50%;
padding: 1em;
margin: auto;
}