@mongodb-js/mongodb-ui-components
Version:
A collection of frequently used functional UI components found on mongodb.com
110 lines (88 loc) • 2.04 kB
text/stylus
.nav-panel-middle
height: 50px
@media(max-width: breakpoint)
background-color: rgba(43, 44, 46, 0.95)
a:hover
text-decoration: none
.nav-panel-middle__ul
height: 100%
flex-wrap: nowrap;
div
flex-wrap: nowrap;
.nav-panel-middle__li
user-select: none
position: relative
display: inline-block
margin: 0 5px
color: white
text-transform: uppercase
letter-spacing: 1.25px
a
cursor: pointer
color: white
display: block
padding: 20px 12.5px
.nav-panel-middle__btn:before
content: ''
position: absolute
left: 12.5px
bottom: 12px
width: calc(100% - 25px)
height: 3px
/* by default the bar is light grey and hidden */
background-color: lightGrey
transform: scale(0, 1)
transform-origin: 0 50%
transition: 250ms
.nav-panel-middle__btn:not(.nav-panel-middle__li--active):hover:before
/* when you mouse over the bar it becomes partially visible, but still grey */
transform: scale(0.25, 1)
.nav-panel-middle__btn.nav-panel-middle__li--active:before
/* when the bar fully expands it turns green */
background-color: lightGreen
.nav-panel-middle__li--active:before
transform: scale(1, 1)
.nav-panel-middle__logo
position: relative
width: 110px
height: 30px
margin: 12.5px 0 12.5px 12.5px
padding: 0
@media(max-width: breakpoint)
margin: 10px 0 10px 12.5px
.nav-panel-middle__logo-img
position: absolute
top: -3px
height: inherit
.nav-panel-middle__tagline-container
margin-left: 15px
.nav-panel-middle__tagline
border-left: 1px solid white
margin: 0
padding: 0 15px
font-weight: 300
font-size: 12px
line-height: 1
.nav-panel-middle__hamburger
display: none
position: relative
@media(max-width: breakpoint)
display: block
position: absolute
top: 0
right: 0
height: inherit
width: inherit
margin: 10px
fill: white
button
display: block
width: 30px
height: 30px
padding: 0
button::-moz-focus-inner
padding: 0
border: 0
svg
width: inherit
height: inherit