navbar.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. // SITE SPECIFIC NAVBAR STYLES
  2. .navbar { margin-bottom: 0; }
  3. .navbar-inverse { background-color: lighten(@fa-green, 2%); }
  4. .navbar-brand {
  5. font-family: @font-family-serif;
  6. font-weight: 300;
  7. font-size: 20px;
  8. .fas-flag-logo {
  9. padding-right: 3px;
  10. vertical-align: baseline;
  11. }
  12. }
  13. .navbar-nav > li > a { padding: 11px 10px 9px; }
  14. // makes dropdowns closer for split dropdown
  15. .navbar-nav > li {
  16. &.dropdown-split-right > a { padding-left: 7px; }
  17. &.dropdown-split-left > a { padding-right: 0; }
  18. }
  19. .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: @jumbotron-border; }
  20. .navbar-inverse .navbar-toggle {
  21. color: @jumbotron-color;
  22. text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  23. padding: 4px 10px;
  24. margin-top: 5px;
  25. margin-bottom: 5px;
  26. &:hover {
  27. background-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
  28. border-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
  29. color: @jumbotron-bg;
  30. text-shadow: 0 -1px 0 @jumbotron-color;
  31. }
  32. }
  33. .navbar-nav.navbar-right:last-child { margin-right: -10px; }
  34. //
  35. // FONTICONS ORG NAVBAR
  36. // --------------------
  37. //
  38. .navbar-org {
  39. background-color: @navbar-inverse-link-active-bg;
  40. border-color: mix(#000, @fa-green, 20%);
  41. padding: 0;
  42. .ficon-logo-flag, .ficon-log-fort { vertical-align: baseline; }
  43. .navbar-text {
  44. color: mix(#fff, @fa-green, 60%);
  45. margin-top: 12px;
  46. margin-right: 30px;
  47. }
  48. .navbar-nav {
  49. margin-right: -10px;
  50. > li + li { margin-left: 15px; }
  51. > li > a {
  52. color: mix(#fff, @navbar-inverse-bg, 75%);
  53. &:hover,
  54. &:focus {
  55. color: mix(#fff, @fa-green, 100%);
  56. background-color: transparent;
  57. border-bottom: solid 2px mix(#fff, @fa-green, 90%);
  58. }
  59. }
  60. > .active > a {
  61. &,
  62. &:hover,
  63. &:focus {
  64. color: mix(#fff, @navbar-inverse-bg, 75%);
  65. background-color: transparent;
  66. border-radius: 0;
  67. border-bottom: solid 2px mix(#fff, @navbar-inverse-bg, 65%);
  68. }
  69. }
  70. > .disabled > a {
  71. &,
  72. &:hover,
  73. &:focus {
  74. color: @navbar-inverse-link-disabled-color;
  75. background-color: @navbar-inverse-link-disabled-bg;
  76. }
  77. }
  78. }
  79. // Darken the responsive nav toggle
  80. .navbar-toggle {
  81. border-color: @navbar-inverse-toggle-border-color;
  82. &:hover,
  83. &:focus {
  84. background-color: @navbar-inverse-toggle-hover-bg;
  85. }
  86. .icon-bar {
  87. background-color: @navbar-inverse-toggle-icon-bar-bg;
  88. }
  89. }
  90. .navbar-collapse,
  91. .navbar-form {
  92. border-color: darken(@navbar-inverse-bg, 7%);
  93. }
  94. // Dropdowns
  95. .navbar-nav {
  96. > .open > a {
  97. &,
  98. &:hover,
  99. &:focus {
  100. background-color: @navbar-inverse-link-active-bg;
  101. color: @navbar-inverse-link-active-color;
  102. }
  103. }
  104. @media (max-width: @grid-float-breakpoint-max) {
  105. // Dropdowns get custom display
  106. .open .dropdown-menu {
  107. > .dropdown-header {
  108. border-color: @navbar-inverse-border;
  109. }
  110. .divider {
  111. background-color: @navbar-inverse-border;
  112. }
  113. > li > a {
  114. color: @navbar-inverse-link-color;
  115. &:hover,
  116. &:focus {
  117. color: @navbar-inverse-link-hover-color;
  118. background-color: @navbar-inverse-link-hover-bg;
  119. }
  120. }
  121. > .active > a {
  122. &,
  123. &:hover,
  124. &:focus {
  125. color: @navbar-inverse-link-active-color;
  126. background-color: @navbar-inverse-link-active-bg;
  127. }
  128. }
  129. > .disabled > a {
  130. &,
  131. &:hover,
  132. &:focus {
  133. color: @navbar-inverse-link-disabled-color;
  134. background-color: @navbar-inverse-link-disabled-bg;
  135. }
  136. }
  137. }
  138. }
  139. }
  140. .navbar-link {
  141. color: @navbar-inverse-link-color;
  142. &:hover {
  143. color: @navbar-inverse-link-hover-color;
  144. }
  145. }
  146. .btn-link {
  147. color: @navbar-inverse-link-color;
  148. &:hover,
  149. &:focus {
  150. color: @navbar-inverse-link-hover-color;
  151. }
  152. &[disabled],
  153. fieldset[disabled] & {
  154. &:hover,
  155. &:focus {
  156. color: @navbar-inverse-link-disabled-color;
  157. }
  158. }
  159. }
  160. }