• Home
• com.chutneytesting
• ui
• 2.7.0
• source code
• button.component.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

src.app.atoms.buttons.button.component.scss Maven / Gradle / Ivy

@mixin baseButton($text-color, $background-color, $border-color) {
    font-family: 'Montserrat';
    font-weight: bold;
    cursor: pointer;
    border: solid 2px $border-color !important;
    padding: 9px 20px 9px 20px;
    color: $text-color;
    text-transform: uppercase;
    border: 0;
    background-color: $background-color;

    span {
        margin-right: 8px;
    }
}

@mixin hoverButton($text-color, $border-color, $background-color) {
    &:hover {
        background-color: $background-color;
        border-color: $border-color !important;
        color: $text-color;
    }
}

@mixin disabledButton($text-color, $border-color, $background-color) {
    &:disabled {
        background-color: $background-color;
        border-color: $border-color !important;
        color: $text-color;
        cursor: not-allowed;
    }
}

.first {
    @include baseButton(var(--bs-light), var(--bs-success), var(--bs-success));
    @include hoverButton(var(--bs-light), var(--bs-primary), var(--bs-primary));
    @include disabledButton(var(--bs-white), var(--bs-dark), var(--bs-dark));
}

.second {
    @include baseButton(var(--bs-info), var(--bs-white), var(--bs-primary));
    @include hoverButton(var(--bs-primary), var(--bs-primary), var(--bs-white));
}