2012-06-29 00:46:45 -04:00
|
|
|
//
|
|
|
|
// Responsive: Navbar
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
2012-03-23 00:54:54 -04:00
|
|
|
// TABLETS AND BELOW
|
|
|
|
// -----------------
|
|
|
|
@media (max-width: 979px) {
|
|
|
|
|
|
|
|
// UNFIX THE TOPBAR
|
|
|
|
// ----------------
|
|
|
|
// Remove any padding from the body
|
|
|
|
body {
|
|
|
|
padding-top: 0;
|
|
|
|
}
|
2012-06-28 23:59:16 -04:00
|
|
|
// Unfix the navbars
|
2012-05-14 01:11:35 -04:00
|
|
|
.navbar-fixed-top,
|
2012-06-28 23:59:16 -04:00
|
|
|
.navbar-fixed-bottom,
|
|
|
|
.navbar-subnav-fixed {
|
2012-03-23 00:54:54 -04:00
|
|
|
position: static;
|
2012-05-14 01:11:35 -04:00
|
|
|
}
|
|
|
|
.navbar-fixed-top {
|
2012-03-23 00:54:54 -04:00
|
|
|
margin-bottom: @baseLineHeight;
|
|
|
|
}
|
2012-05-14 01:11:35 -04:00
|
|
|
.navbar-fixed-bottom {
|
|
|
|
margin-top: @baseLineHeight;
|
|
|
|
}
|
|
|
|
.navbar-fixed-top .navbar-inner,
|
|
|
|
.navbar-fixed-bottom .navbar-inner {
|
2012-03-23 00:54:54 -04:00
|
|
|
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;
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
|
|
|
|
// COLLAPSIBLE NAVBAR
|
|
|
|
// ------------------
|
2012-03-23 00:54:54 -04:00
|
|
|
// Nav collapse clears brand
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse {
|
2012-04-05 15:48:17 -04:00
|
|
|
clear: both;
|
2012-03-23 00:54:54 -04:00
|
|
|
}
|
|
|
|
// Block-level the nav
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .nav {
|
2012-03-23 00:54:54 -04:00
|
|
|
float: none;
|
|
|
|
margin: 0 0 (@baseLineHeight / 2);
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .nav > li {
|
2012-03-23 00:54:54 -04:00
|
|
|
float: none;
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .nav > li > a {
|
2012-03-23 00:54:54 -04:00
|
|
|
margin-bottom: 2px;
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .nav > .divider-vertical {
|
2012-03-23 00:54:54 -04:00
|
|
|
display: none;
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .nav .nav-header {
|
2012-03-23 00:54:54 -04:00
|
|
|
color: @navbarText;
|
|
|
|
text-shadow: none;
|
|
|
|
}
|
|
|
|
// Nav and dropdown links in navbar
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .nav > li > a,
|
|
|
|
.nav-collapse .dropdown-menu a {
|
2012-03-23 00:54:54 -04:00
|
|
|
padding: 6px 15px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: @navbarLinkColor;
|
|
|
|
.border-radius(3px);
|
|
|
|
}
|
2012-04-01 18:22:52 -04:00
|
|
|
// Buttons
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .btn {
|
2012-04-01 18:22:52 -04:00
|
|
|
padding: 4px 10px 4px;
|
|
|
|
font-weight: normal;
|
|
|
|
.border-radius(4px);
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .dropdown-menu li + li a {
|
2012-03-23 00:54:54 -04:00
|
|
|
margin-bottom: 2px;
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .nav > li > a:hover,
|
|
|
|
.nav-collapse .dropdown-menu a:hover {
|
2012-03-23 00:54:54 -04:00
|
|
|
background-color: @navbarBackground;
|
|
|
|
}
|
2012-04-01 18:22:52 -04:00
|
|
|
// Buttons in the navbar
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse.in .btn-group {
|
2012-04-01 18:22:52 -04:00
|
|
|
margin-top: 5px;
|
|
|
|
padding: 0;
|
|
|
|
}
|
2012-03-23 00:54:54 -04:00
|
|
|
// Dropdowns in the navbar
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .dropdown-menu {
|
2012-03-23 00:54:54 -04:00
|
|
|
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);
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .dropdown-menu:before,
|
|
|
|
.nav-collapse .dropdown-menu:after {
|
2012-03-23 00:54:54 -04:00
|
|
|
display: none;
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
.nav-collapse .dropdown-menu .divider {
|
2012-03-23 00:54:54 -04:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
// Forms in navbar
|
2012-04-01 18:22:52 -04:00
|
|
|
.nav-collapse .navbar-form,
|
|
|
|
.nav-collapse .navbar-search {
|
2012-03-23 00:54:54 -04:00
|
|
|
float: none;
|
|
|
|
padding: (@baseLineHeight / 2) 15px;
|
|
|
|
margin: (@baseLineHeight / 2) 0;
|
|
|
|
border-top: 1px solid @navbarBackground;
|
|
|
|
border-bottom: 1px solid @navbarBackground;
|
2012-04-01 00:06:16 -04:00
|
|
|
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
|
2012-03-23 00:54:54 -04:00
|
|
|
}
|
|
|
|
// Pull right (secondary) nav content
|
2012-04-01 18:22:52 -04:00
|
|
|
.navbar .nav-collapse .nav.pull-right {
|
2012-03-23 00:54:54 -04:00
|
|
|
float: none;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
2012-04-15 02:06:00 -04:00
|
|
|
// Hide everything in the navbar save .brand and toggle button */
|
|
|
|
.nav-collapse,
|
|
|
|
.nav-collapse.collapse {
|
|
|
|
overflow: hidden;
|
|
|
|
height: 0;
|
2012-03-23 00:54:54 -04:00
|
|
|
}
|
|
|
|
// Navbar button
|
2012-04-01 18:22:52 -04:00
|
|
|
.navbar .btn-navbar {
|
2012-03-23 00:54:54 -04:00
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2012-04-15 02:06:00 -04:00
|
|
|
// STATIC NAVBAR
|
|
|
|
// -------------
|
|
|
|
.navbar-static .navbar-inner {
|
|
|
|
padding-left: 10px;
|
|
|
|
padding-right: 10px;
|
2012-03-23 00:54:54 -04:00
|
|
|
}
|
2012-06-28 23:59:16 -04:00
|
|
|
|
|
|
|
// STATIC SUBNAV
|
|
|
|
// -------------
|
|
|
|
.navbar-subnav {
|
|
|
|
width: auto;
|
|
|
|
height: auto;
|
|
|
|
-webkit-box-shadow: none;
|
|
|
|
-moz-box-shadow: none;
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
.navbar-subnav .navbar-inner {
|
|
|
|
background-color: #fff;
|
|
|
|
background-image: none; // Remove gradient
|
|
|
|
}
|
|
|
|
.navbar-subnav .nav {
|
|
|
|
float: none;
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
.navbar-subnav .nav > li {
|
|
|
|
float: none;
|
|
|
|
}
|
|
|
|
.navbar-subnav .nav > li > a {
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
.navbar-subnav .nav > li > a:hover {
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
}
|
|
|
|
.navbar-subnav .nav > li + li > a {
|
|
|
|
border-top: 1px solid #e5e5e5;
|
|
|
|
}
|
|
|
|
.navbar-subnav .nav > li:first-child > a,
|
|
|
|
.navbar-subnav .nav > li:first-child > a:hover {
|
|
|
|
-webkit-border-radius: 4px 4px 0 0;
|
|
|
|
-moz-border-radius: 4px 4px 0 0;
|
|
|
|
border-radius: 4px 4px 0 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2012-03-23 00:54:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// DEFAULT DESKTOP
|
|
|
|
// ---------------
|
|
|
|
|
|
|
|
@media (min-width: 980px) {
|
2012-06-25 00:03:39 -04:00
|
|
|
|
|
|
|
// Required to make the collapsing navbar work on regular desktops
|
2012-03-23 00:54:54 -04:00
|
|
|
.nav-collapse.collapse {
|
|
|
|
height: auto !important;
|
|
|
|
overflow: visible !important;
|
|
|
|
}
|
2012-06-25 00:03:39 -04:00
|
|
|
|
|
|
|
}
|