You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
3.8 KiB
178 lines
3.8 KiB
//
|
|
// Responsive: Navbar
|
|
// --------------------------------------------------
|
|
|
|
|
|
// TABLETS AND BELOW
|
|
// -----------------
|
|
@media (max-width: @navbarCollapseWidth) {
|
|
|
|
// UNFIX THE TOPBAR
|
|
// ----------------
|
|
// Remove any padding from the body
|
|
body {
|
|
padding-top: 0;
|
|
}
|
|
// Unfix the navbars
|
|
.navbar-fixed-top,
|
|
.navbar-fixed-bottom {
|
|
position: static;
|
|
}
|
|
.navbar-fixed-top {
|
|
margin-bottom: @baseLineHeight;
|
|
}
|
|
.navbar-fixed-bottom {
|
|
margin-top: @baseLineHeight;
|
|
}
|
|
.navbar-fixed-top .navbar-inner,
|
|
.navbar-fixed-bottom .navbar-inner {
|
|
padding: 5px;
|
|
}
|
|
.navbar .container {
|
|
width: auto;
|
|
padding: 0;
|
|
}
|
|
// Account for brand name
|
|
.navbar .brand {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
margin: 0 0 0 -5px;
|
|
}
|
|
|
|
// COLLAPSIBLE NAVBAR
|
|
// ------------------
|
|
// Nav collapse clears brand
|
|
.nav-collapse {
|
|
clear: both;
|
|
}
|
|
// Block-level the nav
|
|
.nav-collapse .nav {
|
|
float: none;
|
|
margin: 0 0 (@baseLineHeight / 2);
|
|
}
|
|
.nav-collapse .nav > li {
|
|
float: none;
|
|
}
|
|
.nav-collapse .nav > li > a {
|
|
margin-bottom: 2px;
|
|
}
|
|
.nav-collapse .nav > .divider-vertical {
|
|
display: none;
|
|
}
|
|
.nav-collapse .nav .nav-header {
|
|
color: @navbarText;
|
|
text-shadow: none;
|
|
}
|
|
// Nav and dropdown links in navbar
|
|
.nav-collapse .nav > li > a,
|
|
.nav-collapse .dropdown-menu a {
|
|
padding: 9px 15px;
|
|
font-weight: bold;
|
|
color: @navbarLinkColor;
|
|
.border-radius(3px);
|
|
}
|
|
// Buttons
|
|
.nav-collapse .btn {
|
|
padding: 4px 10px 4px;
|
|
font-weight: normal;
|
|
.border-radius(4px);
|
|
}
|
|
.nav-collapse .dropdown-menu li + li a {
|
|
margin-bottom: 2px;
|
|
}
|
|
.nav-collapse .nav > li > a:hover,
|
|
.nav-collapse .dropdown-menu a:hover {
|
|
background-color: @navbarBackground;
|
|
}
|
|
.navbar-inverse .nav-collapse .nav > li > a:hover,
|
|
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
|
|
background-color: @navbarInverseBackground;
|
|
}
|
|
// Buttons in the navbar
|
|
.nav-collapse.in .btn-group {
|
|
margin-top: 5px;
|
|
padding: 0;
|
|
}
|
|
// Dropdowns in the navbar
|
|
.nav-collapse .dropdown-menu {
|
|
position: static;
|
|
top: auto;
|
|
left: auto;
|
|
float: none;
|
|
display: block;
|
|
max-width: none;
|
|
margin: 0 15px;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
.border-radius(0);
|
|
.box-shadow(none);
|
|
}
|
|
.nav-collapse .dropdown-menu:before,
|
|
.nav-collapse .dropdown-menu:after {
|
|
display: none;
|
|
}
|
|
.nav-collapse .dropdown-menu .divider {
|
|
display: none;
|
|
}
|
|
.nav-collapse .nav > li > .dropdown-menu {
|
|
&:before,
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
// Forms in navbar
|
|
.nav-collapse .navbar-form,
|
|
.nav-collapse .navbar-search {
|
|
float: none;
|
|
padding: (@baseLineHeight / 2) 15px;
|
|
margin: (@baseLineHeight / 2) 0;
|
|
border-top: 1px solid @navbarBackground;
|
|
border-bottom: 1px solid @navbarBackground;
|
|
.box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
|
|
}
|
|
.navbar-inverse .nav-collapse .navbar-form,
|
|
.navbar-inverse .nav-collapse .navbar-search {
|
|
border-top-color: @navbarInverseBackground;
|
|
border-bottom-color: @navbarInverseBackground;
|
|
}
|
|
// Pull right (secondary) nav content
|
|
.navbar .nav-collapse .nav.pull-right {
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
// Hide everything in the navbar save .brand and toggle button */
|
|
.nav-collapse,
|
|
.nav-collapse.collapse {
|
|
overflow: hidden;
|
|
height: 0;
|
|
}
|
|
// Navbar button
|
|
.navbar .btn-navbar {
|
|
display: block;
|
|
}
|
|
|
|
// STATIC NAVBAR
|
|
// -------------
|
|
.navbar-static .navbar-inner {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// DEFAULT DESKTOP
|
|
// ---------------
|
|
|
|
@media (min-width: 980px) {
|
|
|
|
// Required to make the collapsing navbar work on regular desktops
|
|
.nav-collapse.collapse {
|
|
height: auto !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
}
|