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
spacing: 12px;
54
border: 0;
55
border-radius: $corner-radius;
56
background-color: $surface;
57
color: $on-surface;
58
.folder-name-container {
60
padding: 24px 36px 0;
61
spacing: 12px;
62
.folder-name-label,
64
.folder-name-entry {
65
@include type(headline6);
66
}
67
.folder-name-entry {
69
width: 300px;
70
}
71
// FIXME: this is to keep the label in sync with the entry
73
.folder-name-label {
74
padding: 0 8px;
75
color: inherit;
76
}
77
.edit-folder-button {
79
@extend %button;
80
width: $medium-size;
82
height: $medium-size;
83
min-width: 0;
84
min-height: 0;
85
padding: 0;
86
border-radius: $medium-size / 2;
87
> StIcon {
89
icon-size: 16px;
90
}
91
}
92
}
93
.app-well-app {
95
&:focus {
96
.overview-icon {
97
background-color: overlay("focus", $on-surface);
98
}
99
}
100
&:drop,
102
&:hover,
103
&:selected {
104
.overview-icon {
105
background-color: overlay("hover", $on-surface);
106
}
107
}
108
&:active,
110
&:checked {
111
.overview-icon {
112
background-color: overlay("pressed", $on-surface);
113
}
114
}
115
}
116
}
117
.app-folder-dialog-container {
119
width: 800px;
120
height: 600px;
121
padding: 12px;
122
}
123
@if $version <= 3.34 {
125
// expanded collection
126
.app-folder-popup {
127
-arrow-base: 24px;
128
-arrow-rise: 12px;
129
-arrow-border-radius: $corner-radius;
130
-arrow-background-color: fill($on-dark);
131
}
132
.app-folder-popup-bin {
134
padding: 6px;
135
}
136
}
137
.app-folder-icon {
139
padding: 5px;
140
spacing-rows: 10px;
141
spacing-columns: 10px;
142
}
143
// Running app indicator (also shown in dash)
145
.app-well-app-running-dot {
146
height: 2px;
147
width: 32px;
148
margin-bottom: 0;
149
border-radius: 0;
150
background-color: $on-dark;
151
}
152
// Rename popup for app folders
154
.rename-folder-popup {
155
.rename-folder-popup-item {
156
spacing: 6px;
157
&:ltr,
159
&:rtl {
160
padding: 0 12px;
161
}
162
}
163
}
164
// right-click app menu
166
.app-menu,
167
.app-well-menu {
168
max-width: 27.25em;
169
}
170
// App Grid pagination indicators
172
.page-indicator {
173
padding: 15px 20px;
174
@if $version >= 3.36 {
176
.page-indicator-icon {
177
width: 12px;
178
height: 12px;
179
border-radius: 12px; // the same as height&width
180
background-color: $on-dark;
181
}
182
} @else {
183
.page-indicator-icon {
184
width: 12px;
185
height: 12px;
186
border: 0;
187
border-radius: 12px;
188
background-image: none;
189
background-color: disabled-hint($on-dark);
190
transition-duration: $duration;
191
}
192
&:hover .page-indicator-icon {
194
border-color: transparent;
195
background-image: none;
196
background-color: disabled($on-dark);
197
}
198
&:active .page-indicator-icon {
200
margin: 0;
201
border: 0;
202
background-image: none;
203
background-color: hint($on-dark);
204
}
205
&:checked .page-indicator-icon,
207
&:checked:active .page-indicator-icon {
208
background-image: none;
209
background-color: $on-dark;
210
transition-duration: 0ms;
211
}
212
&:checked:active {
214
background-image: none;
215
background-color: transparent;
216
}
217
}
218
}
219
// Some hacks I don't even know
221
$search-display: if($version <= 3.32, ".search-display > StBoxLayout,", null);
222
$frequent-apps: if($version <= 3.36, ".frequent-apps > StBoxLayout,", null);
223
#{$search-display}
225
#{$frequent-apps}
226
.all-apps {
227
// horizontal padding to make sure scrollbars or dash don't overlap content
228
padding: 0 88px 10px;
229
}
230
@if $version <= 3.36 {
232
// Label when no frequent apps
233
.no-frequent-applications-label {
234
@extend %overview-status-text;
235
}
236
}
237
// shutdown and other actions in the grid
239
.system-action-icon {
240
icon-size: 48px;
241
border-radius: $circular-radius;
242
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
243
background-color: $grey-900;
244
color: on($grey-900);
245
}
246
@if $version <= 3.36 {
248
/* Frequent | All toggle */
249
// container
251
.app-view-controls {
252
width: 320px;
253
padding-bottom: 32px;
254
}
255
// buttons
257
.app-view-control {
258
margin: 0;
259
padding: 0 8px;
260
&, &:focus, &:hover, &:active, &:checked {
262
@include button(flat-normal, $tc: $on-dark);
263
}
264
&:hover {
266
background-color: overlay("hover", $on-dark);
267
}
268
&:active {
270
background-color: overlay("pressed", $on-dark);
271
transition-duration: $duration-ripple;
272
}
273
&:checked {
275
box-shadow: inset 0 2px 0 $on-dark;
276
background-color: rgba(black, .01);
277
color: $on-dark;
278
}
279
&:focus {
281
background-color: overlay("focus", $on-dark);
282
}
283
&:first-child {
285
border-right-width: 0;
286
border-radius: $corner-radius;
287
}
288
&:last-child {
290
border-radius: $corner-radius;
291
}
292
&:checked {
294
border-radius: 0;
295
}
296
}
297
}
298