github.com/zoomfoo/nomad@v0.8.5-0.20180907175415-f28fd3a1a056/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  
    60    &.is-secondary {
    61      background-color: $nomad-green-dark;
    62      padding: 1.25rem 20px 1.25rem 0;
    63      height: 4.5rem;
    64      font-weight: $weight-semibold;
    65      color: $primary-invert;
    66  
    67      .navbar-item {
    68        font-size: $size-4;
    69      }
    70    }
    71  
    72    .navbar-item {
    73      display: flex;
    74      align-items: center;
    75  
    76      &.is-gutter {
    77        width: $gutter-width;
    78        display: block;
    79        padding: 0 1rem;
    80        font-size: 1em;
    81  
    82        // Unfortunate necessity to middle align an element larger than
    83        // plain text in the subnav.
    84        > * {
    85          margin: -5px 0;
    86        }
    87  
    88        @media #{$mq-hidden-gutter} {
    89          display: none;
    90        }
    91      }
    92    }
    93  }