_sidebar-mini.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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. .sidebar-collapse {
  51. .main-sidebar.sidebar-focused,
  52. .main-sidebar:hover {
  53. .nav-header {
  54. display: inline-block;
  55. }
  56. //.nav .menu-open .nav-treeview {
  57. // display: block!important;
  58. //}
  59. .nav-sidebar > .nav-item > .nav-link i {
  60. font-size: 1.2rem;
  61. }
  62. }
  63. .main-sidebar {
  64. .nav .nav-item .nav-link {
  65. padding: 10px 21px !important;
  66. }
  67. //.nav .menu-open .nav-treeview {
  68. // display: none!important;
  69. //}
  70. }
  71. // 导航栏
  72. .header-navbar.floating-nav {
  73. width: calc(100vw - (100vw - 100%) - 70px - #{$sidebar-mini-width});
  74. }
  75. .header-navbar.fixed-top {
  76. left: #{$sidebar-mini-width};
  77. }
  78. .nav-sidebar > .nav-item > .nav-link i {
  79. font-size: 1.3rem;
  80. }
  81. .sidebar-no-expand.main-sidebar.sidebar-focused,
  82. .sidebar-no-expand.main-sidebar:hover {
  83. width: $sidebar-mini-width;
  84. .nav-header {
  85. display: none;
  86. }
  87. .brand-link {
  88. width: $sidebar-mini-width !important;
  89. }
  90. .user-panel .image {
  91. float: none !important;
  92. }
  93. .logo-xs {
  94. opacity: 1;
  95. visibility: visible;
  96. }
  97. .logo-xl {
  98. opacity: 0;
  99. visibility: hidden;
  100. }
  101. .nav-sidebar.nav-child-indent .nav-treeview {
  102. padding-left: 0;
  103. }
  104. .brand-text,
  105. .user-panel > .info,
  106. .nav-sidebar .nav-link p {
  107. margin-left: -10px;
  108. opacity: 0;
  109. visibility: hidden;
  110. width: 0;
  111. }
  112. .nav-sidebar > .nav-item .nav-icon {
  113. margin-right: 0;
  114. }
  115. }
  116. }
  117. .nav-sidebar {
  118. position: relative;
  119. &:hover {
  120. overflow: visible;
  121. }
  122. }
  123. .sidebar-form,
  124. .nav-sidebar > .nav-header {
  125. overflow: hidden;
  126. text-overflow: clip;
  127. }
  128. .nav-sidebar .nav-item > .nav-link {
  129. position: relative;
  130. > .float-right {
  131. margin-top: -7px;
  132. position: absolute;
  133. right: 10px;
  134. top: 50%;
  135. }
  136. }
  137. // 导航栏兼容
  138. @include media-breakpoint-down(sm) {
  139. .sidebar-mini-md.sidebar-collapse .main-sidebar {
  140. box-shadow: none !important;
  141. }
  142. .sidebar-collapse .header-navbar.fixed-top {
  143. left: 0;
  144. }
  145. }
  146. @media (max-width: 1201px) {
  147. .sidebar-collapse .header-navbar.fixed-top {
  148. left: 0;
  149. }
  150. }
  151. .sidebar .nav-link p,
  152. .main-sidebar .brand-text,
  153. .main-sidebar .logo-xs,
  154. .main-sidebar .logo-xl,
  155. .sidebar .user-panel .info {
  156. @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
  157. }