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  }