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;
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
.app-well-app {
100
&:focus {
101
.overview-icon {
102
background-color: overlay("focus", $on-surface);
103
}
104
}
105
&:drop,
107
&:hover,
108
&:selected {
109
.overview-icon {
110
background-color: overlay("hover", $on-surface);
111
}
112
}
113
&:active,
115
&:checked {
116
.overview-icon {
117
background-color: overlay("pressed", $on-surface);
118
}
119
}
120
}
121
}
122
.app-folder-dialog-container {
124
padding: 12px;
125
@if $version >= 3.38 {
127
width: 620px;
128
height: 620px;
129
} @else {
130
width: 800px;
131
height: 600px;
132
}
133
}
134
@if $version <= 3.34 {
136
// expanded collection
137
.app-folder-popup {
138
-arrow-base: 24px;
139
-arrow-rise: 12px;
140
-arrow-border-radius: $corner-radius;
141
-arrow-background-color: fill($on-dark);
142
}
143
.app-folder-popup-bin {
145
padding: 6px;
146
}
147
}
148
.app-folder-icon {
150
padding: 5px;
151
spacing-rows: 10px;
152
spacing-columns: 10px;
153
}
154
// Running app indicator (also shown in dash)
156
.app-well-app-running-dot {
157
height: 2px;
158
width: 32px;
159
margin-bottom: 0;
160
border-radius: 0;
161
background-color: $on-dark;
162
}
163
// Rename popup for app folders
165
.rename-folder-popup {
166
.rename-folder-popup-item {
167
spacing: 6px;
168
&:ltr,
170
&:rtl {
171
padding: 0 12px;
172
}
173
}
174
}
175
// right-click app menu
177
.app-menu,
178
.app-well-menu {
179
max-width: 27.25em;
180
}
181
// App Grid pagination indicators
183
.page-indicator {
184
padding: 15px 20px;
185
@if $version >= 3.36 {
187
.page-indicator-icon {
188
width: 12px;
189
height: 12px;
190
border-radius: 12px; // the same as height&width
191
background-color: $on-dark;
192
}
193
} @else {
194
.page-indicator-icon {
195
width: 12px;
196
height: 12px;
197
border: 0;
198
border-radius: 12px;
199
background-image: none;
200
background-color: disabled-hint($on-dark);
201
transition-duration: $duration;
202
}
203
&:hover .page-indicator-icon {
205
border-color: transparent;
206
background-image: none;
207
background-color: disabled($on-dark);
208
}
209
&:active .page-indicator-icon {
211
margin: 0;
212
border: 0;
213
background-image: none;
214
background-color: hint($on-dark);
215
}
216
&:checked .page-indicator-icon,
218
&:checked:active .page-indicator-icon {
219
background-image: none;
220
background-color: $on-dark;
221
transition-duration: 0ms;
222
}
223
&:checked:active {
225
background-image: none;
226
background-color: transparent;
227
}
228
}
229
}
230
// Some hacks I don't even know
232
$search-display: if($version <= 3.32, ".search-display > StBoxLayout,", null);
233
$frequent-apps: if($version <= 3.36, ".frequent-apps > StBoxLayout,", null);
234
#{$search-display}
236
#{$frequent-apps}
237
.all-apps {
238
// horizontal padding to make sure scrollbars or dash don't overlap content
239
padding: 0 88px 10px;
240
}
241
@if $version <= 3.36 {
243
// Label when no frequent apps
244
.no-frequent-applications-label {
245
@extend %overview-status-text;
246
}
247
}
248
// shutdown and other actions in the grid
250
.system-action-icon {
251
icon-size: 48px;
252
border-radius: $circular-radius;
253
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
254
background-color: $grey-900;
255
color: on($grey-900);
256
}
257
@if $version <= 3.36 {
259
/* Frequent | All toggle */
260
// container
262
.app-view-controls {
263
width: 320px;
264
padding-bottom: 32px;
265
}
266
// buttons
268
.app-view-control {
269
margin: 0;
270
padding: 0 8px;
271
&, &:focus, &:hover, &:active, &:checked {
273
@include button(flat-normal, $tc: $on-dark);
274
}
275
&:hover {
277
background-color: overlay("hover", $on-dark);
278
}
279
&:active {
281
background-color: overlay("pressed", $on-dark);
282
transition-duration: $duration-ripple;
283
}
284
&:checked {
286
box-shadow: inset 0 2px 0 $on-dark;
287
background-color: rgba(black, .01);
288
color: $on-dark;
289
}
290
&:focus {
292
background-color: overlay("focus", $on-dark);
293
}
294
&:first-child {
296
border-right-width: 0;
297
border-radius: $corner-radius;
298
}
299
&:last-child {
301
border-radius: $corner-radius;
302
}
303
&:checked {
305
border-radius: 0;
306
}
307
}
308
}
309