_scrollbar.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /*************** SCROLLBAR BASE CSS ***************/
  2. .highlightable {
  3. padding: 25px 0 15px;
  4. }
  5. .scroll-wrapper {
  6. overflow: hidden !important;
  7. padding: 0 !important;
  8. position: relative;
  9. }
  10. .scroll-wrapper > .scroll-content {
  11. border: none !important;
  12. box-sizing: content-box !important;
  13. height: auto;
  14. left: 0;
  15. margin: 0;
  16. max-height: none;
  17. max-width: none !important;
  18. overflow: scroll !important;
  19. padding: 0;
  20. position: relative !important;
  21. top: 0;
  22. width: auto !important;
  23. }
  24. .scroll-wrapper > .scroll-content::-webkit-scrollbar {
  25. height: 0;
  26. width: 0;
  27. }
  28. .scroll-element {
  29. display: none;
  30. }
  31. .scroll-element, .scroll-element div {
  32. box-sizing: content-box;
  33. }
  34. .scroll-element.scroll-x.scroll-scrollx_visible,
  35. .scroll-element.scroll-y.scroll-scrolly_visible {
  36. display: block;
  37. }
  38. .scroll-element .scroll-bar,
  39. .scroll-element .scroll-arrow {
  40. cursor: default;
  41. }
  42. .scroll-textarea {
  43. }
  44. .scroll-textarea > .scroll-content {
  45. overflow: hidden !important;
  46. }
  47. .scroll-textarea > .scroll-content > textarea {
  48. border: none !important;
  49. box-sizing: border-box;
  50. height: 100% !important;
  51. margin: 0;
  52. max-height: none !important;
  53. max-width: none !important;
  54. overflow: scroll !important;
  55. outline: none;
  56. padding: 2px;
  57. position: relative !important;
  58. top: 0;
  59. width: 100% !important;
  60. }
  61. .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
  62. height: 0;
  63. width: 0;
  64. }
  65. /*************** SIMPLE INNER SCROLLBAR ***************/
  66. .scrollbar-inner > .scroll-element,
  67. .scrollbar-inner > .scroll-element div
  68. {
  69. border: none;
  70. margin: 0;
  71. padding: 0;
  72. position: absolute;
  73. z-index: 10;
  74. }
  75. .scrollbar-inner > .scroll-element div {
  76. display: block;
  77. height: 100%;
  78. left: 0;
  79. top: 0;
  80. width: 100%;
  81. }
  82. .scrollbar-inner > .scroll-element.scroll-x {
  83. bottom: 2px;
  84. height: 8px;
  85. left: 0;
  86. width: 100%;
  87. }
  88. .scrollbar-inner > .scroll-element.scroll-y {
  89. height: 100%;
  90. right: 2px;
  91. top: 0;
  92. width: 8px;
  93. }
  94. .scrollbar-inner > .scroll-element .scroll-element_outer {
  95. overflow: hidden;
  96. }
  97. .scrollbar-inner > .scroll-element .scroll-element_outer,
  98. .scrollbar-inner > .scroll-element .scroll-element_track,
  99. .scrollbar-inner > .scroll-element .scroll-bar {
  100. -webkit-border-radius: 8px;
  101. -moz-border-radius: 8px;
  102. border-radius: 8px;
  103. }
  104. .scrollbar-inner > .scroll-element .scroll-element_track,
  105. .scrollbar-inner > .scroll-element .scroll-bar {
  106. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  107. filter: alpha(opacity=30);
  108. opacity: 0.3;
  109. }
  110. /* update scrollbar offset if both scrolls are visible */
  111. .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
  112. .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
  113. .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
  114. .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }