84 lines
1.6 KiB
SCSS
84 lines
1.6 KiB
SCSS
.indicator,
|
|
.indicator-pill,
|
|
.indicator-pill-right,
|
|
.indicator-pill-round {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.indicator::before {
|
|
content: "";
|
|
height: 8px;
|
|
width: 8px;
|
|
border-radius: var(--border-radius);
|
|
margin: 0px 8px 0px 0px;
|
|
}
|
|
.indicator-pill,
|
|
.indicator-pill-right {
|
|
@include get_textstyle("sm", "regular");
|
|
padding: 4.5px 8px;
|
|
border-radius: var(--border-radius-full);
|
|
height: 20px;
|
|
}
|
|
|
|
.indicator-pill-round {
|
|
@include get_textstyle("sm", "regular");
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.indicator-pill:not(.no-indicator-dot)::before,
|
|
.indicator-pill-right::after {
|
|
content: "";
|
|
display: inline-table;
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.indicator-pill.no-margin::before,
|
|
.indicator-pill-right.no-margin::after {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.indicator-pill-right::after {
|
|
margin: 0 0 0 4px;
|
|
}
|
|
|
|
$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple,
|
|
light-blue;
|
|
@each $color in $indicator-colors {
|
|
.indicator.#{"" + $color} {
|
|
&::before,
|
|
&::after {
|
|
background: var(--indicator-dot-#{$color});
|
|
}
|
|
}
|
|
|
|
.indicator-pill.#{"" + $color},
|
|
.indicator-pill-right.#{"" + $color},
|
|
.indicator-pill-round.#{"" + $color} {
|
|
background: var(--bg-#{$color});
|
|
color: var(--text-on-#{$color});
|
|
&::before,
|
|
&::after {
|
|
background: var(--text-on-#{$color});
|
|
}
|
|
}
|
|
.indicator {
|
|
--indicator-dot-#{"" + $color}: var(--text-on-#{$color});
|
|
}
|
|
}
|
|
|
|
.indicator.blink {
|
|
animation: blink 1s linear infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|