@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
90 lines (81 loc) • 2.19 kB
CSS
:root {
--donut-chart-max-width: 600px;
--donut-chart-graph-size-sm: 140px;
--donut-chart-graph-size-lg: 210px;
}
.donut-chart {
container-name: donut-chart;
container-type: inline-size;
width: 100%;
}
.donut-chart__grid {
column-gap: var(--spacing-400);
display: grid;
grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-sm), 1fr);
grid-template-rows: auto 1fr auto;
max-width: var(--donut-chart-max-width);
row-gap: var(--spacing-200);
width: 100%;
}
.donut-chart__title {
font-size: var(--font-size-medium);
font-weight: var(--font-weight-bold);
}
.donut-chart__graph {
align-self: flex-end;
grid-column: 2;
grid-row: 1 / -1;
min-height: var(--donut-chart-graph-size-sm);
position: relative;
width: 100%;
}
.donut-chart__metric-value {
font-size: var(--font-size-giant-1);
font-weight: var(--font-weight-bold);
}
.donut-chart__metric-label {
font-size: var(--font-size-regular);
}
.donut-chart__legend {
align-self: flex-end;
grid-column: 1 / -1;
}
@container (width > 450px) {
.donut-chart__grid {
column-gap: var(--spacing-800);
grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-lg), 1fr);
row-gap: var(--spacing-250);
}
.donut-chart__legend {
grid-column: 1;
grid-row-end: -1;
}
.donut-chart__graph {
min-height: var(--donut-chart-graph-size-lg);
}
.donut-chart__legend-container {
margin-top: var(--spacing-100);
}
}
@supports not (container-type: inline-size) {
@media (min-width: 1024px) {
.donut-chart__grid {
column-gap: var(--spacing-800);
grid-template-columns: 1fr minmax(
var(--donut-chart-graph-size-lg),
1fr
);
row-gap: var(--spacing-250);
}
.donut-chart__legend {
grid-column: 1;
grid-row-end: -1;
}
.donut-chart__graph {
min-height: var(--donut-chart-graph-size-lg);
}
.donut-chart__legend-container {
margin-top: var(--spacing-100);
}
}
}