ASCII text
1
/* App Grid */
2
// app icons
4
.icon-grid {
5
@if $version >= 3.38 {
6
row-spacing: 32px;
7
column-spacing: 32px;
8
max-row-spacing: 64px;
9
max-column-spacing: 64px;
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.36 {
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: fill($on-dark);
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.34 {
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: 5px;
164
spacing-rows: 10px;
165
spacing-columns: 10px;
166
}
167
// Running app indicator (also shown in dash)
169
.app-well-app-running-dot {
170
height: 2px;
171
width: 32px;
172
margin-bottom: 0;
173
border-radius: 0;
174
background-color: $on-dark;
175
}
176
// Rename popup for app folders
178
.rename-folder-popup {
179
.rename-folder-popup-item {
180
spacing: 6px;
181
&:ltr,
183
&:rtl {
184
padding: 0 12px;
185
}
186
}
187
}
188
// right-click app menu
190
.app-menu,
191
.app-well-menu {
192
max-width: 27.25em;
193
}
194
// App Grid pagination indicators
196
.page-indicator {
197
padding: 15px 20px;
198
@if $version >= 3.36 {
200
.page-indicator-icon {
201
width: 12px;
202
height: 12px;
203
border-radius: 12px; // the same as height&width
204
background-color: $on-dark;
205
}
206
} @else {
207
.page-indicator-icon {
208
width: 12px;
209
height: 12px;
210
border: 0;
211
border-radius: 12px;
212
background-image: none;
213
background-color: disabled-hint($on-dark);
214
transition-duration: $duration;
215
}
216
&:hover .page-indicator-icon {
218
border-color: transparent;
219
background-image: none;
220
background-color: disabled($on-dark);
221
}
222
&:active .page-indicator-icon {
224
margin: 0;
225
border: 0;
226
background-image: none;
227
background-color: hint($on-dark);
228
}
229
&:checked .page-indicator-icon,
231
&:checked:active .page-indicator-icon {
232
background-image: none;
233
background-color: $on-dark;
234
transition-duration: 0ms;
235
}
236
&:checked:active {
238
background-image: none;
239
background-color: transparent;
240
}
241
}
242
}
243
// Some hacks I don't even know
245
$search-display: if($version <= 3.32, ".search-display > StBoxLayout,", null);
246
$frequent-apps: if($version <= 3.36, ".frequent-apps > StBoxLayout,", null);
247
#{$search-display}
249
#{$frequent-apps}
250
.all-apps {
251
// horizontal padding to make sure scrollbars or dash don't overlap content
252
padding: 0 88px 10px;
253
}
254
@if $version <= 3.36 {
256
// Label when no frequent apps
257
.no-frequent-applications-label {
258
@extend %overview-status-text;
259
}
260
}
261
// shutdown and other actions in the grid
263
.system-action-icon {
264
icon-size: 48px;
265
border-radius: $circular-radius;
266
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
267
background-color: $grey-900;
268
color: on($grey-900);
269
}
270
@if $version <= 3.36 {
272
/* Frequent | All toggle */
273
// container
275
.app-view-controls {
276
width: 320px;
277
padding-bottom: 32px;
278
}
279
// buttons
281
.app-view-control {
282
margin: 0;
283
padding: 0 8px;
284
&, &:focus, &:hover, &:active, &:checked {
286
@include button(flat-normal, $tc: $on-dark);
287
}
288
&:hover {
290
background-color: overlay("hover", $on-dark);
291
}
292
&:active {
294
background-color: overlay("pressed", $on-dark);
295
transition-duration: $duration-ripple;
296
}
297
&:checked {
299
box-shadow: inset 0 2px 0 $on-dark;
300
background-color: rgba(black, .01);
301
color: $on-dark;
302
}
303
&:focus {
305
background-color: overlay("focus", $on-dark);
306
}
307
&:first-child {
309
border-right-width: 0;
310
border-radius: $corner-radius;
311
}
312
&:last-child {
314
border-radius: $corner-radius;
315
}
316
&:checked {
318
border-radius: 0;
319
}
320
}
321
}
322