_libhandy.scss
ASCII text
1
// based on:
2
// https://gitlab.gnome.org/GNOME/libhandy/-/tree/master/src/themes
3
4
/**
5
* libhandy
6
*/
7
8
// HdyComboRow
9
10
popover.combo {
11
padding: 8px 0;
12
13
list {
14
border-style: none;
15
background-color: transparent;
16
17
> row {
18
min-height: 32px;
19
padding: 0 12px;
20
21
&:not(:last-child) {
22
// border-bottom: 1px solid divider($on-surface);
23
}
24
}
25
}
26
27
@each $border in top, bottom {
28
overshoot.#{$border} {
29
// @include rounded-border($border);
30
}
31
}
32
33
scrollbar.vertical {
34
// padding-top: 2px;
35
// padding-bottom: 2px;
36
37
&:dir(ltr) {
38
// @include rounded-border(right);
39
}
40
41
&:dir(rtl) {
42
// @include rounded-border(left);
43
}
44
}
45
}
46
47
// HdyExpanderRow
48
49
row.expander {
50
// padding: 0;
51
52
image.expander-row-arrow {
53
// @include margin-start(6px);
54
}
55
}
56
57
// HdyKeypad
58
59
keypad {
60
.digit {
61
font-size: 200%;
62
font-weight: bold;
63
}
64
65
.letters {
66
font-size: 70%;
67
}
68
69
.symbol {
70
font-size: 160%;
71
}
72
}
73
74
// HdyViewSwitcher
75
76
viewswitcher {
77
button {
78
margin: 0;
79
padding: 0;
80
border-radius: 0;
81
// font-size: 1rem;
82
83
// View switcher in a header bar
84
headerbar & {
85
}
86
87
// View switcher button
88
> stack > box {
89
&.narrow {
90
// font-size: 0.75rem;
91
// padding-top: 7px;
92
// padding-bottom: 5px;
93
94
image,
95
label {
96
padding-left: 8px;
97
padding-right: 8px;
98
}
99
}
100
101
&.wide {
102
padding: 8px 12px;
103
104
label {
105
&:dir(ltr) {
106
padding-right: 8px;
107
}
108
109
&:dir(rtl) {
110
padding-left: 8px;
111
}
112
}
113
}
114
115
label.active {
116
// font-weight: bold;
117
}
118
}
119
120
&.needs-attention {
121
> stack > box label {
122
// @extend %needs-attention;
123
}
124
125
&:checked > stack > box label {
126
// animation: none;
127
// background-image: none;
128
}
129
}
130
}
131
}
132
133
// HdyViewSwitcherBar
134
135
viewswitcherbar actionbar > revealer > box {
136
// padding: 0;
137
}
138
139
// Content list
140
141
list.content {
142
border: 1px solid divider($on-surface);
143
background-clip: padding-box;
144
background-color: $surface-z1;
145
146
&,
147
list {
148
// background-color: transparent;
149
}
150
151
// Nested rows background
152
list.nested > row:not(:active) {
153
&:not(:hover):not(:selected),
154
&:hover:not(.activatable):not(:selected) {
155
// background-color: hdymix($bg_color, $base_color, 0.5);
156
}
157
158
&:hover.activatable:not(:selected) {
159
// background-color: hdymix($fg_color, $base_color, 0.95);
160
}
161
}
162
163
> row {
164
// Regular rows and expander header rows background
165
&:not(.expander):not(:active):not(:hover):not(:selected),
166
&:not(.expander):not(:active):hover:not(.activatable):not(:selected),
167
&.expander row.header:not(:active):not(:hover):not(:selected),
168
&.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
169
// background-color: $base_color;
170
}
171
172
&:not(.expander):not(:active):hover.activatable:not(:selected),
173
&.expander row.header:not(:active):hover.activatable:not(:selected) {
174
// background-color: hdymix($fg_color, $base_color, 0.95);
175
}
176
177
&,
178
list > row {
179
// border-color: hdyalpha($borders_color, 0.7);
180
// border-style: solid;
181
// transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
182
}
183
184
// Top border
185
&:not(:first-child) {
186
// border-width: 1px 1px 0;
187
border-top: 1px solid divider($on-surface);
188
}
189
190
// Rounded top
191
&:first-child,
192
&.expander:first-child row.header,
193
&.expander:checked,
194
&.expander:checked row.header,
195
&.expander:checked + row,
196
&.expander:checked + row.expander row.header {
197
// @include rounded-border(top);
198
}
199
200
// Bottom border
201
&:last-child,
202
&.checked-expander-row-previous-sibling,
203
&.expander:checked {
204
// border-width: 1px;
205
}
206
207
// Rounded bottom
208
&:last-child,
209
&.checked-expander-row-previous-sibling,
210
&.expander:checked,
211
&.expander:not(:checked):last-child row.header,
212
&.expander:not(:checked).checked-expander-row-previous-sibling row.header,
213
&.expander.empty:checked row.header,
214
&.expander list.nested > row:last-child {
215
// @include rounded-border(bottom);
216
}
217
218
// Add space around expanded rows
219
&.expander:checked:not(:first-child),
220
&.expander:checked + row {
221
// margin-top: 6px;
222
}
223
}
224
}
225
226
// List button
227
228
button.list-button {
229
}
230
231
// Unified window
232
233
window.csd.unified:not(.solid-csd):not(.maximized):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right) {
234
// Remove the sheen on headerbar...
235
headerbar {
236
box-shadow: $shadow-z1;
237
238
&.selection-mode {
239
// box-shadow: $shadow-z1;
240
}
241
}
242
243
// ...and add it on the window itself
244
> decoration-overlay {
245
box-shadow: inset 0 1px highlight($titlebar);
246
}
247
248
&,
249
> decoration,
250
> decoration-overlay {
251
border-radius: $corner-radius;
252
}
253
}
254