simplebar.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. [data-simplebar] {
  2. position: relative;
  3. flex-direction: column;
  4. flex-wrap: wrap;
  5. justify-content: flex-start;
  6. align-content: flex-start;
  7. align-items: flex-start;
  8. }
  9. .simplebar-wrapper {
  10. overflow: hidden;
  11. width: inherit;
  12. height: inherit;
  13. max-width: inherit;
  14. max-height: inherit;
  15. }
  16. .simplebar-mask {
  17. direction: inherit;
  18. position: absolute;
  19. overflow: hidden;
  20. padding: 0;
  21. margin: 0;
  22. left: 0;
  23. top: 0;
  24. bottom: 0;
  25. right: 0;
  26. width: auto !important;
  27. height: auto !important;
  28. z-index: 0;
  29. }
  30. .simplebar-offset {
  31. direction: inherit !important;
  32. box-sizing: inherit !important;
  33. resize: none !important;
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. bottom: 0;
  38. right: 0;
  39. padding: 0;
  40. margin: 0;
  41. -webkit-overflow-scrolling: touch;
  42. }
  43. .simplebar-content-wrapper {
  44. direction: inherit;
  45. box-sizing: border-box !important;
  46. position: relative;
  47. display: block;
  48. height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
  49. width: auto;
  50. max-width: 100%; /* Not required for horizontal scroll to trigger */
  51. max-height: 100%; /* Needed for vertical scroll to trigger */
  52. overflow: auto;
  53. scrollbar-width: none;
  54. -ms-overflow-style: none;
  55. }
  56. .simplebar-content-wrapper::-webkit-scrollbar,
  57. .simplebar-hide-scrollbar::-webkit-scrollbar {
  58. display: none;
  59. width: 0;
  60. height: 0;
  61. }
  62. .simplebar-content:before,
  63. .simplebar-content:after {
  64. content: ' ';
  65. display: table;
  66. }
  67. .simplebar-placeholder {
  68. max-height: 100%;
  69. max-width: 100%;
  70. width: 100%;
  71. pointer-events: none;
  72. }
  73. .simplebar-height-auto-observer-wrapper {
  74. box-sizing: inherit !important;
  75. height: 100%;
  76. width: 100%;
  77. max-width: 1px;
  78. position: relative;
  79. float: left;
  80. max-height: 1px;
  81. overflow: hidden;
  82. z-index: -1;
  83. padding: 0;
  84. margin: 0;
  85. pointer-events: none;
  86. flex-grow: inherit;
  87. flex-shrink: 0;
  88. flex-basis: 0;
  89. }
  90. .simplebar-height-auto-observer {
  91. box-sizing: inherit;
  92. display: block;
  93. opacity: 0;
  94. position: absolute;
  95. top: 0;
  96. left: 0;
  97. height: 1000%;
  98. width: 1000%;
  99. min-height: 1px;
  100. min-width: 1px;
  101. overflow: hidden;
  102. pointer-events: none;
  103. z-index: -1;
  104. }
  105. .simplebar-track {
  106. z-index: 1;
  107. position: absolute;
  108. right: 0;
  109. bottom: 0;
  110. pointer-events: none;
  111. overflow: hidden;
  112. }
  113. [data-simplebar].simplebar-dragging {
  114. pointer-events: none;
  115. -webkit-touch-callout: none;
  116. -webkit-user-select: none;
  117. -khtml-user-select: none;
  118. -moz-user-select: none;
  119. -ms-user-select: none;
  120. user-select: none;
  121. }
  122. [data-simplebar].simplebar-dragging .simplebar-content {
  123. pointer-events: none;
  124. -webkit-touch-callout: none;
  125. -webkit-user-select: none;
  126. -khtml-user-select: none;
  127. -moz-user-select: none;
  128. -ms-user-select: none;
  129. user-select: none;
  130. }
  131. [data-simplebar].simplebar-dragging .simplebar-track {
  132. pointer-events: all;
  133. }
  134. .simplebar-scrollbar {
  135. position: absolute;
  136. left: 0;
  137. right: 0;
  138. min-height: 10px;
  139. }
  140. .simplebar-scrollbar:before {
  141. position: absolute;
  142. content: '';
  143. background: black;
  144. border-radius: 7px;
  145. left: 2px;
  146. right: 2px;
  147. opacity: 0;
  148. transition: opacity 0.2s 0.5s linear;
  149. }
  150. .simplebar-scrollbar.simplebar-visible:before {
  151. opacity: 0.5;
  152. transition-delay: 0s;
  153. transition-duration: 0s;
  154. }
  155. .simplebar-track.simplebar-vertical {
  156. top: 0;
  157. width: 11px;
  158. }
  159. .simplebar-scrollbar:before {
  160. top: 2px;
  161. bottom: 2px;
  162. left: 2px;
  163. right: 2px;
  164. }
  165. .simplebar-track.simplebar-horizontal {
  166. left: 0;
  167. height: 11px;
  168. }
  169. .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  170. right: auto;
  171. left: 0;
  172. top: 0;
  173. bottom: 0;
  174. min-height: 0;
  175. min-width: 10px;
  176. width: auto;
  177. }
  178. /* Rtl support */
  179. [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
  180. right: auto;
  181. left: 0;
  182. }
  183. .simplebar-dummy-scrollbar-size {
  184. direction: rtl;
  185. position: fixed;
  186. opacity: 0;
  187. visibility: hidden;
  188. height: 500px;
  189. width: 500px;
  190. overflow-y: hidden;
  191. overflow-x: scroll;
  192. -ms-overflow-style: scrollbar !important;
  193. }
  194. .simplebar-dummy-scrollbar-size > div {
  195. width: 200%;
  196. height: 200%;
  197. margin: 10px 0;
  198. }
  199. .simplebar-hide-scrollbar {
  200. position: fixed;
  201. left: 0;
  202. visibility: hidden;
  203. overflow-y: scroll;
  204. scrollbar-width: none;
  205. -ms-overflow-style: none;
  206. }