1
0

navbar.less 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. //
  2. // Navbars (Redux)
  3. // --------------------------------------------------
  4. // COMMON STYLES
  5. // -------------
  6. // Base class and wrapper
  7. .navbar {
  8. overflow: visible;
  9. margin-bottom: @baseLineHeight;
  10. // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
  11. *position: relative;
  12. *z-index: 2;
  13. }
  14. // Inner for background effects
  15. // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
  16. .navbar-inner {
  17. min-height: @navbarHeight;
  18. padding-left: 20px;
  19. padding-right: 20px;
  20. #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  21. border: 1px solid @navbarBorder;
  22. .border-radius(@baseBorderRadius);
  23. .box-shadow(0 1px 4px rgba(0,0,0,.065));
  24. // Prevent floats from breaking the navbar
  25. .clearfix();
  26. }
  27. // Set width to auto for default container
  28. // We then reset it for fixed navbars in the #gridSystem mixin
  29. .navbar .container {
  30. width: auto;
  31. }
  32. // Override the default collapsed state
  33. .nav-collapse.collapse {
  34. height: auto;
  35. overflow: visible;
  36. }
  37. // Brand: website or project name
  38. // -------------------------
  39. .navbar .brand {
  40. float: left;
  41. display: block;
  42. // Vertically center the text given @navbarHeight
  43. padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
  44. margin-left: -20px; // negative indent to left-align the text down the page
  45. font-size: 20px;
  46. font-weight: 200;
  47. color: @navbarBrandColor;
  48. text-shadow: 0 1px 0 @navbarBackgroundHighlight;
  49. &:hover,
  50. &:focus {
  51. text-decoration: none;
  52. }
  53. }
  54. // Plain text in topbar
  55. // -------------------------
  56. .navbar-text {
  57. margin-bottom: 0;
  58. line-height: @navbarHeight;
  59. color: @navbarText;
  60. }
  61. // Janky solution for now to account for links outside the .nav
  62. // -------------------------
  63. .navbar-link {
  64. color: @navbarLinkColor;
  65. &:hover,
  66. &:focus {
  67. color: @navbarLinkColorHover;
  68. }
  69. }
  70. // Dividers in navbar
  71. // -------------------------
  72. .navbar .divider-vertical {
  73. height: @navbarHeight;
  74. margin: 0 9px;
  75. border-left: 1px solid @navbarBackground;
  76. border-right: 1px solid @navbarBackgroundHighlight;
  77. }
  78. // Buttons in navbar
  79. // -------------------------
  80. .navbar .btn,
  81. .navbar .btn-group {
  82. .navbarVerticalAlign(30px); // Vertically center in navbar
  83. }
  84. .navbar .btn-group .btn,
  85. .navbar .input-prepend .btn,
  86. .navbar .input-append .btn,
  87. .navbar .input-prepend .btn-group,
  88. .navbar .input-append .btn-group {
  89. margin-top: 0; // then undo the margin here so we don't accidentally double it
  90. }
  91. // Navbar forms
  92. // -------------------------
  93. .navbar-form {
  94. margin-bottom: 0; // remove default bottom margin
  95. .clearfix();
  96. input,
  97. select,
  98. .radio,
  99. .checkbox {
  100. .navbarVerticalAlign(30px); // Vertically center in navbar
  101. }
  102. input,
  103. select,
  104. .btn {
  105. display: inline-block;
  106. margin-bottom: 0;
  107. }
  108. input[type="image"],
  109. input[type="checkbox"],
  110. input[type="radio"] {
  111. margin-top: 3px;
  112. }
  113. .input-append,
  114. .input-prepend {
  115. margin-top: 5px;
  116. white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
  117. input {
  118. margin-top: 0; // remove the margin on top since it's on the parent
  119. }
  120. }
  121. }
  122. // Navbar search
  123. // -------------------------
  124. .navbar-search {
  125. position: relative;
  126. float: left;
  127. .navbarVerticalAlign(30px); // Vertically center in navbar
  128. margin-bottom: 0;
  129. .search-query {
  130. margin-bottom: 0;
  131. padding: 4px 14px;
  132. #font > .sans-serif(13px, normal, 1);
  133. .border-radius(15px); // redeclare because of specificity of the type attribute
  134. }
  135. }
  136. // Static navbar
  137. // -------------------------
  138. .navbar-static-top {
  139. position: static;
  140. margin-bottom: 0; // remove 18px margin for default navbar
  141. .navbar-inner {
  142. .border-radius(0);
  143. }
  144. }
  145. // Fixed navbar
  146. // -------------------------
  147. // Shared (top/bottom) styles
  148. .navbar-fixed-top,
  149. .navbar-fixed-bottom {
  150. position: fixed;
  151. right: 0;
  152. left: 0;
  153. z-index: @zindexFixedNavbar;
  154. margin-bottom: 0; // remove 18px margin for default navbar
  155. }
  156. .navbar-fixed-top .navbar-inner,
  157. .navbar-static-top .navbar-inner {
  158. border-width: 0 0 1px;
  159. }
  160. .navbar-fixed-bottom .navbar-inner {
  161. border-width: 1px 0 0;
  162. }
  163. .navbar-fixed-top .navbar-inner,
  164. .navbar-fixed-bottom .navbar-inner {
  165. padding-left: 0;
  166. padding-right: 0;
  167. .border-radius(0);
  168. }
  169. // Reset container width
  170. // Required here as we reset the width earlier on and the grid mixins don't override early enough
  171. .navbar-static-top .container,
  172. .navbar-fixed-top .container,
  173. .navbar-fixed-bottom .container {
  174. #grid > .core > .span(@gridColumns);
  175. }
  176. // Fixed to top
  177. .navbar-fixed-top {
  178. top: 0;
  179. }
  180. .navbar-fixed-top,
  181. .navbar-static-top {
  182. .navbar-inner {
  183. .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
  184. }
  185. }
  186. // Fixed to bottom
  187. .navbar-fixed-bottom {
  188. bottom: 0;
  189. .navbar-inner {
  190. .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
  191. }
  192. }
  193. // NAVIGATION
  194. // ----------
  195. .navbar .nav {
  196. position: relative;
  197. left: 0;
  198. display: block;
  199. float: left;
  200. margin: 0 10px 0 0;
  201. }
  202. .navbar .nav.pull-right {
  203. float: right; // redeclare due to specificity
  204. margin-right: 0; // remove margin on float right nav
  205. }
  206. .navbar .nav > li {
  207. float: left;
  208. }
  209. // Links
  210. .navbar .nav > li > a {
  211. float: none;
  212. // Vertically center the text given @navbarHeight
  213. padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
  214. color: @navbarLinkColor;
  215. text-decoration: none;
  216. text-shadow: 0 1px 0 @navbarBackgroundHighlight;
  217. }
  218. .navbar .nav .dropdown-toggle .caret {
  219. margin-top: 8px;
  220. }
  221. // Hover/focus
  222. .navbar .nav > li > a:focus,
  223. .navbar .nav > li > a:hover {
  224. background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
  225. color: @navbarLinkColorHover;
  226. text-decoration: none;
  227. }
  228. // Active nav items
  229. .navbar .nav > .active > a,
  230. .navbar .nav > .active > a:hover,
  231. .navbar .nav > .active > a:focus {
  232. color: @navbarLinkColorActive;
  233. text-decoration: none;
  234. background-color: @navbarLinkBackgroundActive;
  235. .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
  236. }
  237. // Navbar button for toggling navbar items in responsive layouts
  238. // These definitions need to come after '.navbar .btn'
  239. .navbar .btn-navbar {
  240. display: none;
  241. float: right;
  242. padding: 7px 10px;
  243. margin-left: 5px;
  244. margin-right: 5px;
  245. .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
  246. .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
  247. }
  248. .navbar .btn-navbar .icon-bar {
  249. display: block;
  250. width: 18px;
  251. height: 2px;
  252. background-color: #f5f5f5;
  253. .border-radius(1px);
  254. .box-shadow(0 1px 0 rgba(0,0,0,.25));
  255. }
  256. .btn-navbar .icon-bar + .icon-bar {
  257. margin-top: 3px;
  258. }
  259. // Dropdown menus
  260. // --------------
  261. // Menu position and menu carets
  262. .navbar .nav > li > .dropdown-menu {
  263. &:before {
  264. content: '';
  265. display: inline-block;
  266. border-left: 7px solid transparent;
  267. border-right: 7px solid transparent;
  268. border-bottom: 7px solid #ccc;
  269. border-bottom-color: @dropdownBorder;
  270. position: absolute;
  271. top: -7px;
  272. left: 9px;
  273. }
  274. &:after {
  275. content: '';
  276. display: inline-block;
  277. border-left: 6px solid transparent;
  278. border-right: 6px solid transparent;
  279. border-bottom: 6px solid @dropdownBackground;
  280. position: absolute;
  281. top: -6px;
  282. left: 10px;
  283. }
  284. }
  285. // Menu position and menu caret support for dropups via extra dropup class
  286. .navbar-fixed-bottom .nav > li > .dropdown-menu {
  287. &:before {
  288. border-top: 7px solid #ccc;
  289. border-top-color: @dropdownBorder;
  290. border-bottom: 0;
  291. bottom: -7px;
  292. top: auto;
  293. }
  294. &:after {
  295. border-top: 6px solid @dropdownBackground;
  296. border-bottom: 0;
  297. bottom: -6px;
  298. top: auto;
  299. }
  300. }
  301. // Caret should match text color on hover/focus
  302. .navbar .nav li.dropdown > a:hover .caret,
  303. .navbar .nav li.dropdown > a:focus .caret {
  304. border-top-color: @navbarLinkColorHover;
  305. border-bottom-color: @navbarLinkColorHover;
  306. }
  307. // Remove background color from open dropdown
  308. .navbar .nav li.dropdown.open > .dropdown-toggle,
  309. .navbar .nav li.dropdown.active > .dropdown-toggle,
  310. .navbar .nav li.dropdown.open.active > .dropdown-toggle {
  311. background-color: @navbarLinkBackgroundActive;
  312. color: @navbarLinkColorActive;
  313. }
  314. .navbar .nav li.dropdown > .dropdown-toggle .caret {
  315. border-top-color: @navbarLinkColor;
  316. border-bottom-color: @navbarLinkColor;
  317. }
  318. .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
  319. .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
  320. .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  321. border-top-color: @navbarLinkColorActive;
  322. border-bottom-color: @navbarLinkColorActive;
  323. }
  324. // Right aligned menus need alt position
  325. .navbar .pull-right > li > .dropdown-menu,
  326. .navbar .nav > li > .dropdown-menu.pull-right {
  327. left: auto;
  328. right: 0;
  329. &:before {
  330. left: auto;
  331. right: 12px;
  332. }
  333. &:after {
  334. left: auto;
  335. right: 13px;
  336. }
  337. .dropdown-menu {
  338. left: auto;
  339. right: 100%;
  340. margin-left: 0;
  341. margin-right: -1px;
  342. .border-radius(6px 0 6px 6px);
  343. }
  344. }
  345. // Inverted navbar
  346. // -------------------------
  347. .navbar-inverse {
  348. .navbar-inner {
  349. #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
  350. border-color: @navbarInverseBorder;
  351. }
  352. .brand,
  353. .nav > li > a {
  354. color: @navbarInverseLinkColor;
  355. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  356. &:hover,
  357. &:focus {
  358. color: @navbarInverseLinkColorHover;
  359. }
  360. }
  361. .brand {
  362. color: @navbarInverseBrandColor;
  363. }
  364. .navbar-text {
  365. color: @navbarInverseText;
  366. }
  367. .nav > li > a:focus,
  368. .nav > li > a:hover {
  369. background-color: @navbarInverseLinkBackgroundHover;
  370. color: @navbarInverseLinkColorHover;
  371. }
  372. .nav .active > a,
  373. .nav .active > a:hover,
  374. .nav .active > a:focus {
  375. color: @navbarInverseLinkColorActive;
  376. background-color: @navbarInverseLinkBackgroundActive;
  377. }
  378. // Inline text links
  379. .navbar-link {
  380. color: @navbarInverseLinkColor;
  381. &:hover,
  382. &:focus {
  383. color: @navbarInverseLinkColorHover;
  384. }
  385. }
  386. // Dividers in navbar
  387. .divider-vertical {
  388. border-left-color: @navbarInverseBackground;
  389. border-right-color: @navbarInverseBackgroundHighlight;
  390. }
  391. // Dropdowns
  392. .nav li.dropdown.open > .dropdown-toggle,
  393. .nav li.dropdown.active > .dropdown-toggle,
  394. .nav li.dropdown.open.active > .dropdown-toggle {
  395. background-color: @navbarInverseLinkBackgroundActive;
  396. color: @navbarInverseLinkColorActive;
  397. }
  398. .nav li.dropdown > a:hover .caret,
  399. .nav li.dropdown > a:focus .caret {
  400. border-top-color: @navbarInverseLinkColorActive;
  401. border-bottom-color: @navbarInverseLinkColorActive;
  402. }
  403. .nav li.dropdown > .dropdown-toggle .caret {
  404. border-top-color: @navbarInverseLinkColor;
  405. border-bottom-color: @navbarInverseLinkColor;
  406. }
  407. .nav li.dropdown.open > .dropdown-toggle .caret,
  408. .nav li.dropdown.active > .dropdown-toggle .caret,
  409. .nav li.dropdown.open.active > .dropdown-toggle .caret {
  410. border-top-color: @navbarInverseLinkColorActive;
  411. border-bottom-color: @navbarInverseLinkColorActive;
  412. }
  413. // Navbar search
  414. .navbar-search {
  415. .search-query {
  416. color: @white;
  417. background-color: @navbarInverseSearchBackground;
  418. border-color: @navbarInverseSearchBorder;
  419. .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
  420. .transition(none);
  421. .placeholder(@navbarInverseSearchPlaceholderColor);
  422. // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
  423. &:focus,
  424. &.focused {
  425. padding: 5px 15px;
  426. color: @grayDark;
  427. text-shadow: 0 1px 0 @white;
  428. background-color: @navbarInverseSearchBackgroundFocus;
  429. border: 0;
  430. .box-shadow(0 0 3px rgba(0,0,0,.15));
  431. outline: 0;
  432. }
  433. }
  434. }
  435. // Navbar collapse button
  436. .btn-navbar {
  437. .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
  438. }
  439. }