gtk-4.0/widgets/_treeviews.scss 5.1 K raw
1
2
$_treeview_borders_color: $borders_color;
3
$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
4
columnview.view,
5
treeview.view {
6
  border-left-color:  $_treeview_borders_color; // this is actually the tree lines color,
7
  border-top-color: $_treeview_borders_color;                         // while this is the grid lines color, better then nothing
8
9
  //@include focus-ring();
10
11
  > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
12
13
  &:selected {
14
    &:focus, & {
15
      border-radius: 0;
16
      outline-color: $red;
17
18
      @extend %selected_items;
19
    }
20
  }
21
22
  &:disabled {
23
    color: $insensitive_fg_color;
24
25
    &:selected {
26
      color: mix($selected_fg_color, $selected_bg_color, 40%);
27
      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
28
    }
29
  }
30
31
  &.separator {
32
    min-height: 2px;
33
    color: $_treeview_borders_color;
34
  }
35
36
  &:backdrop {
37
    border-left-color: $_treeview_backdrop_borders_color;
38
    border-top: $_treeview_backdrop_borders_color;
39
  }
40
41
  &:drop(active) {
42
    box-shadow: none;
43
  }
44
45
  > dndtarget:drop(active) {
46
    border-style: solid none;
47
    border-width: 1px;
48
    border-color: $selected_borders_color;
49
50
    &.after { border-top-style: none; }
51
52
    &.before { border-bottom-style: none; }
53
  }
54
55
  &.expander {
56
    // GtkTreeView uses the larger of the expander’s min-width and min-height
57
    min-width: 16px;
58
    min-height: 16px;
59
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
60
61
    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
62
63
    color: mix($text_color, $base_color, 70%);
64
65
    &:hover { color: $text_color; }
66
67
    &:selected {
68
      color: mix($selected_fg_color, $selected_bg_color, 70%);
69
70
      &:hover { color: $selected_fg_color; }
71
    }
72
73
    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
74
  }
75
76
  &.progressbar { // progress bar in treeviews
77
    @if $variant == light { color: $base_color; }
78
79
    border: 1px solid $selected_borders_color;
80
    border-radius: 4px;
81
    background-color: $selected_bg_color;
82
    background-image: linear-gradient(to bottom,
83
                                      $selected_bg_color,
84
                                      darken($selected_bg_color,10%));
85
    box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7),
86
                                                  transparentize(white,0.85)),
87
                      0 1px if($variant=='light', transparentize(black, 0.8),
88
                                                  transparentize(black,0.9));
89
90
    &:selected {
91
      &:focus, & {
92
93
        @if $variant == 'light' {
94
          color: $selected_bg_color;
95
96
        }
97
98
        @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
99
100
        background-image: image($base_color);
101
102
        &:backdrop {
103
          @if $variant == 'light' {
104
            color: $selected_bg_color;
105
          }
106
          background-color: $backdrop_base_color;
107
        }
108
      }
109
    }
110
  }
111
112
  &.trough { // progress bar trough in treeviews
113
    background-color: transparentize($fg_color,0.9);
114
115
    &:selected {
116
      &:focus, & {
117
        background-color: if($variant == 'light',
118
                             transparentize($selected_fg_color, 0.7),
119
                             darken($selected_bg_color, 10%));
120
121
      }
122
    }
123
  }
124
125
  > header {
126
    > button {
127
      $_column_header_color: mix(lighten($fg_color, 20%), lighten($base_color, 40%), 50%);
128
129
      @extend %column_header_button;
130
131
      color: $_column_header_color;
132
      background-color: $base_color;
133
      font-weight: bold;
134
      text-shadow: none;
135
      box-shadow: none;
136
137
      &:hover {
138
        @extend %column_header_button;
139
140
        color: mix($_column_header_color, $fg_color, 50%);
141
        box-shadow: none;
142
        transition: none; //I shouldn't need this
143
      }
144
145
      &:active {
146
        @extend %column_header_button;
147
148
        color: $fg_color;
149
        transition: none; //I shouldn't need this
150
      }
151
      sort-indicator {
152
        &.ascending {
153
          -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
154
        }
155
        &.descending {
156
          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
157
        }
158
159
        min-height: 16px;
160
        min-width: 16px;
161
      }
162
    }
163
  }
164
165
  button.dnd,
166
  header.button.dnd { // for treeview-like derive widgets
167
    &:active, &:selected, &:hover, & {
168
      padding: 0 6px;
169
      color: $red;
170
      background-image: none;
171
      background-color: $selected_bg_color;
172
      border-style: none;
173
      border-radius: 0;
174
      box-shadow: inset 0 0 0 1px $base_color;
175
      text-shadow: none;
176
      transition: none;
177
    }
178
  }
179
180
  acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
181
}
182
183
184
%column_header_button {
185
  padding: 0 6px;
186
  background-image: none;
187
  border-style: none none solid solid;
188
  border-color: $_treeview_borders_color;
189
  border-radius: 0;
190
  text-shadow: none;
191
192
  &:disabled {
193
    border-color: $bg_color;
194
    background-image: none;
195
  }
196
197
  &:last-child { &:backdrop, & { border-right-style: none; }}
198
}