_sidebar-mini.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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. .sidebar-mini-md {
  41. @include media-breakpoint-up(md) {
  42. @include sidebar-mini-breakpoint;
  43. }
  44. }
  45. .sidebar-collapse {
  46. .sidebar-no-expand.main-sidebar.sidebar-focused,
  47. .sidebar-no-expand.main-sidebar:hover {
  48. width: $sidebar-mini-width;
  49. .brand-link {
  50. width: $sidebar-mini-width !important;
  51. }
  52. .user-panel .image {
  53. float: none !important;
  54. }
  55. .logo-xs {
  56. opacity: 1;
  57. visibility: visible;
  58. }
  59. .logo-xl {
  60. opacity: 0;
  61. visibility: hidden;
  62. }
  63. .nav-sidebar.nav-child-indent .nav-treeview {
  64. padding-left: 0;
  65. }
  66. .brand-text,
  67. .user-panel > .info,
  68. .nav-sidebar .nav-link p {
  69. margin-left: -10px;
  70. opacity: 0;
  71. visibility: hidden;
  72. width: 0;
  73. }
  74. .nav-sidebar > .nav-item .nav-icon {
  75. margin-right: 0;
  76. }
  77. .nav-flat {
  78. .nav-icon {
  79. margin-left: .5rem;
  80. }
  81. .nav-treeview {
  82. .nav-icon {
  83. margin-left: .3rem;
  84. }
  85. }
  86. }
  87. }
  88. }
  89. .nav-sidebar {
  90. position: relative;
  91. &:hover {
  92. overflow: visible;
  93. }
  94. }
  95. .sidebar-form,
  96. .nav-sidebar > .nav-header {
  97. overflow: hidden;
  98. text-overflow: clip;
  99. }
  100. .nav-sidebar .nav-item > .nav-link {
  101. position: relative;
  102. > .float-right {
  103. margin-top: -7px;
  104. position: absolute;
  105. right: 10px;
  106. top: 50%;
  107. }
  108. }
  109. .sidebar .nav-link p,
  110. .main-sidebar .brand-text,
  111. .main-sidebar .logo-xs,
  112. .main-sidebar .logo-xl,
  113. .sidebar .user-panel .info {
  114. @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
  115. }