github.com/manicqin/nomad@v0.9.5/ui/app/styles/core/navbar.scss (about) 1 .navbar { 2 display: flex; 3 4 &.is-primary { 5 background: linear-gradient(to right, $nomad-green-darker, $nomad-green-dark); 6 height: 3.5rem; 7 color: $primary-invert; 8 padding-left: 20px; 9 padding-right: 20px; 10 overflow: hidden; 11 12 .navbar-item { 13 color: rgba($primary-invert, 0.8); 14 text-decoration: none; 15 16 &:hover { 17 color: $primary-invert; 18 background: transparent; 19 } 20 21 &.is-active, 22 &.active { 23 color: $primary-invert; 24 border-bottom-color: $primary-invert; 25 } 26 27 + .navbar-item { 28 position: relative; 29 30 &::before { 31 width: 1px; 32 height: 1em; 33 background: rgba($primary-invert, 0.5); 34 content: ' '; 35 display: block; 36 position: absolute; 37 left: 0px; 38 top: 1.25em; 39 } 40 } 41 } 42 43 .navbar-end { 44 display: flex; 45 align-items: stretch; 46 justify-content: flex-end; 47 margin-left: auto; 48 } 49 50 .navbar-end > a.navbar-item { 51 color: rgba($primary-invert, 0.8); 52 53 &:hover { 54 color: $primary-invert; 55 background: transparent; 56 } 57 } 58 59 .navbar-brand > a.navbar-item { 60 &:hover { 61 background: transparent; 62 } 63 } 64 } 65 66 &.is-secondary { 67 background-color: $nomad-green-dark; 68 padding: 1.25rem 20px 1.25rem 0; 69 height: 4.5rem; 70 font-weight: $weight-semibold; 71 color: $primary-invert; 72 73 .navbar-item { 74 font-size: $size-4; 75 } 76 } 77 78 .navbar-item { 79 display: flex; 80 align-items: center; 81 82 &.is-gutter { 83 width: $gutter-width; 84 display: block; 85 padding: 0 1rem; 86 font-size: 1em; 87 88 // Unfortunate necessity to middle align an element larger than 89 // plain text in the subnav. 90 > * { 91 margin: -5px 0; 92 } 93 94 @media #{$mq-hidden-gutter} { 95 display: none; 96 } 97 } 98 } 99 }