skin-1.less 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003
  1. /* skin 1 */
  2. .skin-1 {
  3. @body-background: #4A4F56;
  4. @navbar-background: #2C6AA0;
  5. @sidebar-background: #222A2D;
  6. @nav-item-background: @sidebar-background;
  7. @nav-item-color: lighten(#B1BAC1, 3%);
  8. @nav-item-border: #3F4E54;
  9. //different states
  10. @nav-item-background-hover: #414B51;
  11. @nav-item-color-hover: #E1EAF1;
  12. @nav-item-color-open: #85C0EC;
  13. @nav-item-background-open: @nav-item-background;
  14. @nav-item-background-active: #141A1B;
  15. @nav-item-color-active: #7BB7E5;//#55A0DC
  16. //submenu colors
  17. @submenu-background: #333D3F;
  18. @submenu-border: #505A5B;
  19. @submenu-background-active: #181E20; //darken(@submenu-background-active , 2.5%);
  20. @submenu-border-active: #2F3E44;
  21. @submenu-item-color: #D9DFE6;
  22. @submenu-item-border: #454D4E;
  23. @submenu-item-hover: #8AB4DE;
  24. @submenu-item-hover-background: #2D3638; //!darken(@submenu-background, 2.5%);
  25. @submenu-item-background: #333D3F;
  26. @submenu-item-background-hover: #333D3F;
  27. @submenu-item-active: @nav-item-color-active;
  28. @submenu-item-background-active: #181E20; //darken(@submenu-background-active , 2.5%);
  29. @submenu-item-border-active: #222526;
  30. @submenu-item-icon-active: #4088D8; //darken(spin(@submenu-item-active , 5%), 5%);
  31. @submenu-item-background-active-hover: #14191a;
  32. @3rd-submenu-item: #61A8DD;
  33. @3rd-submenu-item-open: @nav-item-color-open;
  34. @active-border-highlight: #305675;
  35. @submenu-dotline-border: #646C70;
  36. @submenu-active-dotline-border: @nav-item-border;
  37. @breadcrumbs-background: #F0F0F0;
  38. @sidebar-toggle-background: lighten(spin(@nav-item-background-active , 10%) , 2%);
  39. @sidebar-toggle-border: @nav-item-border;
  40. @sidebar-toggle-icon-background: @sidebar-background;
  41. @sidebar-toggle-icon-color: #AAA;
  42. @sidebar-toggle-icon-border: #AAA;
  43. @shortcuts-background: @sidebar-background;
  44. @shortcuts-border: @nav-item-border;
  45. @menumin-item-active-background: #242A2B;
  46. @menumin-submenu-border-left: #181D1F;
  47. @menumin-submenu-border: #242A2B;
  48. @menumin-submenu-border-top: #5A606A;
  49. @menumin-active-submenu-border-top: #3B4547;
  50. @hover-submenu-border: #232828;
  51. @hover-active-submenu-border: #475561;
  52. @hover-submenu-arrow: #353C3D;
  53. @hover-submenu-active-background: #171E1F;
  54. @hover-submenu2-active-arrow: #5E83A0;
  55. @nav-item-hover-indicator: #629CC9;
  56. @nav-item-active-indicator: mix(@nav-item-hover-indicator , lighten(#3382AF , 5%));
  57. @h-nav-item-border-hover: desaturate(darken(@nav-item-hover-indicator , 20%) , 30%);
  58. @h-nav-item-border-active: desaturate(darken(@nav-item-hover-indicator , 15%) , 25%);
  59. @highlight-nav-item-border: #506B7F;
  60. @sidebar-toggler-background: #444;
  61. background-color: @body-background;
  62. .navbar {
  63. background: @navbar-background;
  64. }
  65. .sidebar {
  66. background-color: @sidebar-background;
  67. border-right-width: 0;
  68. }
  69. .nav-list > li {
  70. border-color: @nav-item-border;
  71. > a {
  72. background-color: @nav-item-background;
  73. color: @nav-item-color;
  74. }
  75. &:hover > a {
  76. background-color: @nav-item-background-hover;
  77. color: @nav-item-color-hover;
  78. }
  79. &.open > a , &.open:hover > a {
  80. color: @nav-item-color-open;
  81. background-color: @nav-item-background-open;
  82. }
  83. &.active > a , &.active:hover > a {
  84. background-color: @nav-item-background-active;
  85. color: @nav-item-color-active;
  86. }
  87. }
  88. //the hover/active menu blue line highlight
  89. .nav-list > li:hover:before {
  90. background-color: @nav-item-hover-indicator;
  91. }
  92. .nav-list > li.active:before {
  93. display: block;
  94. background-color: @nav-item-active-indicator;
  95. }
  96. .nav-list li.active > a:after {
  97. border-right-color: #FFF;
  98. -moz-border-right-colors: #FFF;
  99. //border-width: 16px 10px;
  100. //top: 3px;
  101. border-width: 11px 7px;
  102. top: 8px;
  103. right: 0;
  104. }
  105. .nav-list > li.active > .submenu li.active > a {
  106. &:after {
  107. //top: 1px;
  108. top: 5px;
  109. }
  110. }
  111. //submenu
  112. .nav-list > li {
  113. .submenu {
  114. background-color: @submenu-background;
  115. }
  116. &.active .submenu {
  117. background-color: @submenu-background-active;
  118. }
  119. .submenu > li > a {
  120. border-top-style: solid;
  121. border-top-color: @submenu-item-border;
  122. background-color: @submenu-item-background;
  123. &:hover {
  124. background-color: @submenu-item-hover-background;
  125. }
  126. }
  127. &.active .submenu > li > a {
  128. border-top-color: @submenu-item-border-active;
  129. background-color: @submenu-item-background-active;
  130. &:hover {
  131. background-color: @submenu-item-background-active-hover;
  132. }
  133. }
  134. }
  135. .nav-list > li {
  136. > .submenu {
  137. border-top-color: @submenu-border;
  138. }
  139. &.active > .submenu {
  140. border-top-color: @submenu-border-active;
  141. }
  142. > .submenu > li {
  143. > a {
  144. color: @submenu-item-color;
  145. }
  146. &:hover > a {
  147. color: @submenu-item-hover;
  148. }
  149. &.active > a {
  150. color: @submenu-item-active;
  151. background-color: darken(@submenu-item-background-active, 1%);
  152. }
  153. }
  154. }
  155. //submenu dotted tree menu
  156. .nav-list > li > .submenu {
  157. &:before , & > li:before {
  158. border-color: @submenu-dotline-border;
  159. }
  160. }
  161. .nav-list > li.active > .submenu {
  162. &:before , & > li:before {
  163. border-color: @submenu-active-dotline-border;
  164. }
  165. }
  166. //3rd & 4th level menu
  167. .nav-list > li .submenu li > .submenu li > a {
  168. color: @submenu-item-color;
  169. }
  170. .nav-list > li .submenu li > .submenu li:hover > a {
  171. color: @submenu-item-hover;
  172. }
  173. .nav-list > li .submenu li.open > a ,
  174. .nav-list > li .submenu li > .submenu > li.open > a {
  175. color: @nav-item-color-open;
  176. }
  177. .nav-list > li .submenu li > .submenu li.active {
  178. > a {
  179. color: @3rd-submenu-item;
  180. }
  181. &:hover > a {
  182. color: @3rd-submenu-item-open;
  183. }
  184. }
  185. ////////////
  186. //.active.highlight state
  187. .enable_highlight_active_skin_1() when(@enable-highlight-active = true) {
  188. .sidebar {
  189. .nav-list > li.active.highlight {
  190. & , & + li {
  191. border-color: @highlight-nav-item-border;
  192. }
  193. & + li:last-child {
  194. border-bottom-color: @nav-item-border;
  195. }
  196. }
  197. .nav-list > li.active.highlight > a:after {
  198. border-right-color: transparent;
  199. -moz-border-right-colors: none;
  200. border-left-color: @nav-item-background-active;
  201. -moz-border-left-colors: @nav-item-background-active;
  202. border-width: 20px 0 20px 10px;
  203. z-index: 1;
  204. top: 0;
  205. right: -10px;
  206. //display: block;
  207. }
  208. .nav-list > li.active.highlight > a:before {
  209. border-left-color: @highlight-nav-item-border;
  210. -moz-border-left-colors: @highlight-nav-item-border;
  211. border-style: solid;
  212. border-color: transparent;
  213. //border-width: 21px 0 21px 11px;
  214. border-width: 20px 0 20px 10px;
  215. content: "";
  216. //display: block;
  217. position: absolute;
  218. right: -11px;
  219. //top: -1px;
  220. top: 0;
  221. z-index: 1;
  222. }
  223. }
  224. }
  225. .enable_highlight_active_skin_1();
  226. ////////////
  227. //extra
  228. .sidebar-shortcuts , .sidebar-shortcuts-mini {
  229. background-color: @shortcuts-background;
  230. border-color: @shortcuts-border;
  231. }
  232. .sidebar > .nav-search {
  233. background-color: @shortcuts-background;
  234. border-color: @shortcuts-border;
  235. }
  236. .sidebar-toggle {
  237. background-color: @sidebar-toggle-background;
  238. border-color: @sidebar-toggle-border;
  239. > .@{icon} {
  240. background-color: @sidebar-toggle-icon-background;
  241. color: @sidebar-toggle-icon-color;
  242. border-color: @sidebar-toggle-icon-border;
  243. }
  244. }
  245. .enable_breadcrumbs_skin_1() when(@enable-breadcrumbs = true) {
  246. .breadcrumbs {
  247. border-width: 0;
  248. background-color: @breadcrumbs-background;
  249. @media (min-width: @screen-fixed-breadcrumbs) {
  250. &.breadcrumbs-fixed {
  251. border-bottom-width: 1px;
  252. }
  253. }
  254. }
  255. }
  256. .enable_breadcrumbs_skin_1();
  257. @media only screen and (max-width: @grid-float-breakpoint-max) {
  258. .sidebar.responsive {
  259. border-width: 0;
  260. .box-shadow(none);
  261. .nav-list li.active > a:after {
  262. display: none;
  263. }
  264. .nav-list > li.active.highlight > a:after {
  265. display: block;
  266. }
  267. }
  268. }
  269. .menu_min_skin_1() {
  270. .nav-list > li.open > a {
  271. background-color: @nav-item-background;
  272. color: @nav-item-color;
  273. }
  274. .nav-list > li.active > a:after {
  275. border-width: 9px 6px;
  276. top: 10px;
  277. }
  278. .nav-list > li.active.highlight > a:after {
  279. border-width: 20px 0 20px 10px;
  280. top: 0;
  281. }
  282. .nav-list > li.active:hover > a:after {
  283. border-right-color: @menumin-item-active-background;
  284. }
  285. .nav-list > li.active > a , .nav-list > li.active > a:hover {
  286. background-color: @nav-item-background-active;
  287. color: @nav-item-color-active;
  288. }
  289. .nav-list > li:hover > a {
  290. color: @nav-item-color-hover;
  291. }
  292. .nav-list > li > a > .menu-text {
  293. background-color: @nav-item-background-hover;
  294. }
  295. .nav-list > li.active > a > .menu-text {
  296. background-color: @menumin-item-active-background;
  297. border: 0px solid @menumin-active-submenu-border-top;//for it to become visible when there are two menus and it overlaps the other
  298. border-width: 1px 1px 0;
  299. border-left-color: @active-border-highlight;
  300. }
  301. .nav-list > li.active > a:not(.dropdown-toggle) > .menu-text {
  302. border-width: 1px;
  303. border-top-color: lighten(@nav-item-border , 5%);
  304. border-bottom-color: lighten(@nav-item-border , 5%);
  305. border-right-color: lighten(@nav-item-border , 5%);
  306. }
  307. .nav-list > li.active:hover > a,
  308. .nav-list > li.active > a > .menu-text {
  309. color: @nav-item-color-active;
  310. }
  311. //.nav-list > li > a.active ,
  312. .nav-list > li.open.active > a {
  313. background-color: @nav-item-background-active;
  314. }
  315. .nav-list > li > a > .menu-text,
  316. .nav-list > li > .submenu {
  317. border-width: 0;
  318. border-left: 1px solid @menumin-submenu-border-left;
  319. .box-shadow(none);
  320. }
  321. .nav-list > li > .submenu {
  322. border-top: 1px solid @nav-item-border;
  323. &:after {
  324. //the extra pixel @ min.less
  325. display: none;
  326. }
  327. }
  328. .nav-list > li > .submenu {
  329. background-color: @submenu-background;
  330. border-top-color: @menumin-submenu-border-top;
  331. border-top-width: 1px !important;
  332. }
  333. .nav-list > li.active > .submenu {
  334. background-color: @submenu-background-active;
  335. border-top-color: @menumin-active-submenu-border-top;
  336. border-left-color: @active-border-highlight;
  337. }
  338. //-li > .arrow
  339. .nav-list > li > .arrow {
  340. //right: 0;
  341. &:after {
  342. border-right-color: @nav-item-background-hover;
  343. -moz-border-right-colors: @nav-item-background-hover;
  344. }
  345. &:before {
  346. border-right-color: darken(@menumin-item-active-background , 8%);
  347. -moz-border-right-colors: @menumin-item-active-background;
  348. }
  349. }
  350. .nav-list > li.active > .arrow {
  351. &:after {
  352. border-right-color: @menumin-item-active-background;
  353. -moz-border-right-colors: @menumin-item-active-background;
  354. }
  355. &:before {
  356. border-right-color: darken(@nav-item-color-active, 10%);
  357. -moz-border-right-colors: darken(@nav-item-color-active, 10%);
  358. }
  359. }
  360. .sidebar-shortcuts-large {
  361. background-color: @shortcuts-background;
  362. .box-shadow(none);
  363. border: 1px solid lighten(@nav-item-border , 5%);
  364. border-width: 0 1px 1px 0;
  365. top: 0;
  366. }
  367. }
  368. .enable_sidebar_collapse_skin_1() when(@enable-sidebar-collapse = true) {
  369. .sidebar.menu-min {
  370. .menu_min_skin_1();
  371. }
  372. }
  373. .enable_sidebar_collapse_skin_1();
  374. .enable_minimized_responsive_menu_skin_1() when(@enable-minimized-responsive-menu = true) {
  375. @media (max-width: @grid-float-breakpoint-max) {
  376. .sidebar.responsive-min {
  377. .menu_min_skin_1();
  378. .nav-list > li.active > a:after {
  379. display: block;
  380. }
  381. }
  382. .sidebar.responsive-max {
  383. .nav-list li.active > a:after {
  384. display: none;
  385. }
  386. .nav-list > li.highlight.active > a:after {
  387. display: block;
  388. }
  389. }
  390. }
  391. }
  392. .enable_minimized_responsive_menu_skin_1();
  393. //highlight .hover menus when mouse is in submenus
  394. .hover_highlight_skin_1() {
  395. .nav-list > li {
  396. .submenu > li.hover:hover > a {
  397. background-color: @submenu-item-hover-background;
  398. }
  399. &.active .submenu > li.hover:hover > a {
  400. background-color: @submenu-item-background-active-hover;
  401. }
  402. }
  403. }
  404. .enable_submenu_hover_skin_1() when(@enable-submenu-hover = true) {
  405. //.hover submenu
  406. @media only screen and (min-width: @screen-hover-menu) {
  407. .nav-list li.hover > .submenu {
  408. padding-left: 0;
  409. padding-bottom: 2px;
  410. padding-right: 0;
  411. border-color: @hover-submenu-border;
  412. }
  413. //to keep the lines between items
  414. .nav-list li.hover > .submenu > li > a {
  415. border-top-width: 1px;
  416. margin-bottom: 0;
  417. margin-top: 0;
  418. }
  419. .nav-list li.hover > .submenu > li:first-child > a {
  420. border-top-width: 0;
  421. }
  422. //3rd & 4th
  423. .nav-list > li > .submenu li.hover > .submenu {
  424. padding: 3px 2px;
  425. }
  426. .nav-list > li.active > .submenu li.hover > .submenu {
  427. border-left-color: @hover-active-submenu-border;//inside an active item but not an active item itself
  428. }
  429. .nav-list li.hover.active > .submenu,
  430. .nav-list li.active > .submenu li.hover.active > .submenu {
  431. border-left-color: @active-border-highlight;
  432. }
  433. .nav-list > li.active > .submenu li.hover > .submenu {
  434. background-color: @hover-submenu-active-background;
  435. }
  436. }//@media
  437. //sometimes .hover items are opened in small view, and back in large view we reset the highlight state
  438. .enable_collpasible_responsive_menu_skin_1_tmp() when(@enable-collapsible-responsive-menu = true) {
  439. @media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
  440. .sidebar.navbar-collapse {
  441. .nav-list > li.open.hover:not(:hover):not(:focus):not(.active) > a {
  442. color: @nav-item-color;
  443. }
  444. .nav-list > li.open.hover:hover > a {
  445. color: @nav-item-color-hover;
  446. background-color: @nav-item-background-hover;
  447. }
  448. .nav-list > li.active.hover:hover > a {
  449. color: @nav-item-color-active;
  450. background-color: @nav-item-background-active;
  451. }
  452. .nav-list > li > .submenu li.open.hover:not(:hover):not(:focus):not(.active) > a {
  453. color: @submenu-item-color;
  454. }
  455. }
  456. }
  457. //navbar-collapse
  458. @media only screen and (min-width: @screen-hover-menu) and (max-width: @grid-float-breakpoint-max) {
  459. .sidebar.navbar-collapse {
  460. //.nav-list li li.hover.active.open > a {
  461. // background-color: @submenu-item-background-active;
  462. //}
  463. .nav-list li.hover > .submenu {
  464. padding-bottom: 0;
  465. }
  466. .nav-list li.hover > .submenu {
  467. border-top-color: @submenu-border;
  468. }
  469. .nav-list li.hover.active > .submenu {
  470. border-top-color: @submenu-border-active;
  471. }
  472. .nav-list li.hover.active > .submenu,
  473. .nav-list > li > .submenu li.hover > .submenu,
  474. .nav-list li.active > .submenu li.hover.active > .submenu {
  475. border-left-width: 0;
  476. }
  477. .nav-list > li > .submenu li.hover > .submenu {
  478. padding: 0;
  479. }
  480. .nav-list li li.hover > .submenu > li:first-child > a {
  481. border-top-width: 1px;
  482. }
  483. //in wide view when we hover a submenu item, its parent LI > A are highlighted, but not needed in small view
  484. //so remove "li.hover:hover > a" highlight
  485. /**.nav-list li li:hover > a {
  486. background-color: @submenu-item-background;
  487. }
  488. .nav-list li li > a:hover,
  489. .nav-list li li.open > a:hover {
  490. background-color: @submenu-item-hover-background;
  491. }
  492. .nav-list > li.active li:hover > a {
  493. background-color: @submenu-item-background-active;
  494. }
  495. .nav-list > li.active li > a:hover {
  496. background-color: @submenu-item-background-active-hover;
  497. }*/
  498. }
  499. }
  500. .sidebar.navbar-collapse {
  501. .hover_highlight_skin_1();
  502. }
  503. }
  504. .enable_collpasible_responsive_menu_skin_1_tmp();
  505. @media only screen and (min-width: @screen-hover-menu) {
  506. .sidebar:not(.navbar-collapse) {
  507. .hover_highlight_skin_1();
  508. }
  509. }
  510. }
  511. .enable_submenu_hover_skin_1();
  512. //-li > .arrow
  513. //the submenu li > .arrow
  514. .sub_arrow1_skin_1() {
  515. > .arrow:after {
  516. border-right-color: @hover-submenu-arrow;
  517. -moz-border-right-colors: @hover-submenu-arrow;
  518. }
  519. > .arrow:before {
  520. border-right-color: darken(@hover-submenu-arrow, 10%);
  521. -moz-border-right-colors: darken(@hover-submenu-arrow, 10%);
  522. }
  523. }
  524. .nav-list li {
  525. .sub_arrow1_skin_1();
  526. }
  527. .sub_arrow2_skin_2() {
  528. &.active > .arrow:after {
  529. border-right-color: @hover-submenu-active-background;
  530. -moz-border-right-colors: @hover-submenu-active-background;
  531. }
  532. &.active > .arrow:before {
  533. border-right-color: darken(@nav-item-color-active , 10%);
  534. -moz-border-right-colors: darken(@nav-item-color-active , 10%);
  535. }
  536. }
  537. //li > .arrow
  538. .nav-list > li {
  539. .sub_arrow2_skin_2();
  540. //submenu of active, but it's not active itself
  541. &.active > .submenu li.hover > .arrow:before {
  542. border-right-color: darken(@hover-submenu2-active-arrow , 8%);
  543. -moz-border-right-colors: lighten(saturate(@hover-submenu2-active-arrow , 20%) , 20%);
  544. }
  545. //it is active itself
  546. &.active > .submenu li.hover.active > .arrow:before {
  547. border-right-color: @active-border-highlight;
  548. -moz-border-right-colors: lighten(saturate(@active-border-highlight, 40%), 20%);
  549. }
  550. &.active > .submenu li.hover > .arrow:after {
  551. border-right-color: @hover-submenu-active-background;
  552. -moz-border-right-colors: @hover-submenu-active-background;
  553. }
  554. }
  555. .nav-list li.pull_up {
  556. .sub_arrow1_skin_1() !important;
  557. .sub_arrow2_skin_2() !important;
  558. }
  559. .enable_old_menu_toggle_button_skin_1() when(@enable-old-menu-toggle-button = true) {
  560. .main-container .menu-toggler {
  561. background-color: @sidebar-toggler-background;
  562. &:before {
  563. border-top-color: @sidebar-toggler-line-1;
  564. border-bottom-color: @sidebar-toggler-line-2;
  565. }
  566. &:after {
  567. border-top-color: @sidebar-toggler-line-3;
  568. border-bottom-color: @sidebar-toggler-line-4;
  569. }
  570. > .toggler-text {
  571. border-top-color: @sidebar-toggler-background;
  572. -moz-border-top-colors: @sidebar-toggler-background;
  573. }
  574. }
  575. &.display {
  576. @color: desaturate(lighten(@navbar-background, 10%) , 30%);
  577. background-color: @color;
  578. &:before {
  579. border-top-color: lighten(@sidebar-toggler-line-1 , 15%);
  580. border-bottom-color: lighten(@sidebar-toggler-line-2 , 15%);
  581. }
  582. &:after {
  583. border-top-color: lighten(@sidebar-toggler-line-3 , 15%);
  584. border-bottom-color: lighten(@sidebar-toggler-line-4 , 15%);
  585. }
  586. > .toggler-text {
  587. border-top-color: @color;
  588. -moz-border-top-colors: @color;
  589. }
  590. }
  591. }
  592. .enable_old_menu_toggle_button_skin_1();
  593. .navbar .navbar-toggle {
  594. background-color: #4D9DCC;
  595. &:focus {
  596. background-color: #4D9DCC;
  597. border-color: transparent;
  598. }
  599. &:hover {
  600. background-color: darken(#4D9DCC , 5%);
  601. border-color: rgba(255,255,255,0.1);
  602. }
  603. &.display, &[data-toggle=collapse]:not(.collapsed) {
  604. background-color: darken(#4D9DCC , 10%);
  605. box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
  606. border-color: rgba(255, 255, 255, 0.35);
  607. }
  608. }
  609. @media only screen and (min-width: @screen-sm-min) {
  610. .container.main-container:before {
  611. box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  612. }
  613. }
  614. //horizontal menu
  615. .enable_horizontal_menu_skin_1() when(@enable-horizontal-menu = true) {
  616. @media only screen and (min-width: @grid-float-breakpoint) {
  617. .sidebar.h-sidebar {
  618. &:before {
  619. background-color: spin(lighten(@sidebar-background , 10%) , 10);
  620. border-bottom-color: lighten(@nav-item-border , 5%);
  621. }
  622. .nav-list {
  623. border-bottom-width: 0;
  624. }
  625. .nav-list > li.active:before {
  626. display: block;
  627. }
  628. .nav-list > li.hover.active > a:after {
  629. -moz-border-left-colors: none;
  630. -moz-border-right-colors: none;
  631. -moz-border-bottom-colors: #FFF;
  632. border-color: transparent transparent #FFF;
  633. border-width: 8px;
  634. top: auto;
  635. bottom: 0;
  636. right: auto;
  637. left: 50%;
  638. margin-left: -8px;
  639. content: "";
  640. display: block;
  641. }
  642. .nav-list > li.hover.active:hover > a:after, .nav-list > li.hover.active.hover-show > a:after {
  643. display: none;
  644. }
  645. + .main-content .breadcrumbs {
  646. border-color: #E8E8E8;
  647. }
  648. .nav-list > li {
  649. border-color: @nav-item-border;
  650. &:hover , &:hover + li {
  651. border-left-color: @h-nav-item-border-hover;
  652. }
  653. &:last-child:hover {
  654. border-right-color: @h-nav-item-border-hover;
  655. }
  656. &.active , &.active + li , &:hover + li.active {
  657. border-left-color: @h-nav-item-border-active;
  658. }
  659. &.active:last-child {
  660. border-right-color: @h-nav-item-border-active;
  661. }
  662. }
  663. .nav-list > li.hover > .submenu {
  664. border-top-color: @hover-submenu-border;
  665. }
  666. .nav-list > li.hover.active > .submenu {
  667. border-top-color: @active-border-highlight;
  668. border-left-color: @hover-submenu-border;
  669. }
  670. .sidebar-shortcuts-large {
  671. background-color: @sidebar-background;
  672. border: 1px solid @hover-submenu-border;
  673. border-top-color: @active-border-highlight;
  674. top: 100%;
  675. }
  676. //-li > .arrow
  677. .nav-list > li > .arrow {
  678. &:after {
  679. border-right-color: transparent;
  680. -moz-border-right-colors: none;
  681. border-bottom-color: @hover-submenu-arrow;
  682. -moz-border-bottom-colors: @hover-submenu-arrow;
  683. }
  684. &:before {
  685. -moz-border-right-colors: none;
  686. border-right-color: transparent;
  687. border-bottom-color: darken(@hover-submenu-arrow, 12%);
  688. -moz-border-bottom-colors: darken(@hover-submenu-arrow, 8%);
  689. }
  690. }
  691. .nav-list > li.active > .arrow , .sidebar-shortcuts-large {
  692. &:before {
  693. border-right-color: transparent;
  694. -moz-border-right-colors: none;
  695. border-bottom-color: darken(@nav-item-color-active , 10%);
  696. -moz-border-bottom-colors: darken(@nav-item-color-active , 30%);
  697. }
  698. &:after {
  699. border-right-color: transparent;
  700. -moz-border-right-colors: none;
  701. border-bottom-color: @hover-submenu-active-background;
  702. -moz-border-bottom-colors: @hover-submenu-active-background;
  703. }
  704. }
  705. .sidebar-shortcuts-large:after {
  706. border-bottom-color: @sidebar-background;
  707. -moz-border-bottom-colors: @sidebar-background;
  708. }
  709. .nav-list > li.highlight.active > a:before {
  710. display: none;
  711. }
  712. &.menu-min {
  713. .nav-list > li > a > .menu-text {
  714. border-width: 1px 0 0;
  715. border-top-color: @menumin-submenu-border-left;
  716. }
  717. .nav-list > li.active > a > .menu-text {
  718. border-top-color: @active-border-highlight;
  719. }
  720. .nav-list > li.active > .submenu {
  721. border-top-color: @menumin-active-submenu-border-top;
  722. }
  723. .nav-list > li > .arrow {
  724. &:after {
  725. border-bottom-color: @nav-item-background-hover;
  726. -moz-border-bottom-colors: @nav-item-background-hover;
  727. }
  728. &:before {
  729. border-bottom-color: darken(@menumin-item-active-background , 8%);
  730. -moz-border-bottom-colors: @menumin-item-active-background;
  731. }
  732. }
  733. .nav-list > li.active > .arrow {
  734. &:after {
  735. border-bottom-color: @menumin-item-active-background;
  736. -moz-border-bottom-colors: @menumin-item-active-background;
  737. }
  738. &:before {
  739. border-bottom-color: darken(@nav-item-color-active, 10%);
  740. -moz-border-bottom-colors: darken(@nav-item-color-active, 10%);
  741. }
  742. }
  743. }
  744. }
  745. .h-sidebar.sidebar-fixed {
  746. + .main-content {
  747. padding-top: 86px;
  748. }
  749. &.no-gap + .main-content {
  750. padding-top: 72px;
  751. }
  752. &.menu-min + .main-content {
  753. padding-top: 61px;
  754. }
  755. &.menu-min.no-gap + .main-content {
  756. padding-top: 47px;
  757. }
  758. }
  759. .main-content .h-sidebar.sidebar .nav-list {
  760. border-left: 1px solid lighten(@nav-item-border , 5%);
  761. }
  762. }//@media
  763. }
  764. .enable_horizontal_menu_skin_1();
  765. .sidebar-scroll {
  766. .sidebar-shortcuts {
  767. border-bottom-color: lighten(@nav-item-border , 5%);
  768. }
  769. .sidebar-toggle {
  770. border-top-color: lighten(@nav-item-border , 5%);
  771. }
  772. }
  773. .scrollout .scroll-track {
  774. background-color: transparent;
  775. }
  776. .scrollout .scroll-bar {
  777. background-color: #CCC;
  778. background-color: rgba(0,0,0,0.2);
  779. }
  780. @media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
  781. .navbar.navbar-collapse {
  782. background-color: transparent;
  783. &:before , .navbar-container {
  784. background: @navbar-background;
  785. }
  786. }
  787. }
  788. .nav-list > li.disabled:before {
  789. display: none !important;
  790. }
  791. .nav-list > li.disabled > a {
  792. background-color: #333 !important;
  793. color: #AAA !important;
  794. }
  795. .nav-list li .submenu > li.disabled > a,
  796. .nav-list li.disabled .submenu > li > a {
  797. background-color: #444 !important;
  798. color: #A0A0A0 !important;
  799. cursor: not-allowed !important;
  800. > .menu-icon {
  801. display: none;
  802. }
  803. }
  804. .nav-list > li.disabled .submenu > li > a {
  805. border-top-color: #505050;
  806. }
  807. }//.skin-1