ar-design
Version:
AR Design is a (react | nextjs) ui library.
91 lines (81 loc) • 2.01 kB
CSS
.ar-pie-chart-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem 0;
> div {
display: flex;
flex-direction: row;
align-items: center;
gap: 0 2rem;
> .ar-pie-chart {
position: relative;
width: 200px;
height: 200px;
border-radius: var(--border-radius-pill);
user-select: none;
> article {
position: absolute;
inset: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--white);
border-radius: var(--border-radius-pill);
box-shadow: inset 0 0 0 5px rgba(var(--black-rgb), 0.1);
color: var(--gray-700);
}
}
> .information-field {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 1;
justify-content: flex-start;
align-items: flex-start;
gap: 0.5rem 0;
width: 100%;
> article {
display: flex;
flex-direction: row;
flex: 2;
align-items: center;
gap: 0 0.5rem;
> span:first-child {
position: relative;
min-width: 1.75rem;
min-height: 1rem;
padding-left: 0.85rem;
border-radius: var(--border-radius-sm);
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
line-height: 1rem;
overflow: hidden;
}
> span:first-child::before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: "%";
background-color: rgba(var(--black-rgb), 0.2);
width: 0.75rem;
font-size: 0.65rem;
text-align: center;
}
> span:last-child {
font-size: 0.75rem;
}
}
}
}
> .title {
width: 100%;
color: var(--gray-700);
font-size: 1.2rem;
font-weight: bold;
text-align: left;
}
}