Wesentlichkeitsschaltfläche

Verwendung in Kombination mit dem Wesentlichkeitsanzeiger.

Gruppierte Buttons benötigen einen zusätzlichen Container, siehe das Beispiel Gruppiert.

.materiality-button {
    align-items: center;
    background-color: #fff;
    border: 1px solid $gray;
    color: $primary;
    display: inline-flex;
    gap: $spacer;
    padding: $spacer;
    text-align: left;
    transition: transform .15s ease-in-out;

    &:hover {
        transform: scale(1.02);
    }

    &--active {
        background-color: $gray-400;
        border-color: $primary;
    }

    .materiality-indicator {
        flex-shrink: 0;
    }
}

Varianten

Standard

<button class="materiality-button">
    <span class="materiality-indicator materiality-indicator--not-material" title="Wesentlich">
        Wesentlich
    </span>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.
</button>

Aktiv

<button class="materiality-button materiality-button--active">
    <span class="materiality-indicator materiality-indicator--not-material" title="Wesentlich">
        Wesentlich
    </span>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.
</button>

Gruppiert

<div class="d-flex flex-column gap-2">
    <button class="materiality-button">
        <span class="materiality-indicator materiality-indicator--open-material" title="Offen">
            Offen
        </span>
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.
    </button>
    <button class="materiality-button materiality-button--active">
        <span class="materiality-indicator materiality-indicator--material" title="Wesentlich">
            Wesentlich
        </span>
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    </button>
    <button class="materiality-button">
        <span class="materiality-indicator materiality-indicator--not-material" title="Unwesentlich">
            Unwesentlich
        </span>
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.
    </button>
</div>

Varianten