app/assets/stylesheets/vendor-modifications/_bootstrap.scss
//
// Bootstrap
//
// Helpers
.rounded {
border-radius: $box-radius !important;
}
// Alerts
.alert {
margin-bottom: 0;
border-radius: $box-radius;
}
.alert--header {
margin-top: 1.65rem;
border-radius: $box-radius;
}
// Buttons
.btn {
border-radius: $box-radius;
}
.btn-lg {
padding: .65rem 1rem;
}
// Card
.card {
border: 0;
border-radius: 0;
border-top-left-radius: $box-radius;
border-top-right-radius: $box-radius;
}
.card-img-overlay {
padding: 0.5rem;
background-image: linear-gradient(to top, rgba(33, 4, 81, .9) 9%, rgba(33, 4, 81, .3) 33%, rgba(33, 4, 81, .1) 43%, transparent 55%);
opacity: 1;
}
.card-title {
bottom: .67rem;
margin-bottom: 0;
position: absolute;
text-align: left;
color: $white;
}
// Dropdown Menu
.dropdown-menu {
border-radius: $box-radius;
@include floating-shadow;
}
.dropdown-item {
padding: .35rem 1.5rem;
font-size: 1.05rem;
}
// Forms
.form-control {
border-radius: $box-radius;
}
input[type="radio"] {
margin-top: .2rem;
}
// Modal
.modal-open {
overflow: auto;
}
.modal-dialog {
max-width: 710px;
}
.modal.fade .modal-dialog {
transition: all .2s ease-in-out;
transform: translate(0, 0);
}
.modal-content {
border: 1px solid rgba(0,0,0,0.1);
border-radius: $box-radius;
}
.modal-body {
font-size: 1.1rem;
}
.modal-backdrop {
background-color: $dark-indigo;
&.fade { opacity: 0; }
&.show { opacity: .83; }
}
// Navbar
.navbar-expand > .container {
padding-right: .75rem;
padding-left: .75rem;
}
.nav-tabs {
border-bottom: 1px solid darken(#dee2e6, 20%);
}
.nav-tabs .nav-link {
border-top-left-radius: $box-radius;
border-top-right-radius: $box-radius;
}
.nav-link.active {
background-color: unset !important;
border-color: darken(#dee2e6, 15%) darken(#dee2e6, 15%) $light-background !important;
}
.nav-link:hover {
border-color: darken(#dee2e6, 15%) darken(#dee2e6, 15%) $light-background !important;
}
// Tooltip
.tooltip {
font-size: 1.05rem;
&.show { opacity: 1; }
}
.bs-tooltip-top {
.arrow {
&::before {
border-top-color: $primary-darker;
}
}
}
.bs-tooltip-right {
.arrow {
&::before {
border-right-color: $primary-darker;
}
}
}
.bs-tooltip-bottom {
.arrow {
&::before {
border-bottom-color: $primary-darker;
}
}
}
.bs-tooltip-left {
.arrow {
&::before {
border-left-color: $primary-darker;
}
}
}
.tooltip-inner {
max-width: 90vw;
width: inherit;
background-color: $primary-darker;
border-radius: $box-radius;
@include floating-shadow;
@include media-breakpoint-up(md) {
max-width: 700px;
}
}