ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / costbloc.com / public / datta-able / scss / partials / theme-elements

@import "../mixins/buttons";
/**  =====================
      Button css start
========================== **/

.btn-theme,
a.btn-theme {
    background: $theme-color;
    color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    border-color: #1de1c2;
    border-radius: 0.25rem;
    padding: 11px 25px;

&:active,
    &:focus,
    &:not(:disabled):not(.disabled):active {
        background-image: $theme-color;
        color: #fff;
        box-shadow: none;
    }

&.active {
        background-image: #fff !important;
        color: $default-color;
        border: 1px solid $theme-border;
        box-shadow: none;
    }
}

.btn-outline-theme {
    background-image: #fff !important;
    color: $default-color;
    border: 1px solid $theme-border;
    box-shadow: none;

&:active,
    &:focus,
    &:not(:disabled):not(.disabled):active {
        background-image: #fff;
        color: $default-color;
        border: 1px solid $theme-border;
    }

&.active {
        background: $theme-color !important;
        color: #fff;
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
        border: 1px solid transparent;
    }
}

.btn-theme2 {
    background: $theme-color2;
    color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 14px 25px;

&:active,
    &:focus,
    &:not(:disabled):not(.disabled):active {
        background-image: $theme-color2;
        color: #fff;
        box-shadow: none;
    }

&.active {
        background-image: #fff !important;
        color: $default-color;
        border: 1px solid $theme-border;
        box-shadow: none;
    }
}

.btn-outline-theme2 {
    background-image: #fff !important;
    color: $default-color;
    border: 1px solid $theme-border;
    box-shadow: none;

&:active,
    &:focus,
    &:not(:disabled):not(.disabled):active {
        background-image: #fff;
        color: $default-color;
        border: 1px solid $theme-border;
    }

&.active {
        background: $theme-color2 !important;
        color: #fff;
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
        border: 1px solid transparent;
    }
}

.btn {
    padding: 10px 20px;
    border-radius: 0.25rem;
    font-size: 14px;
    margin-bottom: 5px;
    margin-right: 10px;
    transition: all 0.3s ease-in-out;

> i {
        margin-right: 12px;
    }

&.btn-icon,
    &.drp-icon {
        width: 45px;
        height: 45px;
        padding: 10px 12px;

> i {
            margin-right: 0;
        }
    }

&.drp-icon {
        &.dropdown-toggle:after {
            display: none;
        }

+.dropdown-menu {
            margin-left: -10px;
        }
    }

&:active,
    &:focus {
        box-shadow: none;
    }

&-square {
        border-radius: 0;
    }

&.disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

&-rounded {
        border-radius: 30px;
    }
}

.btn-group {
    .btn {
        margin-bottom: 0;
        margin-right: 0;
    }
}

.shadow-1 {
    box-shadow: 0 7px 12px 0 rgba(62,57,107,.16);
}

.shadow-2 {
    box-shadow: 0 10px 18px 0 rgba(62,57,107,.2);
}

.shadow-3 {
    box-shadow: 0 14px 24px 0 rgba(62,57,107,.26);
}

.shadow-4 {
    box-shadow: 0 16px 28px 0 rgba(62,57,107,.3);
}

.shadow-5 {
    box-shadow: 0 20px 24px 0 rgba(62,57,107,.36);
}
// Alternate buttons
@each $color, $value in $theme-colors {
    .btn-#{$color} {
        @include button-variant($value, $value);
    }
}
// outline buttons
@each $color, $value in $theme-colors {
    .btn-outline-#{$color} {
        @include button-outline-variant($value);
    }
}
// glow buttons
@each $color, $value in $theme-colors {
    .btn-glow-#{$color} {
        @include button-glow-variant($value);
    }
}
/**====== Button css end ======**/

[-] _radiobox-checkbox.scss [edit]
[-] _modal.scss [edit]
[-] _popover.scss [edit]
[+] ..
[-] _button.scss [edit]
[-] _breadcrumb-pagination.scss [edit]
[-] _form.scss [edit]
[-] _progress.scss [edit]
[-] _labels-badges.scss [edit]
[-] _tooltip.scss [edit]
[-] _nav.scss [edit]
[-] _alert.scss [edit]
[-] _data-tables.scss [edit]
[-] _authentication.scss [edit]