app/assets/stylesheets/top_bar.scss
nav.navbar {
background-color: var(--topbar-background);
margin-bottom: 20px;
span.inline {
display: inline-block;
vertical-align: middle;
h1 {
margin-bottom: 0;
}
}
.topbar-logo {
h1 {
color: var(--topbar-logo);
&::before {
font-weight: bold !important;
}
}
img, svg {
margin-left: 4px;
height: 50px;
width: 50px;
fill: var(--topbar-logo);
}
&:hover {
h1 {
color: var(--topbar-logo-hover);
}
img, svg {
fill: var(--topbar-logo-hover);
}
}
}
.navbar-toggler {
color: var(--toggler-color);
border: 2px solid var(--toggler-color);
.toggler-icon {
color: var(--toggler-icon-color);
}
}
.nav-items-right {
margin-left: auto;
a, button {
border-radius: 8px;
color: var(--topbar-text) !important;
&:hover {
background-color: var(--topbar-background-hover) !important;
color: var(--topbar-text-hover) !important;
&::after {
border-color: var(--topbar-text-hover) transparent transparent !important;
}
}
&::after {
color: var(--topbar-text-hover) !important;
border-color: var(--topbar-text) transparent transparent !important;
}
}
.btn-group {
width: 100%;
display: block !important;
}
.dropdown.with-button.nav-link {
padding: var(--bs-nav-link-padding-y);
button {
text-align: left;
border: unset;
background: unset;
padding-left: 0;
padding-right: 0;
width: 100%;
}
&:hover {
border-radius: 8px;
background-color: var(--topbar-background-hover) !important;
color: var(--topbar-text-hover) !important;
&::after {
border-color: var(--topbar-text-hover) transparent transparent !important;
}
}
}
}
.nav-link {
@include media-breakpoint-down(lg) {
padding-left: 1rem !important;
}
}
}
.sub_top_bar {
background-color: var(--subbar-background);
margin-top: -20px;
margin-bottom: 20px;
padding-top: 2px;
padding-bottom: 2px;
border-top: 1px solid var(--subbar-border);
border-bottom: 1px solid var(--subbar-border);
a {
margin: 0 10px 0 10px;
&.dropdown-item {
margin: unset;
}
color: var(--subbar-text);
&:hover {
color: var(--subbar-text-hover);
}
}
}
.dropdown-menu {
z-index: 1030;
}