/*!
* Navbar.js v2.1.0 (http://thednp.github.io/navbar.js)
* Copyright 2016-2020 © thednp
* Licensed under MIT (https://github.com/thednp/navbar.js/blob/master/LICENSE)
*/
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
line-height: 1.5rem;
font-size: 14px;
padding: 0;
}
.navbar > div {
display: none;
flex-direction: column;
flex-basis: 100%;
flex-grow: 1;
}
.navbar.open-mobile > div {
display: flex;
}
.navbar .nav {
flex-direction: column;
}
.navbar .brand {
display: flex;
text-decoration: none;
white-space: nowrap;
align-items: center;
padding: 0.5rem 1rem;
font-size: 18px;
}
.navbar-toggle {
border-radius: 0.25rem;
color: currentColor;
border: 1px solid transparent;
background: transparent;
margin: auto 1rem;
align-self: center;
display: flex;
align-items: center;
padding: 0.125rem 0.5rem;
}
.navbar-toggle:focus {
outline: none;
}
.open-mobile .navbar-toggle {
border-color: currentColor;
}
@media (min-width: 768px) {
.navbar {
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar > div {
justify-content: space-between;
display: flex;
flex-direction: row;
align-items: center;
flex-basis: auto;
}
.navbar .nav {
flex-direction: row;
}
.navbar-toggle {
display: none;
}
}
.navbar-content a:not([class]), .navbar-content b,
.subnav-content a:not([class]),
.subnav-content b {
color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 768px) {
.navbar-content a:not([class]):hover {
color: rgba(255, 255, 255, 0.95);
}
}
.navbar {
background: #687c86;
color: rgba(255, 255, 255, 0.55);
}
.navbar .brand {
color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 768px) {
.navbar .brand {
background: #2c3c44;
color: rgba(255, 255, 255, 0.85);
}
.navbar .brand:hover {
color: rgba(255, 255, 255, 0.95);
}
}
.nav li > a,
.nav li > span,
.navbar-content,
.subnav-content {
padding: 0.5rem 1rem;
}
.nav {
display: flex;
}
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
position: relative;
transition: margin 0.3s ease 0s;
}
.nav li > span,
.nav li > a {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
overflow: hidden;
font-size: 14px;
line-height: 1.5rem;
}
.nav li > a {
text-decoration: none;
}
.nav li > span > span,
.nav li > a > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.subnav > ul > li.open-mobile > span + ul,
div.subnav > ul > li.open-mobile > span + div,
li.open-mobile > .subnav {
display: block;
}
.open-mobile > span > .parent-toggle,
.open-mobile > a > .parent-toggle,
.open-mobile .parent-toggle:focus {
border-color: currentColor;
}
.open-mobile + .open-mobile {
margin-top: 0.5rem;
}
.subnav,
div.subnav > ul > li > span + ul,
div.subnav > ul > li > span + div,
.parent-icon {
display: none;
}
.subnav-content p, .subnav-content ul {
margin-bottom: 0.5rem;
}
ul.subnav,
div.subnav ul {
padding: 0 0 0 1rem;
}
.menu-icon,
.parent-icon,
.parent-toggle {
width: 1.5rem;
height: 1.5rem;
fill: currentColor;
text-align: center;
line-height: 1.5rem;
}
.menu-icon {
font-size: 1.4rem;
}
.parent-toggle {
border-radius: 0.25rem;
border: 1px solid transparent;
}
.menu-icon + span {
flex: auto;
margin-left: 0.5rem;
}
span > .parent-toggle {
cursor: pointer;
}
@media (min-width: 768px) {
.parent-toggle {
display: none;
}
.parent-icon,
div.subnav > ul > li > span + div,
div.subnav > ul > li > span + ul {
display: block;
}
.subnav {
opacity: 0;
position: absolute;
display: block;
line-height: 1.5rem;
font-size: 14px;
}
ul.subnav,
div.subnav ul {
padding: 0;
}
li.open-mobile {
background: none;
transition: none;
}
li.open-mobile + .open-mobile {
margin: 0;
}
.column-title,
div.subnav > ul > li > span {
font-size: 120%;
}
.subnav li > a,
.subnav li > span,
.subnav-content {
padding: 0.5rem 1rem;
}
.nav > li > .subnav {
margin: 0 0 0;
}
ul.subnav {
width: 200px;
}
div.subnav {
min-width: 600px;
}
div.subnav > ul {
margin: 0;
}
div.subnav.m1 {
min-width: 200px;
}
div.subnav.m2 {
min-width: 400px;
}
div.subnav.m3 {
min-width: 600px;
}
div.subnav.m4 {
min-width: 800px;
}
}
.nav li > a,
.nav li > span {
color: rgba(255, 255, 255, 0.55);
}
.nav li.open-mobile {
background: rgba(0, 0, 0, 0.075);
}
@media (min-width: 768px) {
.nav > li.open > span,
.nav > li.open > a,
.nav > li:hover > span,
.nav > li:hover > a {
background: rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 0.75);
}
.nav > li.active > span,
.nav > li.active > a,
.nav > li.active.open > span,
.nav > li.active.open > a,
.nav > li.active:hover > span,
.nav > li.active:hover > a {
background: #006699;
color: #fff;
}
}
@media (min-width: 768px) {
.subnav {
background: #dadee0;
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0px rgba(0, 0, 0, 0.15) inset;
}
.subnav .subnav {
background: #ccd2d4;
}
.subnav .subnav .subnav {
background: #c5cbcf;
}
.subnav li > span,
.subnav li > a {
color: rgba(0, 0, 0, 0.55);
}
.subnav li.open > a, .subnav li:hover > a {
background: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.75);
}
.subnav li.active > span,
.subnav li.active > a, .subnav li.active:hover > span,
.subnav li.active:hover > a {
background: #006699;
color: #fff;
}
.column-title,
div.subnav > ul > li > span {
color: rgba(0, 0, 0, 0.95);
}
div.subnav > ul > li > ul > li.open > span,
div.subnav > ul > li > ul > li:hover > span,
ul.subnav > li.open > span,
ul.subnav > li:hover > span {
background: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.8);
}
div.subnav {
color: rgba(0, 0, 0, 0.55);
}
.subnav-content a:not([class]), .subnav-content b {
color: rgba(0, 0, 0, 0.75);
}
.subnav-content a:not([class]):hover {
color: rgba(0, 0, 0, 0.95);
}
}
@media (min-width: 768px) {
.nav li > .subnav {
top: -99999em;
left: -99999em;
transform: translate(0, -10px);
transition: transform 0.5s ease, opacity 0.4s linear;
}
.nav li li > .subnav {
transform: translate(-10px);
}
.nav li li.open-position > .subnav {
top: 0;
left: 100%;
}
.nav li.open-position > .subnav {
top: 100%;
left: 0;
z-index: 1;
}
.nav li.open > .subnav {
transform: translate(0);
opacity: 1;
}
}Travelled to 5 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1029895 |
| Snippet name: | https://raw.githubusercontent.com/thednp/navbar.js/master/dist/css/navbar.css |
| Eternal ID of this version: | #1029895/1 |
| Text MD5: | 3c7ee53a5b253e9c27581d73aa2d785c |
| Author: | stefan |
| Category: | |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2020-09-28 16:44:43 |
| Source code size: | 6671 bytes / 371 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 494 / 122 |
| Referenced in: | [show references] |