skin-3.less 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  1. //skin-3 should be used along with "no-skin" because of some overlappings
  2. //<body class="no-skin skin-3">
  3. /* skin 3 */
  4. .skin-3 {
  5. @body-background: #BBB;
  6. @navbar-background: #404040;
  7. @sidebar-background: #DBDBDB;
  8. @sidebar-border: #A4C6DD;
  9. @nav-item-background: #E3E3E3;
  10. @nav-item-color: #5A5A5A;
  11. @nav-item-border: #F2F2F2;
  12. //different states
  13. @nav-item-color-hover: mix(#1963AA , #4D96CB);
  14. @nav-item-background-hover: #FFF;
  15. @nav-item-color-open: @nav-item-color-hover;
  16. @nav-item-background-open: #F8F8F8;
  17. @nav-item-background-active: lighten(saturate(#EEF8FF , 10%), 1%);
  18. @nav-item-color-active: #4D96CB;
  19. @nav-item-border-active: #A4C6DD;
  20. @nav-item-border-hover: desaturate(darken(@nav-item-border-active , 5%) , 5%);
  21. //submenu colors
  22. @submenu-background: #FFF;
  23. @submenu-border: #E5E5E5;
  24. @submenu-background-active: #FFF; //darken(@submenu-background-active , 2.5%);
  25. @submenu-border-active: #E5E5E5;
  26. @submenu-item-color: #616161;
  27. @submenu-item-border: #E4E4E4;
  28. @submenu-item-background: transparent;
  29. @submenu-item-background-hover: #F1F5F9;
  30. @submenu-item-background-active: #F5F7FA;
  31. @breadcrumbs-background: #E7F2F8;
  32. @sidebar-toggle-icon-color: #FFF;
  33. @sidebar-toggle-background: #D0D0D0;
  34. @shortcuts-background: @sidebar-background;
  35. @shortcuts-border: @nav-item-border;
  36. background-color: @body-background;
  37. //add a lined-paper like effect
  38. .main-container {
  39. &:before {
  40. background: #FFF;
  41. background: -moz-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
  42. background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEF5FA), color-stop(4%, #FFF)) 0 4px;
  43. background: -webkit-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
  44. background: -o-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
  45. background: -ms-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
  46. background: linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
  47. -moz-background-size: 100% 26px;
  48. -webkit-background-size: 100% 26px;
  49. -o-background-size: 100% 26px;
  50. -ms-background-size: 100% 26px;
  51. background-size: 100% 26px;
  52. }
  53. @media (min-width: @screen-sm-min) {
  54. &.container:before {
  55. .box-shadow(~"0 0 0 1px rgba(50, 100, 200, 0.1)");
  56. }
  57. }
  58. }
  59. .navbar {
  60. background: @navbar-background;
  61. }
  62. .sidebar {
  63. background-color: @sidebar-background;
  64. border-style: solid;
  65. border-width: 0 1px 0 0;
  66. border-color: @sidebar-border;
  67. }
  68. .nav-list > li {
  69. border-color: @nav-item-border;// !important;
  70. > a {
  71. background-color: @nav-item-background;
  72. color: @nav-item-color;
  73. > .arrow {
  74. color: inherit;
  75. }
  76. &:focus {
  77. background-color: lighten(@nav-item-background , 2%);
  78. color: @nav-item-color;
  79. }
  80. }
  81. &:hover {
  82. border-color: @nav-item-border-hover !important;
  83. & + li {
  84. border-top-color: @nav-item-border-hover !important;
  85. }
  86. }
  87. &.open {
  88. border-color: @nav-item-border-hover !important;
  89. & + li {
  90. border-top-color: @nav-item-border-hover !important;
  91. }
  92. }
  93. &.active {
  94. border-color: @nav-item-border-active !important;
  95. & + li {
  96. border-color: @nav-item-border-active !important;
  97. &:last-child {
  98. border-bottom-color: @nav-item-border !important;
  99. &:hover {
  100. border-bottom-color: @nav-item-border-hover !important;
  101. }
  102. }
  103. }
  104. }
  105. &:hover > a {
  106. background-color: @nav-item-background-hover;
  107. color: @nav-item-color-hover;
  108. }
  109. &.open > a , &.open:hover > a {
  110. color: @nav-item-color-open;
  111. background-color: @nav-item-background-open;
  112. }
  113. &.open > a > .arrow {
  114. color: inherit;
  115. }
  116. &.active > a , &.active.highlight > a {
  117. background-color: @nav-item-background-active !important;
  118. color: @nav-item-color-active !important;
  119. }
  120. }
  121. .nav-list > li:hover:before , .nav-list > li.open:before {
  122. display: block;
  123. background-color: saturate(lighten(mix(#4D96CB , #444) , 10%), 10%) !important;
  124. }
  125. .nav-list > li.active:before {
  126. display: block;
  127. background-color: #4D96CB !important;
  128. }
  129. .page-content {
  130. background-color:transparent;
  131. //so that .main-content's background can be seen
  132. }
  133. .infobox-container .infobox:not(.infobox-dark) {
  134. border-style: solid;
  135. background-color: transparent;
  136. }
  137. .nav-list > li.active:after {
  138. display: none;
  139. }
  140. .nav-list li.active > a:after {
  141. border-right-color: #FFF;
  142. -moz-border-right-colors: #FFF;
  143. //border-width: 16px 10px;
  144. //top: 3px;
  145. border-width: 12px 8px;
  146. top: 7px;
  147. right: -1px;
  148. }
  149. .nav-list li.active > a:before {
  150. display: block;
  151. content: "";
  152. position: absolute;
  153. background-color: transparent;
  154. border-style: solid;
  155. border-color: transparent;
  156. border-right-color: darken(@sidebar-border , 5%);
  157. -moz-border-right-colors: darken(@sidebar-border , 5%);
  158. //border-width: 16px 10px;
  159. //top: 3px;
  160. right: 0;
  161. border-width: 12px 8px;
  162. top: 7px;
  163. }
  164. .nav-list > li.active > .submenu li.active > a {
  165. &:before, &:after {
  166. //top: 6px;
  167. top: 4px;
  168. }
  169. }
  170. .nav-list li.active.open > a:before {
  171. display: none;
  172. }
  173. .nav-list li.highlight.active.open > a:before {
  174. display: block;
  175. }
  176. .nav-list li.active:not(.open) li.active > a:before {
  177. //hide the active caret when parent submenu is being closed (not open)
  178. display: none !important;
  179. }
  180. .nav-list > li.highlight.active > a:after {
  181. border-left-color: @nav-item-background-active;
  182. -moz-border-left-colors: @nav-item-background-active;
  183. }
  184. .nav-list > li.highlight.active > a:before {
  185. border-left-color: darken(@sidebar-border , 5%);
  186. -moz-border-left-colors: darken(@sidebar-border , 5%);
  187. }
  188. .nav-list li > .arrow:before {
  189. border-right-color: darken(#A4C6DD , 10%);
  190. -moz-border-right-colors: darken(#A4C6DD , 10%);
  191. }
  192. .nav-list > li .submenu > li {
  193. &.active:not(.open) > a {
  194. background-color: @submenu-item-background-active;
  195. &:hover {
  196. background-color: @submenu-item-background-hover;
  197. }
  198. }
  199. }
  200. @media only screen and (max-width: @grid-float-breakpoint-max) {
  201. .sidebar.responsive .nav-list > li.active.open > a:after {
  202. display: none;
  203. }
  204. }
  205. .enable_submenu_hover_skin_3() when(@enable-submenu-hover = true) {
  206. @media only screen and (min-width: @screen-hover-menu) {
  207. .nav-list li.hover > .submenu {
  208. border-color: darken(@sidebar-border , 3%);
  209. }
  210. }//@media
  211. @media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
  212. .nav-list li.hover {
  213. &.active > a:before {
  214. display: block;
  215. }
  216. .submenu > li.active > a:before {
  217. display: none ;
  218. }
  219. }
  220. }
  221. }
  222. .enable_submenu_hover_skin_3();
  223. .menu_min_skin_3() {
  224. .nav-list > li > a > .menu-text {
  225. background-color: lighten(#EDF3F7 , 1%);
  226. border-color: #A4C6DD;
  227. }
  228. .nav-list > li.active > a > .menu-text {
  229. background-color: #EDF3F7;
  230. }
  231. .nav-list > li > .submenu {
  232. border-color: #A4C6DD;
  233. border-top-color: #C9DAE5;
  234. }
  235. .nav-list > li.active > .arrow:before {
  236. border-right-color: #709FBF;
  237. -moz-border-right-colors: #709FBF;
  238. }
  239. .nav-list > li > .arrow:after {
  240. border-right-color: #EDF3F7;
  241. -moz-border-right-colors: #EDF3F7;
  242. }
  243. .nav-list li.active > a {
  244. &:after , &:before {
  245. display: none;
  246. }
  247. }
  248. .nav-list > li.active > a {
  249. &:after, &:before {
  250. display: block;
  251. border-width: 9px 7px;
  252. top: 10px;
  253. }
  254. }
  255. .nav-list > li.active.highlight > a {
  256. &:after, &:before {
  257. border-width: 20px 0 21px 10px;
  258. top: -1px;
  259. }
  260. }
  261. .nav-list > li.active:hover > a, .nav-list > li.active.hover-show > a{
  262. &:after, &:before {
  263. display: none;
  264. }
  265. }
  266. .sidebar-shortcuts-large {
  267. background-color: #F5F5F5;
  268. }
  269. }
  270. .enable_sidebar_collapse_skin_3() when(@enable-sidebar-collapse = true) {
  271. .sidebar.menu-min {
  272. .menu_min_skin_3();
  273. .enable_responsive_menu_tmp_in1() when(@enable-responsive-menu = true) {
  274. @media only screen and (max-width: @grid-float-breakpoint-max) {
  275. &.responsive .nav-list > li.active > a {
  276. &:after, &:before {
  277. display: none;
  278. }
  279. }
  280. }
  281. }
  282. .enable_responsive_menu_tmp_in1();
  283. }
  284. }
  285. .enable_sidebar_collapse_skin_3();
  286. @media only screen and (max-width: @grid-float-breakpoint-max) {
  287. .sidebar.responsive {
  288. border-bottom-width: 1px !important;
  289. .nav-list > li.active.open > a:after {
  290. display: none;
  291. }
  292. .nav-list > li.active.highlight > a:after,
  293. .nav-list > li.active.highlight > a:before {
  294. display: block;
  295. }
  296. }
  297. .sidebar.navbar-collapse {
  298. border-bottom-color: #A4C6DD;
  299. }
  300. .nav-list li.active > a {
  301. &:after , &:before {
  302. display: none;
  303. }
  304. }
  305. .enable_minimized_responsive_menu_skin_3() when(@enable-minimized-responsive-menu = true) {
  306. .sidebar.responsive-min {
  307. .menu_min_skin_3();
  308. }
  309. .sidebar.responsive-max {
  310. border-width: 0 1px 1px 0;
  311. .nav-list li.hover.active > a:before {
  312. display: none;
  313. }
  314. .nav-list > li.active.open > a:after {
  315. display: none;
  316. }
  317. .nav-list > li.active.highlight > a:after,
  318. .nav-list > li.active.highlight > a:before {
  319. display: block;
  320. }
  321. }
  322. }
  323. .enable_minimized_responsive_menu_skin_3();
  324. .sidebar.navbar-collapse .sidebar-shortcuts-large {
  325. background-color: transparent;
  326. }
  327. }
  328. //extra
  329. .sidebar-shortcuts , .sidebar-shortcuts-mini {
  330. background-color: @shortcuts-background;
  331. //border-color: @shortcuts-border;
  332. }
  333. .sidebar-shortcuts-large > .btn:focus {
  334. outline: none;
  335. }
  336. .sidebar > .nav-search {
  337. background-color: @shortcuts-background;
  338. //border-color: @shortcuts-border;
  339. }
  340. .sidebar-toggle {
  341. background-color: @sidebar-toggle-background;
  342. border-color: @nav-item-border;
  343. //border-width: 0 0 1px;
  344. &:before {
  345. border-color: @nav-item-border;
  346. }
  347. > .@{icon} {
  348. background-color: @sidebar-toggle-icon-color;
  349. background-color:#FFF;
  350. border-color:#999;
  351. color:#999;
  352. }
  353. }
  354. .sidebar-scroll .nav-wrap-up + .sidebar-toggle:after {
  355. display: block;
  356. content: "";
  357. position: absolute;
  358. top: 0;
  359. bottom: 0;
  360. right: -1px;
  361. border-right: 1px solid @sidebar-border;//to cover the active item caret when scrolling
  362. }
  363. .enable_collapsible_responsive_menu_skin_3_tmpp() when(@enable-collapsible-responsive-menu = true) {
  364. @media only screen and (max-width: @grid-float-breakpoint-max) {
  365. .sidebar.navbar-collapse {
  366. .nav-list > li:before {
  367. height: @nav-item-height + 4 !important;
  368. }
  369. .sidebar-shortcuts {
  370. padding: 0 0 3px !important;
  371. }
  372. }
  373. }
  374. }
  375. .enable_collapsible_responsive_menu_skin_3_tmpp();
  376. @media only screen and (min-width: @screen-hover-menu) {
  377. .nav-list > li.active.hover {
  378. &:hover, &.hover-show {
  379. > a.dropdown-toggle:after, > a.dropdown-toggle:before {
  380. display: none;
  381. }
  382. }
  383. }
  384. }
  385. .enable_old_menu_toggle_button_skin_3() when(@enable-old-menu-toggle-button = true) {
  386. .main-container .menu-toggler {
  387. background-color: #62A8D1;
  388. color: #FFF;
  389. &:before, &:after {
  390. border-color: #FFF;
  391. }
  392. > .toggler-text {
  393. border-top-color: #62A8D1;
  394. -moz-border-top-colors: #62A8D1;
  395. &:after {
  396. color: #FFF;
  397. }
  398. }
  399. }
  400. }
  401. .enable_old_menu_toggle_button_skin_3();
  402. .navbar .navbar-toggle {
  403. //box-shadow: none;
  404. //border-radius: 0;
  405. border-color: rgba(255, 255, 255, 0.15);
  406. transition: background-color 0.1s ease 0s;
  407. background-color: #648CAE;
  408. &:focus {
  409. background-color: #648CAE;
  410. border-color: rgba(255, 255, 255, 0.15);
  411. }
  412. &:hover {
  413. background-color: darken(#648CAE , 4%);
  414. border-color: rgba(255, 255, 255, 0.15);
  415. }
  416. &.display, &[data-toggle=collapse]:not(.collapsed) {
  417. background-color: darken(#648CAE , 8%);
  418. border-color: rgba(255, 255, 255, 0.3);
  419. }
  420. }
  421. .enable_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
  422. .breadcrumbs {
  423. border-width: 0;
  424. background-color: @breadcrumbs-background;
  425. border-radius: 4px;
  426. margin: 8px 8px 0;
  427. }
  428. @media only screen and (max-width: @grid-float-breakpoint-max) {
  429. .breadcrumbs {
  430. margin: 5px 5px 0;
  431. }
  432. .menu-toggler + .sidebar.responsive + .main-content .breadcrumbs {
  433. margin: 0;
  434. border-radius: 0;
  435. }
  436. }
  437. .enable_fixed_breadcrumbs_skin_3() when(@enable-fixed-breadcrumbs = true) {
  438. @media (min-width: @screen-fixed-breadcrumbs) {
  439. .breadcrumbs.breadcrumbs-fixed + .page-content {
  440. padding-top: @page-content-padding-top + @breadcrumb-height + 8;
  441. }
  442. }
  443. @media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) {
  444. .breadcrumbs.breadcrumbs-fixed + .page-content {
  445. padding-top: @page-content-padding-top + @breadcrumb-height + 5;
  446. }
  447. .menu-toggler + .sidebar.reponsive + .main-content .breadcrumbs.breadcrumbs-fixed + .page-content {
  448. padding-top: @page-content-padding-top + @breadcrumb-height;
  449. }
  450. }
  451. .enable_container_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
  452. //because breadcrumbs has 8px margin on left and right
  453. .container.main-container {
  454. @media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs, @screen-compact-menu)) and (max-width: @grid-float-breakpoint-max) {
  455. .sidebar.compact + .main-content .breadcrumbs-fixed {
  456. width: @container-sm - 10;
  457. }
  458. }
  459. @media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
  460. .breadcrumbs-fixed {
  461. width: @container-sm - 10;
  462. }
  463. .sidebar.menu-min + .main-content .breadcrumbs-fixed {
  464. width: @container-sm - 10;
  465. }
  466. .sidebar.responsive-min + .main-content .breadcrumbs-fixed {
  467. width: @container-sm - @sidebar-min-width - 10;
  468. }
  469. }
  470. @media (min-width: max(@screen-compact-menu, @screen-md-min)) {
  471. .sidebar.compact + .main-content .breadcrumbs-fixed {
  472. width: @container-md - @sidebar-compact-width - 16;
  473. }
  474. }
  475. @media (min-width: @screen-md-min) {
  476. .breadcrumbs-fixed {
  477. width: @container-md;
  478. }
  479. .sidebar + .main-content .breadcrumbs-fixed {
  480. width: @container-md - @sidebar-width - 16;
  481. }
  482. .sidebar.menu-min + .main-content .breadcrumbs-fixed {
  483. width: @container-md - @sidebar-min-width - 16;
  484. }
  485. }
  486. @media (min-width: max(@screen-compact-menu, @screen-lg-min)) {
  487. .sidebar.compact + .main-content .breadcrumbs-fixed {
  488. width: @container-lg - @sidebar-compact-width - 16;
  489. }
  490. }
  491. @media (min-width: @screen-lg-min) {
  492. .breadcrumbs-fixed {
  493. width: @container-lg - 16;
  494. }
  495. .sidebar + .main-content .breadcrumbs-fixed {
  496. width: @container-lg - @sidebar-width - 16;
  497. }
  498. .sidebar.menu-min + .main-content .breadcrumbs-fixed {
  499. width: @container-lg - @sidebar-min-width - 16;
  500. }
  501. }
  502. }
  503. }
  504. .enable_container_breadcrumbs_skin_3();
  505. }
  506. .enable_fixed_breadcrumbs_skin_3();
  507. }
  508. .enable_breadcrumbs_skin_3();
  509. @media only screen and (max-width: @grid-float-breakpoint-max) {
  510. .nav-list li.active > a:before, .nav-list li.active > a:after {
  511. display: none;
  512. }
  513. }
  514. .sidebar-shortcuts-large > .btn {
  515. line-height: 26px;
  516. border-width: 1px;
  517. }
  518. .sidebar-shortcuts-mini {
  519. padding-top: 3px;
  520. padding-bottom: 3px;
  521. padding-left: 1px;
  522. }
  523. .sidebar-shortcuts-mini > .btn {
  524. border-width: 1px;
  525. opacity: 1;
  526. padding: 7px;
  527. margin: 1px 1px 0 0;
  528. }
  529. .enable_horizontal_menu_skin_3() when(@enable-horizontal-menu = true) {
  530. @media only screen and (min-width: @grid-float-breakpoint) {
  531. //top menu
  532. .sidebar.h-sidebar {
  533. background-color: @nav-item-background;
  534. &:before {
  535. background-color: #CBD0D6;
  536. border-bottom-width: 0;
  537. }
  538. .sidebar-shortcuts-mini > .btn {
  539. padding: 8px;
  540. }
  541. .sidebar-shortcuts-large {
  542. background-color: #FFF;
  543. line-height: 36px;
  544. }
  545. + .main-content .breadcrumbs {
  546. border-color: desaturate(darken(@breadcrumbs-background , 5%) , 5%);
  547. top: 2px;
  548. }
  549. .nav-list > li.hover > .submenu {
  550. //border-color: #CCC;
  551. border-color: #A4C6DD;
  552. }
  553. .nav-list > li {
  554. border-color: @nav-item-border;
  555. &:hover , &:hover + li {
  556. border-left-color: @nav-item-border-hover;
  557. }
  558. &:last-child:hover {
  559. border-right-color: @nav-item-border-hover;
  560. }
  561. &.active , &.active + li , &:hover + li.active {
  562. border-left-color: @nav-item-border-active;
  563. }
  564. &.active:last-child {
  565. border-right-color: @nav-item-border-active;
  566. }
  567. }
  568. .nav-list > li.active > a:after {
  569. left: 0;
  570. top: auto;
  571. right: auto;
  572. bottom: -2px;
  573. left: 50%;
  574. margin-left: -7px;
  575. border-color: transparent;
  576. -moz-border-right-colors: none;
  577. border-width: 8px 7px !important;
  578. border-bottom-color: #FFF;
  579. -moz-border-bottom-colors: #FFF;
  580. }
  581. .nav-list > li.active > a:before {
  582. display: block;
  583. left: 0;
  584. top: auto;
  585. right: auto;
  586. bottom: -1px;
  587. left: 50%;
  588. margin-left: -8px !important;
  589. border-width: 8px !important;
  590. border-color: transparent;
  591. -moz-border-right-colors: none;
  592. border-bottom-color: lighten(#4D96CB, 10%);
  593. -moz-border-bottom-colors: lighten(#4D96CB, 10%);
  594. }
  595. .nav-list > li.hover {
  596. > .arrow:before {
  597. -moz-border-right-colors: none;
  598. border-right-color: transparent;
  599. border-bottom-color: darken(#A4C6DD , 10%);
  600. -moz-border-bottom-colors: darken(#A4C6DD , 10%);
  601. }
  602. }
  603. &.menu-min {
  604. .sidebar-shortcuts {
  605. max-width: 52px;
  606. padding-left: 2px;
  607. padding-right: 2px;
  608. }
  609. .sidebar-shortcuts-mini > .btn {
  610. padding: 7px;
  611. }
  612. .nav-list > li.hover > .submenu {
  613. border-top-color: #C9DAE5;
  614. }
  615. .nav-list > li.active > a > .menu-text {
  616. border-left-color: #A4C6DD;
  617. }
  618. .nav-list > li > .arrow:after {
  619. -moz-border-bottom-colors: #EDF3F7;
  620. border-bottom-color: #EDF3F7;
  621. }
  622. }
  623. }
  624. }//@media
  625. }
  626. .enable_horizontal_menu_skin_3();
  627. .sidebar-scroll {
  628. .sidebar-shortcuts {
  629. //border-bottom: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
  630. border-bottom-color: 1px solid #99B6C9;
  631. }
  632. .sidebar-toggle {
  633. //border-top: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
  634. border-top-color: #99B6C9;
  635. }
  636. }
  637. @media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
  638. .navbar.navbar-collapse {
  639. background-color: transparent;
  640. &:before , .navbar-container {
  641. background: @navbar-background;
  642. }
  643. }
  644. }
  645. //disabled state
  646. .nav-list > li.disabled:before {
  647. display: none !important;
  648. }
  649. }//.skin-3