Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/web/scss/common/buttons/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// BUTTONS - Custom
// ==============================================

// Configuration
$button-color:              $c-blue;
$button-color-pink:         $c-pink;
$button-color-disabled:     $c-grey;

// Reset global buttons
button {
    font-size: 1.4rem;
    padding: 0;
    border: 0 none;
    background-color: transparent;
}

// Default custom btn - White filling
.btn {
    display: inline-block;
    padding: 6px 32px;
    font-size: 1.4rem;
    line-height: 1.6;
    color: $c-white;
    background: linear-gradient($c-gradient-end-blue, $c-gradient-start-blue);
    border: 1px solid transparent;
    border-radius: $radius-btn;
    text-align: center;
    transition: background .2s, box-shadow .2s;
    text-decoration: none;
    font-weight: 700;

    &:hover:not(:disabled) {
        background: linear-gradient($c-gradient-start-blue, $c-gradient-end-blue);
        box-shadow: 0 2px 8px -3px rgba(black, .3);
        cursor: pointer;
        transition: background .2s, box-shadow .2s;
    }

    &.disabled {
        background: $button-color-disabled;
        border: 1px solid $button-color-disabled;
        pointer-events: none;
    }
}

// Secondary custom btn
.btn--pink,
.btn--border,
.btn--border-white {
    @extend .btn;
}

// Pink filling
.btn--pink {
    background: linear-gradient($c-gradient-end-pink, $c-gradient-start-pink);

    &:hover:not(:disabled) {
        background: linear-gradient($c-gradient-start-pink, $c-gradient-end-pink);
    }
}

//  Border + Text
.btn--border {
    background: transparent;
    border: 1px solid $c-blue-dark;
    color: $c-blue-dark;

    &:hover:not(:disabled) {
        cursor: pointer;
        transition: background .2s, border-color .2s;
        background: lighten($c-blue-dark, 5%);
        border-color: lighten($c-blue-dark, 5%);
        color: $c-white;
    }
}

// Border + Text in white color
.btn--border-white {
    background: transparent;
    border: 1px solid $c-white;
    color: $c-white;

    &:hover:not(:disabled) {
        cursor: pointer;
        transition: background .2s, border-color .2s;
        background: $c-white;
        border: 1px solid $c-white;
        color: $c-blue-dark;
    }
}


//
//  Reset cta styles
//  _____________________________________________

@mixin reset-cta {
    border: none;
    box-shadow: none;
    background: none;
}

%reset-cta {
    @include reset-cta;
}