scss buttons_02.scss

Posted 2021-05-17

/* themes */
.btn--primary {
    // main button
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-label);
    @include fontSmooth;

    &:visited {
        color: var(--btn-primary-label);
    }

    &:hover {
        background-color: var(--btn-primary-hover);
    }

    &:active {
        background-color: var(--btn-primary-active);
    }
}

.btn--secondary {
    // subtle version, used for secondary actions or in combo with primary/accent button
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-label);

    &:visited {
        color: var(--btn-secondary-label);
    }

    &:active {
        background-color: var(--btn-secondary-active);
    }
}

.btn--accent {
    // used to draw special attention to the button (e.g. destructive actions)
    background-color: var(--btn-accent-bg);
    color: var(--btn-accent-label);
    @include fontSmooth;

    &:visited {
        color: var(--btn-accent-label);
    }

    &:hover {
        background-color: var(--btn-accent-hover);
    }

    &:active {
        background-color: var(--btn-accent-active);
    }
}

/* feedback */
.btn[disabled] {
    cursor: not-allowed;
    background-color: var(--btn-disabled-bg);
    color: var(--btn-disabled-label);
    box-shadow: none;
    opacity: 0.6;

    &:visited {
        color: var(--btn-disabled-label);
    }
}