red-ui/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
2020-12-11 11:48:48 +02:00

72 lines
1.2 KiB
SCSS

@import '../../../assets/styles/red-variables';
:host {
height: fit-content;
}
.container {
position: relative;
display: flex;
align-items: center;
&:not(.column) {
> *:not(last-child) {
margin-right: 20px;
}
}
&.column {
flex-direction: column;
> *:not(last-child) {
margin-bottom: 20px;
}
}
}
.text-container {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
> div {
text-align: center;
}
}
.breakdown-container {
display: flex;
flex-direction: column;
align-items: center;
margin-left: -8px;
> div {
width: fit-content;
> div {
border-radius: 4px;
padding: 3px 8px;
&:not(last-child) {
margin-bottom: 8px;
}
&:not(.filter-disabled) {
cursor: pointer;
}
&:hover:not(.active):not(.filter-disabled) {
background-color: $grey-6;
}
&.active {
background-color: rgba($primary, 0.1);
}
}
}
}