github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/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      align-items: center;
    12      justify-content: space-between;
    13  
    14      .navbar-item {
    15        color: rgba($primary-invert, 0.8);
    16        text-decoration: none;
    17  
    18        &:hover {
    19          color: $primary-invert;
    20          background: transparent;
    21        }
    22  
    23        &.is-active,
    24        &.active {
    25          color: $primary-invert;
    26          border-bottom-color: $primary-invert;
    27        }
    28  
    29        + .navbar-item {
    30          position: relative;
    31  
    32          &::before {
    33            width: 1px;
    34            height: 1em;
    35            background: rgba($primary-invert, 0.5);
    36            content: ' ';
    37            display: block;
    38            position: absolute;
    39            left: 0px;
    40          }
    41        }
    42      }
    43  
    44      .navbar-brand {
    45        z-index: $z-gutter;
    46      }
    47  
    48      .navbar-end {
    49        display: flex;
    50        align-items: stretch;
    51        justify-content: flex-end;
    52        margin-left: inherit;
    53      }
    54  
    55      .navbar-end > a.navbar-item {
    56        color: rgba($primary-invert, 0.8);
    57  
    58        &:hover {
    59          color: $primary-invert;
    60          background: transparent;
    61        }
    62      }
    63  
    64      .navbar-brand > a.navbar-item {
    65        &:hover {
    66          background: transparent;
    67        }
    68      }
    69    }
    70  
    71    &.is-secondary {
    72      background-color: $nomad-green-dark;
    73      padding: 1.25rem 20px 1.25rem 0;
    74      height: 4.5rem;
    75      font-weight: $weight-semibold;
    76      color: $primary-invert;
    77  
    78      .navbar-item {
    79        font-size: $size-4;
    80      }
    81    }
    82  
    83    &.is-popup {
    84      background-color: $nomad-green-dark;
    85      height: 3.5rem;
    86      color: $primary-invert;
    87      padding-left: 20px;
    88      padding-right: 20px;
    89      overflow: hidden;
    90  
    91      .navbar-brand {
    92        margin-right: 8px;
    93      }
    94  
    95      .navbar-item {
    96        color: white;
    97  
    98        .navbar-label {
    99          font-weight: 600;
   100          margin-right: 1rem;
   101        }
   102      }
   103  
   104      .navbar-end {
   105        display: flex;
   106        align-items: center;
   107        justify-content: flex-end;
   108        margin-left: inherit;
   109      }
   110  
   111      .navbar-end > a.navbar-item {
   112        color: rgba($primary-invert, 0.8);
   113        text-decoration: none;
   114  
   115        &:hover {
   116          color: $primary-invert;
   117          background: transparent;
   118        }
   119      }
   120  
   121      .navbar-brand > a.navbar-item {
   122        &:hover {
   123          background: transparent;
   124        }
   125      }
   126    }
   127  
   128    .navbar-item {
   129      display: flex;
   130      align-items: center;
   131  
   132      &.is-gutter {
   133        width: $gutter-width;
   134        display: block;
   135        padding: 0 1rem;
   136        font-size: 1em;
   137  
   138        // Unfortunate necessity to middle align an element larger than
   139        // plain text in the subnav.
   140        > * {
   141          margin: -5px 0;
   142        }
   143  
   144        @media #{$mq-hidden-gutter} {
   145          display: none;
   146        }
   147      }
   148    }
   149  }