_main-sidebar.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. //
  2. // Core: Main Sidebar
  3. //
  4. // Default Sidebar Theme
  5. @include sidebar-theme($sidebar-dark-bg, $sidebar-dark-color);
  6. .main-sidebar {
  7. @include transition($sidebar-transition);
  8. z-index: $zindex-sidebar;
  9. min-width: $sidebar-width;
  10. max-width: $sidebar-width;
  11. }
  12. @include media-breakpoint-down(sm) {
  13. :not(.layout-fixed).main-sidebar {
  14. margin-left: -#{$sidebar-width};
  15. .sidebar-open & {
  16. transform: translateX($sidebar-width);
  17. .sidebar-mini-icon {
  18. display: none;
  19. transition: display $transition-speed;
  20. }
  21. }
  22. }
  23. }
  24. .sidebar {
  25. height: 100%;
  26. overflow-x: hidden;
  27. overflow-y: auto;
  28. padding-bottom: $sidebar-padding-y;
  29. padding-left: $sidebar-padding-x;
  30. padding-right: $sidebar-padding-x;
  31. padding-top: $sidebar-padding-y;
  32. @include scrollbar-color-gray();
  33. @include scrollbar-width-none();
  34. &:hover {
  35. @include scrollbar-width-thin();
  36. }
  37. }
  38. // Sidebar navigation menu
  39. .nav-sidebar {
  40. // All levels
  41. .nav-link > .right,
  42. .nav-link > span > .right {
  43. position: absolute;
  44. right: 1rem;
  45. top: .7rem;
  46. }
  47. .nav-link {
  48. position: relative;
  49. span {
  50. display: inline-block;
  51. padding-left: .5rem;
  52. }
  53. .nav-icon {
  54. padding-left: .3rem;
  55. }
  56. }
  57. .nav-header {
  58. font-size: .9rem;
  59. padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
  60. }
  61. // Tree view menu
  62. .nav-treeview {
  63. display: none;
  64. list-style: none;
  65. padding: 0;
  66. }
  67. .menu-open > .nav-treeview {
  68. display: block;
  69. }
  70. }
  71. //