_sidebar-mini.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /*
  2. * Component: Sidebar Mini
  3. */
  4. // Mixin
  5. @mixin sidebar-mini-breakpoint() {
  6. // A fix for text overflow while transitioning from sidebar mini to full sidebar
  7. .nav-sidebar,
  8. .nav-sidebar > .nav-header,
  9. .nav-sidebar .nav-link {
  10. white-space: nowrap;
  11. overflow: hidden;
  12. }
  13. // When the sidebar is collapsed...
  14. &.sidebar-collapse {
  15. .d-hidden-mini {
  16. display: none;
  17. }
  18. // Apply the new margins to the main content and footer
  19. .content-wrapper,
  20. .main-footer,
  21. .main-header {
  22. margin-left: $sidebar-mini-width !important;
  23. }
  24. // Make the sidebar headers
  25. .nav-sidebar .nav-header {
  26. display: none;
  27. }
  28. .nav-sidebar .nav-link p {
  29. width: 0;
  30. }
  31. .sidebar .user-panel > .info,
  32. .nav-sidebar .nav-link p,
  33. .brand-text {
  34. visibility: hidden;
  35. opacity: 0;
  36. margin-left: -10px;
  37. }
  38. // Modify the sidebar to shrink instead of disappearing
  39. .main-sidebar {
  40. &,
  41. &:before {
  42. // Don't go away! Just shrink
  43. margin-left: 0;
  44. width: $sidebar-mini-width;
  45. }
  46. .user-panel {
  47. .image {
  48. float: none;
  49. }
  50. }
  51. &:hover {
  52. width: $sidebar-width;
  53. .user-panel {
  54. text-align: left;
  55. .image {
  56. float: left;
  57. }
  58. }
  59. .user-panel > .info,
  60. .nav-sidebar .nav-link p,
  61. .brand-text {
  62. visibility: visible;
  63. opacity: 1;
  64. margin-left: 0;
  65. display: inline-block;
  66. }
  67. .brand-image {
  68. margin-right: .5rem;
  69. }
  70. // Make the sidebar links, menus, labels, badges
  71. // and angle icons disappear
  72. .sidebar-form,
  73. .user-panel > .info {
  74. display: block !important;
  75. -webkit-transform: translateZ(0);
  76. }
  77. .nav-sidebar > .nav-item > .nav-link > span {
  78. display: inline-block !important;
  79. }
  80. }
  81. }
  82. // Make an element visible only when sidebar mini is active
  83. .visible-sidebar-mini {
  84. display: block !important;
  85. }
  86. }
  87. }
  88. // Add sidebar-mini class to the body tag to activate this feature
  89. .sidebar-mini {
  90. @include media-breakpoint-up(lg) {
  91. @include sidebar-mini-breakpoint();
  92. }
  93. }
  94. .sidebar-mini-md {
  95. @include media-breakpoint-up(md) {
  96. @include sidebar-mini-breakpoint();
  97. }
  98. }
  99. .nav-sidebar {
  100. position: relative;
  101. &:hover {
  102. overflow: visible;
  103. }
  104. }
  105. .sidebar-form,
  106. .nav-sidebar > .nav-header {
  107. overflow: hidden;
  108. text-overflow: clip;
  109. }
  110. .nav-sidebar .nav-item > .nav-link {
  111. position: relative;
  112. > .float-right {
  113. position: absolute;
  114. right: 10px;
  115. top: 50%;
  116. margin-top: -7px;
  117. }
  118. }
  119. .sidebar .nav-link p,
  120. .main-sidebar .brand-text,
  121. .sidebar .user-panel .info {
  122. @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
  123. }