github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/core/navbar.scss (about)

     1  .navbar {
     2    display: flex;
     3    align-items: center;
     4  
     5    &.is-primary {
     6      background: linear-gradient(
     7        to right,
     8        $nomad-green-darker,
     9        $nomad-green-dark
    10      );
    11      height: 3.5rem;
    12      color: $primary-invert;
    13      padding-left: 20px;
    14      padding-right: 20px;
    15      overflow: hidden;
    16      align-items: center;
    17      justify-content: space-between;
    18  
    19      .navbar-item {
    20        color: rgba($primary-invert, 0.8);
    21        text-decoration: none;
    22  
    23        &:hover {
    24          color: $primary-invert;
    25          background: transparent;
    26        }
    27  
    28        &.is-active,
    29        &.active {
    30          color: $primary-invert;
    31          border-bottom-color: $primary-invert;
    32        }
    33  
    34        + .navbar-item {
    35          position: relative;
    36  
    37          &::before {
    38            width: 1px;
    39            height: 1em;
    40            background: rgba($primary-invert, 0.5);
    41            content: ' ';
    42            display: block;
    43            position: absolute;
    44            left: 0px;
    45          }
    46        }
    47      }
    48  
    49      .navbar-brand {
    50        z-index: $z-gutter;
    51      }
    52  
    53      .navbar-end {
    54        display: flex;
    55        align-items: stretch;
    56        justify-content: flex-end;
    57        margin-left: inherit;
    58      }
    59  
    60      .navbar-end > a.navbar-item {
    61        color: rgba($primary-invert, 0.8);
    62  
    63        &:hover {
    64          color: $primary-invert;
    65          background: transparent;
    66        }
    67      }
    68  
    69      .navbar-brand > a.navbar-item {
    70        &:hover {
    71          background: transparent;
    72        }
    73      }
    74    }
    75  
    76    &.is-secondary {
    77      background-color: $nomad-green-dark;
    78      padding: 1.25rem 20px 1.25rem 0;
    79      height: 4.5rem;
    80      font-weight: $weight-semibold;
    81      color: $primary-invert;
    82  
    83      .navbar-item {
    84        font-size: $size-4;
    85      }
    86    }
    87  
    88    &.is-popup {
    89      background-color: $nomad-green-dark;
    90      height: 3.5rem;
    91      color: $primary-invert;
    92      padding-left: 20px;
    93      padding-right: 20px;
    94      overflow: hidden;
    95  
    96      .navbar-brand {
    97        margin-right: 8px;
    98      }
    99  
   100      .navbar-item {
   101        color: white;
   102  
   103        .navbar-label {
   104          font-weight: 600;
   105          margin-right: 1rem;
   106        }
   107      }
   108  
   109      .navbar-end {
   110        display: flex;
   111        align-items: center;
   112        justify-content: flex-end;
   113        margin-left: inherit;
   114      }
   115  
   116      .navbar-end > a.navbar-item {
   117        color: rgba($primary-invert, 0.8);
   118        text-decoration: none;
   119  
   120        &:hover {
   121          color: $primary-invert;
   122          background: transparent;
   123        }
   124      }
   125  
   126      .navbar-brand > a.navbar-item {
   127        &:hover {
   128          background: transparent;
   129        }
   130      }
   131    }
   132  
   133    .navbar-item {
   134      display: flex;
   135      align-items: center;
   136  
   137      &.is-gutter {
   138        width: $gutter-width;
   139        display: block;
   140        padding: 0 1rem;
   141        font-size: 1em;
   142  
   143        // Unfortunate necessity to middle align an element larger than
   144        // plain text in the subnav.
   145        > * {
   146          margin: -5px 0;
   147        }
   148  
   149        @media #{$mq-hidden-gutter} {
   150          display: none;
   151        }
   152      }
   153    }
   154  
   155    .profile-dropdown {
   156      padding: 0.5rem 1rem 0.5rem 0.75rem;
   157      background-color: transparent;
   158      border: none !important;
   159      height: auto;
   160      box-shadow: none !important;
   161  
   162      &:focus {
   163        background-color: #21a572;
   164      }
   165  
   166      .ember-power-select-prefix {
   167        color: rgba($primary-invert, 0.8);
   168      }
   169      .ember-power-select-selected-item {
   170        margin-left: 0;
   171        border: none;
   172      }
   173      .ember-power-select-status-icon {
   174        border-top-color: white;
   175      }
   176    }
   177  }