_sidebar-mini.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. //
  2. // Component: Sidebar Mini
  3. //
  4. // Logo style
  5. .logo-xs,
  6. .logo-xl {
  7. opacity: 1;
  8. position: absolute;
  9. visibility: visible;
  10. &.brand-image-xs {
  11. left: 18px;
  12. top: 12px;
  13. }
  14. &.brand-image-xl {
  15. left: 12px;
  16. top: 6px;
  17. }
  18. }
  19. .logo-xs {
  20. opacity: 0;
  21. visibility: hidden;
  22. &.brand-image-xl {
  23. left: 16px;
  24. top: 8px;
  25. }
  26. }
  27. .brand-link {
  28. &.logo-switch {
  29. &::before {
  30. content: '\00a0';
  31. }
  32. }
  33. }
  34. // Add sidebar-mini class to the body tag to activate this feature
  35. .sidebar-mini {
  36. @include media-breakpoint-up(lg) {
  37. @include sidebar-mini-breakpoint;
  38. }
  39. }
  40. @include media-breakpoint-down(md) {
  41. .sidebar-mini.sidebar-collapse .main-sidebar {
  42. box-shadow: none !important;
  43. }
  44. }
  45. .sidebar-mini-md {
  46. @include media-breakpoint-up(md) {
  47. @include sidebar-mini-breakpoint;
  48. }
  49. }
  50. @include media-breakpoint-down(sm) {
  51. .sidebar-mini-md.sidebar-collapse .main-sidebar {
  52. box-shadow: none !important;
  53. }
  54. }
  55. .sidebar-collapse {
  56. .main-sidebar.sidebar-focused,
  57. .main-sidebar:hover {
  58. .nav-header {
  59. display: inline-block;
  60. }
  61. .nav .nav-treeview {
  62. display: block;
  63. }
  64. .nav-sidebar > .nav-item > .nav-link i {
  65. font-size: 1.2rem;
  66. }
  67. }
  68. .main-sidebar {
  69. .nav .nav-item .nav-link {
  70. padding: 10px 23px !important;
  71. }
  72. .nav .nav-treeview {
  73. display: none;
  74. }
  75. }
  76. // navbar
  77. .header-navbar.floating-nav {
  78. width: calc(100vw - (100vw - 100%) - 70px - #{$sidebar-mini-width});
  79. }
  80. .header-navbar.fixed-top {
  81. left: #{$sidebar-mini-width};
  82. }
  83. .nav-sidebar > .nav-item > .nav-link i {
  84. font-size: 1.3rem;
  85. }
  86. .sidebar-no-expand.main-sidebar.sidebar-focused,
  87. .sidebar-no-expand.main-sidebar:hover {
  88. width: $sidebar-mini-width;
  89. .nav-header {
  90. display: none;
  91. }
  92. .brand-link {
  93. width: $sidebar-mini-width !important;
  94. }
  95. .user-panel .image {
  96. float: none !important;
  97. }
  98. .logo-xs {
  99. opacity: 1;
  100. visibility: visible;
  101. }
  102. .logo-xl {
  103. opacity: 0;
  104. visibility: hidden;
  105. }
  106. .nav-sidebar.nav-child-indent .nav-treeview {
  107. padding-left: 0;
  108. }
  109. .brand-text,
  110. .user-panel > .info,
  111. .nav-sidebar .nav-link p {
  112. margin-left: -10px;
  113. opacity: 0;
  114. visibility: hidden;
  115. width: 0;
  116. }
  117. .nav-sidebar > .nav-item .nav-icon {
  118. margin-right: 0;
  119. }
  120. }
  121. }
  122. .nav-sidebar {
  123. position: relative;
  124. &:hover {
  125. overflow: visible;
  126. }
  127. }
  128. .sidebar-form,
  129. .nav-sidebar > .nav-header {
  130. overflow: hidden;
  131. text-overflow: clip;
  132. }
  133. .nav-sidebar .nav-item > .nav-link {
  134. position: relative;
  135. > .float-right {
  136. margin-top: -7px;
  137. position: absolute;
  138. right: 10px;
  139. top: 50%;
  140. }
  141. }
  142. .sidebar .nav-link p,
  143. .main-sidebar .brand-text,
  144. .main-sidebar .logo-xs,
  145. .main-sidebar .logo-xl,
  146. .sidebar .user-panel .info {
  147. @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
  148. }