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.

616 lines
14 KiB

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