32b33b509dfea7a63ef83d3c960c12e832470795b4b4875453161c100f23fb15135fa8d7294172aa8003068219c25877f5d19a6ff3abb03599b3dab4dfc32e 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. @import "mixins/mixins";
  2. @import "common/var";
  3. @include b(scrollbar) {
  4. overflow: hidden;
  5. position: relative;
  6. &:hover,
  7. &:active,
  8. &:focus {
  9. > .el-scrollbar__bar {
  10. opacity: 1;
  11. transition: opacity 340ms ease-out;
  12. }
  13. }
  14. @include e(wrap) {
  15. overflow: scroll;
  16. height: 100%;
  17. @include m(hidden-default) {
  18. scrollbar-width: none;
  19. &::-webkit-scrollbar {
  20. width: 0;
  21. height: 0;
  22. }
  23. }
  24. }
  25. @include e(thumb) {
  26. position: relative;
  27. display: block;
  28. width: 0;
  29. height: 0;
  30. cursor: pointer;
  31. border-radius: inherit;
  32. background-color: $--scrollbar-background-color;
  33. transition: .3s background-color;
  34. &:hover {
  35. background-color: $--scrollbar-hover-background-color;
  36. }
  37. }
  38. @include e(bar) {
  39. position: absolute;
  40. right: 2px;
  41. bottom: 2px;
  42. z-index: 1;
  43. border-radius: 4px;
  44. opacity: 0;
  45. transition: opacity 120ms ease-out;
  46. @include when(vertical) {
  47. width: 6px;
  48. top: 2px;
  49. > div {
  50. width: 100%;
  51. }
  52. }
  53. @include when(horizontal) {
  54. height: 6px;
  55. left: 2px;
  56. > div {
  57. height: 100%;
  58. }
  59. }
  60. }
  61. }