datahub/datahub-web/packages/data-portal/app/styles/components/_navbar.scss

$item-spacing: 10px;
$navbar-transition-speed: $banner-animation-speed;
$navbar-dropdown-width: 310px;

.navbar-nav > li {
  float: left;
}

.nav > li,
.nav > li > a {
  display: flex;
  position: relative;
  align-items: center;
  color: get-color(gray3);
}

.nav > li > a {
  padding: 10px 15px;

  &.dropdown-toggle {
    line-height: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.navbar-header {
  float: left;
}

.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
  margin-left: -15px;
}

/**
 * Override Bootstrap navigation class, .navbar, ruleset
 */
.navbar {
  position: relative;
  min-height: 50px;
  height: $application-navbar-static-height;
  transition: top $navbar-transition-speed ease;
  margin: 0;
  border: 0;
  z-index: z('nav');

  &-inverse {
    /**
     * Overrides the styling for navbar
     */
    background-color: $brand-color;
    border-color: $brand-color;
  }

  .navbar-nav {
    > .active {
      /**
       * Overrides the navbar styles on anchor elements
       */
      > a {
        @include on-event(true) {
          background-color: inherit;
        }
      }
    }
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    width: $navbar-dropdown-width;

    .dropdown-header,
    li > a {
      display: flex;
      align-items: center;
      font-weight: fw(normal, 4);
      display: block;
      padding: 3px 20px;
      line-height: 1.42857;
      white-space: nowrap;
      color: get-color(dropdown-menu-grey1);
      cursor: pointer;

      &:focus,
      &:hover {
        text-decoration: none;
        background-color: get-color(gray1);
      }
    }
    .active > a,
    .active > a:focus,
    .active > a:hover {
      text-decoration: none;
      color: get-color(white);
      background-color: get-color(blue6);
      outline: 0;
    }

    /// Allows us to have non-links in the dropdown menu in this navbar, extends original styling
    li > div {
      display: flex;
      align-items: center;
      padding: 3px 20px;
      clear: both;
      font-weight: fw(normal, 4);
      line-height: 1.42857;
      color: get-color(dropdown-menu-grey1);
      white-space: nowrap;

      &:hover,
      &:focus {
        color: get-color(dropdown-menu-focus-black);
        text-decoration: none;
        background-color: get-color(dropdown-menu-focus-white);
      }
    }

    .dropdown-header {
      font-size: 12px;
      color: #777;
    }

    .virtual-assistant-toggle {
      border: none;
    }

    /// Override default behavior for toggle to match app styling
    .toggle-switch--light:checked + .toggle-button {
      background-color: get-color(blue7);
    }

    .divider {
      height: 1px;
      margin: 9px 0;
      overflow: hidden;
      background-color: #e5e5e5;
    }
  }

  &__dropdown-label {
    margin-right: item-spacing(3);
  }

  /// Offset is meant to accomodate for the animation that slides everything in the app-view down for the
  /// sake of the banner alerts
  &.navbar-top-offset {
    top: $banner-alerts-height;
  }
  .navbar-collapse.collapse {
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

  .navbar-collapse {
    display: flex;

    .navbar-left {
      float: none;
      flex-grow: 1;
      display: flex;
      align-items: center;
      > * {
        flex-grow: 1;
      }
    }

    .navbar-right {
      float: none;
      display: flex;
      align-items: center;
      margin: 0;
      margin-right: -15px;
    }
  }
}

.navbar-inverse {
  .navbar {
    &-brand {
      display: flex;
      align-items: center;
      height: $application-navbar-static-height;
      color: white;

      &:hover {
        color: get-color(gray3);
      }
    }

    &-brand-text {
      margin-left: item-spacing(2);
    }
  }
}

/**
 * Beta insignia for navbar logo
 */
.beta-badge {
  font-weight: fw(normal, 6);
  letter-spacing: 5px;
}

.navbar-right .dropdown-menu {
  right: 0;
  left: auto;
}

/**
 * Allow bootstrap dropdown items to be rendered when the mouse hovers over
 * the .dropdown trigger
 */
.dropdown {
  @include respond-to('large') {
    &:hover {
      > .dropdown-menu {
        display: block;
      }
    }
  }
}

/**
 * Styles the non primary action bar for an entity
 */
.secondary-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &__action + &__action {
    margin-left: $item-spacing;
  }
}

/**
 * Styles the action bar on a tab component
 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-width: 1px 0 0;
  background-color: #f8f8f8;
  z-index: z(dropdown);
  max-height: 50px;

  &__content {
    white-space: nowrap;
    vertical-align: top;
    padding: item-spacing(1);

    &__error-messages {
      display: inline-flex;
      align-items: center;
      color: get-color(red5);
      margin-left: item-spacing(2);
      padding-right: item-spacing(2);
    }
  }

  &__item + &__item {
    margin-left: $item-spacing;
  }
}

/**
 * Styles a container list of navigation items
 */
.tabbed-navigation-list {
  white-space: nowrap;

  &--tab {
    border-radius: 0;
  }
}

/**
 * Adds styles for navigation bar avatar image
 */
.navbar-avatar-image {
  &#{&} {
    @include round-image(item-spacing(6));
  }
}

.navbar-fixed-bottom,
.navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px;
  font-size: 18px;
  line-height: 20px;
}