github.com/replicatedhq/ship@v0.55.0/web/init/src/scss/components/shared/NavBar.scss (about)

     1  @import "../../variables/variables.scss";
     2  
     3  .NavBarWrapper {
     4    min-height: 66px;
     5    width: 100%;
     6    padding: 0;
     7    background-color: $navbar-background;
     8    box-shadow: 0 1px 0 #DFDFDF;
     9    z-index: 400;
    10    margin-bottom: 0;
    11    top: 0;
    12  
    13    .container {
    14      max-width: none;
    15    }
    16  }
    17  
    18  /* Nav Logo */
    19  
    20  .HeaderLogo-wrapper {
    21    margin-right: 12px;
    22    min-height: 66px;
    23  }
    24  .HeaderName-wrapper {
    25    min-height: 66px;
    26  }
    27  .HeaderLogo a {
    28    display: flex;
    29    flex-direction: row;
    30  }
    31  .HeaderLogo .logo {
    32    width: auto;
    33    height: 34px;
    34  }
    35  
    36  .mteadata-wrapper {
    37    position: relative;
    38  }
    39  
    40  /* Nav Items */
    41  
    42  .NavItem {
    43    padding: 0;
    44    margin: 0;
    45    cursor: pointer;
    46    max-height: 65px;
    47  }
    48  .NavItem .HeaderContent-wrapper {
    49    a {
    50      padding: 25px 20px 24px;
    51      display: inline-block;
    52      height: 100%;
    53    }
    54  }
    55  .right-items .NavItem:last-child {
    56    margin-right: 0;
    57    padding-right: 0;
    58  }
    59  .NavItem a {
    60    font-size: 16px;
    61    color: rgba($navbar-label-color, 0.8);
    62    font-weight: 500;
    63    cursor: pointer;
    64    line-height: 16px;
    65    transition: color .15s;
    66    user-select: none;
    67  }
    68  .NavItem:hover {
    69    a {
    70      color: $navbar-label-color;
    71      text-decoration: none;
    72    }
    73  }
    74  .NavItem.is-active a:hover,
    75  .NavItem.is-active a {
    76    color: $highlight-color;
    77  }
    78  
    79  .NavItem .Popover-wrapper {
    80    padding-top: 0;
    81  
    82    &::after {
    83      top: -4px;
    84      left: 93px;
    85    }
    86    &.popover-bottom-right::after {
    87      top: -4px;
    88      right: 32px;
    89      left: auto;
    90    }
    91    .Popover-content {
    92      border-radius: 0 0 4px 4px;
    93    }
    94  }
    95  .account-dropdown {
    96    .HeaderContent-wrapper a {
    97      padding: 18px 20px;
    98    }
    99  }
   100  
   101  .NavItem .Popover-wrapper .PopoverItem .badge {
   102    position: absolute;
   103    right: 20px;
   104    cursor: pointer;
   105    pointer-events: none;
   106  }
   107  
   108  /* ≥ 960px */
   109  @media screen and (min-width: 60em) {
   110  
   111  }
   112  
   113  /* ≥ 1024px */
   114  @media screen and (min-width: 64em) {
   115    .mteadata-wrapper {
   116      position: absolute;
   117      top: 0;
   118    }
   119  }