_perfect-scrollbar.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. /*
  2. * Container style
  3. */
  4. .ps {
  5. overflow: hidden !important;
  6. overflow-anchor: none;
  7. -ms-overflow-style: none;
  8. touch-action: auto;
  9. -ms-touch-action: auto;
  10. }
  11. /*
  12. * Scrollbar rail styles
  13. */
  14. .ps__rail-x {
  15. display: none;
  16. opacity: 0;
  17. transition: background-color 0.2s linear, opacity 0.2s linear;
  18. -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  19. height: 15px;
  20. /* there must be 'bottom' or 'top' for ps__rail-x */
  21. inset-block-end: 0px;
  22. /* please don't change 'position' */
  23. position: absolute;
  24. }
  25. .ps__rail-y {
  26. display: none;
  27. opacity: 0;
  28. transition: background-color 0.2s linear, opacity 0.2s linear;
  29. -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  30. width: 15px;
  31. /* there must be 'right' or 'left' for ps__rail-y */
  32. inset-inline-start: auto !important;
  33. inset-inline-end: 0;
  34. /* please don't change 'position' */
  35. position: absolute;
  36. }
  37. .ps--active-x>.ps__rail-x,
  38. .ps--active-y>.ps__rail-y {
  39. display: block;
  40. background-color: transparent;
  41. }
  42. .ps:hover> {
  43. .ps__rail-x,
  44. .ps__rail-y {
  45. opacity: 0.6;
  46. }
  47. }
  48. .ps--focus> {
  49. .ps__rail-x,
  50. .ps__rail-y {
  51. opacity: 0.6;
  52. }
  53. }
  54. .ps--scrolling-x>.ps__rail-x,
  55. .ps--scrolling-y>.ps__rail-y {
  56. opacity: 0.6;
  57. }
  58. .ps {
  59. .ps__rail-x:hover,
  60. .ps__rail-y:hover,
  61. .ps__rail-x:focus,
  62. .ps__rail-y:focus,
  63. .ps__rail-x.ps--clicking,
  64. .ps__rail-y.ps--clicking {
  65. background-color: transparent;
  66. opacity: 0.9;
  67. }
  68. }
  69. /*
  70. * Scrollbar thumb styles
  71. */
  72. .ps__thumb-x {
  73. background-color: #f6f6fb;
  74. border-radius: 6px;
  75. transition: background-color 0.2s linear, height 0.2s ease-in-out;
  76. -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  77. height: 6px;
  78. /* there must be 'bottom' for ps__thumb-x */
  79. inset-block-end: 2px;
  80. /* please don't change 'position' */
  81. position: absolute;
  82. }
  83. .ps__thumb-y {
  84. background-color: #8497bf;
  85. border-radius: 6px;
  86. transition: background-color 0.2s linear, width 0.2s ease-in-out;
  87. -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  88. width: 3px;
  89. /* there must be 'right' for ps__thumb-y */
  90. inset-inline-end: 0px;
  91. /* please don't change 'position' */
  92. position: absolute;
  93. }
  94. .ps__rail-x {
  95. &:hover>.ps__thumb-x,
  96. &:focus>.ps__thumb-x,
  97. &.ps--clicking .ps__thumb-x {
  98. background-color: #8497bf;
  99. height: 11px;
  100. }
  101. }
  102. .ps__rail-y {
  103. &:hover>.ps__thumb-y,
  104. &:focus>.ps__thumb-y,
  105. &.ps--clicking .ps__thumb-y {
  106. background-color: #8497bf;
  107. width: 3px;
  108. }
  109. }
  110. /* MS supports */
  111. @supports (-ms-overflow-style: none) {
  112. .ps {
  113. overflow: auto !important;
  114. }
  115. }
  116. @media screen and (-ms-high-contrast: active),
  117. (-ms-high-contrast: none) {
  118. .ps {
  119. overflow: auto !important;
  120. }
  121. }