lintel-contrib-navbar
Version:
Navbar for lintel.
1 lines • 8.08 kB
CSS
.navbar{background:#fbfbfb;border-color:#ececec;color:#333;-webkit-transition:top .5s ease-in-out,bottom .5s ease-in-out,left .5s ease-in-out,width .5s ease-in-out;transition:top .5s ease-in-out,bottom .5s ease-in-out,left .5s ease-in-out,width .5s ease-in-out;z-index:1200}.navbar:after,.navbar:before{content:" ";display:table}.navbar:after{clear:both}.navbar .navbar-brand{border-color:#ececec}.navbar .navbar-brand>a{color:#333}.navbar .navbar-brand>a:focus,.navbar .navbar-brand>a:hover{color:#4b77be}.navbar .navbar-list>li>a:not(.btn){color:#333}.navbar .navbar-list>li.active>a:not(.btn),.navbar .navbar-list>li.open>a:not(.btn),.navbar .navbar-list>li>a:not(.btn):focus,.navbar .navbar-list>li>a:not(.btn):hover{background:#f2f2f2;color:#4b77be}.navbar .navbar-dropdown{background:#fbfbfb;border-color:#ececec}.navbar .navbar-dropdown>li>a{color:#333}.navbar .navbar-dropdown>li>a:focus,.navbar .navbar-dropdown>li>a:hover{background:#f2f2f2;color:#4b77be}@media screen and (min-width:480px){.has-navbar-collapsed .navbar .open>a>.navbar-tooltip,.has-navbar-collapsed .navbar a:hover>.navbar-tooltip.navbar-tooltip{background:#fbfbfb;background:rgba(251,251,251,.8);border:1px solid #ececec;margin-top:-1px;color:#4b77be}}.navbar .navbar-toggle{border:1px solid #ececec}.navbar .navbar-toggle:hover .navbar-toggle-bar,.navbar .navbar-toggle:hover .navbar-toggle-bar:after,.navbar .navbar-toggle:hover .navbar-toggle-bar:before{border-color:#4b77be}.navbar .navbar-toggle-bar,.navbar .navbar-toggle-bar:after,.navbar .navbar-toggle-bar:before{border-top:2px solid #333}.navbar-fixed{position:fixed;width:100%}.navbar-brand{border-bottom:1px solid transparent;line-height:46px;vertical-align:middle}.navbar-brand-link{unicode-bidi:bidi-override;text-decoration:none}.navbar-title{color:inherit}.navbar-logo{max-width:100%;vertical-align:middle}.navbar-list{list-style:none;margin:0;padding:0}.navbar-list>li>a{display:block;text-decoration:none}.navbar-dropdown{box-shadow:none;margin-top:1px}.navbar-up.navbar-mobile{top:-100%}@media screen and (min-width:480px){.navbar-up.navbar-top{top:-100%}}.navbar-mobile{display:none}@media screen and (max-width:479px){.navbar:not(.navbar-mobile):not(.active){left:-360px}.navbar-mobile.navbar-mobile{display:block;height:auto;left:0;right:0;width:100%;z-index:1205}}@media screen and (min-width:480px){.navbar-bottom,.navbar-top{padding-left:12px;padding-right:12px}.navbar-bottom .navbar-brand,.navbar-top .navbar-brand{display:inline-block;margin-right:12px}.navbar-bottom .navbar-brand.navbar-brand,.navbar-top .navbar-brand.navbar-brand{border-bottom-color:transparent}.navbar-bottom .navbar-logo,.navbar-top .navbar-logo{display:block}.navbar-bottom .navbar-list,.navbar-top .navbar-list{display:inline-block}.navbar-bottom .navbar-list>li,.navbar-top .navbar-list>li{display:inline-block;vertical-align:middle}.navbar-bottom .navbar-list>li>a:not(.btn),.navbar-top .navbar-list>li>a:not(.btn){padding:15px 12px}.navbar-bottom .navbar-list-right,.navbar-top .navbar-list-right{float:right}.navbar-bottom .navbar-dropdown,.navbar-top .navbar-dropdown{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-top{border-bottom:1px solid #ececec;top:0}.navbar-bottom{border-top:1px solid #ececec;bottom:0}}@media screen and (max-width:479px){.navbar-bottom,.navbar-top{height:100%;overflow-y:scroll;position:fixed;top:0;width:360px}.navbar-bottom .navbar-brand,.navbar-top .navbar-brand{height:51px;overflow-x:hidden;padding-left:12px;padding-right:12px;text-align:left;white-space:nowrap}.navbar-bottom .navbar-brand-link,.navbar-top .navbar-brand-link{direction:rtl;text-decoration:none;width:336px}.navbar-bottom .navbar-title,.navbar-top .navbar-title{display:inline-block;margin:0 12px;font-size:1em;white-space:nowrap}.navbar-bottom .navbar-list>li,.navbar-top .navbar-list>li{display:block;white-space:nowrap}.navbar-bottom .navbar-list>li>a:not(.btn),.navbar-top .navbar-list>li>a:not(.btn){line-height:50px;padding-left:12px;padding-right:12px}.navbar-bottom .navbar-list>li .btn,.navbar-top .navbar-list>li .btn{margin:15px 12px}.navbar-bottom .navbar-list-icon,.navbar-top .navbar-list-icon{font-size:1.2em;text-align:center;margin-right:-12px;width:46px}.navbar-top{border-right:1px solid #ececec;left:0}.navbar-bottom{border-left:1px solid #ececec;right:0}}.navbar-left,.navbar-right{height:100%;overflow-y:scroll;position:fixed;top:0;width:360px}.navbar-left .navbar-brand,.navbar-right .navbar-brand{height:51px;overflow-x:hidden;padding-left:12px;padding-right:12px;text-align:left;white-space:nowrap}.navbar-left .navbar-brand-link,.navbar-right .navbar-brand-link{direction:rtl;text-decoration:none;width:336px}.navbar-left .navbar-title,.navbar-right .navbar-title{display:inline-block;margin:0 12px;font-size:1em;white-space:nowrap}.navbar-left .navbar-list>li,.navbar-right .navbar-list>li{display:block;white-space:nowrap}.navbar-left .navbar-list>li>a:not(.btn),.navbar-right .navbar-list>li>a:not(.btn){line-height:50px;padding-left:12px;padding-right:12px}.navbar-left .navbar-list>li .btn,.navbar-right .navbar-list>li .btn{margin:15px 12px}.navbar-left .navbar-list-icon,.navbar-right .navbar-list-icon{font-size:1.2em;text-align:center;margin-right:-12px;width:46px}.navbar-left{border-right:1px solid #ececec;left:0}.navbar-right{border-left:1px solid #ececec;right:0}.has-navbar-left{-webkit-transition:padding-left .5s ease-in-out;transition:padding-left .5s ease-in-out}.has-navbar-right{-webkit-transition:padding-right .5s ease-in-out;transition:padding-right .5s ease-in-out}@media screen and (min-width:480px){.has-navbar-expanded{padding-left:360px}.has-navbar-collapsed{padding-left:70px}.has-navbar-collapsed .navbar{width:70px}}@media screen and (min-width:480px){.navbar-tooltip{-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out}.has-navbar-collapsed .navbar-tooltip{left:-1000px;opacity:0;position:absolute}.has-navbar-collapsed .open>a>.navbar-tooltip,.has-navbar-collapsed a:hover>.navbar-tooltip{border-radius:4px;left:100%;margin-left:10px;opacity:1;padding-left:12px;padding-right:12px;position:absolute;white-space:nowrap}.has-navbar-collapsed.has-navbar-collapsing .navbar-tooltip{left:auto;position:static}}.navbar-toggle{border:1px solid #ececec;border-radius:4px;display:inline-block;margin-right:12px;padding:4px 7px;vertical-align:middle}.navbar-toggle-bar,.navbar-toggle-bar:after,.navbar-toggle-bar:before{content:'';display:block;margin-top:4px;margin-bottom:4px;width:1.5em}@media screen and (min-width:480px){.navbar-toggle{display:none}}.navbar-inverse{background:#333;border-color:#232323;color:#868686}.navbar-inverse .navbar-brand{background:#474747;border-color:#2d2d2d}.navbar-inverse .navbar-brand>a{color:#868686}.navbar-inverse .navbar-brand>a:focus,.navbar-inverse .navbar-brand>a:hover{color:#f9f9f9}.navbar-inverse .navbar-list>li>a:not(.btn){color:#868686}.navbar-inverse .navbar-list>li.active>a:not(.btn),.navbar-inverse .navbar-list>li.open>a:not(.btn),.navbar-inverse .navbar-list>li>a:not(.btn):focus,.navbar-inverse .navbar-list>li>a:not(.btn):hover{background:#232323;color:#f9f9f9}.navbar-inverse .navbar-dropdown{background:#333;border-color:#232323}.navbar-inverse .navbar-dropdown>li>a{color:#868686}.navbar-inverse .navbar-dropdown>li>a:focus,.navbar-inverse .navbar-dropdown>li>a:hover{background:#232323;color:#f9f9f9}@media screen and (min-width:480px){.has-navbar-collapsed .navbar-inverse .open>a>.navbar-tooltip,.has-navbar-collapsed .navbar-inverse a:hover>.navbar-tooltip.navbar-tooltip{background:#333;background:rgba(51,51,51,.8);border:1px solid #232323;margin-top:-1px;color:#f9f9f9}}.navbar-inverse .navbar-toggle{border:1px solid #232323}.navbar-inverse .navbar-toggle:hover .navbar-toggle-bar,.navbar-inverse .navbar-toggle:hover .navbar-toggle-bar:after,.navbar-inverse .navbar-toggle:hover .navbar-toggle-bar:before{border-color:#f9f9f9}.navbar-inverse .navbar-toggle-bar,.navbar-inverse .navbar-toggle-bar:after,.navbar-inverse .navbar-toggle-bar:before{border-top:2px solid #868686}