svthalia/concrexit

View on GitHub
website/thaliawebsite/static/css/_buttons.scss

Summary

Maintainability
Test Coverage
/* Buttons */
.btn {
    font-weight: $regular;
    font-size: 14px;
    letter-spacing: $letter-spacing;
    -moz-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    -webkit-transition: 0.2s ease-in;
    -ms-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    border-radius: 0;
    text-transform: uppercase;

    &:hover {
        cursor: pointer;
    }

    &:focus {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;;
        box-shadow: none !important;;
    }
}

.btn-link {
    color: var(--primary);

    &:hover {
        color: var(--primary-hover);
        text-decoration: none;
    }

    &:focus {
        color: var(--primary-hover);
        text-decoration: none;
    }
}

.btn-primary, .btn-primary:active, .btn-primary:focus {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-contrast) !important;

    &:hover, &.active {
        background: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
    }
}

.btn-secondary, .btn-secondary:active, .btn-secondary:focus {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--secondary-contrast) !important;

    &:hover {
        background: var(--secondary-hover) !important;
        border-color: var(--secondary-hover) !important;
    }
}

.btn-success, .btn-success:active, .btn-success:focus {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--success-contrast) !important;

    &:hover {
        background: var(--success-hover) !important;
        border-color: var(--success-hover) !important;
    }
}

.btn-info, .btn-info:active, .btn-info:focus {
    background: var(--info) !important;
    border-color: var(--info) !important;
    color: var(--info-contrast) !important;

    &:hover {
        background: var(--info-hover) !important;
        border-color: var(--info-hover) !important;
    }
}

.btn-warning, .btn-warning:active, .btn-warning:focus {
    background: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--warning-contrast) !important;

    &:hover {
        background: var(--warning-hover) !important;
        border-color: var(--warning-hover) !important;
    }
}

.btn-danger, .btn-danger:active, .btn-danger:focus {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--danger-contrast) !important;

    &:hover {
        background: var(--danger-hover) !important;
        border-color: var(--danger-hover) !important;
    }
}