ASCII text
1
/* App Grid */
2
// app icons
4
.icon-grid {
5
@if $version >= 3.38 {
6
row-spacing: 48px;
7
column-spacing: 48px;
8
max-row-spacing: 96px;
9
max-column-spacing: 96px;
10
} @else {
11
-shell-grid-horizontal-item-size: 136px;
12
-shell-grid-vertical-item-size: 136px;
13
spacing: 32px;
14
.overview-icon {
16
icon-size: 96px;
17
}
18
}
19
}
20
@if $version < 3.38 {
22
.app-display {
23
// spacing: 20px;
24
}
25
}
26
/* App Icons */
28
// Icon tiles in the app grid
30
.app-well-app,
31
%app-well-app {
32
@extend %overview-icon;
33
.overview-icon.overview-icon-with-label {
35
padding: 8px;
36
spacing: 0;
37
> StBoxLayout {
39
spacing: 4px;
40
}
41
}
42
}
43
/* App Folders */
45
.app-well-app.app-folder {
46
@extend %app-well-app;
47
border-radius: $corner-radius; // same as .overview-icon
48
background-color: transparent;
49
}
50
// expanded folder
52
.app-folder-dialog {
53
border: 0;
54
border-radius: $corner-radius;
55
background-color: $surface-z8;
56
color: $on-surface;
57
@if $version >= 3.38 {
59
padding: 12px;
60
} @else {
61
spacing: 12px;
62
}
63
.folder-name-container {
65
padding: 24px 36px 0;
66
spacing: 12px;
67
.folder-name-label,
69
.folder-name-entry {
70
@include type(headline6);
71
}
72
.folder-name-entry {
74
width: 300px;
75
}
76
// FIXME: this is to keep the label in sync with the entry
78
.folder-name-label {
79
padding: 0 8px;
80
color: inherit;
81
}
82
.edit-folder-button {
84
@extend %button;
85
width: $medium-size;
87
height: $medium-size;
88
min-width: 0;
89
min-height: 0;
90
padding: 0;
91
border-radius: $medium-size / 2;
92
> StIcon {
94
icon-size: 16px;
95
}
96
}
97
}
98
.icon-grid {
100
row-spacing: 16px;
101
column-spacing: 32px;
102
}
103
.page-indicators {
105
margin-bottom: 16px;
106
.page-indicator {
108
padding: 16px 12px;
109
}
110
}
111
.app-well-app {
113
&:focus {
114
.overview-icon {
115
background-color: overlay("focus", $on-surface);
116
}
117
}
118
&:drop,
120
&:hover,
121
&:selected {
122
.overview-icon {
123
background-color: overlay("hover", $on-surface);
124
}
125
}
126
&:active,
128
&:checked {
129
.overview-icon {
130
background-color: overlay("pressed", $on-surface);
131
}
132
}
133
}
134
}
135
.app-folder-dialog-container {
137
padding: 12px;
138
@if $version >= 3.38 {
140
width: 620px;
141
height: 620px;
142
} @else {
143
width: 800px;
144
height: 600px;
145
}
146
}
147
@if $version < 3.36 {
149
// expanded collection
150
.app-folder-popup {
151
-arrow-base: 24px;
152
-arrow-rise: 12px;
153
-arrow-border-radius: $corner-radius;
154
-arrow-background-color: fill($on-dark);
155
}
156
.app-folder-popup-bin {
158
padding: 6px;
159
}
160
}
161
.app-folder-icon {
163
padding: 8px;
164
spacing-rows: 4px;
165
spacing-columns: 4px;
166
border-radius: $corner-radius;
167
background-color: fill($on-dark);
168
// HACK: Force icon size to 32px
170
> StBin > StIcon {
171
padding: 2px;
172
}
173
}
174
// Running app indicator (also shown in dash)
176
.app-well-app-running-dot {
177
height: 2px;
178
width: 32px;
179
margin-bottom: 0;
180
border-radius: 0;
181
background-color: $on-dark;
182
}
183
// Rename popup for app folders
185
.rename-folder-popup {
186
.rename-folder-popup-item {
187
spacing: 6px;
188
&:ltr,
190
&:rtl {
191
padding: 0 12px;
192
}
193
}
194
}
195
// right-click app menu
197
.app-menu,
198
.app-well-menu {
199
max-width: 27.25em;
200
}
201
// App Grid pagination indicators
203
.page-indicator {
204
padding: 15px 20px;
205
@if $version >= 3.36 {
207
.page-indicator-icon {
208
width: 12px;
209
height: 12px;
210
border-radius: 12px; // the same as height&width
211
background-color: $on-dark;
212
}
213
} @else {
214
.page-indicator-icon {
215
width: 12px;
216
height: 12px;
217
border: 0;
218
border-radius: 12px;
219
background-image: none;
220
background-color: disabled-hint($on-dark);
221
transition-duration: $duration;
222
}
223
&:hover .page-indicator-icon {
225
border-color: transparent;
226
background-image: none;
227
background-color: disabled($on-dark);
228
}
229
&:active .page-indicator-icon {
231
margin: 0;
232
border: 0;
233
background-image: none;
234
background-color: hint($on-dark);
235
}
236
&:checked .page-indicator-icon,
238
&:checked:active .page-indicator-icon {
239
background-image: none;
240
background-color: $on-dark;
241
transition-duration: 0ms;
242
}
243
&:checked:active {
245
background-image: none;
246
background-color: transparent;
247
}
248
}
249
}
250
// Some hacks I don't even know
252
$search-display: if($version < 3.34, ".search-display > StBoxLayout,", null);
253
$frequent-apps: if($version < 3.38, ".frequent-apps > StBoxLayout,", null);
254
#{$search-display}
256
#{$frequent-apps}
257
.all-apps {
258
// horizontal padding to make sure scrollbars or dash don't overlap content
259
padding: 0 88px 10px;
260
}
261
@if $version < 3.38 {
263
// Label when no frequent apps
264
.no-frequent-applications-label {
265
@extend %overview-status-text;
266
}
267
}
268
// shutdown and other actions in the grid
270
.system-action-icon {
271
icon-size: 48px;
272
border-radius: $circular-radius;
273
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
274
background-color: $grey-900;
275
color: on($grey-900);
276
}
277
@if $version < 3.38 {
279
/* Frequent | All toggle */
280
// container
282
.app-view-controls {
283
width: 320px;
284
padding-bottom: 32px;
285
}
286
// buttons
288
.app-view-control {
289
margin: 0;
290
padding: 0 8px;
291
&, &:focus, &:hover, &:active, &:checked {
293
@include button(flat-normal, $tc: $on-dark);
294
}
295
&:hover {
297
background-color: overlay("hover", $on-dark);
298
}
299
&:active {
301
background-color: overlay("pressed", $on-dark);
302
transition-duration: $duration-ripple;
303
}
304
&:checked {
306
box-shadow: inset 0 2px 0 $on-dark;
307
background-color: rgba(black, .01);
308
color: $on-dark;
309
}
310
&:focus {
312
background-color: overlay("focus", $on-dark);
313
}
314
&:first-child {
316
border-right-width: 0;
317
border-radius: $corner-radius;
318
}
319
&:last-child {
321
border-radius: $corner-radius;
322
}
323
&:checked {
325
border-radius: 0;
326
}
327
}
328
}
329