app/assets/stylesheets/nav.scss
.navbar {
border-radius: 0;
background: $dark-blue;
font-family: "Quicksand", Helvetica, Arial, sans-serif;
font-weight: 400;
border: none;
padding: 1px;
img {
height: 45px;
}
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active,
.navbar-brand.active {
color: $white;
font-size: $f5;
}
.navbar-nav {
letter-spacing: 1px;
}
.navbar-toggle {
color: $white;
font-size: $f8;
border-color: $white;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $light-blue;
color: $white;
border-color: $light-blue;
}
.nav-link {
text-align: center;
vertical-align: center;
padding-top: 9px;
}
.dropdown-menu {
background: $dark-blue;
right: 0;
left: auto;
}
.scrollable-dropdown-menu {
max-height: 300px;
overflow-y: auto;
}
.dropdown-menu.scrollable {
max-height: 85vh;
overflow-y: auto;
}
.dropdown-item:hover {
color: $dark;
}
.navbar-toggler {
border-color: $white;
margin: 6px;
}
.navbar-toggler-icon {
width: 1em;
height: 1.25em;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba($white, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
}
.nav-tabs.locales {
.nav-item {
.nav-link.active {
background: $light-grey;
border-color: $light-grey;
}
}
}
.tab-content.locales {
padding: 10px;
margin-bottom: 10px;
background-color: $light-grey;
}
@media (min-width: 992px) {
.navbar-brand {
font-size: $f4;
}
}
.navbar-mini {
background: $black;
.nav-item {
color: $white;
}
img {
height: 40px;
}
}
.navbar {
.nav-item {
line-height: 2.2;
}
}
.sub-navbar {
z-index: 10;
.nav-link {
display: inline;
text-align: center;
vertical-align: center;
padding: 0;
}
a.navbar-brand {
margin-left: 38px;
}
}
/* Trouble */
/* Top, Right, Bottom, Left */
.nav-lozenge {
white-space: nowrap;
background: $dark-blue;
background: linear-gradient(180deg, saturate($dark-blue, 5%), lighten($dark-blue, 10%));
border-radius: 25px;
border: 1px solid darken($dark-blue, 15%);
padding: 5px;
.nav-link {
display: inline;
text-align: center;
vertical-align: center;
padding: 0px;
}
}
.my-3px {
margin-top: 3px;
margin-bottom: 3px;
}