menu-sidebar.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. .bx-sidebar {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. width: 100%;
  6. height: 100%;
  7. visibility: hidden;
  8. opacity: 0;
  9. -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
  10. -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
  11. transition: opacity 0.5s 0s, visibility 0s 0.5s;
  12. }
  13. .bx-sidebar.bx-sidebar-active {
  14. visibility: visible;
  15. }
  16. .bx-sidebar .bx-sidebar-cnt {
  17. -webkit-transform: translateZ(0);
  18. -moz-transform: translateZ(0);
  19. -ms-transform: translateZ(0);
  20. -o-transform: translateZ(0);
  21. transform: translateZ(0);
  22. -webkit-transition: -webkit-transform 0.5s 0s;
  23. -moz-transition: -moz-transform 0.5s 0s;
  24. transition: transform 0.5s 0s;
  25. }
  26. /*--- Both sidebars slide in from the trailing edge, where their triggers are. ---*/
  27. .bx-dir-ltr .bx-sidebar.bx-sidebar-site .bx-sidebar-cnt,
  28. .bx-dir-ltr .bx-sidebar.bx-sidebar-account .bx-sidebar-cnt {
  29. -webkit-transform: translateX(100%);
  30. -moz-transform: translateX(100%);
  31. -ms-transform: translateX(100%);
  32. -o-transform: translateX(100%);
  33. transform: translateX(100%);
  34. }
  35. .bx-dir-rtl .bx-sidebar.bx-sidebar-site .bx-sidebar-cnt,
  36. .bx-dir-rtl .bx-sidebar.bx-sidebar-account .bx-sidebar-cnt {
  37. -webkit-transform: translateX(-100%);
  38. -moz-transform: translateX(-100%);
  39. -ms-transform: translateX(-100%);
  40. -o-transform: translateX(-100%);
  41. transform: translateX(-100%);
  42. }
  43. .bx-sidebar.bx-sidebar-site.bx-sidebar-active,
  44. .bx-sidebar.bx-sidebar-account.bx-sidebar-active {
  45. opacity: 1;
  46. -webkit-transition: opacity 0.3s 0s;
  47. -moz-transition: opacity 0.3s 0s;
  48. transition: opacity 0.3s 0s;
  49. }
  50. .bx-sidebar.bx-sidebar-site.bx-sidebar-active .bx-sidebar-cnt,
  51. .bx-sidebar.bx-sidebar-account.bx-sidebar-active .bx-sidebar-cnt {
  52. -webkit-transform: translateX(0);
  53. -moz-transform: translateX(0);
  54. -ms-transform: translateX(0);
  55. -o-transform: translateX(0);
  56. transform: translateX(0);
  57. -webkit-transition: -webkit-transform 0.5s 0s;
  58. -moz-transition: -moz-transform 0.5s 0s;
  59. transition: transform 0.5s 0s;
  60. }
  61. .bx-sidebar-item.bx-si-dropdown-has .bx-si-dropdown-icon {
  62. display: flex;
  63. }
  64. .bx-sidebar-item.bx-si-dropdown-open .bx-si-dropdown-icon {
  65. }
  66. .bx-sidebar-item.bx-si-dropdown-open .bx-sidebar-dropdown-content {
  67. display: block;
  68. padding: 0;
  69. margin: 0;
  70. list-style: none;
  71. }
  72. /*--- Site Sidebar ---*/
  73. .bx-sidebar-site-logo a:hover {
  74. text-decoration: none;
  75. }
  76. /*--- Account Sidebar ---*/
  77. .bx-sidebar .bx-sb-theme-switcher .sys-icon {
  78. font-size: 1.5rem;
  79. }
  80. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div {
  81. flex: 1 1 0%;
  82. }
  83. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div.bx-menu-account-popup-profile-active {
  84. flex-grow: 0;
  85. }
  86. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div.bx-menu-account-popup-profile-notifications,
  87. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div.bx-menu-account-popup-profile-switcher,
  88. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div.bx-menu-account-popup-profile-create {
  89. flex-basis: auto;
  90. }
  91. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div.bx-menu-account-popup-profile-create {
  92. flex-grow: 2;
  93. }
  94. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-active .bx-def-unit {
  95. margin: 0 1rem 0.5rem 1rem;
  96. }
  97. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-notifications {
  98. margin: 0.5rem 0;
  99. overflow-y: auto;
  100. }
  101. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-notifications .bx-menu-item-addon.bx-def-unit-alert {
  102. top: auto;
  103. padding: 0 0.25rem;
  104. }
  105. .bx-dir-ltr .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-notifications .bx-menu-item-addon.bx-def-unit-alert {
  106. left: auto;
  107. right: 0.5rem;
  108. }
  109. .bx-dir-rtl .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-notifications .bx-menu-item-addon.bx-def-unit-alert {
  110. left: 0.5rem;
  111. right: auto;
  112. }
  113. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-create .bx-map-profile-create-cnt {
  114. padding-bottom: 0;
  115. }
  116. .bx-sidebar.bx-sidebar-account .bx-menu-account-popup-profile-create .bx-btn {
  117. justify-content: center;
  118. width: 100%;
  119. }
  120. .bx-media-phone .bx-sidebar.bx-sidebar-account .bx-menu-account-popup {
  121. overflow-y: auto;
  122. }
  123. .bx-media-phone .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div {
  124. flex: 1 1 0%;
  125. }
  126. .bx-media-phone .bx-sidebar.bx-sidebar-account .bx-menu-account-popup > div.bx-menu-account-popup-profile-notifications {
  127. overflow-y: visible;
  128. }