_navbar.scss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662
  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. @include clearfix;
  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. @include clearfix;
  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. @include clearfix;
  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. @include 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. @include box-shadow($shadow);
  243. // Mixin behavior for optimum display
  244. @include 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. @include 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. @include 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. @include 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. @include border-top-radius($navbar-border-radius);
  276. @include 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. @include navbar-vertical-align($input-height-base);
  283. &.btn-sm {
  284. @include navbar-vertical-align($input-height-small);
  285. }
  286. &.btn-xs {
  287. @include 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. @include 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 {
  310. float: left !important;
  311. }
  312. .navbar-right {
  313. float: right !important;
  314. margin-right: -$navbar-padding-horizontal;
  315. ~ .navbar-right {
  316. margin-right: 0;
  317. }
  318. }
  319. }
  320. // Alternate navbars
  321. // --------------------------------------------------
  322. // Default navbar
  323. .navbar-default {
  324. background-color: $navbar-default-bg;
  325. border-color: $navbar-default-border;
  326. .navbar-brand {
  327. color: $navbar-default-brand-color;
  328. &:hover,
  329. &:focus {
  330. color: $navbar-default-brand-hover-color;
  331. background-color: $navbar-default-brand-hover-bg;
  332. }
  333. }
  334. .navbar-text {
  335. color: $navbar-default-color;
  336. }
  337. .navbar-nav {
  338. > li > a {
  339. color: $navbar-default-link-color;
  340. &:hover,
  341. &:focus {
  342. color: $navbar-default-link-hover-color;
  343. background-color: $navbar-default-link-hover-bg;
  344. }
  345. }
  346. > .active > a {
  347. &,
  348. &:hover,
  349. &:focus {
  350. color: $navbar-default-link-active-color;
  351. background-color: $navbar-default-link-active-bg;
  352. }
  353. }
  354. > .disabled > a {
  355. &,
  356. &:hover,
  357. &:focus {
  358. color: $navbar-default-link-disabled-color;
  359. background-color: $navbar-default-link-disabled-bg;
  360. }
  361. }
  362. }
  363. .navbar-toggle {
  364. border-color: $navbar-default-toggle-border-color;
  365. &:hover,
  366. &:focus {
  367. background-color: $navbar-default-toggle-hover-bg;
  368. }
  369. .icon-bar {
  370. background-color: $navbar-default-toggle-icon-bar-bg;
  371. }
  372. }
  373. .navbar-collapse,
  374. .navbar-form {
  375. border-color: $navbar-default-border;
  376. }
  377. // Dropdown menu items
  378. .navbar-nav {
  379. // Remove background color from open dropdown
  380. > .open > a {
  381. &,
  382. &:hover,
  383. &:focus {
  384. background-color: $navbar-default-link-active-bg;
  385. color: $navbar-default-link-active-color;
  386. }
  387. }
  388. @media (max-width: $grid-float-breakpoint-max) {
  389. // Dropdowns get custom display when collapsed
  390. .open .dropdown-menu {
  391. > li > a {
  392. color: $navbar-default-link-color;
  393. &:hover,
  394. &:focus {
  395. color: $navbar-default-link-hover-color;
  396. background-color: $navbar-default-link-hover-bg;
  397. }
  398. }
  399. > .active > a {
  400. &,
  401. &:hover,
  402. &:focus {
  403. color: $navbar-default-link-active-color;
  404. background-color: $navbar-default-link-active-bg;
  405. }
  406. }
  407. > .disabled > a {
  408. &,
  409. &:hover,
  410. &:focus {
  411. color: $navbar-default-link-disabled-color;
  412. background-color: $navbar-default-link-disabled-bg;
  413. }
  414. }
  415. }
  416. }
  417. }
  418. // Links in navbars
  419. //
  420. // Add a class to ensure links outside the navbar nav are colored correctly.
  421. .navbar-link {
  422. color: $navbar-default-link-color;
  423. &:hover {
  424. color: $navbar-default-link-hover-color;
  425. }
  426. }
  427. .btn-link {
  428. color: $navbar-default-link-color;
  429. &:hover,
  430. &:focus {
  431. color: $navbar-default-link-hover-color;
  432. }
  433. &[disabled],
  434. fieldset[disabled] & {
  435. &:hover,
  436. &:focus {
  437. color: $navbar-default-link-disabled-color;
  438. }
  439. }
  440. }
  441. }
  442. // Inverse navbar
  443. .navbar-inverse {
  444. background-color: $navbar-inverse-bg;
  445. border-color: $navbar-inverse-border;
  446. .navbar-brand {
  447. color: $navbar-inverse-brand-color;
  448. &:hover,
  449. &:focus {
  450. color: $navbar-inverse-brand-hover-color;
  451. background-color: $navbar-inverse-brand-hover-bg;
  452. }
  453. }
  454. .navbar-text {
  455. color: $navbar-inverse-color;
  456. }
  457. .navbar-nav {
  458. > li > a {
  459. color: $navbar-inverse-link-color;
  460. &:hover,
  461. &:focus {
  462. color: $navbar-inverse-link-hover-color;
  463. background-color: $navbar-inverse-link-hover-bg;
  464. }
  465. }
  466. > .active > a {
  467. &,
  468. &:hover,
  469. &:focus {
  470. color: $navbar-inverse-link-active-color;
  471. background-color: $navbar-inverse-link-active-bg;
  472. }
  473. }
  474. > .disabled > a {
  475. &,
  476. &:hover,
  477. &:focus {
  478. color: $navbar-inverse-link-disabled-color;
  479. background-color: $navbar-inverse-link-disabled-bg;
  480. }
  481. }
  482. }
  483. // Darken the responsive nav toggle
  484. .navbar-toggle {
  485. border-color: $navbar-inverse-toggle-border-color;
  486. &:hover,
  487. &:focus {
  488. background-color: $navbar-inverse-toggle-hover-bg;
  489. }
  490. .icon-bar {
  491. background-color: $navbar-inverse-toggle-icon-bar-bg;
  492. }
  493. }
  494. .navbar-collapse,
  495. .navbar-form {
  496. border-color: darken($navbar-inverse-bg, 7%);
  497. }
  498. // Dropdowns
  499. .navbar-nav {
  500. > .open > a {
  501. &,
  502. &:hover,
  503. &:focus {
  504. background-color: $navbar-inverse-link-active-bg;
  505. color: $navbar-inverse-link-active-color;
  506. }
  507. }
  508. @media (max-width: $grid-float-breakpoint-max) {
  509. // Dropdowns get custom display
  510. .open .dropdown-menu {
  511. > .dropdown-header {
  512. border-color: $navbar-inverse-border;
  513. }
  514. .divider {
  515. background-color: $navbar-inverse-border;
  516. }
  517. > li > a {
  518. color: $navbar-inverse-link-color;
  519. &:hover,
  520. &:focus {
  521. color: $navbar-inverse-link-hover-color;
  522. background-color: $navbar-inverse-link-hover-bg;
  523. }
  524. }
  525. > .active > a {
  526. &,
  527. &:hover,
  528. &:focus {
  529. color: $navbar-inverse-link-active-color;
  530. background-color: $navbar-inverse-link-active-bg;
  531. }
  532. }
  533. > .disabled > a {
  534. &,
  535. &:hover,
  536. &:focus {
  537. color: $navbar-inverse-link-disabled-color;
  538. background-color: $navbar-inverse-link-disabled-bg;
  539. }
  540. }
  541. }
  542. }
  543. }
  544. .navbar-link {
  545. color: $navbar-inverse-link-color;
  546. &:hover {
  547. color: $navbar-inverse-link-hover-color;
  548. }
  549. }
  550. .btn-link {
  551. color: $navbar-inverse-link-color;
  552. &:hover,
  553. &:focus {
  554. color: $navbar-inverse-link-hover-color;
  555. }
  556. &[disabled],
  557. fieldset[disabled] & {
  558. &:hover,
  559. &:focus {
  560. color: $navbar-inverse-link-disabled-color;
  561. }
  562. }
  563. }
  564. }