mixins.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. @mixin scrollbar-rail-default($theme) {
  2. display: none;
  3. position: absolute; /* please don't change 'position' */
  4. border-radius: map_get($theme, border-radius);
  5. opacity: map_get($theme, rail-default-opacity);
  6. transition: background-color .2s linear, opacity .2s linear;
  7. }
  8. @mixin scrollbar-rail-hover($theme) {
  9. background-color: map_get($theme, rail-hover-bg);
  10. opacity: map_get($theme, rail-hover-opacity);
  11. }
  12. @mixin scrollbar-default($theme) {
  13. position: absolute; /* please don't change 'position' */
  14. background-color: map_get($theme, bar-container-hover-bg);
  15. border-radius: map_get($theme, border-radius);
  16. transition: background-color .2s linear;
  17. }
  18. @mixin scrollbar-hover($theme) {
  19. background-color: map_get($theme, bar-hover-bg);
  20. }
  21. @mixin in-scrolling($theme) {
  22. &.ps-in-scrolling {
  23. pointer-events: none;
  24. &.ps-x > .ps-scrollbar-x-rail {
  25. @include scrollbar-rail-hover($theme);
  26. > .ps-scrollbar-x {
  27. @include scrollbar-hover($theme);
  28. }
  29. }
  30. &.ps-y > .ps-scrollbar-y-rail {
  31. @include scrollbar-rail-hover($theme);
  32. > .ps-scrollbar-y {
  33. @include scrollbar-hover($theme);
  34. }
  35. }
  36. }
  37. }
  38. // Layout and theme mixin
  39. @mixin ps-container($theme) {
  40. -ms-touch-action: none;
  41. touch-action: none;
  42. overflow: hidden !important;
  43. -ms-overflow-style: none;
  44. // Edge
  45. @supports (-ms-overflow-style: none) {
  46. overflow: auto !important;
  47. }
  48. // IE10+
  49. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  50. overflow: auto !important;
  51. }
  52. &.ps-active-x > .ps-scrollbar-x-rail,
  53. &.ps-active-y > .ps-scrollbar-y-rail {
  54. display: block;
  55. background-color: map_get($theme, bar-bg);
  56. }
  57. @include in-scrolling($theme);
  58. > .ps-scrollbar-x-rail {
  59. @include scrollbar-rail-default($theme);
  60. bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */
  61. height: map_get($theme, scrollbar-x-rail-height);
  62. > .ps-scrollbar-x {
  63. @include scrollbar-default($theme);
  64. bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
  65. height: map_get($theme, scrollbar-x-height);
  66. }
  67. }
  68. > .ps-scrollbar-y-rail {
  69. @include scrollbar-rail-default($theme);
  70. right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */
  71. width: map_get($theme, scrollbar-y-rail-width);
  72. > .ps-scrollbar-y {
  73. @include scrollbar-default($theme);
  74. right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */
  75. width: map_get($theme, scrollbar-y-width);
  76. }
  77. }
  78. &:hover {
  79. @include in-scrolling($theme);
  80. > .ps-scrollbar-x-rail,
  81. > .ps-scrollbar-y-rail {
  82. opacity: map_get($theme, rail-container-hover-opacity);
  83. }
  84. > .ps-scrollbar-x-rail:hover {
  85. @include scrollbar-rail-hover($theme);
  86. > .ps-scrollbar-x {
  87. @include scrollbar-hover($theme);
  88. }
  89. }
  90. > .ps-scrollbar-y-rail:hover {
  91. @include scrollbar-rail-hover($theme);
  92. > .ps-scrollbar-y {
  93. @include scrollbar-hover($theme);
  94. }
  95. }
  96. }
  97. }