171 lines
3.5 KiB
SCSS
171 lines
3.5 KiB
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;
|
|
}
|