tabler-extra.scss

$teal: #2bcbba;
$yellow: #f1c40f;
$blue: #467fcf;
$pink: #f66d9b;

.tag { 
    margin-bottom: .5em;
    margin-right: .5em;
}

.tag.hover-green:hover, .tag.hover-green:active, .tag.hover-green:focus {
    background-color: #5eba00;
    cursor: pointer;
    color: #fff;
}

.tag.hover-red:hover, .tag.hover-red:active, .tag.hover-red:focus {
    background-color: #cd201f;
    cursor: pointer;
    color: #fff;
}

/* For Card bodies where I don't want padding */
.card-body.no-padding {
    padding: 0;
}

/* For some reason this class doesn't have 'display: flex' when it should. https://preview.tabler.io/docs/buttons.html#list-of-buttons */
.btn-list {
    display: flex;
}

/* Teal Outline Buttons */
.btn-outline-teal {
    color: $teal;
    background-color: transparent;
    background-image: none;
    border-color: $teal;
}

.btn-outline-teal:hover {
    color: #fff;
    background-color: $teal;
    border-color: $teal;
}

.btn-outline-teal:not(:disabled):not(.disabled):active, .btn-outline-teal:not(:disabled):not(.disabled).active, .show > .btn-outline-teal.dropdown-toggle {
    color: #fff;
    background-color: $teal;
    border-color: $teal;
}

.tag.hover-teal:hover, .tag.hover-teal:active, .tag.hover-teal:focus {
    background-color: $teal;
    color: #fff;
    cursor: pointer;
}

/* Yellow Outline Buttons */
.btn-outline-yellow {
    color: $yellow;
    background-color: transparent;
    background-image: none;
    border-color: $yellow;
}

.btn-outline-yellow:hover {
    color: #fff;
    background-color: $yellow;
    border-color: $yellow;
}

.btn-outline-yellow:not(:disabled):not(.disabled):active, .btn-outline-yellow:not(:disabled):not(.disabled).active, .show > .btn-outline-yellow.dropdown-toggle {
    color: #fff;
    background-color: $yellow;
    border-color: $yellow;
}

.tag.hover-yellow:hover, .tag.hover-yellow:active, .tag.hover-yellow:focus {
    background-color: $yellow;
    cursor: pointer;
    color: #fff;
}

/* Blue Outline Buttons */
.btn-outline-blue {
    color: $blue;
    background-color: transparent;
    background-image: none;
    border-color: $blue;
}

.btn-outline-blue:hover {
    color: #fff;
    background-color: $blue;
    border-color: $blue;
}

.btn-outline-blue:not(:disabled):not(.disabled):active, .btn-outline-blue:not(:disabled):not(.disabled).active, .show > .btn-outline-blue.dropdown-toggle {
    color: #fff;
    background-color: $blue;
    border-color: $blue;
}

.tag.hover-blue:hover, .tag.hover-blue:active, .tag.hover-blue:focus {
    background-color: $blue;
    cursor: pointer;
    color: #fff;
}

/* Pink Outline Buttons */
.btn-outline-pink {
    color: $pink;
    background-color: transparent;
    background-image: none;
    border-color: $pink;
}

.btn-outline-pink:hover {
    color: #fff;
    background-color: $pink;
    border-color: $pink;
}

.btn-outline-pink:not(:disabled):not(.disabled):active, .btn-outline-pink:not(:disabled):not(.disabled).active, .show > .btn-outline-pink.dropdown-toggle {
    color: #fff;
    background-color: $pink;
    border-color: $pink;
}

.tag.hover-pink:hover, .tag.hover-pink:active, .tag.hover-pink:focus {
    background-color: $pink;
    cursor: pointer;
}

/* dimmer */

.dimmer .loader {
    margin-top: 50px;
}

/* modal tabs */

.modal-body.has-tabs {
    padding: 0;

    .nav-tabs {
        margin: 0;
    }

    .tab-content {
        padding: 1rem;
    }
}

/* modal wide */

@media (min-width: 576px) {
    .modal-dialog.wide {
        max-width: 700px;
        margin: 1.75rem auto;
    }
}


/* Form mod */

textarea.form-control.text-monospace {
    font-size: 12px;
}