portfolios_pgp/assets/sass/academia/_nav.scss

199 lines
4.3 KiB
SCSS
Raw Normal View History

2022-01-18 12:02:57 +01:00
/*************************************************
* Navigation bar
**************************************************/
.navbar {
min-height: 70px !important;
}
.navbar-light {
background: $sta-menu-primary !important;
box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,.11)
}
.navbar-light .navbar-toggler {
border-color: transparent;
}
.navbar-toggler {
color: $sta-menu-text !important;
}
.navbar-light .navbar-toggler:focus,
.navbar-light .navbar-toggler:hover {
background-color: transparent;
}
.dropdown-menu,
nav#navbar-main li.nav-item {
font-size: #{$sta-font-size-small}px;
}
.navbar-light .navbar-nav>.nav-item>.nav-link,
.navbar-light .navbar-nav>.nav-item>.nav-link:focus,
.navbar-light .navbar-nav>.nav-item>.nav-link:hover {
white-space: nowrap;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
color: $sta-menu-text;
}
.navbar-light .navbar-nav>.nav-item>.nav-link:focus {
color: $sta-menu-text;
background-color: transparent;
}
.navbar-light .navbar-nav>.nav-item>.nav-link:hover {
color: $sta-menu-text-active !important;
background-color: transparent;
}
.navbar-light .navbar-nav>li.nav-item>a.active,
.navbar-light .navbar-nav>li.nav-item>a.active:focus,
.navbar-light .navbar-nav>li.nav-item>a.active:hover {
color: $sta-menu-text-active !important;
font-weight: 700;
background-color: transparent !important; /* Override Bootstrap. */
}
.navbar-brand,
.navbar-nav li.nav-item a.nav-link {
height: inherit;
line-height: 50px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand img {
max-height: 50px;
}
.navbar-light .navbar-toggler .icon-bar {
background-color: $sta-menu-text !important;
}
.dropdown-menu {
background-color: $sta-menu-primary !important;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: $sta-menu-text;
white-space: nowrap;
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
color: $sta-menu-text-active;
text-decoration: none;
background-color: $sta-menu-primary;
}
.dropdown-menu > .active,
.dropdown-menu > .active:focus,
.dropdown-menu > .active:hover {
color: $sta-menu-primary;
text-decoration: none;
background-color: $sta-menu-text-active;
outline: 0;
}
.navbar-light .navbar-nav>.open>a,
.navbar-light .navbar-nav>.open>a:focus,
.navbar-light .navbar-nav>.open>a:hover,
.navbar-light .navbar-nav>.open>a:visited {
color: $sta-menu-text !important;
background-color: $sta-menu-primary !important;
}
.navbar-light .navbar-brand {
font-weight: bold;
font-size: 1.2em;
color: $sta-menu-title;
}
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
color: $sta-menu-title;
background-color: transparent;
}
@media screen and (max-width: 1200px) {
.navbar {
min-height: 50px !important;
}
.navbar-brand,
.navbar-nav li.nav-item a.nav-link {
height: inherit;
line-height: 40px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand img {
max-height: 40px;
}
.navbar-toggler {
display: block;
}
.fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-nav > li.nav-item > a.nav-link {
padding-top: 10px;
padding-bottom: 10px;
line-height: normal;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: $sta-menu-text;
white-space: nowrap;
}
.navbar-light .navbar-nav .open .dropdown-menu {
position: static;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-light .navbar-nav .open .dropdown-menu > li > a {
padding: 5px 15px 5px 25px;
line-height: 20px;
color: $sta-menu-text;
}
.navbar-light .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-light .navbar-nav .open .dropdown-menu > li > a:hover {
color: inherit;
background-color: transparent;
}
.navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active,
.navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:focus,
.navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:hover {
color: $sta-menu-text-active;
background-color: transparent;
}
.collapse.in {
display: block !important;
}
}