113 lines
2.6 KiB
Sass
113 lines
2.6 KiB
Sass
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-pie
|
|
display: grid
|
|
align-items: center
|
|
column-gap: 24px
|
|
--v-pie-size: 250px
|
|
|
|
&--legend
|
|
&-top
|
|
grid-template-areas: 'title' 'legend' 'content'
|
|
grid-template-columns: var(--v-pie-size)
|
|
&-bottom
|
|
grid-template-areas: 'title' 'content' 'legend'
|
|
grid-template-columns: var(--v-pie-size)
|
|
&-right
|
|
grid-template-areas: 'title .' 'content legend'
|
|
&-left
|
|
grid-template-areas: '. title' 'legend content'
|
|
&-hidden
|
|
grid-template-areas: 'title' 'content'
|
|
|
|
&__title
|
|
grid-area: title
|
|
text-align: center
|
|
padding-bottom: $pie-title-padding-bottom
|
|
|
|
&__content
|
|
grid-area: content
|
|
position: relative
|
|
width: var(--v-pie-size)
|
|
height: var(--v-pie-size)
|
|
|
|
@include tools.layer('overrides')
|
|
.v-overlay__scrim,
|
|
.v-overlay__content
|
|
pointer-events: none
|
|
|
|
@include tools.layer('trumps')
|
|
// expected to get bg-* class for text color
|
|
// actual background is applied to underlay
|
|
background: none
|
|
|
|
&__segments
|
|
border-radius: 50%
|
|
|
|
&__content-underlay
|
|
border-radius: 50%
|
|
position: absolute
|
|
inset: $pie-underlay-inset
|
|
pointer-events: none
|
|
z-index: -1
|
|
|
|
&__center-content
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
pointer-events: none
|
|
|
|
> div
|
|
pointer-events: auto
|
|
|
|
&__legend
|
|
grid-area: legend
|
|
padding-block: $pie-legend-padding-block
|
|
|
|
.v-avatar
|
|
border: $pie-legend-avatar-border
|
|
|
|
.v-chip__content
|
|
width: 100%
|
|
|
|
.v-chip-group .v-chip:not(.v-chip--selected)
|
|
opacity: $pie-legend-chip-disabled-opacity
|
|
|
|
&__text
|
|
font-size: $pie-legend-chip-default-font-size
|
|
white-space: nowrap
|
|
width: 100%
|
|
|
|
.v-chip--density-compact &
|
|
font-size: $pie-legend-chip-compact-font-size
|
|
|
|
.v-chip.v-chip--density-comfortable .v-avatar--start
|
|
margin-inline-start: -6px
|
|
|
|
.v-chip.v-chip--density-default .v-avatar--start
|
|
margin-inline-start: -4px
|
|
|
|
&-segment
|
|
pointer-events: none
|
|
position: absolute
|
|
inset: 0
|
|
|
|
.v-pie-segment__overlay
|
|
pointer-events: auto
|
|
opacity: 0
|
|
|
|
&__tooltip-content
|
|
.v-list-item
|
|
padding-inline: 0
|
|
min-width: $pie-tooltip-min-width
|
|
zoom: 0.88
|
|
|
|
.v-list-item-subtitle
|
|
opacity: 1
|
|
|
|
.v-avatar
|
|
border: $pie-tooltip-avatar-border
|