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