vuetify/lib/labs/VPie/VPie.css

Vue Material Component Framework

.v-pie {
  display: grid;
  align-items: center;
  column-gap: 24px;
  --v-pie-size: 250px;
}
.v-pie--legend-top {
  grid-template-areas: "title" "legend" "content";
  grid-template-columns: var(--v-pie-size);
}
.v-pie--legend-bottom {
  grid-template-areas: "title" "content" "legend";
  grid-template-columns: var(--v-pie-size);
}
.v-pie--legend-right {
  grid-template-areas: "title ." "content legend";
}
.v-pie--legend-left {
  grid-template-areas: ". title" "legend content";
}
.v-pie--legend-hidden {
  grid-template-areas: "title" "content";
}
.v-pie__title {
  grid-area: title;
  text-align: center;
  padding-bottom: 12px;
}
.v-pie__content {
  grid-area: content;
  position: relative;
  width: var(--v-pie-size);
  height: var(--v-pie-size);
}
.v-pie__content:is(.v-pie__content) {
  background: none !important;
}
.v-pie__content .v-overlay .v-overlay__scrim,
.v-pie__content .v-overlay .v-overlay__content {
  pointer-events: none !important;
}
.v-pie__segments {
  border-radius: 50%;
}
.v-pie__content-underlay {
  border-radius: 50%;
  position: absolute;
  inset: -8px;
  pointer-events: none;
  z-index: -1;
}
.v-pie__center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.v-pie__center-content > div {
  pointer-events: auto;
}
.v-pie__legend {
  grid-area: legend;
  padding-block: 12px;
}
.v-pie__legend .v-avatar {
  border: thin solid rgba(var(--v-theme-on-surface), 0.2);
}
.v-pie__legend .v-chip__content {
  width: 100%;
}
.v-pie__legend .v-chip-group .v-chip:not(.v-chip--selected) {
  opacity: 0.4;
}
.v-pie__legend__text {
  font-size: 0.8125rem;
  white-space: nowrap;
  width: 100%;
}
.v-chip--density-compact .v-pie__legend__text {
  font-size: 0.66rem;
}
.v-pie .v-chip.v-chip--density-comfortable .v-avatar--start {
  margin-inline-start: -6px;
}
.v-pie .v-chip.v-chip--density-default .v-avatar--start {
  margin-inline-start: -4px;
}
.v-pie-segment {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.v-pie-segment .v-pie-segment__overlay {
  pointer-events: auto;
  opacity: 0;
}
.v-pie__tooltip-content .v-list-item {
  padding-inline: 0;
  min-width: 100px;
  zoom: 0.88;
}
.v-pie__tooltip-content .v-list-item-subtitle {
  opacity: 1;
}
.v-pie__tooltip-content .v-avatar {
  border: thin solid rgba(var(--v-theme-on-surface-variant), 0.2);
}