de.bund.bfr.knime.js/src/scss/theme/nav.scss
// nav & navbars
.navbar {
padding: 0;
&[class*="navbar-expand"] {
.nav {
@include media-breakpoint-down( xs ) {
margin: 0;
}
.nav-item {
@include media-breakpoint-down( xs ) {
flex: 1 0 100%;
border-top: 1px solid $bfr-line-color;
}
> .nav-link {
@include media-breakpoint-down( xs ) {
padding-left: 0;
}
}
}
.dropdown-menu {
@include media-breakpoint-down( xs ) {
position: relative;
width: 100%;
box-shadow: none;
margin: 0 0 0.5rem;
}
}
.dropdown-item {
@include media-breakpoint-down( xs ) {
padding-left: 1rem;
}
}
}
}
}
.navbar-brand {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
color: $bfr-blue;
line-height: 1.2;
white-space: normal;
@include media-breakpoint-down( md ) {
font-size: 2rem;
}
@include media-breakpoint-down( sm ) {
flex-wrap: wrap;
font-size: 1.5rem;
}
.brand-logo {
display: inline-block;
flex: 1 0 100%;
@include media-breakpoint-up( sm ) {
flex: 1 0 0;
}
}
.brand-divider {
position: relative;
display: inline-block;
align-self: stretch;
flex: 0 0 2px;
padding: 0 2rem;
&:after {
content: '';
position: relative;
top: 0;
bottom: 0;
display: block;
height: 100%;
width: 2px;
background-color: $bfr-line-color;;
}
@include media-breakpoint-down( xs ) {
display: none;
}
}
.brand-typo {
display: inline-block;
flex: 1 0 100%;
@include media-breakpoint-up( sm ) {
flex: 1 0 auto;
}
}
img {
display: block;
max-height: 4rem;
margin-bottom: 1rem;
@include media-breakpoint-up( sm ) {
margin-bottom: 0;
}
@include media-breakpoint-up( md ) {
display: inline-block;
max-height: 5.125rem;
}
}
}
.nav {
align-items: flex-end;
}
.nav-tabs {
padding-bottom: 0;
}
.nav-pointer {
.nav-item {
> .nav-link {
&.active {
&:before {
content: '';
position: absolute;
top: calc( 100% + 1rem );
border-style: solid;
border-width: 0.625rem 1rem 0 1rem;
border-color: $white transparent transparent transparent;
@include media-breakpoint-down( xs ) {
top: 50%;
left: 0;
transform: translate(-$bfr-padding-x-sm, -50%);
border-style: solid;
border-width: 0.75rem 0 0.75rem 0.5rem;
border-color: transparent transparent transparent $bfr-active;
}
}
}
}
}
}
.nav-item {
&.dropdown {
&.show {
.dropdown-toggle {
&:after {
transform: rotate(180deg);
}
}
}
.dropdown-toggle {
padding-right: 1.25rem;
&:after {
position: absolute;
right: 0;
top: 12px;
}
}
}
}
.nav-link {
position: relative;
color: $bfr-link-secondary;
&:hover {
color: $bfr-black;
}
&:focus {
outline: 0;
color: $bfr-black;
}
&.active {
color: $bfr-black;
}
&.disabled {
color: $bfr-disabled-color;
cursor: not-allowed;
&:focus,
&:hover {
box-shadow: none;
color: $bfr-disabled-color;
}
&:after {
color: $bfr-disabled-color;
}
}
&.dropdown-toggle {
position: relative;
&:after {
float:right;
color: $bfr-icon-primary-color;
line-height: 1.375;
}
}
}
.modal,
.card {
.nav {
margin-left: -$nav-link-padding-x;
margin-right: -$nav-link-padding-x;
}
}