responsive-navbar.less.svn-base 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. // TABLETS AND BELOW
  2. // -----------------
  3. @media (max-width: 979px) {
  4. // UNFIX THE TOPBAR
  5. // ----------------
  6. // Remove any padding from the body
  7. body {
  8. padding-top: 0;
  9. }
  10. // Unfix the navbar
  11. .navbar-fixed-top {
  12. position: static;
  13. margin-bottom: @baseLineHeight;
  14. }
  15. .navbar-fixed-top .navbar-inner {
  16. padding: 5px;
  17. }
  18. .navbar .container {
  19. width: auto;
  20. padding: 0;
  21. }
  22. // Account for brand name
  23. .navbar .brand {
  24. padding-left: 10px;
  25. padding-right: 10px;
  26. margin: 0 0 0 -5px;
  27. }
  28. // COLLAPSIBLE NAVBAR
  29. // ------------------
  30. // Nav collapse clears brand
  31. .nav-collapse {
  32. clear: both;
  33. }
  34. // Block-level the nav
  35. .nav-collapse .nav {
  36. float: none;
  37. margin: 0 0 (@baseLineHeight / 2);
  38. }
  39. .nav-collapse .nav > li {
  40. float: none;
  41. }
  42. .nav-collapse .nav > li > a {
  43. margin-bottom: 2px;
  44. }
  45. .nav-collapse .nav > .divider-vertical {
  46. display: none;
  47. }
  48. .nav-collapse .nav .nav-header {
  49. color: @navbarText;
  50. text-shadow: none;
  51. }
  52. // Nav and dropdown links in navbar
  53. .nav-collapse .nav > li > a,
  54. .nav-collapse .dropdown-menu a {
  55. padding: 6px 15px;
  56. font-weight: bold;
  57. color: @navbarLinkColor;
  58. .border-radius(3px);
  59. }
  60. // Buttons
  61. .nav-collapse .btn {
  62. padding: 4px 10px 4px;
  63. font-weight: normal;
  64. .border-radius(4px);
  65. }
  66. .nav-collapse .dropdown-menu li + li a {
  67. margin-bottom: 2px;
  68. }
  69. .nav-collapse .nav > li > a:hover,
  70. .nav-collapse .dropdown-menu a:hover {
  71. background-color: @navbarBackground;
  72. }
  73. // Buttons in the navbar
  74. .nav-collapse.in .btn-group {
  75. margin-top: 5px;
  76. padding: 0;
  77. }
  78. // Dropdowns in the navbar
  79. .nav-collapse .dropdown-menu {
  80. position: static;
  81. top: auto;
  82. left: auto;
  83. float: none;
  84. display: block;
  85. max-width: none;
  86. margin: 0 15px;
  87. padding: 0;
  88. background-color: transparent;
  89. border: none;
  90. .border-radius(0);
  91. .box-shadow(none);
  92. }
  93. .nav-collapse .dropdown-menu:before,
  94. .nav-collapse .dropdown-menu:after {
  95. display: none;
  96. }
  97. .nav-collapse .dropdown-menu .divider {
  98. display: none;
  99. }
  100. // Forms in navbar
  101. .nav-collapse .navbar-form,
  102. .nav-collapse .navbar-search {
  103. float: none;
  104. padding: (@baseLineHeight / 2) 15px;
  105. margin: (@baseLineHeight / 2) 0;
  106. border-top: 1px solid @navbarBackground;
  107. border-bottom: 1px solid @navbarBackground;
  108. .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
  109. }
  110. // Pull right (secondary) nav content
  111. .navbar .nav-collapse .nav.pull-right {
  112. float: none;
  113. margin-left: 0;
  114. }
  115. // Hide everything in the navbar save .brand and toggle button */
  116. .nav-collapse,
  117. .nav-collapse.collapse {
  118. overflow: hidden;
  119. height: 0;
  120. }
  121. // Navbar button
  122. .navbar .btn-navbar {
  123. display: block;
  124. }
  125. // STATIC NAVBAR
  126. // -------------
  127. .navbar-static .navbar-inner {
  128. padding-left: 10px;
  129. padding-right: 10px;
  130. }
  131. }
  132. // DEFAULT DESKTOP
  133. // ---------------
  134. // Required to make the collapsing navbar work on regular desktops
  135. @media (min-width: 980px) {
  136. .nav-collapse.collapse {
  137. height: auto !important;
  138. overflow: visible !important;
  139. }
  140. }