github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/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    &.is-popup {
    79      background-color: $nomad-green-dark;
    80      height: 3.5rem;
    81      color: $primary-invert;
    82      padding-left: 20px;
    83      padding-right: 20px;
    84      overflow: hidden;
    85  
    86      .navbar-brand {
    87        margin-right: 8px;
    88      }
    89  
    90      .navbar-item {
    91        color: white;
    92  
    93        .navbar-label {
    94          font-weight: 600;
    95          margin-right: 1rem;
    96        }
    97      }
    98  
    99      .navbar-end {
   100        display: flex;
   101        align-items: center;
   102        justify-content: flex-end;
   103        margin-left: auto;
   104      }
   105  
   106      .navbar-end > a.navbar-item {
   107        color: rgba($primary-invert, 0.8);
   108        text-decoration: none;
   109  
   110        &:hover {
   111          color: $primary-invert;
   112          background: transparent;
   113        }
   114      }
   115  
   116      .navbar-brand > a.navbar-item {
   117        &:hover {
   118          background: transparent;
   119        }
   120      }
   121    }
   122  
   123    .navbar-item {
   124      display: flex;
   125      align-items: center;
   126  
   127      &.is-gutter {
   128        width: $gutter-width;
   129        display: block;
   130        padding: 0 1rem;
   131        font-size: 1em;
   132  
   133        // Unfortunate necessity to middle align an element larger than
   134        // plain text in the subnav.
   135        > * {
   136          margin: -5px 0;
   137        }
   138  
   139        @media #{$mq-hidden-gutter} {
   140          display: none;
   141        }
   142      }
   143    }
   144  }