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.

660 lines
14 KiB

4 years ago
  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-device-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. // Undo the rounded corners
  117. @media (min-width: @grid-float-breakpoint) {
  118. border-radius: 0;
  119. }
  120. }
  121. .navbar-fixed-top {
  122. top: 0;
  123. border-width: 0 0 1px;
  124. }
  125. .navbar-fixed-bottom {
  126. bottom: 0;
  127. margin-bottom: 0; // override .navbar defaults
  128. border-width: 1px 0 0;
  129. }
  130. // Brand/project name
  131. .navbar-brand {
  132. float: left;
  133. padding: @navbar-padding-vertical @navbar-padding-horizontal;
  134. font-size: @font-size-large;
  135. line-height: @line-height-computed;
  136. height: @navbar-height;
  137. &:hover,
  138. &:focus {
  139. text-decoration: none;
  140. }
  141. > img {
  142. display: block;
  143. }
  144. @media (min-width: @grid-float-breakpoint) {
  145. .navbar > .container &,
  146. .navbar > .container-fluid & {
  147. margin-left: -@navbar-padding-horizontal;
  148. }
  149. }
  150. }
  151. // Navbar toggle
  152. //
  153. // Custom button for toggling the `.navbar-collapse`, powered by the collapse
  154. // JavaScript plugin.
  155. .navbar-toggle {
  156. position: relative;
  157. float: right;
  158. margin-right: @navbar-padding-horizontal;
  159. padding: 9px 10px;
  160. .navbar-vertical-align(34px);
  161. background-color: transparent;
  162. background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  163. border: 1px solid transparent;
  164. border-radius: @border-radius-base;
  165. // We remove the `outline` here, but later compensate by attaching `:hover`
  166. // styles to `:focus`.
  167. &:focus {
  168. outline: 0;
  169. }
  170. // Bars
  171. .icon-bar {
  172. display: block;
  173. width: 22px;
  174. height: 2px;
  175. border-radius: 1px;
  176. }
  177. .icon-bar + .icon-bar {
  178. margin-top: 4px;
  179. }
  180. @media (min-width: @grid-float-breakpoint) {
  181. display: none;
  182. }
  183. }
  184. // Navbar nav links
  185. //
  186. // Builds on top of the `.nav` components with its own modifier class to make
  187. // the nav the full height of the horizontal nav (above 768px).
  188. .navbar-nav {
  189. margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
  190. > li > a {
  191. padding-top: 10px;
  192. padding-bottom: 10px;
  193. line-height: @line-height-computed;
  194. }
  195. @media (max-width: @grid-float-breakpoint-max) {
  196. // Dropdowns get custom display when collapsed
  197. .open .dropdown-menu {
  198. position: static;
  199. float: none;
  200. width: auto;
  201. margin-top: 0;
  202. background-color: transparent;
  203. border: 0;
  204. box-shadow: none;
  205. > li > a,
  206. .dropdown-header {
  207. padding: 5px 15px 5px 25px;
  208. }
  209. > li > a {
  210. line-height: @line-height-computed;
  211. &:hover,
  212. &:focus {
  213. background-image: none;
  214. }
  215. }
  216. }
  217. }
  218. // Uncollapse the nav
  219. @media (min-width: @grid-float-breakpoint) {
  220. float: left;
  221. margin: 0;
  222. > li {
  223. float: left;
  224. > a {
  225. padding-top: @navbar-padding-vertical;
  226. padding-bottom: @navbar-padding-vertical;
  227. }
  228. }
  229. }
  230. }
  231. // Navbar form
  232. //
  233. // Extension of the `.form-inline` with some extra flavor for optimum display in
  234. // our navbars.
  235. .navbar-form {
  236. margin-left: -@navbar-padding-horizontal;
  237. margin-right: -@navbar-padding-horizontal;
  238. padding: 10px @navbar-padding-horizontal;
  239. border-top: 1px solid transparent;
  240. border-bottom: 1px solid transparent;
  241. @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
  242. .box-shadow(@shadow);
  243. // Mixin behavior for optimum display
  244. .form-inline();
  245. .form-group {
  246. @media (max-width: @grid-float-breakpoint-max) {
  247. margin-bottom: 5px;
  248. &:last-child {
  249. margin-bottom: 0;
  250. }
  251. }
  252. }
  253. // Vertically center in expanded, horizontal navbar
  254. .navbar-vertical-align(@input-height-base);
  255. // Undo 100% width for pull classes
  256. @media (min-width: @grid-float-breakpoint) {
  257. width: auto;
  258. border: 0;
  259. margin-left: 0;
  260. margin-right: 0;
  261. padding-top: 0;
  262. padding-bottom: 0;
  263. .box-shadow(none);
  264. }
  265. }
  266. // Dropdown menus
  267. // Menu position and menu carets
  268. .navbar-nav > li > .dropdown-menu {
  269. margin-top: 0;
  270. .border-top-radius(0);
  271. }
  272. // Menu position and menu caret support for dropups via extra dropup class
  273. .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  274. margin-bottom: 0;
  275. .border-top-radius(@navbar-border-radius);
  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. }
  300. }
  301. // Component alignment
  302. //
  303. // Repurpose the pull utilities as their own navbar utilities to avoid specificity
  304. // issues with parents and chaining. Only do this when the navbar is uncollapsed
  305. // though so that navbar contents properly stack and align in mobile.
  306. //
  307. // Declared after the navbar components to ensure more specificity on the margins.
  308. @media (min-width: @grid-float-breakpoint) {
  309. .navbar-left { .pull-left(); }
  310. .navbar-right {
  311. .pull-right();
  312. margin-right: -@navbar-padding-horizontal;
  313. ~ .navbar-right {
  314. margin-right: 0;
  315. }
  316. }
  317. }
  318. // Alternate navbars
  319. // --------------------------------------------------
  320. // Default navbar
  321. .navbar-default {
  322. background-color: @navbar-default-bg;
  323. border-color: @navbar-default-border;
  324. .navbar-brand {
  325. color: @navbar-default-brand-color;
  326. &:hover,
  327. &:focus {
  328. color: @navbar-default-brand-hover-color;
  329. background-color: @navbar-default-brand-hover-bg;
  330. }
  331. }
  332. .navbar-text {
  333. color: @navbar-default-color;
  334. }
  335. .navbar-nav {
  336. > li > a {
  337. color: @navbar-default-link-color;
  338. &:hover,
  339. &:focus {
  340. color: @navbar-default-link-hover-color;
  341. background-color: @navbar-default-link-hover-bg;
  342. }
  343. }
  344. > .active > a {
  345. &,
  346. &:hover,
  347. &:focus {
  348. color: @navbar-default-link-active-color;
  349. background-color: @navbar-default-link-active-bg;
  350. }
  351. }
  352. > .disabled > a {
  353. &,
  354. &:hover,
  355. &:focus {
  356. color: @navbar-default-link-disabled-color;
  357. background-color: @navbar-default-link-disabled-bg;
  358. }
  359. }
  360. }
  361. .navbar-toggle {
  362. border-color: @navbar-default-toggle-border-color;
  363. &:hover,
  364. &:focus {
  365. background-color: @navbar-default-toggle-hover-bg;
  366. }
  367. .icon-bar {
  368. background-color: @navbar-default-toggle-icon-bar-bg;
  369. }
  370. }
  371. .navbar-collapse,
  372. .navbar-form {
  373. border-color: @navbar-default-border;
  374. }
  375. // Dropdown menu items
  376. .navbar-nav {
  377. // Remove background color from open dropdown
  378. > .open > a {
  379. &,
  380. &:hover,
  381. &:focus {
  382. background-color: @navbar-default-link-active-bg;
  383. color: @navbar-default-link-active-color;
  384. }
  385. }
  386. @media (max-width: @grid-float-breakpoint-max) {
  387. // Dropdowns get custom display when collapsed
  388. .open .dropdown-menu {
  389. > li > a {
  390. color: @navbar-default-link-color;
  391. &:hover,
  392. &:focus {
  393. color: @navbar-default-link-hover-color;
  394. background-color: @navbar-default-link-hover-bg;
  395. }
  396. }
  397. > .active > a {
  398. &,
  399. &:hover,
  400. &:focus {
  401. color: @navbar-default-link-active-color;
  402. background-color: @navbar-default-link-active-bg;
  403. }
  404. }
  405. > .disabled > a {
  406. &,
  407. &:hover,
  408. &:focus {
  409. color: @navbar-default-link-disabled-color;
  410. background-color: @navbar-default-link-disabled-bg;
  411. }
  412. }
  413. }
  414. }
  415. }
  416. // Links in navbars
  417. //
  418. // Add a class to ensure links outside the navbar nav are colored correctly.
  419. .navbar-link {
  420. color: @navbar-default-link-color;
  421. &:hover {
  422. color: @navbar-default-link-hover-color;
  423. }
  424. }
  425. .btn-link {
  426. color: @navbar-default-link-color;
  427. &:hover,
  428. &:focus {
  429. color: @navbar-default-link-hover-color;
  430. }
  431. &[disabled],
  432. fieldset[disabled] & {
  433. &:hover,
  434. &:focus {
  435. color: @navbar-default-link-disabled-color;
  436. }
  437. }
  438. }
  439. }
  440. // Inverse navbar
  441. .navbar-inverse {
  442. background-color: @navbar-inverse-bg;
  443. border-color: @navbar-inverse-border;
  444. .navbar-brand {
  445. color: @navbar-inverse-brand-color;
  446. &:hover,
  447. &:focus {
  448. color: @navbar-inverse-brand-hover-color;
  449. background-color: @navbar-inverse-brand-hover-bg;
  450. }
  451. }
  452. .navbar-text {
  453. color: @navbar-inverse-color;
  454. }
  455. .navbar-nav {
  456. > li > a {
  457. color: @navbar-inverse-link-color;
  458. &:hover,
  459. &:focus {
  460. color: @navbar-inverse-link-hover-color;
  461. background-color: @navbar-inverse-link-hover-bg;
  462. }
  463. }
  464. > .active > a {
  465. &,
  466. &:hover,
  467. &:focus {
  468. color: @navbar-inverse-link-active-color;
  469. background-color: @navbar-inverse-link-active-bg;
  470. }
  471. }
  472. > .disabled > a {
  473. &,
  474. &:hover,
  475. &:focus {
  476. color: @navbar-inverse-link-disabled-color;
  477. background-color: @navbar-inverse-link-disabled-bg;
  478. }
  479. }
  480. }
  481. // Darken the responsive nav toggle
  482. .navbar-toggle {
  483. border-color: @navbar-inverse-toggle-border-color;
  484. &:hover,
  485. &:focus {
  486. background-color: @navbar-inverse-toggle-hover-bg;
  487. }
  488. .icon-bar {
  489. background-color: @navbar-inverse-toggle-icon-bar-bg;
  490. }
  491. }
  492. .navbar-collapse,
  493. .navbar-form {
  494. border-color: darken(@navbar-inverse-bg, 7%);
  495. }
  496. // Dropdowns
  497. .navbar-nav {
  498. > .open > a {
  499. &,
  500. &:hover,
  501. &:focus {
  502. background-color: @navbar-inverse-link-active-bg;
  503. color: @navbar-inverse-link-active-color;
  504. }
  505. }
  506. @media (max-width: @grid-float-breakpoint-max) {
  507. // Dropdowns get custom display
  508. .open .dropdown-menu {
  509. > .dropdown-header {
  510. border-color: @navbar-inverse-border;
  511. }
  512. .divider {
  513. background-color: @navbar-inverse-border;
  514. }
  515. > li > a {
  516. color: @navbar-inverse-link-color;
  517. &:hover,
  518. &:focus {
  519. color: @navbar-inverse-link-hover-color;
  520. background-color: @navbar-inverse-link-hover-bg;
  521. }
  522. }
  523. > .active > a {
  524. &,
  525. &:hover,
  526. &:focus {
  527. color: @navbar-inverse-link-active-color;
  528. background-color: @navbar-inverse-link-active-bg;
  529. }
  530. }
  531. > .disabled > a {
  532. &,
  533. &:hover,
  534. &:focus {
  535. color: @navbar-inverse-link-disabled-color;
  536. background-color: @navbar-inverse-link-disabled-bg;
  537. }
  538. }
  539. }
  540. }
  541. }
  542. .navbar-link {
  543. color: @navbar-inverse-link-color;
  544. &:hover {
  545. color: @navbar-inverse-link-hover-color;
  546. }
  547. }
  548. .btn-link {
  549. color: @navbar-inverse-link-color;
  550. &:hover,
  551. &:focus {
  552. color: @navbar-inverse-link-hover-color;
  553. }
  554. &[disabled],
  555. fieldset[disabled] & {
  556. &:hover,
  557. &:focus {
  558. color: @navbar-inverse-link-disabled-color;
  559. }
  560. }
  561. }
  562. }