85 lines
1.6 KiB
SCSS
85 lines
1.6 KiB
SCSS
.indicator,
|
|
.indicator-pill,
|
|
.indicator-pill-right,
|
|
.indicator-pill-round {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.indicator::before {
|
|
content: '';
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: var(--border-radius);
|
|
margin: 0px 8px 0px 0px;
|
|
}
|
|
|
|
.indicator-pill,
|
|
.indicator-pill-right {
|
|
padding: 3px 10px;
|
|
font-size: var(--text-sm);
|
|
border-radius: var( --border-radius);
|
|
font-weight: 500;
|
|
height: 24px;
|
|
}
|
|
|
|
.indicator-pill-round {
|
|
justify-content: center;
|
|
font-size: var(--text-sm);
|
|
border-radius: 50%;
|
|
font-weight: 500;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.indicator-pill:not(.no-indicator-dot)::before,
|
|
.indicator-pill-right::after {
|
|
content:'';
|
|
display: inline-table;
|
|
height: 4px;
|
|
width: 4px;
|
|
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; }
|
|
}
|