_navbar.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. .navbar {
  2. overflow: visible;
  3. position: relative;
  4. z-index: 110;
  5. }
  6. .navbar-inner {
  7. min-height: $navbarHeight;
  8. padding-right: 20px;
  9. background-color: $navbarBackground;
  10. border-bottom: $navbarBorder;
  11. @include clearfix();
  12. }
  13. .navbar .nav {
  14. position: relative;
  15. left: 0;
  16. float: left;
  17. margin: 0 10px 0 0;
  18. }
  19. .nav {
  20. display: block;
  21. }
  22. .navbar .nav.pull-right {
  23. float: right; // redeclare due to specificity
  24. margin-right: 0; // remove margin on float right nav
  25. }
  26. .navbar .nav > li {
  27. float: left;
  28. }
  29. // Links
  30. .navbar .nav > li > a {
  31. float: none;
  32. padding: 17px 13px 13px;
  33. color: $navbarLinkColor;
  34. text-decoration: none;
  35. .fa { font-size: 115%; }
  36. }
  37. // Hover/focus
  38. .navbar .nav > li > a:focus,
  39. .navbar .nav > li > a:hover {
  40. background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
  41. color: $navbarLinkColorHover;
  42. text-decoration: none;
  43. }
  44. // Active nav items
  45. .navbar .nav > .active > a,
  46. .navbar .nav > .active > a:hover,
  47. .navbar .nav > .active > a:focus {
  48. color: $navbarLinkColorActive;
  49. text-decoration: none;
  50. background-color: $navbarLinkBackgroundActive;
  51. }
  52. .fa.top-nav-breadcrumb-icon {
  53. margin: 18px 0 6px 5px;
  54. float: left;
  55. font-size: 120%;
  56. color: $text-color;
  57. }
  58. .top-nav-btn {
  59. display: block;
  60. position: relative;
  61. float: left;
  62. margin: 0;
  63. font-size: 1.4em;
  64. border-right: 1px solid $tight-form-border;
  65. .fa-caret-down {
  66. font-size: 55%;
  67. position: absolute;
  68. right: 8px;
  69. top: 23px;
  70. margin-right: 2px;
  71. }
  72. a {
  73. color: darken($link-color, 5%);
  74. background-color: $navbarButtonBackground;
  75. display: inline-block;
  76. &:hover {
  77. background: $navbarButtonBackgroundHighlight;
  78. color: $link-color;
  79. // border-bottom: 1px solid $blue;
  80. }
  81. }
  82. }
  83. .top-nav-menu-btn {
  84. a {
  85. padding: 7px 20px 6px 13px;
  86. }
  87. img {
  88. width: 30px;
  89. position: relative;
  90. top: -2px;
  91. }
  92. .top-nav-logo-background {
  93. display: inline-block;
  94. border: 1px solid $body-bg;
  95. padding: 4px;
  96. border-radius: 50%;
  97. background: $iconContainerBackground;
  98. width: 40px;
  99. height: 40px;
  100. }
  101. .icon-gf-grafana_wordmark {
  102. font-size: 21px;
  103. position: relative;
  104. top: 4px;
  105. padding-left: 5px;
  106. display: none;
  107. }
  108. }
  109. .dashnav-dashboards-btn {
  110. a {
  111. text-overflow: ellipsis;
  112. overflow: hidden;
  113. white-space: nowrap;
  114. display: block;
  115. padding: 11px 17px 12px 13px;
  116. }
  117. .fa-th-large {
  118. position: relative;
  119. top: 2px;
  120. }
  121. .icon-gf {
  122. position: relative;
  123. top: 2px;
  124. font-size: 20px;
  125. line-height: 8px;
  126. }
  127. }
  128. .dashboard-title {
  129. padding: 0px 6px 5px 5px;
  130. font-size: 17px;
  131. }
  132. .top-nav-icon {
  133. margin: 5px 0px 0 11px;
  134. line-height: 41px;
  135. float: left;
  136. }
  137. .top-nav-section {
  138. display: block;
  139. float: left;
  140. padding: 19px 9px 8px 0;
  141. font-weight: bold;
  142. i {
  143. padding-left: 8px;
  144. }
  145. }
  146. .top-nav-title {
  147. display: block;
  148. float: left;
  149. font-size: 17px;
  150. padding: 18px 10px 10px 13px;
  151. color: $link-color;
  152. }