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

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

.nav-panel-bottom
  width: 100%

  @media(max-width: breakpoint)
    overflow-y: auto

  ul
    padding: 20px 0
    width: 20%

    @media(max-width: breakpoint)
      width: 100%
      padding: 5px 20px

  li
    padding: 5px
    font-size: 16px

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

  a
    position: relative
    display: block
    color: white
    text-decoration: none
    transition: 300ms

  a:hover
    color: lightGreen

  a:before
    content: ''
    position: absolute
    top: 50%
    width: 5px
    height: 5px
    margin: -2.5px -5px
    border-radius: 100%
    background-color: lightGreen
    transform: scale(0, 0)
    transform-origin: 100% 50%
    transition: 300ms

  a strong, li strong
    color: lightGreen

.nav-panel-bottom__section
  position: absolute
  width: inherit

  @media(max-width: breakpoint)
    position: relative

.nav-panel-bottom__section--inactive
  visibility: hidden

.nav-panel-bottom__dummy-section
  @media(max-width: breakpoint)
    display: none