Overleaf/services/web/frontend/stylesheets/components/nav.scss

@import 'bootstrap/scss/functions';

:root {
  // Basics
  --navbar-item-spacing-horizontal: var(--spacing-06);
  --navbar-bg: var(--bg-dark-primary);
  --navbar-border: transparent;
  --navbar-padding-h: var(--spacing-05);
  --navbar-padding: 0 var(--navbar-padding-h);
  --navbar-brand-width: 130px;
  --navbar-brand-image-url: var(
    --navbar-brand-image-default-url,
    url('../../../public/img/ol-brand/overleaf-white.svg')
  );

  // Title, when used instead of a logo
  --navbar-title-font-size: var(--font-size-05);
  --navbar-title-color: var(--neutral-20);
  --navbar-title-color-hover: var(--neutral-40);

  // Button-like top-level items
  --navbar-btn-font-size: #{$font-size-base};
  --navbar-btn-border-radius: #{$border-radius-full};
  --navbar-btn-border-width: #{$spacing-01};
  --navbar-btn-font-weight: #{$font-weight-base};
  --navbar-btn-padding-v: #{$spacing-02};
  --navbar-btn-padding-h: #{$spacing-06};
  --navbar-btn-line-height: #{$line-height-base};

  // Properties of "subdued" items
  --navbar-subdued-padding: calc(
      var(--navbar-btn-padding-v) + var(--navbar-btn-border-width)
    )
    calc(var(--navbar-btn-padding-h) + 1px);
  --navbar-subdued-color: var(--white);
  --navbar-subdued-hover-bg: var(--white);
  --navbar-subdued-hover-color: var(--green-50);

  // Properties of "primary" items
  --navbar-primary-color: var(--white);
  --navbar-primary-border-color: var(--green-50);
  --navbar-primary-bg: var(--green-50);
  --navbar-primary-hover-bg: var(--green-60);
  --navbar-primary-hover-border-color: var(--navbar-primary-hover-bg);

  // Links
  --navbar-link-color: var(--white);
  --navbar-link-border-color: var(--navbar-link-color);
  --navbar-link-hover-color: var(--white);
  --navbar-link-hover-bg: var(--green-50);
  --navbar-link-hover-border-color: var(--navbar-link-hover-bg);

  // Toggler
  --navbar-toggler-expanded-color: var(--navbar-link-color);
  --navbar-toggler-expanded-bg: var(--blue-60);

  // Mobile view
  --navbar-hamburger-submenu-bg: var(--bg-dark-secondary);
  --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
  --navbar-hamburger-submenu-item-hover-color: var(--navbar-link-color);
  --navbar-hamburger-submenu-item-hover-bg: var(--navbar-link-hover-bg);
}

.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: block;

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: var(--spacing-04) var(--spacing-06);

      &:hover,
      &:focus {
        text-decoration: none;
        background-color: var(--bg-info-01);
        color: var(--white);
      }
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.disabled > a {
      color: var(--content-disabled);

      &:hover,
      &:focus {
        color: var(--content-disabled);
        text-decoration: none;
        background-color: transparent;
        cursor: not-allowed;
      }
    }
  }

  // Open dropdowns
  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: var(--bg-info-01);
      border-color: var(--link-ui);
    }
  }
}