iflrandevu/assets/css/_bootswatch.scss
2022-01-24 14:18:47 +01:00

179 lines
2.5 KiB
SCSS

// Bootswatch (Lux)
// Variables
// Hint: Use the following $var to load a custom font.
// $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
// @if $web-font-path {
// @import url($web-font-path);
// }
// Navbar
.navbar {
font-size: $font-size-sm;
text-transform: uppercase;
font-weight: 600;
&-nav {
.nav-link {
padding-top: .715rem;
padding-bottom: .715rem;
}
}
&-brand {
margin-right: 2rem;
}
}
.bg-light {
border: 1px solid $gray-400 !important;
&.navbar-fixed-top {
border-width: 0 0 1px;
}
&.navbar-bottom-top {
border-width: 1px 0 0;
}
}
// Buttons
.btn {
font-size: $font-size-sm;
text-transform: uppercase;
&-sm {
font-size: 10px;
}
&-warning {
&,
&:hover,
&:not([disabled]):not(.disabled):active,
&:focus {
color: $white;
}
}
}
.btn-outline-secondary {
background: none;
border-color: #777;
color: #777;
&:not([disabled]):not(.disabled):hover,
&:not([disabled]):not(.disabled):focus,
&:not([disabled]):not(.disabled):active {
background-color: $gray-400;
border-color: $gray-400;
color: $white;
}
&:not([disabled]):not(.disabled):focus {
box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
}
&[disabled], &.disabled {
color: $gray-400;
border-color: $gray-400;
}
}
[class*="btn-outline-"] {
border-width: 1px;
}
.border-secondary {
border: 1px solid $gray-400 !important;
}
// Typography
body {
//font-weight: 200;
letter-spacing: 0.05rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
letter-spacing: 3px;
}
.text-secondary {
color: $body-color !important;
}
// Tables
th {
font-size: $font-size-sm;
text-transform: uppercase;
}
// Navs
.dropdown-menu {
font-size: $font-size-sm;
text-transform: uppercase;
border: 1px solid rgb(0 0 0 / 30%);
.dropdown-item {
padding: 1rem;
}
}
// Indicators
.badge {
padding-top: .28rem;
&-pill {
border-radius: 10rem;
}
&.bg-secondary,
&.bg-light {
color: $dark;
}
}
// Containers
.list-group-item {
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: inherit;
}
}
.card {
&-title,
&-header {
color: inherit;
}
}
// Forms
.form-label {
font-weight: bold;
}