_sidebar-mini.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. //
  2. // Core: Sidebar Mini
  3. //
  4. .sidebar-mini.sidebar-collapse {
  5. .main-sidebar {
  6. min-width: $sidebar-mini-width;
  7. max-width: $sidebar-mini-width;
  8. }
  9. // Make the sidebar headers
  10. .nav-sidebar .nav-header {
  11. display: none;
  12. }
  13. .nav-sidebar .nav-link span {
  14. width: 0;
  15. white-space: nowrap;
  16. }
  17. .sidebar .user-panel > .info,
  18. .nav-sidebar .nav-link span,
  19. .brand-link {
  20. margin-left: -10px;
  21. animation-name: fadeOut;
  22. animation-duration: $transition-speed;
  23. animation-fill-mode: both;
  24. visibility: hidden;
  25. }
  26. .brand-link {
  27. order: 2;
  28. margin-left: auto;
  29. }
  30. .sidebar-mini-icon {
  31. order: 1;
  32. margin-left: 1rem;
  33. }
  34. &.layout-fixed.sidebar-hover {
  35. .main-sidebar {
  36. min-width: $sidebar-width;
  37. max-width: $sidebar-width;
  38. }
  39. .nav-sidebar .nav-header {
  40. display: block;
  41. }
  42. .sidebar .user-panel > .info,
  43. .nav-sidebar .nav-link span,
  44. .brand-link {
  45. margin-left: 0;
  46. animation-name: fadeIn;
  47. animation-duration: $transition-speed;
  48. animation-fill-mode: both;
  49. visibility: visible;
  50. }
  51. .brand-link {
  52. order: 1;
  53. }
  54. .sidebar-mini-icon {
  55. order: 2;
  56. margin-left: auto;
  57. }
  58. }
  59. }
  60. .sidebar-mini.sidebar-collapse:not(.layout-fixed) {
  61. .sidebar {
  62. overflow: visible;
  63. .nav-sidebar .nav-item:hover {
  64. position: relative;
  65. .nav-link {
  66. border-top-right-radius: 0;
  67. border-bottom-right-radius: 0;
  68. }
  69. span {
  70. animation: none;
  71. z-index: $zindex-sidebar + 12;
  72. visibility: visible;
  73. display: inline-block;
  74. position: absolute;
  75. width: $sidebar-width;
  76. left: $sidebar-mini-width;
  77. top: 0;
  78. background-color: inherit;
  79. padding: inherit;
  80. padding-left: 1rem;
  81. margin-left: -1rem;
  82. border-top-left-radius: 0;
  83. border-bottom-left-radius: 0;
  84. }
  85. }
  86. }
  87. }
  88. .sidebar-is-opening {
  89. .sidebar .user-panel > .info,
  90. .nav-sidebar .nav-link span,
  91. .brand-link {
  92. margin-left: 0;
  93. animation-name: fadeIn;
  94. animation-duration: $transition-speed;
  95. animation-fill-mode: both;
  96. visibility: visible;
  97. }
  98. }
  99. .sidebar-is-collapsing {
  100. .sidebar .user-panel > .info,
  101. .nav-sidebar .nav-link span,
  102. .brand-link {
  103. margin-left: -10px;
  104. animation-name: fadeOut;
  105. animation-duration: $transition-speed;
  106. animation-fill-mode: both;
  107. visibility: visible;
  108. }
  109. }
  110. //