crabfit/frontend/src/components/Legend/Legend.module.scss
2023-06-09 16:18:06 +10:00

46 lines
711 B
SCSS

.wrapper {
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
& label:last-of-type {
text-align: right;
}
@media (max-width: 400px) {
display: block;
}
}
.label {
display: block;
font-size: 14px;
text-align: left;
}
.bar {
display: flex;
width: 40%;
height: 20px;
border-radius: 3px;
overflow: hidden;
margin: 0 8px;
border: 1px solid var(--text);
@media (max-width: 400px) {
width: 100%;
margin: 8px 0;
}
}
.highlight {
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 4.5px,
var(--highlight-color, rgba(0,0,0,.5)) 4.5px,
var(--highlight-color, rgba(0,0,0,.5)) 9px
);
}