_nav-sidebar.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. .sidebar-bg-dark {
  2. @include nav-treeview-dark (
  3. $sidebar-dark-bg,
  4. $sidebar-dark-hover-bg,
  5. $sidebar-dark-color,
  6. $sidebar-dark-hover-color,
  7. $sidebar-dark-active-color,
  8. $sidebar-dark-submenu-bg,
  9. $sidebar-dark-submenu-color,
  10. $sidebar-dark-submenu-hover-color,
  11. $sidebar-dark-submenu-hover-bg,
  12. $sidebar-dark-submenu-active-color,
  13. $sidebar-dark-submenu-active-bg
  14. );
  15. }
  16. .sidebar-bg-light {
  17. @include nav-treeview-light (
  18. $sidebar-light-bg,
  19. $sidebar-light-hover-bg,
  20. $sidebar-light-color,
  21. $sidebar-light-hover-color,
  22. $sidebar-light-active-color,
  23. $sidebar-light-submenu-bg,
  24. $sidebar-light-submenu-color,
  25. $sidebar-light-submenu-hover-color,
  26. $sidebar-light-submenu-hover-bg,
  27. $sidebar-light-submenu-active-color,
  28. $sidebar-light-submenu-active-bg
  29. );
  30. }
  31. .sidebar-color-primary {
  32. @include sidebar-color($primary);
  33. }
  34. // Sidebar navigation menu
  35. .nav-sidebar {
  36. // All levels
  37. .nav-item {
  38. > .nav-link {
  39. margin-bottom: .2rem;
  40. .right {
  41. @include transition(transform $transition-fn $transition-speed);
  42. transform: none #{"/*rtl:rotate(-180deg)*/"};
  43. }
  44. }
  45. }
  46. // All levels
  47. .nav-link > .right,
  48. .nav-link > p > .right {
  49. position: absolute;
  50. right: 1rem;
  51. top: .7rem;
  52. }
  53. .nav-link {
  54. position: relative;
  55. width: 100%;
  56. p {
  57. display: inline;
  58. padding-left: .5rem;
  59. margin: 0;
  60. }
  61. .nav-icon {
  62. padding-left: .3rem;
  63. }
  64. }
  65. .nav-header {
  66. font-size: .9rem;
  67. padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
  68. }
  69. // Tree view menu
  70. .nav-treeview {
  71. display: none;
  72. list-style: none;
  73. padding: 0;
  74. }
  75. .menu-open {
  76. > .nav-treeview {
  77. display: block;
  78. }
  79. }
  80. .menu-open,
  81. .menu-is-opening {
  82. > .nav-link {
  83. svg.right,
  84. i.right {
  85. transform: rotate(-90deg) #{"/*rtl:rotate(-90deg)*/"};
  86. }
  87. }
  88. }
  89. }