_sidebar-collapse.scss 2.4 KB

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