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

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

/**
 * Override Bootstrap navigation class, .navbar, ruleset
 */
.navbar {
  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 {
    width: $navbar-dropdown-width;

    li > a {
      display: flex;
      align-items: center;
    }

    /// 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);
      }
    }

    .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);
    }
  }

  &__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 {
    display: flex !important; // in order to override bootstrap !important

    .navbar-left {
      float: none !important; // in order to override bootstrap !important
      flex-grow: 1;
      display: flex;
      align-items: center;
      > * {
        flex-grow: 1;
      }
    }

    .navbar-right {
      float: none !important; // in order to override bootstrap !important
      display: flex;
      align-items: center;
    }
  }
}

.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, 400);
  letter-spacing: 5px;
}

/**
 * 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));
  }
}