@mongodb-js/mongodb-ui-components/components/nav/styl/nav-panel-top.styl

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

.nav-panel-top
  overflow: hidden
  height: 45px
  padding: 0 20px
  background-color: white
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1)

.nav-panel-top__links
  margin-left: 0
  transition: 300ms
  will-change: margin-left

.nav-panel-top__links--hidden
  margin-left: -150px
  opacity: 0

.nav-panel-top__input
  width: 200px
  margin-right: -210px
  margin-left: 10px
  padding: 0 30px 0 0
  border: 0
  border-bottom: 2px solid #b7b7b7
  border-radius: 0
  opacity: 0

  @media(max-width: breakpoint)
    margin-right: -190px

.nav-panel-top__a
  z-index: 10
  color: #616161
  text-decoration: none

.nav-panel-top__li
  position: relative
  display: inline-block
  margin-right: 30px
  text-transform: uppercase
  font-size: 12px

  @media(max-width: breakpoint)
    margin-right: 13px

.nav-panel-top__li:before
  content: ''
  position: absolute
  bottom: -4px
  width: 100%
  height: 1px
  background-color: #616161
  transform: scale(0, 1)
  transform-origin: 0 50%
  transition: 250ms

.nav-panel-top__li:hover:before
  transform: scale(1, 1)

.nav-panel-top__contact
.nav-panel-top__search
  padding: 10px

.nav-panel-top__search
  margin-right: 10px

.nav-panel-top__download
  padding: 5px 30px
  transition: 150ms

  &:hover
    background-color: #589636

  svg
    margin-left: 10px
    vertical-align: middle

  @media(max-width: breakpoint)
    padding: 5px 15px

    span
      display: none

    svg
      margin-left: 0