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
.app-display {
15
// spacing: 20px;
16
}
17
/* App Icons */
19
// Icon tiles in the app grid
21
.app-well-app,
22
%app-well-app {
23
@extend %overview-icon;
24
.overview-icon.overview-icon-with-label {
26
padding: 8px;
27
spacing: 0;
28
> StBoxLayout {
30
spacing: 4px;
31
}
32
}
33
}
34
/* App Folders */
36
.app-well-app.app-folder {
37
@extend %app-well-app;
38
border-radius: $corner-radius; // same as .overview-icon
39
background-color: on(dark, fill);
40
}
41
// expanded folder
43
.app-folder-dialog {
44
spacing: 12px;
45
border: 0;
46
border-radius: $corner-radius;
47
background-color: $surface;
48
color: $text;
49
.folder-name-container {
51
padding: 24px 36px 0;
52
spacing: 12px;
53
.folder-name-label,
55
.folder-name-entry {
56
@include type(headline6);
57
}
58
.folder-name-entry {
60
width: 300px;
61
}
62
// FIXME: this is to keep the label in sync with the entry
64
.folder-name-label {
65
padding: 0 8px;
66
color: inherit;
67
}
68
.edit-folder-button {
70
@extend %button;
71
width: $medium-size;
73
height: $medium-size;
74
min-width: 0;
75
min-height: 0;
76
padding: 0;
77
border-radius: $medium-size / 2;
78
> StIcon {
80
icon-size: 16px;
81
}
82
}
83
}
84
.app-well-app {
86
&:focus {
87
.overview-icon {
88
background-color: $overlay-focus;
89
}
90
}
91
&:drop,
93
&:hover,
94
&:selected {
95
.overview-icon {
96
background-color: $overlay-hover;
97
}
98
}
99
&:active,
101
&:checked {
102
.overview-icon {
103
background-color: $overlay-active;
104
}
105
}
106
}
107
}
108
.app-folder-dialog-container {
110
width: 800px;
111
height: 600px;
112
padding: 12px;
113
}
114
@if $version <= 3.34 {
116
// expanded collection
117
.app-folder-popup {
118
-arrow-base: 24px;
119
-arrow-rise: 12px;
120
-arrow-border-radius: $corner-radius;
121
-arrow-background-color: on(dark, fill);
122
}
123
.app-folder-popup-bin {
125
padding: 6px;
126
}
127
}
128
.app-folder-icon {
130
padding: 5px;
131
spacing-rows: 10px;
132
spacing-columns: 10px;
133
}
134
// Running app indicator (also shown in dash)
136
.app-well-app-running-dot {
137
height: 2px;
138
width: 32px;
139
margin-bottom: 0;
140
border-radius: 0;
141
background-color: on(dark);
142
}
143
// Rename popup for app folders
145
.rename-folder-popup {
146
.rename-folder-popup-item {
147
spacing: 6px;
148
&:ltr,
150
&:rtl {
151
padding: 0 12px;
152
}
153
}
154
}
155
// right-click app menu
157
.app-menu,
158
.app-well-menu {
159
max-width: 27.25em;
160
}
161
// App Grid pagination indicators
163
.page-indicator {
164
padding: 15px 20px;
165
@if $version >= 3.36 {
167
.page-indicator-icon {
168
width: 12px;
169
height: 12px;
170
border-radius: 12px; // the same as height&width
171
background-color: on(dark);
172
}
173
} @else {
174
.page-indicator-icon {
175
width: 12px;
176
height: 12px;
177
border: 0;
178
border-radius: 12px;
179
background-image: none;
180
background-color: on(dark, text2-disabled);
181
transition-duration: $duration;
182
}
183
&:hover .page-indicator-icon {
185
border-color: transparent;
186
background-image: none;
187
background-color: on(dark, text-disabled);
188
}
189
&:active .page-indicator-icon {
191
margin: 0;
192
border: 0;
193
background-image: none;
194
background-color: on(dark, text2);
195
}
196
&:checked .page-indicator-icon,
198
&:checked:active .page-indicator-icon {
199
background-image: none;
200
background-color: on(dark);
201
transition-duration: 0ms;
202
}
203
&:checked:active {
205
background-image: none;
206
background-color: transparent;
207
}
208
}
209
}
210
// Some hacks I don't even know
212
$search-display: if($version <= 3.32, ".search-display > StBoxLayout,", null);
213
#{$search-display}
215
.all-apps,
216
.frequent-apps > StBoxLayout {
217
// horizontal padding to make sure scrollbars or dash don't overlap content
218
padding: 0 88px 10px;
219
}
220
// Label when no frequent apps
222
.no-frequent-applications-label {
223
@extend %overview-status-text;
224
}
225
// shutdown and other actions in the grid
227
.system-action-icon {
228
icon-size: 48px;
229
border-radius: $circular-radius;
230
box-shadow: 0 4px 4px rgba(black, .2); // FIXME: this should really have a highlight
231
background-color: $grey-900;
232
color: on($grey-900);
233
}
234
/* Frequent | All toggle */
236
// container
238
.app-view-controls {
239
width: 320px;
240
padding-bottom: 32px;
241
}
242
// buttons
244
.app-view-control {
245
margin: 0;
246
padding: 0 8px;
247
&, &:focus, &:hover, &:active, &:checked {
249
@include button(flat-normal, $tc: on(dark));
250
}
251
&:hover {
253
background-color: $inverse-overlay-hover;
254
}
255
&:active {
257
background-color: $inverse-overlay-active;
258
transition-duration: $duration-ripple;
259
}
260
&:checked {
262
box-shadow: inset 0 2px 0 on(dark);
263
background-color: rgba(black, .01);
264
color: on(dark);
265
}
266
&:focus {
268
background-color: $inverse-overlay-focus;
269
}
270
&:first-child {
272
border-right-width: 0;
273
border-radius: $corner-radius;
274
}
275
&:last-child {
277
border-radius: $corner-radius;
278
}
279
&:checked {
281
border-radius: 0;
282
}
283
}
284