@mongodb-js/mongodb-ui-components/components/nav/styl/index.styl

A collection of frequently used functional UI components found on mongodb.com

body.no-scroll
  overflow: hidden

@import './flex'

@css {
  .nav-panel, .nav-panel * {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

.nav-panel, .nav-panel *
    box-sizing: border-box

.nav-panel
  z-index: 100000
  position: fixed
  top: 0
  width: 100%
  flex-direction: column
  font-family: 'Akzidenz Grotesk BQ Light'

  global-reset()

  @import './vars'
  @import './input'
  @import './nav-panel-top'
  @import './nav-panel-middle'
  @import './nav-panel-bottom'
  @import './nav-cta'

  .nav-panel-top
  .nav-panel-middle
    width: 1200px

  .nav-panel-top
  .nav-panel-middle
  .nav-panel-bottom
    position: relative
    z-index: 1000
    max-width: 1200px
    font-size: 14px

    @media(max-width: 1200px)
      max-width: 100%

    @media(max-width: breakpoint)
      width: 100%

  bgHeight = 540px
  .nav-background
    z-index: 90
    position: fixed
    left: 0
    top: 0
    height: bgHeight
    width: 100%
    padding: 200px 0 0 0
    background-color: rgba(43, 44, 46, 0)
    transition: background-color 300ms, transform 300ms easeOutQuart

    /* Navbar is 45px, top panel is 50px */
    transform: translate3d(0, -(bgHeight - (50 + 45)), 0)

    will-change: background-color, transform

    @media(max-width: breakpoint)
      height: 100%
      padding: 100px 0 0 0
      transform: translate3d(0, -100%, 0)

  .nav-background--opaque
    background-color: rgba(43, 44, 46, 0.95)

  .nav-background--open
    transform: translate3d(0, -100px, 0)

    @media(max-width: breakpoint)
      transform: translate3d(0, 0, 0)

  strong
    font-family: 'Akzidenz Grotesk BQ Medium'