_scrollbars.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /**************
  2. * Scrollbars *
  3. **************/
  4. scrollbar {
  5. $_slider_min_length: 40px;
  6. // disable steppers
  7. @at-root * {
  8. -GtkScrollbar-has-backward-stepper: false;
  9. -GtkScrollbar-has-forward-stepper: false;
  10. }
  11. background-color: $scrollbar_bg_color;
  12. transition: 300ms $ease-out-quad;
  13. // scrollbar border
  14. &.top { border-bottom: 1px solid $borders_color; }
  15. &.bottom { border-top: 1px solid $borders_color; }
  16. &.left { border-right: 1px solid $borders_color; }
  17. &.right { border-left: 1px solid $borders_color; }
  18. &:backdrop {
  19. background-color: $backdrop_scrollbar_bg_color;
  20. border-color: $backdrop_borders_color;
  21. transition: $backdrop_transition;
  22. }
  23. // slider
  24. slider {
  25. min-width: 6px;
  26. min-height: 6px;
  27. margin: -1px;
  28. border: 4px solid transparent;
  29. border-radius: 8px;
  30. background-clip: padding-box;
  31. background-color: $scrollbar_slider_color;
  32. &:hover { background-color: $scrollbar_slider_hover_color; }
  33. &:hover:active { background-color: $scrollbar_slider_active_color; }
  34. &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
  35. &:disabled { background-color: transparent; }
  36. }
  37. &.fine-tune {
  38. slider {
  39. min-width: 4px;
  40. min-height: 4px;
  41. }
  42. &.horizontal slider { border-width: 5px 4px; }
  43. &.vertical slider { border-width: 4px 5px; }
  44. }
  45. &.overlay-indicator {
  46. &:not(.dragging):not(.hovering) {
  47. border-color: transparent;
  48. opacity: 0.4;
  49. background-color: transparent;
  50. slider {
  51. margin: 0;
  52. min-width: 3px;
  53. min-height: 3px;
  54. background-color: $fg_color;
  55. border: 1px solid if($variant == 'light', white, black);
  56. }
  57. button {
  58. min-width: 5px;
  59. min-height: 5px;
  60. background-color: $fg_color;
  61. background-clip: padding-box;
  62. border-radius: 100%;
  63. border: 1px solid if($variant == 'light', white, black);
  64. -gtk-icon-source: none;
  65. }
  66. &.horizontal {
  67. slider {
  68. margin: 0 2px;
  69. min-width: $_slider_min_length;
  70. }
  71. button {
  72. margin: 1px 2px;
  73. min-width: 5px;
  74. }
  75. }
  76. &.vertical {
  77. slider {
  78. margin: 2px 0;
  79. min-height: $_slider_min_length;
  80. }
  81. button {
  82. margin: 2px 1px;
  83. min-height: 5px;
  84. }
  85. }
  86. }
  87. &.dragging,
  88. &.hovering { opacity: 0.8; }
  89. }
  90. &.horizontal slider { min-width: $_slider_min_length; }
  91. &.vertical slider { min-height: $_slider_min_length; }
  92. // button styling
  93. button {
  94. padding: 0;
  95. min-width: 12px;
  96. min-height: 12px;
  97. border-style: none;
  98. border-radius: 0;
  99. transition-property: min-height, min-width, color;
  100. @include button(undecorated);
  101. color: $scrollbar_slider_color;
  102. &:hover {
  103. @include button(undecorated);
  104. color: $scrollbar_slider_hover_color;
  105. }
  106. &:active, &:checked {
  107. @include button(undecorated);
  108. color: $scrollbar_slider_active_color;
  109. }
  110. &:disabled {
  111. @include button(undecorated);
  112. color: transparentize($scrollbar_slider_color, 0.8);
  113. }
  114. &:backdrop {
  115. @include button(undecorated);
  116. color: $backdrop_scrollbar_slider_color;
  117. &:disabled {
  118. @include button(undecorated);
  119. color: transparentize($backdrop_scrollbar_slider_color, 0.8);
  120. }
  121. }
  122. }
  123. // button icons
  124. &.vertical {
  125. button {
  126. &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
  127. &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
  128. }
  129. }
  130. &.horizontal {
  131. button {
  132. &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
  133. &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
  134. }
  135. }
  136. }
  137. treeview ~ scrollbar.vertical {
  138. border-top: 1px solid $borders_color;
  139. margin-top: -1px;
  140. }