highlight.less 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. @highlight-menu-border-color: #C8D8E2;
  2. @highlight-menu-active-bg: #F2F6F9;
  3. @highlight-h-sidebar-color: lighten(#4D96CB, 10%);
  4. .enable_highlight_active_no_skin() when(@enable-highlight-active = true) {
  5. //hide submenu active item caret
  6. .nav-list li.highlight li.active > a,
  7. .nav-list li li.highlight.active > a {
  8. &:after , &:before {
  9. display: none;// !important;
  10. }
  11. }
  12. //show first-level active item caret
  13. .nav-list > li.highlight.active > a {
  14. &:after, &:before {
  15. display: block;// !important;
  16. }
  17. }
  18. //only for default body.no-skin
  19. .no-skin {
  20. .nav-list > li.highlight {
  21. &:hover , &.active {
  22. border-color: @highlight-menu-border-color;
  23. + li {
  24. border-top-color: @highlight-menu-border-color;
  25. }
  26. > a {
  27. background-color: #FFF;
  28. }
  29. }
  30. &.active {
  31. &:after {
  32. display: none;
  33. }
  34. &:before {
  35. display: block;
  36. background-color: darken(@nav-item-hover-indicator , 5%);
  37. }
  38. > a {
  39. background-color: @highlight-menu-active-bg !important;
  40. &:before, &:after {
  41. display: block;
  42. content: "";
  43. position: absolute;
  44. top: -1px;
  45. right: -1*ceil(@nav-item-height / 4);
  46. bottom: auto;
  47. z-index: 1;
  48. border-style: solid;
  49. border-width: ceil(@nav-item-height / 2) 0 ceil(@nav-item-height / 2)+1 ceil(@nav-item-height / 4);
  50. border-color: transparent;
  51. }
  52. &:before {
  53. border-left-color: darken(@highlight-menu-border-color, 12%);
  54. -moz-border-left-colors: darken(@highlight-menu-border-color, 12%);
  55. right: -1*ceil(@nav-item-height / 4) - 1;
  56. }
  57. &:after {
  58. border-left-color: @highlight-menu-active-bg;
  59. -moz-border-left-colors: @highlight-menu-active-bg;
  60. }
  61. }
  62. }
  63. }
  64. //don't display the active item caret for submenu items, show just for the parent .nav-list > li item
  65. .nav-list li li.highlight.active > a {
  66. background-color: @highlight-menu-active-bg;
  67. }
  68. .nav-list li li.highlight.active.open > a {
  69. background-color: #FFF;
  70. &:hover {
  71. background-color: @submenu-item-background-hover;
  72. }
  73. }
  74. .enable_horizontal_menu_highlight_no_skin() when(@enable-horizontal-menu = true) {
  75. @media (min-width: @grid-float-breakpoint) {
  76. .sidebar.h-sidebar {
  77. .nav-list > li.highlight.active > a:after {
  78. display: block;
  79. content: "";
  80. position: absolute;
  81. left: 0;
  82. top: auto;
  83. right: auto;
  84. bottom: -2px;
  85. left: 50%;
  86. margin-left: -7px;
  87. border-color: transparent;
  88. -moz-border-right-colors: none;
  89. -moz-border-left-colors: none;
  90. -moz-border-top-colors: none;
  91. border-width: 8px 7px;
  92. border-bottom-color: #FFF;
  93. -moz-border-bottom-colors: #FFF;
  94. }
  95. .nav-list > li.highlight.active > a:before {
  96. display: block;
  97. content:"";
  98. position: absolute;
  99. display: block;
  100. left: 0;
  101. top: auto;
  102. right: auto;
  103. bottom: -1px;
  104. left: 50%;
  105. margin-left: -7px;
  106. border-width: 8px;
  107. border-color: transparent;
  108. -moz-border-right-colors: none;
  109. -moz-border-left-colors: none;
  110. -moz-border-top-colors: none;
  111. border-bottom-color: @highlight-h-sidebar-color;
  112. -moz-border-bottom-colors: @highlight-h-sidebar-color;
  113. }
  114. .nav-list > li.highlight.active:hover > a, .nav-list > li.highlight.active.hover-show > a {
  115. &:after, &:before {
  116. display: none;
  117. }
  118. }
  119. }
  120. }
  121. }
  122. .enable_horizontal_menu_highlight_no_skin();
  123. }
  124. .enable_compact_menu_highlight_no_skin() when (@enable-compact-menu = true) {
  125. @media (min-width: @screen-compact-menu) {
  126. .sidebar.compact .nav-list li.highlight.active > a {
  127. &:after , &:before {
  128. display: none;// !important;
  129. }
  130. }
  131. .sidebar.compact.menu-min .nav-list li.highlight.active > a {
  132. &:after , &:before {
  133. display: block;// !important;
  134. }
  135. }
  136. }
  137. .enable_horizontal_menu_highlight_compact() when(@enable-horizontal-menu = true) {
  138. @media (min-width: @grid-float-breakpoint) {
  139. .sidebar.h-sidebar {
  140. .nav-list li.highlight.active > a {
  141. &:after , &:before {
  142. display: block;// !important;
  143. border-width: 8px !important;//to override .rtl .menu-min
  144. -moz-border-left-colors: none !important;//
  145. -moz-border-right-colors: none !important;
  146. border-left-color: transparent !important;
  147. border-right-color: transparent !important;
  148. }
  149. }
  150. .nav-list > li.highlight.active:hover > a {
  151. &:after, &:before {
  152. display: none !important;
  153. }
  154. }
  155. }
  156. }
  157. }
  158. .enable_horizontal_menu_highlight_compact();
  159. }
  160. .enable_compact_menu_highlight_no_skin();
  161. .menu_min_highlight_no_skin() {
  162. .nav-list > li.highlight.active > a {
  163. &:after , &:before {
  164. display: block;
  165. top: -1px;
  166. border-width: ceil(@nav-item-height / 2) 0 ceil(@nav-item-height / 2)+1 ceil(@nav-item-height / 4);
  167. }
  168. }
  169. }
  170. .enable_sidebar_collapse_highlight_no_skin() when (@enable-sidebar-collapse = true) {
  171. .sidebar.menu-min, .sidebar.menu-min.compact {
  172. .menu_min_highlight_no_skin();
  173. }
  174. }
  175. //.enable_sidebar_collapse_highlight_no_skin();
  176. .enable_minimized_responsive_menu_highlight_no_skin() when (@enable-minimized-responsive-menu = true) {
  177. @media (max-width: @grid-float-breakpoint-max) {
  178. .sidebar.responsive-min, .sidebar.responsive-min.compact {
  179. .menu_min_highlight_no_skin();
  180. }
  181. }
  182. }
  183. //.enable_minimized_responsive_menu_highlight_no_skin();
  184. //hide active item caret inside scrollbars
  185. .sidebar-scroll {
  186. .nav-list > li.active.highlight > a {
  187. &:after, &:before {
  188. display: none !important;
  189. }
  190. }
  191. }
  192. }
  193. .enable_highlight_active_no_skin();