navbar.less 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655
  1. //
  2. // Navbars
  3. // --------------------------------------------------
  4. // Wrapper and base class
  5. //
  6. // Provide a static navbar from which we expand to create full-width, fixed, and
  7. // other navbar variations.
  8. .navbar {
  9. position: relative;
  10. min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  11. margin-bottom: @navbar-margin-bottom;
  12. border: 1px solid transparent;
  13. // Prevent floats from breaking the navbar
  14. &:extend(.clearfix all);
  15. @media (min-width: @grid-float-breakpoint) {
  16. border-radius: @navbar-border-radius;
  17. }
  18. }
  19. // Navbar heading
  20. //
  21. // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
  22. // styling of responsive aspects.
  23. .navbar-header {
  24. &:extend(.clearfix all);
  25. @media (min-width: @grid-float-breakpoint) {
  26. float: left;
  27. }
  28. }
  29. // Navbar collapse (body)
  30. //
  31. // Group your navbar content into this for easy collapsing and expanding across
  32. // various device sizes. By default, this content is collapsed when <768px, but
  33. // will expand past that for a horizontal display.
  34. //
  35. // To start (on mobile devices) the navbar links, forms, and buttons are stacked
  36. // vertically and include a `max-height` to overflow in case you have too much
  37. // content for the user's viewport.
  38. .navbar-collapse {
  39. overflow-x: visible;
  40. padding-right: @navbar-padding-horizontal;
  41. padding-left: @navbar-padding-horizontal;
  42. border-top: 1px solid transparent;
  43. box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  44. &:extend(.clearfix all);
  45. -webkit-overflow-scrolling: touch;
  46. &.in {
  47. overflow-y: auto;
  48. }
  49. @media (min-width: @grid-float-breakpoint) {
  50. width: auto;
  51. border-top: 0;
  52. box-shadow: none;
  53. &.collapse {
  54. display: block !important;
  55. height: auto !important;
  56. padding-bottom: 0; // Override default setting
  57. overflow: visible !important;
  58. }
  59. &.in {
  60. overflow-y: visible;
  61. }
  62. // Undo the collapse side padding for navbars with containers to ensure
  63. // alignment of right-aligned contents.
  64. .navbar-fixed-top &,
  65. .navbar-static-top &,
  66. .navbar-fixed-bottom & {
  67. padding-left: 0;
  68. padding-right: 0;
  69. }
  70. }
  71. }
  72. .navbar-fixed-top,
  73. .navbar-fixed-bottom {
  74. .navbar-collapse {
  75. max-height: @navbar-collapse-max-height;
  76. @media (max-width: @screen-xs-min) and (orientation: landscape) {
  77. max-height: 200px;
  78. }
  79. }
  80. }
  81. // Both navbar header and collapse
  82. //
  83. // When a container is present, change the behavior of the header and collapse.
  84. .container,
  85. .container-fluid {
  86. > .navbar-header,
  87. > .navbar-collapse {
  88. margin-right: -@navbar-padding-horizontal;
  89. margin-left: -@navbar-padding-horizontal;
  90. @media (min-width: @grid-float-breakpoint) {
  91. margin-right: 0;
  92. margin-left: 0;
  93. }
  94. }
  95. }
  96. //
  97. // Navbar alignment options
  98. //
  99. // Display the navbar across the entirety of the page or fixed it to the top or
  100. // bottom of the page.
  101. // Static top (unfixed, but 100% wide) navbar
  102. .navbar-static-top {
  103. z-index: @zindex-navbar;
  104. border-width: 0 0 1px;
  105. @media (min-width: @grid-float-breakpoint) {
  106. border-radius: 0;
  107. }
  108. }
  109. // Fix the top/bottom navbars when screen real estate supports it
  110. .navbar-fixed-top,
  111. .navbar-fixed-bottom {
  112. position: fixed;
  113. right: 0;
  114. left: 0;
  115. z-index: @zindex-navbar-fixed;
  116. .translate3d(0, 0, 0);
  117. // Undo the rounded corners
  118. @media (min-width: @grid-float-breakpoint) {
  119. border-radius: 0;
  120. }
  121. }
  122. .navbar-fixed-top {
  123. top: 0;
  124. border-width: 0 0 1px;
  125. }
  126. .navbar-fixed-bottom {
  127. bottom: 0;
  128. margin-bottom: 0; // override .navbar defaults
  129. border-width: 1px 0 0;
  130. }
  131. // Brand/project name
  132. .navbar-brand {
  133. float: left;
  134. padding: @navbar-padding-vertical @navbar-padding-horizontal;
  135. font-size: @font-size-large;
  136. line-height: @line-height-computed;
  137. height: @navbar-height;
  138. &:hover,
  139. &:focus {
  140. text-decoration: none;
  141. }
  142. @media (min-width: @grid-float-breakpoint) {
  143. .navbar > .container &,
  144. .navbar > .container-fluid & {
  145. margin-left: -@navbar-padding-horizontal;
  146. }
  147. }
  148. }
  149. // Navbar toggle
  150. //
  151. // Custom button for toggling the `.navbar-collapse`, powered by the collapse
  152. // JavaScript plugin.
  153. .navbar-toggle {
  154. position: relative;
  155. float: right;
  156. margin-right: @navbar-padding-horizontal;
  157. padding: 9px 10px;
  158. .navbar-vertical-align(34px);
  159. background-color: transparent;
  160. background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  161. border: 1px solid transparent;
  162. border-radius: @border-radius-base;
  163. // We remove the `outline` here, but later compensate by attaching `:hover`
  164. // styles to `:focus`.
  165. &:focus {
  166. outline: 0;
  167. }
  168. // Bars
  169. .icon-bar {
  170. display: block;
  171. width: 22px;
  172. height: 2px;
  173. border-radius: 1px;
  174. }
  175. .icon-bar + .icon-bar {
  176. margin-top: 4px;
  177. }
  178. @media (min-width: @grid-float-breakpoint) {
  179. display: none;
  180. }
  181. }
  182. // Navbar nav links
  183. //
  184. // Builds on top of the `.nav` components with its own modifier class to make
  185. // the nav the full height of the horizontal nav (above 768px).
  186. .navbar-nav {
  187. margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
  188. > li > a {
  189. padding-top: 10px;
  190. padding-bottom: 10px;
  191. line-height: @line-height-computed;
  192. }
  193. @media (max-width: @grid-float-breakpoint-max) {
  194. // Dropdowns get custom display when collapsed
  195. .open .dropdown-menu {
  196. position: static;
  197. float: none;
  198. width: auto;
  199. margin-top: 0;
  200. background-color: transparent;
  201. border: 0;
  202. box-shadow: none;
  203. > li > a,
  204. .dropdown-header {
  205. padding: 5px 15px 5px 25px;
  206. }
  207. > li > a {
  208. line-height: @line-height-computed;
  209. &:hover,
  210. &:focus {
  211. background-image: none;
  212. }
  213. }
  214. }
  215. }
  216. // Uncollapse the nav
  217. @media (min-width: @grid-float-breakpoint) {
  218. float: left;
  219. margin: 0;
  220. > li {
  221. float: left;
  222. > a {
  223. padding-top: @navbar-padding-vertical;
  224. padding-bottom: @navbar-padding-vertical;
  225. }
  226. }
  227. &.navbar-right:last-child {
  228. margin-right: -@navbar-padding-horizontal;
  229. }
  230. }
  231. }
  232. // Component alignment
  233. //
  234. // Repurpose the pull utilities as their own navbar utilities to avoid specificity
  235. // issues with parents and chaining. Only do this when the navbar is uncollapsed
  236. // though so that navbar contents properly stack and align in mobile.
  237. @media (min-width: @grid-float-breakpoint) {
  238. .navbar-left { .pull-left(); }
  239. .navbar-right { .pull-right(); }
  240. }
  241. // Navbar form
  242. //
  243. // Extension of the `.form-inline` with some extra flavor for optimum display in
  244. // our navbars.
  245. .navbar-form {
  246. margin-left: -@navbar-padding-horizontal;
  247. margin-right: -@navbar-padding-horizontal;
  248. padding: 10px @navbar-padding-horizontal;
  249. border-top: 1px solid transparent;
  250. border-bottom: 1px solid transparent;
  251. @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
  252. .box-shadow(@shadow);
  253. // Mixin behavior for optimum display
  254. .form-inline();
  255. .form-group {
  256. @media (max-width: @grid-float-breakpoint-max) {
  257. margin-bottom: 5px;
  258. }
  259. }
  260. // Vertically center in expanded, horizontal navbar
  261. .navbar-vertical-align(@input-height-base);
  262. // Undo 100% width for pull classes
  263. @media (min-width: @grid-float-breakpoint) {
  264. width: auto;
  265. border: 0;
  266. margin-left: 0;
  267. margin-right: 0;
  268. padding-top: 0;
  269. padding-bottom: 0;
  270. .box-shadow(none);
  271. // Outdent the form if last child to line up with content down the page
  272. &.navbar-right:last-child {
  273. margin-right: -@navbar-padding-horizontal;
  274. }
  275. }
  276. }
  277. // Dropdown menus
  278. // Menu position and menu carets
  279. .navbar-nav > li > .dropdown-menu {
  280. margin-top: 0;
  281. .border-top-radius(0);
  282. }
  283. // Menu position and menu caret support for dropups via extra dropup class
  284. .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  285. .border-bottom-radius(0);
  286. }
  287. // Buttons in navbars
  288. //
  289. // Vertically center a button within a navbar (when *not* in a form).
  290. .navbar-btn {
  291. .navbar-vertical-align(@input-height-base);
  292. &.btn-sm {
  293. .navbar-vertical-align(@input-height-small);
  294. }
  295. &.btn-xs {
  296. .navbar-vertical-align(22);
  297. }
  298. }
  299. // Text in navbars
  300. //
  301. // Add a class to make any element properly align itself vertically within the navbars.
  302. .navbar-text {
  303. .navbar-vertical-align(@line-height-computed);
  304. @media (min-width: @grid-float-breakpoint) {
  305. float: left;
  306. margin-left: @navbar-padding-horizontal;
  307. margin-right: @navbar-padding-horizontal;
  308. // Outdent the form if last child to line up with content down the page
  309. &.navbar-right:last-child {
  310. margin-right: 0;
  311. }
  312. }
  313. }
  314. // Alternate navbars
  315. // --------------------------------------------------
  316. // Default navbar
  317. .navbar-default {
  318. background-color: @navbar-default-bg;
  319. border-color: @navbar-default-border;
  320. .navbar-brand {
  321. color: @navbar-default-brand-color;
  322. &:hover,
  323. &:focus {
  324. color: @navbar-default-brand-hover-color;
  325. background-color: @navbar-default-brand-hover-bg;
  326. }
  327. }
  328. .navbar-text {
  329. color: @navbar-default-color;
  330. }
  331. .navbar-nav {
  332. > li > a {
  333. color: @navbar-default-link-color;
  334. &:hover,
  335. &:focus {
  336. color: @navbar-default-link-hover-color;
  337. background-color: @navbar-default-link-hover-bg;
  338. }
  339. }
  340. > .active > a {
  341. &,
  342. &:hover,
  343. &:focus {
  344. color: @navbar-default-link-active-color;
  345. background-color: @navbar-default-link-active-bg;
  346. }
  347. }
  348. > .disabled > a {
  349. &,
  350. &:hover,
  351. &:focus {
  352. color: @navbar-default-link-disabled-color;
  353. background-color: @navbar-default-link-disabled-bg;
  354. }
  355. }
  356. }
  357. .navbar-toggle {
  358. border-color: @navbar-default-toggle-border-color;
  359. &:hover,
  360. &:focus {
  361. background-color: @navbar-default-toggle-hover-bg;
  362. }
  363. .icon-bar {
  364. background-color: @navbar-default-toggle-icon-bar-bg;
  365. }
  366. }
  367. .navbar-collapse,
  368. .navbar-form {
  369. border-color: @navbar-default-border;
  370. }
  371. // Dropdown menu items
  372. .navbar-nav {
  373. // Remove background color from open dropdown
  374. > .open > a {
  375. &,
  376. &:hover,
  377. &:focus {
  378. background-color: @navbar-default-link-active-bg;
  379. color: @navbar-default-link-active-color;
  380. }
  381. }
  382. @media (max-width: @grid-float-breakpoint-max) {
  383. // Dropdowns get custom display when collapsed
  384. .open .dropdown-menu {
  385. > li > a {
  386. color: @navbar-default-link-color;
  387. &:hover,
  388. &:focus {
  389. color: @navbar-default-link-hover-color;
  390. background-color: @navbar-default-link-hover-bg;
  391. }
  392. }
  393. > .active > a {
  394. &,
  395. &:hover,
  396. &:focus {
  397. color: @navbar-default-link-active-color;
  398. background-color: @navbar-default-link-active-bg;
  399. }
  400. }
  401. > .disabled > a {
  402. &,
  403. &:hover,
  404. &:focus {
  405. color: @navbar-default-link-disabled-color;
  406. background-color: @navbar-default-link-disabled-bg;
  407. }
  408. }
  409. }
  410. }
  411. }
  412. // Links in navbars
  413. //
  414. // Add a class to ensure links outside the navbar nav are colored correctly.
  415. .navbar-link {
  416. color: @navbar-default-link-color;
  417. &:hover {
  418. color: @navbar-default-link-hover-color;
  419. }
  420. }
  421. .btn-link {
  422. color: @navbar-default-link-color;
  423. &:hover,
  424. &:focus {
  425. color: @navbar-default-link-hover-color;
  426. }
  427. &[disabled],
  428. fieldset[disabled] & {
  429. &:hover,
  430. &:focus {
  431. color: @navbar-default-link-disabled-color;
  432. }
  433. }
  434. }
  435. }
  436. // Inverse navbar
  437. .navbar-inverse {
  438. background-color: @navbar-inverse-bg;
  439. border-color: @navbar-inverse-border;
  440. .navbar-brand {
  441. color: @navbar-inverse-brand-color;
  442. &:hover,
  443. &:focus {
  444. color: @navbar-inverse-brand-hover-color;
  445. background-color: @navbar-inverse-brand-hover-bg;
  446. }
  447. }
  448. .navbar-text {
  449. color: @navbar-inverse-color;
  450. }
  451. .navbar-nav {
  452. > li > a {
  453. color: @navbar-inverse-link-color;
  454. &:hover,
  455. &:focus {
  456. color: @navbar-inverse-link-hover-color;
  457. background-color: @navbar-inverse-link-hover-bg;
  458. }
  459. }
  460. > .active > a {
  461. &,
  462. &:hover,
  463. &:focus {
  464. color: @navbar-inverse-link-active-color;
  465. background-color: @navbar-inverse-link-active-bg;
  466. }
  467. }
  468. > .disabled > a {
  469. &,
  470. &:hover,
  471. &:focus {
  472. color: @navbar-inverse-link-disabled-color;
  473. background-color: @navbar-inverse-link-disabled-bg;
  474. }
  475. }
  476. }
  477. // Darken the responsive nav toggle
  478. .navbar-toggle {
  479. border-color: @navbar-inverse-toggle-border-color;
  480. &:hover,
  481. &:focus {
  482. background-color: @navbar-inverse-toggle-hover-bg;
  483. }
  484. .icon-bar {
  485. background-color: @navbar-inverse-toggle-icon-bar-bg;
  486. }
  487. }
  488. .navbar-collapse,
  489. .navbar-form {
  490. border-color: darken(@navbar-inverse-bg, 7%);
  491. }
  492. // Dropdowns
  493. .navbar-nav {
  494. > .open > a {
  495. &,
  496. &:hover,
  497. &:focus {
  498. background-color: @navbar-inverse-link-active-bg;
  499. color: @navbar-inverse-link-active-color;
  500. }
  501. }
  502. @media (max-width: @grid-float-breakpoint-max) {
  503. // Dropdowns get custom display
  504. .open .dropdown-menu {
  505. > .dropdown-header {
  506. border-color: @navbar-inverse-border;
  507. }
  508. .divider {
  509. background-color: @navbar-inverse-border;
  510. }
  511. > li > a {
  512. color: @navbar-inverse-link-color;
  513. &:hover,
  514. &:focus {
  515. color: @navbar-inverse-link-hover-color;
  516. background-color: @navbar-inverse-link-hover-bg;
  517. }
  518. }
  519. > .active > a {
  520. &,
  521. &:hover,
  522. &:focus {
  523. color: @navbar-inverse-link-active-color;
  524. background-color: @navbar-inverse-link-active-bg;
  525. }
  526. }
  527. > .disabled > a {
  528. &,
  529. &:hover,
  530. &:focus {
  531. color: @navbar-inverse-link-disabled-color;
  532. background-color: @navbar-inverse-link-disabled-bg;
  533. }
  534. }
  535. }
  536. }
  537. }
  538. .navbar-link {
  539. color: @navbar-inverse-link-color;
  540. &:hover {
  541. color: @navbar-inverse-link-hover-color;
  542. }
  543. }
  544. .btn-link {
  545. color: @navbar-inverse-link-color;
  546. &:hover,
  547. &:focus {
  548. color: @navbar-inverse-link-hover-color;
  549. }
  550. &[disabled],
  551. fieldset[disabled] & {
  552. &:hover,
  553. &:focus {
  554. color: @navbar-inverse-link-disabled-color;
  555. }
  556. }
  557. }
  558. }