ASCII text
1
/* App Grid */
2
// app icons
4
.icon-grid {
5
-shell-grid-horizontal-item-size: 136px;
6
-shell-grid-vertical-item-size: 136px;
7
spacing: 32px;
8
.overview-icon {
10
icon-size: 96px;
11
}
12
}
13
@if $version <= 3.36 {
15
.app-display {
16
// spacing: 20px;
17
}
18
}
19
/* App Icons */
21
// Icon tiles in the app grid
23
.app-well-app,
24
%app-well-app {
25
@extend %overview-icon;
26
.overview-icon.overview-icon-with-label {
28
padding: 8px;
29
spacing: 0;
30
> StBoxLayout {
32
spacing: 4px;
33
}
34
}
35
}
36
/* App Folders */
38
.app-well-app.app-folder {
39
@extend %app-well-app;
40
border-radius: $corner-radius; // same as .overview-icon
41
background-color: fill($on-dark);
42
}
43
// expanded folder
45
.app-folder-dialog {
46
spacing: 12px;
47
border: 0;
48
border-radius: $corner-radius;
49
background-color: $surface;
50
color: $on-surface;
51
.folder-name-container {
53
padding: 24px 36px 0;
54
spacing: 12px;
55
.folder-name-label,
57
.folder-name-entry {
58
@include type(headline6);
59
}
60
.folder-name-entry {
62
width: 300px;
63
}
64
// FIXME: this is to keep the label in sync with the entry
66
.folder-name-label {
67
padding: 0 8px;
68
color: inherit;
69
}
70
.edit-folder-button {
72
@extend %button;
73
width: $medium-size;
75
height: $medium-size;
76
min-width: 0;
77
min-height: 0;
78
padding: 0;
79
border-radius: $medium-size / 2;
80
> StIcon {
82
icon-size: 16px;
83
}
84
}
85
}
86
.app-well-app {
88
&:focus {
89
.overview-icon {
90
background-color: overlay("focus", $on-surface);
91
}
92
}
93
&:drop,
95
&:hover,
96
&:selected {
97
.overview-icon {
98
background-color: overlay("hover", $on-surface);
99
}
100
}
101
&:active,
103
&:checked {
104
.overview-icon {
105
background-color: overlay("pressed", $on-surface);
106
}
107
}
108
}
109
}
110
.app-folder-dialog-container {
112
width: 800px;
113
height: 600px;
114
padding: 12px;
115
}
116
@if $version <= 3.34 {
118
// expanded collection
119
.app-folder-popup {
120
-arrow-base: 24px;
121
-arrow-rise: 12px;
122
-arrow-border-radius: $corner-radius;
123
-arrow-background-color: fill($on-dark);
124
}
125
.app-folder-popup-bin {
127
padding: 6px;
128
}
129
}
130
.app-folder-icon {
132
padding: 5px;
133
spacing-rows: 10px;
134
spacing-columns: 10px;
135
}
136
// Running app indicator (also shown in dash)
138
.app-well-app-running-dot {
139
height: 2px;
140
width: 32px;
141
margin-bottom: 0;
142
border-radius: 0;
143
background-color: $on-dark;
144
}
145
// Rename popup for app folders
147
.rename-folder-popup {
148
.rename-folder-popup-item {
149
spacing: 6px;
150
&:ltr,
152
&:rtl {
153
padding: 0 12px;
154
}
155
}
156
}
157
// right-click app menu
159
.app-menu,
160
.app-well-menu {
161
max-width: 27.25em;
162
}
163
// App Grid pagination indicators
165
.page-indicator {
166
padding: 15px 20px;
167
@if $version >= 3.36 {
169
.page-indicator-icon {
170
width: 12px;
171
height: 12px;
172
border-radius: 12px; // the same as height&width
173
background-color: $on-dark;
174
}
175
} @else {
176
.page-indicator-icon {
177
width: 12px;
178
height: 12px;
179
border: 0;
180
border-radius: 12px;
181
background-image: none;
182
background-color: disabled-hint($on-dark);
183
transition-duration: $duration;
184
}
185
&:hover .page-indicator-icon {
187
border-color: transparent;
188
background-image: none;
189
background-color: disabled($on-dark);
190
}
191
&:active .page-indicator-icon {
193
margin: 0;
194
border: 0;
195
background-image: none;
196
background-color: hint($on-dark);
197
}
198
&:checked .page-indicator-icon,
200
&:checked:active .page-indicator-icon {
201
background-image: none;
202
background-color: $on-dark;
203
transition-duration: 0ms;
204
}
205
&:checked:active {
207
background-image: none;
208
background-color: transparent;
209
}
210
}
211
}
212
// Some hacks I don't even know
214
$search-display: if($version <= 3.32, ".search-display > StBoxLayout,", null);
215
$frequent-apps: if($version <= 3.36, ".frequent-apps > StBoxLayout,", null);
216
#{$search-display}
218
#{$frequent-apps}
219
.all-apps {
220
// horizontal padding to make sure scrollbars or dash don't overlap content
221
padding: 0 88px 10px;
222
}
223
@if $version <= 3.36 {
225
// Label when no frequent apps
226
.no-frequent-applications-label {
227
@extend %overview-status-text;
228
}
229
}
230
// shutdown and other actions in the grid
232
.system-action-icon {
233
icon-size: 48px;
234
border-radius: $circular-radius;
235
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
236
background-color: $grey-900;
237
color: on($grey-900);
238
}
239
@if $version <= 3.36 {
241
/* Frequent | All toggle */
242
// container
244
.app-view-controls {
245
width: 320px;
246
padding-bottom: 32px;
247
}
248
// buttons
250
.app-view-control {
251
margin: 0;
252
padding: 0 8px;
253
&, &:focus, &:hover, &:active, &:checked {
255
@include button(flat-normal, $tc: $on-dark);
256
}
257
&:hover {
259
background-color: overlay("hover", $on-dark);
260
}
261
&:active {
263
background-color: overlay("pressed", $on-dark);
264
transition-duration: $duration-ripple;
265
}
266
&:checked {
268
box-shadow: inset 0 2px 0 $on-dark;
269
background-color: rgba(black, .01);
270
color: $on-dark;
271
}
272
&:focus {
274
background-color: overlay("focus", $on-dark);
275
}
276
&:first-child {
278
border-right-width: 0;
279
border-radius: $corner-radius;
280
}
281
&:last-child {
283
border-radius: $corner-radius;
284
}
285
&:checked {
287
border-radius: 0;
288
}
289
}
290
}
291