navmenu.less 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. // Navmenu and offcanvas navbar
  2. // --------------------------------------------------
  3. // Wrapper and base class
  4. //
  5. // Provide a static navmenu from which we expand to create the fixed navmenu
  6. // variations.
  7. .navmenu,
  8. .navbar-offcanvas {
  9. width: @navmenu-width;
  10. height: auto;
  11. border-width: 1px;
  12. border-style: solid;
  13. border-radius: @border-radius-base;
  14. }
  15. .navmenu-fixed-left,
  16. .navmenu-fixed-right,
  17. .navbar-offcanvas {
  18. position: fixed;
  19. z-index: @zindex-navmenu-fixed;
  20. top: 0;
  21. bottom: 0;
  22. overflow-y: auto;
  23. border-radius: 0;
  24. }
  25. .navmenu-fixed-left,
  26. .navbar-offcanvas.navmenu-fixed-left {
  27. left: 0;
  28. right: auto;
  29. border-width: 0 1px 0 0;
  30. }
  31. .navmenu-fixed-right,
  32. .navbar-offcanvas {
  33. left: auto;
  34. right: 0;
  35. border-width: 0 0 0 1px;
  36. }
  37. .navmenu-nav {
  38. margin-bottom: @navmenu-margin-vertical;
  39. &.dropdown-menu {
  40. position: static;
  41. margin: 0;
  42. padding-top: 0;
  43. float: none;
  44. border: none;
  45. .box-shadow(none);
  46. border-radius: 0;
  47. }
  48. }
  49. .navbar-offcanvas {
  50. .navbar-nav {
  51. margin: 0;
  52. }
  53. @media (min-width: @grid-float-breakpoint) {
  54. width: auto;
  55. border-top: 0;
  56. box-shadow: none;
  57. &.offcanvas {
  58. position: static;
  59. display: block !important;
  60. height: auto !important;
  61. padding-bottom: 0; // Override default setting
  62. overflow: visible !important;
  63. }
  64. // Account for first and last children spacing
  65. .navbar-nav.navbar-left:first-child {
  66. margin-left: -@navbar-padding-horizontal;
  67. }
  68. .navbar-nav.navbar-right:last-child {
  69. margin-right: -@navbar-padding-horizontal;
  70. }
  71. .navmenu-brand {
  72. display: none;
  73. }
  74. }
  75. }
  76. // Brand/project name
  77. .navmenu-brand {
  78. display: block;
  79. font-size: @font-size-large;
  80. line-height: @line-height-computed;
  81. padding: @nav-link-padding;
  82. &:hover,
  83. &:focus {
  84. text-decoration: none;
  85. }
  86. margin: @navmenu-margin-vertical 0;
  87. }
  88. // Alternate navmenus
  89. // --------------------------------------------------
  90. // Default navmenu
  91. .navmenu-default,
  92. .navbar-default .navbar-offcanvas {
  93. background-color: @navmenu-default-bg;
  94. border-color: @navmenu-default-border;
  95. .navmenu-brand {
  96. color: @navmenu-default-brand-color;
  97. &:hover,
  98. &:focus {
  99. color: @navmenu-default-brand-hover-color;
  100. background-color: @navmenu-default-brand-hover-bg;
  101. }
  102. }
  103. .navmenu-text {
  104. color: @navmenu-default-color;
  105. }
  106. .navmenu-nav {
  107. // Caret should match text color on hover
  108. > .dropdown > a:hover .caret,
  109. > .dropdown > a:focus .caret {
  110. border-top-color: @navmenu-default-link-hover-color;
  111. border-bottom-color: @navmenu-default-link-hover-color;
  112. }
  113. // Remove background color from open dropdown
  114. > .open > a {
  115. &,
  116. &:hover,
  117. &:focus {
  118. background-color: @navmenu-default-link-active-bg;
  119. color: @navmenu-default-link-active-color;
  120. .caret {
  121. border-top-color: @navmenu-default-link-active-color;
  122. border-bottom-color: @navmenu-default-link-active-color;
  123. }
  124. }
  125. }
  126. > .dropdown > a .caret {
  127. border-top-color: @navmenu-default-link-color;
  128. border-bottom-color: @navmenu-default-link-color;
  129. }
  130. &.dropdown-menu {
  131. background-color: @navmenu-default-link-active-bg;
  132. & > .divider {
  133. background-color: @navmenu-default-bg;
  134. }
  135. > .active > a {
  136. &,
  137. &:hover,
  138. &:focus {
  139. background-color: darken(@navmenu-default-link-active-bg, 6.5%);
  140. }
  141. }
  142. }
  143. > li > a {
  144. color: @navmenu-default-link-color;
  145. &:hover,
  146. &:focus {
  147. color: @navmenu-default-link-hover-color;
  148. background-color: @navmenu-default-link-hover-bg;
  149. }
  150. }
  151. > .active > a {
  152. &,
  153. &:hover,
  154. &:focus {
  155. color: @navmenu-default-link-active-color;
  156. background-color: @navmenu-default-link-active-bg;
  157. }
  158. }
  159. > .disabled > a {
  160. &,
  161. &:hover,
  162. &:focus {
  163. color: @navmenu-default-link-disabled-color;
  164. background-color: @navmenu-default-link-disabled-bg;
  165. }
  166. }
  167. }
  168. }
  169. // Inverse navmenu
  170. .navmenu-inverse,
  171. .navbar-inverse .navbar-offcanvas {
  172. background-color: @navmenu-inverse-bg;
  173. border-color: @navmenu-inverse-border;
  174. .navmenu-brand {
  175. color: @navmenu-inverse-brand-color;
  176. &:hover,
  177. &:focus {
  178. color: @navmenu-inverse-brand-hover-color;
  179. background-color: @navmenu-inverse-brand-hover-bg;
  180. }
  181. }
  182. .navmenu-text {
  183. color: @navmenu-inverse-color;
  184. }
  185. .navmenu-nav {
  186. // Caret should match text color on hover
  187. > .dropdown > a:hover .caret,
  188. > .dropdown > a:focus .caret {
  189. border-top-color: @navmenu-inverse-link-hover-color;
  190. border-bottom-color: @navmenu-inverse-link-hover-color;
  191. }
  192. // Remove background color from open dropdown
  193. > .open > a {
  194. &,
  195. &:hover,
  196. &:focus {
  197. background-color: @navmenu-inverse-link-active-bg;
  198. color: @navmenu-inverse-link-active-color;
  199. .caret {
  200. border-top-color: @navmenu-inverse-link-active-color;
  201. border-bottom-color: @navmenu-inverse-link-active-color;
  202. }
  203. }
  204. }
  205. > .dropdown > a .caret {
  206. border-top-color: @navmenu-inverse-link-color;
  207. border-bottom-color: @navmenu-inverse-link-color;
  208. }
  209. &.dropdown-menu {
  210. background-color: @navmenu-inverse-link-active-bg;
  211. & > .divider {
  212. background-color: @navmenu-inverse-bg;
  213. }
  214. > .active > a {
  215. &,
  216. &:hover,
  217. &:focus {
  218. background-color: darken(@navmenu-inverse-link-active-bg, 6.5%);
  219. }
  220. }
  221. }
  222. > li > a {
  223. color: @navmenu-inverse-link-color;
  224. &:hover,
  225. &:focus {
  226. color: @navmenu-inverse-link-hover-color;
  227. background-color: @navmenu-inverse-link-hover-bg;
  228. }
  229. }
  230. > .active > a {
  231. &,
  232. &:hover,
  233. &:focus {
  234. color: @navmenu-inverse-link-active-color;
  235. background-color: @navmenu-inverse-link-active-bg;
  236. }
  237. }
  238. > .disabled > a {
  239. &,
  240. &:hover,
  241. &:focus {
  242. color: @navmenu-inverse-link-disabled-color;
  243. background-color: @navmenu-inverse-link-disabled-bg;
  244. }
  245. }
  246. }
  247. }