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: overlay("focus", $on-surface);
136
}
137
}
138
&:drop,
140
&:hover,
141
&:selected {
142
.overview-icon {
143
background-color: overlay("hover", $on-surface);
144
}
145
}
146
&:active,
148
&:checked {
149
.overview-icon {
150
background-color: overlay("pressed", $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-folder-icon {
184
padding: 8px;
185
spacing-rows: 4px;
186
spacing-columns: 4px;
187
border-radius: $corner-radius;
188
background-color: fill($on-dark);
189
// HACK: Force icon size to 32px
191
> StBin > StIcon {
192
padding: 2px;
193
}
194
}
195
}
196
// Running app indicator (also shown in dash)
198
.app-well-app-running-dot {
199
height: 2px;
200
width: 32px;
201
margin-bottom: 0;
202
border-radius: 0;
203
background-color: $on-dark;
204
}
205
// Rename popup for app folders
207
.rename-folder-popup {
208
.rename-folder-popup-item {
209
spacing: 6px;
210
&:ltr,
212
&:rtl {
213
padding: 0 12px;
214
}
215
}
216
}
217
// right-click app menu
219
.app-menu,
220
.app-well-menu {
221
max-width: 27.25em;
222
}
223
// App Grid pagination indicators
225
.page-indicator {
226
@if $version >= 40 {
227
padding: 8px 12px 0;
228
} @else {
229
padding: 16px 20px;
230
}
231
@if $version >= 3.36 {
233
.page-indicator-icon {
234
width: 12px;
235
height: 12px;
236
border-radius: 12px; // the same as height&width
237
background-color: $on-dark;
238
}
239
} @else {
240
.page-indicator-icon {
241
width: 12px;
242
height: 12px;
243
border: 0;
244
border-radius: 12px;
245
background-image: none;
246
background-color: disabled-hint($on-dark);
247
transition-duration: $duration;
248
}
249
&:hover .page-indicator-icon {
251
border-color: transparent;
252
background-image: none;
253
background-color: disabled($on-dark);
254
}
255
&:active .page-indicator-icon {
257
margin: 0;
258
border: 0;
259
background-image: none;
260
background-color: hint($on-dark);
261
}
262
&:checked .page-indicator-icon,
264
&:checked:active .page-indicator-icon {
265
background-image: none;
266
background-color: $on-dark;
267
transition-duration: 0ms;
268
}
269
&:checked:active {
271
background-image: none;
272
background-color: transparent;
273
}
274
}
275
}
276
@if $version >= 40 {
278
.apps-scroll-view {
279
padding: 0;
280
}
281
} @else if $version >= 3.38 {
282
.all-apps {
283
// horizontal padding to make sure scrollbars or dash don't overlap content
284
padding: 0 88px 10px;
285
}
286
} @else if $version >= 3.34 {
287
.all-apps,
288
.frequent-apps > StBoxLayout {
289
// horizontal padding to make sure scrollbars or dash don't overlap content
290
padding: 0 88px 10px;
291
}
292
} @else {
293
.search-display > StBoxLayout,
294
.all-apps,
295
.frequent-apps > StBoxLayout {
296
// horizontal padding to make sure scrollbars or dash don't overlap content
297
padding: 0 88px 10px;
298
}
299
}
300
@if $version < 3.38 {
302
// Label when no frequent apps
303
.no-frequent-applications-label {
304
@extend %overview-status-text;
305
}
306
}
307
// shutdown and other actions in the grid
309
.system-action-icon {
310
icon-size: 48px;
311
border-radius: $circular-radius;
312
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
313
background-color: $grey-900;
314
color: on($grey-900);
315
}
316
@if $version >= 40 {
318
.page-navigation-hint {
319
width: 300px;
320
&.dnd {
322
background: overlay("dragged", $on-system);
323
}
324
&.next:ltr,
326
&.previous:rtl {
327
background-gradient-start: fill($on-system);
328
background-gradient-end: fill($on-system);
329
background-gradient-direction: horizontal;
330
border-radius: $corner-radius 0 0 $corner-radius;
331
}
332
&.previous:ltr,
334
&.next:rtl {
335
background-gradient-start: fill($on-system);
336
background-gradient-end: fill($on-system);
337
background-gradient-direction: horizontal;
338
border-radius: 0 $corner-radius $corner-radius 0;
339
}
340
}
341
.page-navigation-arrow {
343
width: 24px;
344
height: 24px;
345
margin: 6px;
346
}
347
}
348
@if $version < 3.38 {
350
/* Frequent | All toggle */
351
// container
353
.app-view-controls {
354
width: 320px;
355
padding-bottom: 32px;
356
}
357
// buttons
359
.app-view-control {
360
margin: 0;
361
padding: 0 8px;
362
&, &:focus, &:hover, &:active, &:checked {
364
@include button(flat-normal, $tc: $on-dark);
365
}
366
&:hover {
368
background-color: overlay("hover", $on-dark);
369
}
370
&:active {
372
background-color: overlay("pressed", $on-dark);
373
transition-duration: $duration-ripple;
374
}
375
&:checked {
377
box-shadow: inset 0 2px 0 $on-dark;
378
background-color: rgba(black, .01);
379
color: $on-dark;
380
}
381
&:focus {
383
background-color: overlay("focus", $on-dark);
384
}
385
&:first-child {
387
border-right-width: 0;
388
border-radius: $corner-radius;
389
}
390
&:last-child {
392
border-radius: $corner-radius;
393
}
394
&:checked {
396
border-radius: 0;
397
}
398
}
399
}
400