gtk-4.0/widgets/_lists.scss 3.9 K raw
1
/*********
2
 * Lists *
3
 *********/
4
list, listview {
5
  &, label { color: $text_color; }
6
  background-color: $base_color;
7
  border-color: $borders_color;
8
9
  &:backdrop {
10
    background-color: $backdrop_base_color;
11
    border-color: $backdrop_borders_color;
12
  }
13
14
  &.horizontal row.separator,
15
  &.separators.horizontal > row:not(.separator) {
16
    border-left: 1px solid $borders_color;
17
  }
18
  &:not(.horizontal) row.separator,
19
  &.separators:not(.horizontal) > row:not(.separator) {
20
    border-bottom: 1px solid $borders_color;
21
  }
22
23
}
24
25
row {
26
27
  &:hover { transition: none; }
28
29
  &:backdrop { transition: $backdrop_transition; }
30
31
  &.activatable {
32
    &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
33
34
    &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
35
36
    &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
37
38
    &:backdrop:hover { background-color: transparent; }
39
40
    &:selected {
41
      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
42
43
      &.has-open-popup,
44
      &:hover { background-color: transparentize($selected_bg_color, 0.5); }
45
46
      &:backdrop { background-color: $backdrop_selected_bg_color; }
47
    }
48
49
    &.button { @include button(normal); }
50
  }
51
52
  .view { background-color: transparent; }
53
54
  &:selected { @extend %selected_items; }
55
}
56
57
columnview {
58
  // move padding to child cells
59
  > listview > row {
60
    padding: 0;
61
62
    // align horizontal sizing with header buttons
63
    > cell {
64
      padding: 0px 6px;
65
66
      &:not(:first-child) {
67
        border-left: 1px solid transparent;
68
      }
69
    }
70
  }
71
72
  // make column separators visible when :show-column-separators is true
73
  &.column-separators > listview > row > cell {
74
    border-left-color: $borders_color;
75
  }
76
77
  // shrink vertically for .data-table
78
  &.data-table > listview > row > cell {
79
    padding-top: 2px;
80
    padding-bottom: 2px;
81
  }
82
}
83
84
treeexpander {
85
  border-spacing: 4px;
86
}
87
88
/********************************************************
89
 * Data Tables                                          *
90
 * treeview like tables with individual focusable cells *
91
 * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929     *
92
 ********************************************************/
93
94
columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
95
  outline: 2px solid $borders_color;
96
}
97
98
columnview row:not(:selected) cell editablelabel.editing:focus-within {
99
  outline: 2px solid $selected_bg_color;
100
}
101
102
columnview row:not(:selected) cell editablelabel.editing text selection {
103
  background-color: $backdrop_selected_bg_color;
104
  color: transparent;
105
  &:focus-within {
106
    background-color: $selected_bg_color;
107
    color: $fg_color;
108
  }
109
}
110
111
/*******************************************************
112
 * Rich Lists                                          *
113
 * Large list usually containing lots of widgets       *
114
 * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
115
 *******************************************************/
116
117
118
.rich-list { /* rich lists usually containing other widgets than just labels/text */
119
  & > row {
120
    padding: 8px 12px;
121
    min-height: 32px; /* should be tall even when only containing a label */
122
123
    & > box {
124
      border-spacing: 12px;
125
    }
126
  }
127
}
128
129
/********************************************************
130
 * Complex Lists                                        *
131
 * Put padding on the cell content so event controllers *
132
 * can cover the whole area.                            *
133
 ********************************************************/
134
135
columnview.complex {
136
  > listview > row > cell {
137
      padding: 0;
138
      > * {
139
        padding: 8px 6px;
140
      }
141
  }
142
143
  // shrink vertically for .data-table
144
  &.data-table > listview > row > cell {
145
    padding: 0;
146
    > * {
147
      padding-top: 2px;
148
      padding-bottom: 2px;
149
    }
150
  }
151
}
152
153
154
.boxed-list-separate { background-color: transparent; }