ASCII text
1
/* App Grid */
2
// app icons
4
.icon-grid {
5
@if $version >= 40 {
6
row-spacing: 12px;
7
column-spacing: 12px;
8
max-row-spacing: 72px;
9
max-column-spacing: 72px;
10
page-padding-top: 24px;
11
page-padding-bottom: 24px;
12
page-padding-left: 12px;
13
page-padding-right: 12px;
14
} @else if $version >= 3.38 {
15
row-spacing: 48px;
16
column-spacing: 48px;
17
max-row-spacing: 96px;
18
max-column-spacing: 96px;
19
} @else {
20
-shell-grid-horizontal-item-size: 136px;
21
-shell-grid-vertical-item-size: 136px;
22
spacing: 32px;
23
.overview-icon {
25
icon-size: 96px;
26
}
27
}
28
}
29
@if $version < 3.38 {
31
.app-display {
32
// spacing: 20px;
33
}
34
}
35
/* App Icons */
37
// Icon tiles in the app grid
39
.app-well-app,
40
%app-well-app {
41
@extend %overview-icon;
42
.overview-icon.overview-icon-with-label {
44
padding: 8px;
45
spacing: 0;
46
> StBoxLayout {
48
spacing: 4px;
49
}
50
}
51
}
52
/* App Folders */
54
.app-well-app.app-folder {
55
@extend %app-well-app;
56
border-radius: $corner-radius; // same as .overview-icon
57
background-color: transparent;
58
}
59
// expanded folder
61
.app-folder-dialog {
62
border: 0;
63
border-radius: $corner-radius;
64
background-color: $surface-z8;
65
color: $on-surface;
66
@if $version >= 40 {
68
padding: 12px 0;
69
} @else if $version >= 3.38 {
70
padding: 12px;
71
} @else {
72
spacing: 12px;
73
}
74
.folder-name-container {
76
padding: 24px 36px 0;
77
spacing: 12px;
78
.folder-name-label,
80
.folder-name-entry {
81
@include type(headline6);
82
}
83
.folder-name-entry {
85
width: 300px;
86
}
87
// FIXME: this is to keep the label in sync with the entry
89
.folder-name-label {
90
padding: 0 8px;
91
color: inherit;
92
}
93
.edit-folder-button {
95
@extend %button;
96
width: $medium-size;
98
height: $medium-size;
99
min-width: 0;
100
min-height: 0;
101
padding: 0;
102
border-radius: $medium-size / 2;
103
> StIcon {
105
icon-size: 16px;
106
}
107
}
108
}
109
.icon-grid {
111
row-spacing: 16px;
112
column-spacing: 32px;
113
@if $version >= 40 {
115
page-padding-top: 0;
116
page-padding-bottom: 0;
117
page-padding-left: 0;
118
page-padding-right: 0;
119
}
120
}
121
.page-indicators {
123
margin-bottom: 16px;
124
@if $version < 40 {
126
.page-indicator {
127
padding: 16px 12px;
128
}
129
}
130
}
131
.app-well-app {
133
&:focus {
134
.overview-icon {
135
background-color: focus-overlay($on-surface);
136
}
137
}
138
&:drop,
140
&:hover,
141
&:selected {
142
.overview-icon {
143
background-color: hover-overlay($on-surface);
144
}
145
}
146
&:active,
148
&:checked {
149
.overview-icon {
150
background-color: pressed-overlay($on-surface);
151
}
152
}
153
}
154
}
155
.app-folder-dialog-container {
157
padding: 12px;
158
@if $version >= 3.38 {
160
width: 620px;
161
height: 620px;
162
} @else {
163
width: 800px;
164
height: 600px;
165
}
166
}
167
@if $version < 3.36 {
169
// expanded collection
170
.app-folder-popup {
171
-arrow-base: 24px;
172
-arrow-rise: 12px;
173
-arrow-border-radius: $corner-radius;
174
-arrow-background-color: fill($on-dark);
175
}
176
.app-folder-popup-bin {
178
padding: 6px;
179
}
180
}
181
@if $version >= 40 {
183
.app-well-app.app-folder > .overview-icon > StBoxLayout > StBin > StWidget {
184
border-radius: $corner-radius;
185
background-color: fill($on-dark);
186
}
187
} @else {
188
.app-folder-icon {
189
padding: 8px;
190
spacing-rows: 4px;
191
spacing-columns: 4px;
192
border-radius: $corner-radius;
193
background-color: fill($on-dark);
194
// HACK: Force icon size to 32px
196
> StBin > StIcon {
197
padding: 2px;
198
}
199
}
200
}
201
// Running app indicator (also shown in dash)
203
.app-well-app-running-dot {
204
height: 2px;
205
width: 32px;
206
margin-bottom: 0;
207
border-radius: 0;
208
background-color: $on-dark;
209
}
210
// Rename popup for app folders
212
.rename-folder-popup {
213
.rename-folder-popup-item {
214
spacing: 6px;
215
&:ltr,
217
&:rtl {
218
padding: 0 12px;
219
}
220
}
221
}
222
// right-click app menu
224
.app-menu,
225
.app-well-menu {
226
max-width: 27.25em;
227
}
228
// App Grid pagination indicators
230
.page-indicator {
231
@if $version >= 40 {
232
padding: 8px 12px 0;
233
} @else {
234
padding: 16px 20px;
235
}
236
@if $version >= 3.36 {
238
.page-indicator-icon {
239
width: 12px;
240
height: 12px;
241
border-radius: 12px; // the same as height&width
242
background-color: $on-dark;
243
}
244
} @else {
245
.page-indicator-icon {
246
width: 12px;
247
height: 12px;
248
border: 0;
249
border-radius: 12px;
250
background-image: none;
251
background-color: disabled-hint($on-dark);
252
transition-duration: $duration;
253
}
254
&:hover .page-indicator-icon {
256
border-color: transparent;
257
background-image: none;
258
background-color: disabled($on-dark);
259
}
260
&:active .page-indicator-icon {
262
margin: 0;
263
border: 0;
264
background-image: none;
265
background-color: hint($on-dark);
266
}
267
&:checked .page-indicator-icon,
269
&:checked:active .page-indicator-icon {
270
background-image: none;
271
background-color: $on-dark;
272
transition-duration: 0ms;
273
}
274
&:checked:active {
276
background-image: none;
277
background-color: transparent;
278
}
279
}
280
}
281
@if $version >= 40 {
283
.apps-scroll-view {
284
padding: 0;
285
}
286
} @else if $version >= 3.38 {
287
.all-apps {
288
// horizontal padding to make sure scrollbars or dash don't overlap content
289
padding: 0 88px 10px;
290
}
291
} @else if $version >= 3.34 {
292
.all-apps,
293
.frequent-apps > StBoxLayout {
294
// horizontal padding to make sure scrollbars or dash don't overlap content
295
padding: 0 88px 10px;
296
}
297
} @else {
298
.search-display > StBoxLayout,
299
.all-apps,
300
.frequent-apps > StBoxLayout {
301
// horizontal padding to make sure scrollbars or dash don't overlap content
302
padding: 0 88px 10px;
303
}
304
}
305
@if $version < 3.38 {
307
// Label when no frequent apps
308
.no-frequent-applications-label {
309
@extend %overview-status-text;
310
}
311
}
312
// shutdown and other actions in the grid
314
.system-action-icon {
315
icon-size: 48px;
316
border-radius: $circular-radius;
317
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
318
background-color: $grey-900;
319
color: on($grey-900);
320
}
321
@if $version >= 40 {
323
.page-navigation-hint {
324
width: 300px;
325
&.dnd {
327
background: dragged-overlay($on-system);
328
}
329
&.next:ltr,
331
&.previous:rtl {
332
background-gradient-start: fill($on-system);
333
background-gradient-end: fill($on-system);
334
background-gradient-direction: horizontal;
335
border-radius: $corner-radius 0 0 $corner-radius;
336
}
337
&.previous:ltr,
339
&.next:rtl {
340
background-gradient-start: fill($on-system);
341
background-gradient-end: fill($on-system);
342
background-gradient-direction: horizontal;
343
border-radius: 0 $corner-radius $corner-radius 0;
344
}
345
}
346
.page-navigation-arrow {
348
width: 24px;
349
height: 24px;
350
margin: 6px;
351
}
352
}
353
@if $version < 3.38 {
355
/* Frequent | All toggle */
356
// container
358
.app-view-controls {
359
width: 320px;
360
padding-bottom: 32px;
361
}
362
// buttons
364
.app-view-control {
365
margin: 0;
366
padding: 0 8px;
367
&, &:focus, &:hover, &:active, &:checked {
369
@include button(flat-normal, $tc: $on-dark);
370
}
371
&:hover {
373
background-color: hover-overlay($on-dark);
374
}
375
&:active {
377
background-color: pressed-overlay($on-dark);
378
transition-duration: $duration-ripple;
379
}
380
&:checked {
382
box-shadow: inset 0 2px 0 $on-dark;
383
background-color: rgba(black, .01);
384
color: $on-dark;
385
}
386
&:focus {
388
background-color: focus-overlay($on-dark);
389
}
390
&:first-child {
392
border-right-width: 0;
393
border-radius: $corner-radius;
394
}
395
&:last-child {
397
border-radius: $corner-radius;
398
}
399
&:checked {
401
border-radius: 0;
402
}
403
}
404
}
405