Farblegende

Farblegenden zur Verwendung in Tabellen etc.

Um nicht mit Bootstraps Farbsystem zu brechen, wurde bewusst auf eine BEM-Benennung verzichtet.

.color-legend {
    align-items: center;
    display: inline-flex;
    font-size: $font-size-lg;
    gap: $spacer * .5;

    &::before {
        border-radius: 1em;
        content: '';
        height: 1.2em;
        width: 1.2em;
    }
}

@each $color, $value in $theme-colors {
    .color-legend-#{$color}::before {
        background-color: $value;
    }
}

Varianten

Standard

Bezeichnung
Bezeichnung
Bezeichnung 
<span class="color-legend color-legend-primary">Bezeichnung</span><br>
<span class="color-legend color-legend-gray">Bezeichnung</span><br>
<span class="color-legend color-legend-warning">Bezeichnung</span>

Varianten