_sidebar-mini.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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 25px !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. .nav-sidebar > .nav-item > .nav-link i {
  81. font-size: 1.3rem;
  82. }
  83. .sidebar-no-expand.main-sidebar.sidebar-focused,
  84. .sidebar-no-expand.main-sidebar:hover {
  85. width: $sidebar-mini-width;
  86. .nav-header {
  87. display: none;
  88. }
  89. .brand-link {
  90. width: $sidebar-mini-width !important;
  91. }
  92. .user-panel .image {
  93. float: none !important;
  94. }
  95. .logo-xs {
  96. opacity: 1;
  97. visibility: visible;
  98. }
  99. .logo-xl {
  100. opacity: 0;
  101. visibility: hidden;
  102. }
  103. .nav-sidebar.nav-child-indent .nav-treeview {
  104. padding-left: 0;
  105. }
  106. .brand-text,
  107. .user-panel > .info,
  108. .nav-sidebar .nav-link p {
  109. margin-left: -10px;
  110. opacity: 0;
  111. visibility: hidden;
  112. width: 0;
  113. }
  114. .nav-sidebar > .nav-item .nav-icon {
  115. margin-right: 0;
  116. }
  117. }
  118. }
  119. .nav-sidebar {
  120. position: relative;
  121. &:hover {
  122. overflow: visible;
  123. }
  124. }
  125. .sidebar-form,
  126. .nav-sidebar > .nav-header {
  127. overflow: hidden;
  128. text-overflow: clip;
  129. }
  130. .nav-sidebar .nav-item > .nav-link {
  131. position: relative;
  132. > .float-right {
  133. margin-top: -7px;
  134. position: absolute;
  135. right: 10px;
  136. top: 50%;
  137. }
  138. }
  139. .sidebar .nav-link p,
  140. .main-sidebar .brand-text,
  141. .main-sidebar .logo-xs,
  142. .main-sidebar .logo-xl,
  143. .sidebar .user-panel .info {
  144. @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
  145. }