@mongodb-js/mongodb-ui-components/build/preact/nav/index.css

A collection of frequently used functional UI components found on mongodb properties

body.no-scroll{overflow:hidden}
.m-nav, .m-nav * {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.m-nav,.m-nav *{-webkit-box-sizing:border-box;box-sizing:border-box}.m-nav{z-index:100000;position:fixed;top:0;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:'Akzidenz Grotesk BQ Light';}.m-nav a{cursor:pointer;color:darkGreen;text-decoration:none}.m-nav input,.m-nav button{outline:0;font-size:14px}.m-nav input{height:32px;border-radius:4px;border:solid 1px #e0e0e0;padding:0 15px}.m-nav button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin:0;padding:15px 40px;background-color:transparent;color:#fff;border:0;border-radius:4px}.m-nav ul{margin:0;padding:0}.m-nav ul li{list-style-type:none}.m-nav strong{font-family:'Akzidenz Grotesk BQ Medium'}.m-nav-top,.m-nav-middle{width:1200px}.m-nav-top,.m-nav-middle,.m-nav-bottom{position:relative;z-index:1000;width:100%;max-width:1200px;font-size:14px;}@media (max-width:1200px){.m-nav-top,.m-nav-middle,.m-nav-bottom{max-width:100%}}@media (max-width:895px){.m-nav-top,.m-nav-middle,.m-nav-bottom{width:100%}}.m-nav-bg{overflow-y:scroll;z-index:90;position:fixed;left:0;top:0;height:600px;width:100%;padding:200px 0 0 0;background-color:rgba(43,44,46,0.95);-webkit-transition:opacity 300ms,-webkit-transform 300ms cubic-bezier(.165,.84,.44,1);transition:opacity 300ms,-webkit-transform 300ms cubic-bezier(.165,.84,.44,1);transition:opacity 300ms,transform 300ms cubic-bezier(.165,.84,.44,1);transition:opacity 300ms,transform 300ms cubic-bezier(.165,.84,.44,1),-webkit-transform 300ms cubic-bezier(.165,.84,.44,1);opacity:0;-webkit-transform:translate3d(0,-505px,0);transform:translate3d(0,-505px,0);}@media (max-width:895px){.m-nav-bg{height:calc(100% - 95px);padding:0;margin:95px 0 0 0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.m-nav-bg-opaque{opacity:1}.m-nav-bg-open{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);}@media (max-width:895px){.m-nav-bg-open{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.m-nav-flex-y,.m-nav-flex-x,.m-nav-flex-xy,.m-nav-flex-space{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.m-nav-flex-xy,.m-nav-flex-y{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.m-nav-flex-xy,.m-nav-flex-x{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.m-nav-flex-space{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.m-nav-flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.m-nav-top{overflow:hidden;height:45px;padding:0 20px;background-color:#fff;text-align:center;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);}.m-nav-top > ul{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.m-nav-top a{z-index:10;color:#616161;text-decoration:none}.m-nav-top a:hover{text-decoration:none}.m-nav-top-links{margin-left:0;-webkit-transition:200ms cubic-bezier(.23,1,.32,1);transition:200ms cubic-bezier(.23,1,.32,1);will-change:margin-left;}.m-nav-top-links li{position:relative;display:inline-block;margin-right:30px;text-transform:uppercase;font-size:12px;}@media (max-width:895px){.m-nav-top-links li{margin-right:13px}}.m-nav-top-links li:before{content:'';position:absolute;bottom:-4px;width:100%;height:1px;background-color:#616161;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:250ms;transition:250ms}.m-nav-top-links li:hover:before{-webkit-transform:scale(1,1);transform:scale(1,1)}.m-nav-top-links-hidden{margin-left:-250px;opacity:0}.m-nav-search{overflow:hidden}input.m-nav-search-input{width:200px;margin:3px -210px 0 10px;padding:0 30px 0 0;border:0;border-bottom:2px solid #b7b7b7;border-radius:0;opacity:0;-webkit-transition:opacity 200ms,margin 500ms cubic-bezier(.23,1,.32,1);transition:opacity 200ms,margin 500ms cubic-bezier(.23,1,.32,1)}input.m-nav-search-input-open{margin:3px -35px 0 10px;opacity:1}button.m-nav-top-contact,button.m-nav-search-btn{padding:10px}button.m-nav-search-btn{z-index:1;margin-right:10px;-webkit-transition:-webkit-transform 300ms cubic-bezier(.23,1,.32,1);transition:-webkit-transform 300ms cubic-bezier(.23,1,.32,1);transition:transform 300ms cubic-bezier(.23,1,.32,1);transition:transform 300ms cubic-bezier(.23,1,.32,1), -webkit-transform 300ms cubic-bezier(.23,1,.32,1);-webkit-transform:scale(1);transform:scale(1)}button.m-nav-search-btn-active{-webkit-transform:scale(.75);transform:scale(.75)}button.m-nav-top-dl,button.m-nav-top-host{-webkit-transition:150ms;transition:150ms;}button.m-nav-top-dl span,button.m-nav-top-host span{vertical-align:middle}button.m-nav-top-dl svg,button.m-nav-top-host svg{margin-left:10px;vertical-align:middle}@media (max-width:895px){button.m-nav-top-dl,button.m-nav-top-host{padding:5px 15px !important}button.m-nav-top-dl span,button.m-nav-top-host span{display:none}button.m-nav-top-dl svg,button.m-nav-top-host svg{margin-left:0}}button.m-nav-top-dl{padding:5px 30px;font-size:14px;background-color:#7fc857;}button.m-nav-top-dl:hover{background-color:#589636}button.m-nav-top-host{padding:4px 29px;margin-right:5px;color:#7fc857;border:1px solid #7fc857;}button.m-nav-top-host:hover{color:#569732;border:1px solid #569732}@media (max-width:895px){button.m-nav-top-host{display:none !important}}.m-nav-middle{height:50px;}@media (max-width:895px){.m-nav-middle{background-color:rgba(43,44,46,0.95)}}.m-nav-middle a:hover{text-decoration:none}.m-nav-middle ul{height:100%;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.m-nav-middle ul div{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.m-nav-middle li{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;margin:0 5px;color:#fff;text-transform:uppercase;letter-spacing:1.25px;}.m-nav-middle li img{position:absolute;top:-3px;height:inherit}.m-nav-middle li a{cursor:pointer;color:#fff;display:block;padding:20px 12.5px}.m-nav-middle-lists{-webkit-transition:opacity 300ms;transition:opacity 300ms}.m-nav-middle-li a{color:#fff}.m-nav-middle-li:before{content:'';position:absolute;left:12.5px;bottom:12px;width:calc(100% - 25px);height:3px;background-color:lightGrey;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:250ms;transition:250ms}.m-nav-middle-li:not(.m-nav-middle-li-on):hover:before{-webkit-transform:scale(.25,1);transform:scale(.25,1)}.m-nav-middle-li-on:before{background-color:#7fc857;-webkit-transform:scale(1,1);transform:scale(1,1)}.m-nav-logo{width:110px;height:30px;margin:0 0 0 15px !important;padding:0;}@media (max-width:895px){.m-nav-logo{margin:10px 0 10px 12.5px}}.m-nav-tagline{height:50%;border-left:1px solid #fff;margin-left:15px !important;padding:0 15px;font-weight:300;font-size:12px;line-height:2.2}.m-nav-middle-toggle{display:none;position:relative;position:absolute;top:0;right:0;height:inherit;width:inherit;margin:10px !important;fill:#fff;}@media (max-width:895px){.m-nav-middle-toggle{display:block}}.m-nav-middle-toggle button{display:block;width:30px;height:30px;padding:0}.m-nav-middle-toggle button::-moz-focus-inner{padding:0;border:0}.m-nav-middle-toggle svg{width:inherit;height:inherit}.m-nav-bottom ul{padding:20px 0;width:20%;}@media (max-width:895px){.m-nav-bottom ul{width:100%;padding:5px 20px}}.m-nav-bottom li{padding:4px;font-size:16px;}@media (max-width:895px){.m-nav-bottom li{padding:10px 5px}}.m-nav-bottom li small{display:block}.m-nav-bottom a{position:relative;display:block;color:#fff;text-decoration:none;-webkit-transition:300ms;transition:300ms}.m-nav-bottom a:hover{color:#7fc857}.m-nav-bottom a strong,.m-nav-bottom li strong{position:relative;color:#7fc857}.m-nav-bottom a strong:before{content:'';position:absolute;bottom:-4px;width:100%;height:1px;background-color:#7fc857;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:250ms;transition:250ms}.m-nav-bottom a strong:hover:before{-webkit-transform:scale(1,1);transform:scale(1,1)}.m-nav-bottom-list{z-index:1;position:absolute;width:inherit;-webkit-transition:opacity 200ms;transition:opacity 200ms;}@media (max-width:895px){.m-nav-bottom-list{position:relative}}.m-nav-bottom-list-inactive{z-index:-1;opacity:0;pointer-events:none}@media (max-width:895px){.nav-panel-bottom__dummy-section{display:none}}.m-nav-cta{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;width:30%;padding:30px;margin:20px;border:.5px solid #979797;}@media (max-width:895px){.m-nav-cta{width:100%}}@media (max-width:895px){.m-nav-cta:not(.m-nav-cta-first){display:none}}.m-nav-cta ul{width:100%;padding:0}.m-nav-cta h2,.m-nav-cta a{width:100%}.m-nav-cta h2{margin:0 0 10px 0;color:#fff;font-size:30px;}@media (max-width:700px){.m-nav-cta h2{font-size:26px}}.m-nav-cta a{display:block;padding:5px 0;color:#7fc857 !important}