1//
2// Responsive: Navbar
3// --------------------------------------------------
4
5
6// TABLETS AND BELOW
7// -----------------
8@media (max-width: @navbarCollapseWidth) {
9
10  // UNFIX THE TOPBAR
11  // ----------------
12  // Remove any padding from the body
13  body {
14    padding-top: 0;
15  }
16  // Unfix the navbars
17  .navbar-fixed-top,
18  .navbar-fixed-bottom {
19    position: static;
20  }
21  .navbar-fixed-top {
22    margin-bottom: @baseLineHeight;
23  }
24  .navbar-fixed-bottom {
25    margin-top: @baseLineHeight;
26  }
27  .navbar-fixed-top .navbar-inner,
28  .navbar-fixed-bottom .navbar-inner {
29    padding: 5px;
30  }
31  .navbar .container {
32    width: auto;
33    padding: 0;
34  }
35  // Account for brand name
36  .navbar .brand {
37    padding-left: 10px;
38    padding-right: 10px;
39    margin: 0 0 0 -5px;
40  }
41
42  // COLLAPSIBLE NAVBAR
43  // ------------------
44  // Nav collapse clears brand
45  .nav-collapse {
46    clear: both;
47  }
48  // Block-level the nav
49  .nav-collapse .nav {
50    float: none;
51    margin: 0 0 (@baseLineHeight / 2);
52  }
53  .nav-collapse .nav > li {
54    float: none;
55  }
56  .nav-collapse .nav > li > a {
57    margin-bottom: 2px;
58  }
59  .nav-collapse .nav > .divider-vertical {
60    display: none;
61  }
62  .nav-collapse .nav .nav-header {
63    color: @navbarText;
64    text-shadow: none;
65  }
66  // Nav and dropdown links in navbar
67  .nav-collapse .nav > li > a,
68  .nav-collapse .dropdown-menu a {
69    padding: 9px 15px;
70    font-weight: bold;
71    color: @navbarLinkColor;
72    .border-radius(3px);
73  }
74  // Buttons
75  .nav-collapse .btn {
76    padding: 4px 10px 4px;
77    font-weight: normal;
78    .border-radius(@baseBorderRadius);
79  }
80  .nav-collapse .dropdown-menu li + li a {
81    margin-bottom: 2px;
82  }
83  .nav-collapse .nav > li > a:hover,
84  .nav-collapse .nav > li > a:focus,
85  .nav-collapse .dropdown-menu a:hover,
86  .nav-collapse .dropdown-menu a:focus {
87    background-color: @navbarBackground;
88  }
89  .navbar-inverse .nav-collapse .nav > li > a,
90  .navbar-inverse .nav-collapse .dropdown-menu a {
91    color: @navbarInverseLinkColor;
92  }
93  .navbar-inverse .nav-collapse .nav > li > a:hover,
94  .navbar-inverse .nav-collapse .nav > li > a:focus,
95  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
96  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
97    background-color: @navbarInverseBackground;
98  }
99  // Buttons in the navbar
100  .nav-collapse.in .btn-group {
101    margin-top: 5px;
102    padding: 0;
103  }
104  // Dropdowns in the navbar
105  .nav-collapse .dropdown-menu {
106    position: static;
107    top: auto;
108    left: auto;
109    float: none;
110    display: none;
111    max-width: none;
112    margin: 0 15px;
113    padding: 0;
114    background-color: transparent;
115    border: none;
116    .border-radius(0);
117    .box-shadow(none);
118  }
119  .nav-collapse .open > .dropdown-menu {
120    display: block;
121  }
122
123  .nav-collapse .dropdown-menu:before,
124  .nav-collapse .dropdown-menu:after {
125    display: none;
126  }
127  .nav-collapse .dropdown-menu .divider {
128    display: none;
129  }
130  .nav-collapse .nav > li > .dropdown-menu {
131    &:before,
132    &:after {
133      display: none;
134    }
135  }
136  // Forms in navbar
137  .nav-collapse .navbar-form,
138  .nav-collapse .navbar-search {
139    float: none;
140    padding: (@baseLineHeight / 2) 15px;
141    margin: (@baseLineHeight / 2) 0;
142    border-top: 1px solid @navbarBackground;
143    border-bottom: 1px solid @navbarBackground;
144    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
145  }
146  .navbar-inverse .nav-collapse .navbar-form,
147  .navbar-inverse .nav-collapse .navbar-search {
148    border-top-color: @navbarInverseBackground;
149    border-bottom-color: @navbarInverseBackground;
150  }
151  // Pull right (secondary) nav content
152  .navbar .nav-collapse .nav.pull-right {
153    float: none;
154    margin-left: 0;
155  }
156  // Hide everything in the navbar save .brand and toggle button */
157  .nav-collapse,
158  .nav-collapse.collapse {
159    overflow: hidden;
160    height: 0;
161  }
162  // Navbar button
163  .navbar .btn-navbar {
164    display: block;
165  }
166
167  // STATIC NAVBAR
168  // -------------
169  .navbar-static .navbar-inner {
170    padding-left:  10px;
171    padding-right: 10px;
172  }
173
174
175}
176
177
178// DEFAULT DESKTOP
179// ---------------
180
181@media (min-width: @navbarCollapseDesktopWidth) {
182
183  // Required to make the collapsing navbar work on regular desktops
184  .nav-collapse.collapse {
185    height: auto !important;
186    overflow: visible !important;
187  }
188
189}
190