github.com/hernad/nomad@v1.6.112/ui/app/styles/core/navbar.scss (about)

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