_main-sidebar.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /**
  2. * Component: Main Sidebar
  3. * -----------------------
  4. */
  5. .main-sidebar {
  6. height: 100vh;
  7. overflow-y: hidden;
  8. z-index: $zindex-main-sidebar;
  9. }
  10. .sidebar {
  11. height: calc(100% - 4rem);
  12. overflow-y: auto;
  13. padding-bottom: $sidebar-padding-y;
  14. padding-left: $sidebar-padding-x;
  15. padding-right: $sidebar-padding-x;
  16. padding-top: $sidebar-padding-y;
  17. }
  18. // Sidebar user panel
  19. .user-panel {
  20. position: relative;
  21. [class*='sidebar-dark'] & {
  22. border-bottom: 1px solid lighten($dark, 12%);
  23. }
  24. [class*='sidebar-light'] & {
  25. border-bottom: 1px solid $gray-300;
  26. }
  27. &,
  28. .info {
  29. overflow: hidden;
  30. white-space: nowrap;
  31. }
  32. .image {
  33. display: inline-block;
  34. padding-left: $nav-link-padding-x - .2;
  35. }
  36. img {
  37. height: auto;
  38. width: $sidebar-user-image-width;
  39. }
  40. .info {
  41. display: inline-block;
  42. padding: 5px 5px 5px 10px;
  43. }
  44. .status,
  45. .dropdown-menu {
  46. font-size: $font-size-sm;
  47. }
  48. }
  49. // Sidebar navigation menu
  50. .nav-sidebar {
  51. // All levels
  52. .nav-item {
  53. > .nav-link {
  54. margin-bottom: 0.2rem;
  55. .right {
  56. @include transition(transform $transition-fn $transition-speed);
  57. }
  58. }
  59. }
  60. .nav-link > p > .right {
  61. position: absolute;
  62. right: 1rem;
  63. top: 12px;
  64. &:nth-child(2) {
  65. right: 2.5rem;
  66. }
  67. }
  68. .menu-open {
  69. > .nav-treeview {
  70. display: block;
  71. }
  72. > .nav-link {
  73. i.right {
  74. @include rotate(-90deg);
  75. }
  76. }
  77. }
  78. // First Level
  79. > .nav-item {
  80. margin-bottom: 0;
  81. .nav-icon {
  82. text-align: center;
  83. width: $sidebar-nav-icon-width;
  84. font-size: 1.2rem;
  85. margin-right: .2rem;
  86. &.fa,
  87. &.fas,
  88. &.far,
  89. &.fab,
  90. &.glyphicon,
  91. &.ion {
  92. font-size: 1.1rem;
  93. }
  94. }
  95. .float-right {
  96. margin-top: 3px;
  97. }
  98. }
  99. // Tree view menu
  100. .nav-treeview {
  101. display: none;
  102. list-style: none;
  103. padding: 0;
  104. > .nav-item {
  105. > .nav-link {
  106. > .nav-icon {
  107. width: $sidebar-nav-icon-width;
  108. }
  109. }
  110. }
  111. }
  112. &.nav-child-indent { 
  113. .nav-treeview{
  114. padding-left: 1rem;
  115. }
  116. }
  117. .nav-header {
  118. font-size: .9rem;
  119. padding: $nav-link-padding-y;
  120. &:not(:first-of-type) {
  121. padding: 1.7rem 1rem .5rem 1rem;
  122. }
  123. }
  124. .nav-link p {
  125. display: inline-block;
  126. margin: 0;
  127. }
  128. }
  129. #sidebar-overlay {
  130. background-color: rgba($black, 0.1);
  131. bottom: 0;
  132. display: none;
  133. left: 0;
  134. position: fixed;
  135. right: 0;
  136. top: 0;
  137. z-index: $zindex-main-sidebar - 1;
  138. @include media-breakpoint-down(md) {
  139. .sidebar-open & {
  140. display: block;
  141. }
  142. }
  143. }
  144. .sidebar-mini-md.sidebar-open {
  145. #sidebar-overlay {
  146. @include media-breakpoint-up(sm) {
  147. display: none;
  148. }
  149. @include media-breakpoint-down(sm) {
  150. display: block;
  151. }
  152. }
  153. }
  154. // Sidebar variants
  155. @each $name, $color in $theme-colors {
  156. .sidebar-dark-#{$name} {
  157. @include skin-dark-sidebar($color)
  158. }
  159. .sidebar-light-#{$name} {
  160. @include skin-light-sidebar($color)
  161. }
  162. }