navbar.less 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. // NAVBAR (FIXED AND STATIC)
  2. // -------------------------
  3. // COMMON STYLES
  4. // -------------
  5. .navbar {
  6. // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
  7. *position: relative;
  8. *z-index: 2;
  9. overflow: visible;
  10. margin-bottom: @baseLineHeight;
  11. }
  12. // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
  13. .navbar-inner {
  14. padding-left: 20px;
  15. padding-right: 20px;
  16. #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  17. .border-radius(4px);
  18. @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  19. .box-shadow(@shadow);
  20. }
  21. // Set width to auto for default container
  22. // We then reset it for fixed navbars in the #gridSystem mixin
  23. .navbar .container {
  24. width: auto;
  25. }
  26. // Navbar button for toggling navbar items in responsive layouts
  27. .btn-navbar {
  28. display: none;
  29. float: right;
  30. padding: 7px 10px;
  31. margin-left: 5px;
  32. margin-right: 5px;
  33. .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
  34. @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  35. .box-shadow(@shadow);
  36. }
  37. .btn-navbar .icon-bar {
  38. display: block;
  39. width: 18px;
  40. height: 2px;
  41. background-color: #f5f5f5;
  42. .border-radius(1px);
  43. .box-shadow(0 1px 0 rgba(0,0,0,.25));
  44. }
  45. .btn-navbar .icon-bar + .icon-bar {
  46. margin-top: 3px;
  47. }
  48. // Override the default collapsed state
  49. .nav-collapse.collapse {
  50. height: auto;
  51. }
  52. // Brand, links, text, and buttons
  53. .navbar {
  54. color: @navbarText;
  55. // Hover and active states
  56. .brand:hover {
  57. text-decoration: none;
  58. }
  59. // Website or project name
  60. .brand {
  61. float: left;
  62. display: block;
  63. padding: 8px 20px 12px;
  64. margin-left: -20px; // negative indent to left-align the text down the page
  65. font-size: 20px;
  66. font-weight: 200;
  67. line-height: 1;
  68. color: @white;
  69. }
  70. // Plain text in topbar
  71. .navbar-text {
  72. margin-bottom: 0;
  73. line-height: @navbarHeight;
  74. }
  75. // Buttons in navbar
  76. .btn,
  77. .btn-group {
  78. .navbarVerticalAlign(30px); // Vertically center in navbar
  79. }
  80. .btn-group .btn {
  81. margin-top: 0; // then undo the margin here so we don't accidentally double it
  82. }
  83. }
  84. // Navbar forms
  85. .navbar-form {
  86. margin-bottom: 0; // remove default bottom margin
  87. .clearfix();
  88. input,
  89. select,
  90. .radio,
  91. .checkbox {
  92. .navbarVerticalAlign(30px); // Vertically center in navbar
  93. }
  94. input,
  95. select {
  96. display: inline-block;
  97. margin-bottom: 0;
  98. }
  99. input[type="image"],
  100. input[type="checkbox"],
  101. input[type="radio"] {
  102. margin-top: 3px;
  103. }
  104. .input-append,
  105. .input-prepend {
  106. margin-top: 6px;
  107. white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
  108. input {
  109. margin-top: 0; // remove the margin on top since it's on the parent
  110. }
  111. }
  112. }
  113. // Navbar search
  114. .navbar-search {
  115. position: relative;
  116. float: left;
  117. .navbarVerticalAlign(28px); // Vertically center in navbar
  118. margin-bottom: 0;
  119. .search-query {
  120. padding: 4px 9px;
  121. #font > .sans-serif(13px, normal, 1);
  122. color: @white;
  123. background-color: @navbarSearchBackground;
  124. border: 1px solid @navbarSearchBorder;
  125. @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
  126. .box-shadow(@shadow);
  127. .transition(none);
  128. // Placeholder text gets special styles; can't be a grouped selector
  129. &:-moz-placeholder {
  130. color: @navbarSearchPlaceholderColor;
  131. }
  132. &::-webkit-input-placeholder {
  133. color: @navbarSearchPlaceholderColor;
  134. }
  135. // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
  136. &:focus,
  137. &.focused {
  138. padding: 5px 10px;
  139. color: @grayDark;
  140. text-shadow: 0 1px 0 @white;
  141. background-color: @navbarSearchBackgroundFocus;
  142. border: 0;
  143. .box-shadow(0 0 3px rgba(0,0,0,.15));
  144. outline: 0;
  145. }
  146. }
  147. }
  148. // FIXED NAVBAR
  149. // ------------
  150. // Shared (top/bottom) styles
  151. .navbar-fixed-top,
  152. .navbar-fixed-bottom {
  153. position: fixed;
  154. right: 0;
  155. left: 0;
  156. z-index: @zindexFixedNavbar;
  157. margin-bottom: 0; // remove 18px margin for static navbar
  158. }
  159. .navbar-fixed-top .navbar-inner,
  160. .navbar-fixed-bottom .navbar-inner {
  161. padding-left: 0;
  162. padding-right: 0;
  163. .border-radius(0);
  164. }
  165. .navbar-fixed-top .container,
  166. .navbar-fixed-bottom .container {
  167. #grid > .core > .span(@gridColumns);
  168. }
  169. // Fixed to top
  170. .navbar-fixed-top {
  171. top: 0;
  172. }
  173. // Fixed to bottom
  174. .navbar-fixed-bottom {
  175. bottom: 0;
  176. }
  177. // NAVIGATION
  178. // ----------
  179. .navbar .nav {
  180. position: relative;
  181. left: 0;
  182. display: block;
  183. float: left;
  184. margin: 0 10px 0 0;
  185. }
  186. .navbar .nav.pull-right {
  187. float: right; // redeclare due to specificity
  188. }
  189. .navbar .nav > li {
  190. display: block;
  191. float: left;
  192. }
  193. // Links
  194. .navbar .nav > li > a {
  195. float: none;
  196. padding: 10px 10px 11px;
  197. line-height: 19px;
  198. color: @navbarLinkColor;
  199. text-decoration: none;
  200. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  201. }
  202. // Hover
  203. .navbar .nav > li > a:hover {
  204. background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
  205. color: @navbarLinkColorHover;
  206. text-decoration: none;
  207. }
  208. // Active nav items
  209. .navbar .nav .active > a,
  210. .navbar .nav .active > a:hover {
  211. color: @navbarLinkColorActive;
  212. text-decoration: none;
  213. background-color: @navbarLinkBackgroundActive;
  214. }
  215. // Dividers (basically a vertical hr)
  216. .navbar .divider-vertical {
  217. height: @navbarHeight;
  218. width: 1px;
  219. margin: 0 9px;
  220. overflow: hidden;
  221. background-color: @navbarBackground;
  222. border-right: 1px solid @navbarBackgroundHighlight;
  223. }
  224. // Secondary (floated right) nav in topbar
  225. .navbar .nav.pull-right {
  226. margin-left: 10px;
  227. margin-right: 0;
  228. }
  229. // Dropdown menus
  230. // --------------
  231. // Menu position and menu carets
  232. .navbar .dropdown-menu {
  233. margin-top: 1px;
  234. .border-radius(4px);
  235. &:before {
  236. content: '';
  237. display: inline-block;
  238. border-left: 7px solid transparent;
  239. border-right: 7px solid transparent;
  240. border-bottom: 7px solid #ccc;
  241. border-bottom-color: @dropdownBorder;
  242. position: absolute;
  243. top: -7px;
  244. left: 9px;
  245. }
  246. &:after {
  247. content: '';
  248. display: inline-block;
  249. border-left: 6px solid transparent;
  250. border-right: 6px solid transparent;
  251. border-bottom: 6px solid @dropdownBackground;
  252. position: absolute;
  253. top: -6px;
  254. left: 10px;
  255. }
  256. }
  257. // Menu position and menu caret support for dropups via extra dropup class
  258. .navbar-fixed-bottom .dropdown-menu {
  259. &:before {
  260. border-top: 7px solid #ccc;
  261. border-top-color: @dropdownBorder;
  262. border-bottom: 0;
  263. bottom: -7px;
  264. top: auto;
  265. }
  266. &:after {
  267. border-top: 6px solid @dropdownBackground;
  268. border-bottom: 0;
  269. bottom: -6px;
  270. top: auto;
  271. }
  272. }
  273. // Dropdown toggle caret
  274. .navbar .nav .dropdown-toggle .caret,
  275. .navbar .nav .open.dropdown .caret {
  276. border-top-color: @white;
  277. border-bottom-color: @white;
  278. }
  279. .navbar .nav .active .caret {
  280. .opacity(100);
  281. }
  282. // Remove background color from open dropdown
  283. .navbar .nav .open > .dropdown-toggle,
  284. .navbar .nav .active > .dropdown-toggle,
  285. .navbar .nav .open.active > .dropdown-toggle {
  286. background-color: transparent;
  287. }
  288. // Dropdown link on hover
  289. .navbar .nav .active > .dropdown-toggle:hover {
  290. color: @white;
  291. }
  292. // Right aligned menus need alt position
  293. // TODO: rejigger this at some point to simplify the selectors
  294. .navbar .nav.pull-right .dropdown-menu,
  295. .navbar .nav .dropdown-menu.pull-right {
  296. left: auto;
  297. right: 0;
  298. &:before {
  299. left: auto;
  300. right: 12px;
  301. }
  302. &:after {
  303. left: auto;
  304. right: 13px;
  305. }
  306. }