_dialog.scss
ASCII text
1
/* Modal Dialogs */
2
3
.headline {
4
@include type(headline6);
5
}
6
7
.modal-dialog {
8
border: 0;
9
border-radius: $corner-radius;
10
box-shadow: $shadow-4;
11
background-color: $surface;
12
color: $on-surface;
13
14
@if $version >= 3.36 {
15
.modal-dialog-content-box {
16
max-width: 28em;
17
margin: 32px 40px;
18
spacing: 32px;
19
}
20
} @else {
21
.modal-dialog-content-box {
22
padding: 24px;
23
}
24
}
25
26
.modal-dialog-linked-button {
27
@extend %bubble_button;
28
}
29
30
@if $version == 3.34 {
31
StEntry {
32
@extend %entry;
33
}
34
35
.button {
36
@extend %button;
37
}
38
}
39
}
40
41
/* End Session Dialog */
42
@if $version >= 3.36 {
43
.end-session-dialog {
44
width: 30em;
45
46
.end-session-dialog-battery-warning,
47
.dialog-list-title {
48
color: $warning;
49
}
50
}
51
} @else {
52
.end-session-dialog {
53
spacing: 42px;
54
border: 0;
55
}
56
57
.end-session-dialog-subject {
58
@include type(headline6);
59
}
60
61
.end-session-dialog-list {
62
padding-top: 20px;
63
}
64
65
.end-session-dialog-layout {
66
padding-left: 17px;
67
68
&:rtl {
69
padding-right: 17px;
70
}
71
}
72
73
.end-session-dialog-description {
74
width: 28em;
75
padding-bottom: 10px;
76
77
&:rtl {
78
text-align: right;
79
}
80
}
81
82
.end-session-dialog-warning {
83
width: 28em;
84
padding-top: 6px;
85
color: $warning;
86
87
&:rtl {
88
text-align: right;
89
}
90
}
91
92
.end-session-dialog-logout-icon {
93
width: 48px;
94
height: 48px;
95
border-radius: $circular-radius;
96
background-size: contain;
97
}
98
99
.end-session-dialog-shutdown-icon {
100
width: 48px;
101
height: 48px;
102
color: hint($on-surface);
103
}
104
105
.end-session-dialog-inhibitor-layout {
106
max-height: 200px;
107
padding-right: 64px;
108
padding-left: 64px;
109
spacing: 16px;
110
}
111
112
.end-session-dialog-session-list,
113
.end-session-dialog-app-list {
114
spacing: 1em;
115
}
116
117
.end-session-dialog-list-header {
118
font-weight: bold;
119
120
&:rtl {
121
text-align: right;
122
}
123
}
124
125
.end-session-dialog-app-list-item,
126
.end-session-dialog-session-list-item {
127
spacing: 1em;
128
}
129
130
.end-session-dialog-app-list-item-name,
131
.end-session-dialog-session-list-item-name {
132
font-weight: bold;
133
}
134
135
.end-session-dialog-app-list-item-description {
136
color: hint($on-surface);
137
font-size: 1em;
138
}
139
}
140
141
/* Message Dialog */
142
@if $version >= 3.36 {
143
.message-dialog-content {
144
spacing: 18px;
145
146
.message-dialog-title {
147
@include type(headline6);
148
text-align: inherit;
149
150
&.leightweight {
151
@include type(headline6);
152
}
153
}
154
155
.message-dialog-description {
156
color: hint($on-surface);
157
text-align: inherit;
158
}
159
}
160
} @else {
161
.message-dialog-main-layout {
162
padding: 12px 20px 0;
163
spacing: 12px;
164
}
165
166
.message-dialog-content {
167
max-width: 28em;
168
spacing: 20px;
169
}
170
171
.message-dialog-icon {
172
min-width: 48px;
173
icon-size: 48px;
174
}
175
176
.message-dialog-title {
177
font-weight: bold;
178
}
179
180
.message-dialog-subtitle {
181
color: hint($on-surface);
182
font-weight: normal;
183
}
184
}
185
186
/* Dialog List */
187
.dialog-list {
188
spacing: 18px;
189
190
.dialog-list-title {
191
text-align: inherit;
192
font-weight: bold;
193
}
194
195
.dialog-list-scrollview {
196
max-height: 200px;
197
}
198
199
.dialog-list-box {
200
spacing: 1em;
201
202
.dialog-list-item {
203
spacing: 1em;
204
205
.dialog-list-item-title {
206
font-weight: bold;
207
}
208
209
.dialog-list-item-description {
210
color: hint($on-surface);
211
font-size: 1em;
212
}
213
}
214
}
215
}
216
217
/* Run Dialog */
218
.run-dialog {
219
@if $version >= 3.36 {
220
.modal-dialog-content-box {
221
margin-top: 24px;
222
margin-bottom: 16px;
223
}
224
225
.run-dialog-entry {
226
width: 20em;
227
}
228
229
.run-dialog-description {
230
text-align: inherit;
231
color: hint($on-surface);
232
font-size: 1em;
233
}
234
} @else {
235
.run-dialog-label {
236
padding-bottom: .4em;
237
color: hint($on-surface);
238
font-weight: normal;
239
font-size: 1em;
240
}
241
242
.run-dialog-entry {
243
width: 20em;
244
margin-bottom: 0;
245
}
246
247
.run-dialog-error-box {
248
padding-top: 16px;
249
spacing: 6px;
250
color: $error;
251
}
252
253
.run-dialog-button-box {
254
padding-top: 1em;
255
}
256
}
257
}
258
259
/* Password or Authentication Dialog */
260
261
@if $version >= 3.36 {
262
.prompt-dialog {
263
width: 28em;
264
265
.modal-dialog-content-box {
266
margin-bottom: 24px;
267
}
268
}
269
270
.prompt-dialog-password-grid {
271
spacing-rows: 8px;
272
spacing-columns: 4px;
273
274
.prompt-dialog-password-entry {
275
width: auto;
276
277
// 4px (spacing) + 16px (spinner-width)
278
&:ltr {
279
margin-left: 20px;
280
}
281
282
&:rtl {
283
margin-right: 20px;
284
}
285
}
286
}
287
288
.prompt-dialog-password-layout {
289
spacing: 8px;
290
}
291
292
.prompt-dialog-password-entry {
293
width: 18em;
294
}
295
} @else {
296
.prompt-dialog {
297
// this is the width of the entire modal popup
298
width: 34em;
299
300
.message-dialog-main-layout {
301
spacing: 24px;
302
padding: 10px;
303
}
304
305
.message-dialog-content {
306
spacing: 16px;
307
}
308
309
.message-dialog-title {
310
color: inherit;
311
@include type(headline6);
312
}
313
}
314
315
.prompt-dialog-description:rtl {
316
text-align: right;
317
}
318
319
.prompt-dialog-password-box {
320
spacing: 1em;
321
padding-bottom: 1em;
322
}
323
}
324
325
.prompt-dialog-error-label,
326
.prompt-dialog-info-label,
327
.prompt-dialog-null-label {
328
font-size: 1em;
329
330
@if $version >= 3.36 {
331
text-align: inherit;
332
} @else {
333
padding-bottom: 8px;
334
}
335
}
336
337
.prompt-dialog-error-label {
338
color: $error;
339
}
340
341
@if $version == 3.34 {
342
.prompt-dialog-pim-box {
343
spacing: 1em;
344
}
345
346
.prompt-dialog-grid {
347
spacing-rows: 15px;
348
spacing-columns: 1em;
349
}
350
351
.prompt-dialog-keyfiles-box {
352
spacing: 1em;
353
}
354
355
.prompt-dialog-button.button {
356
padding: 0 8px;
357
}
358
}
359
360
361
/* Polkit Dialog */
362
363
.polkit-dialog-user-layout {
364
@if $version >= 3.36 {
365
text-align: center;
366
spacing: 8px;
367
margin-bottom: 6px;
368
} @else {
369
spacing: 10px;
370
padding-left: 10px;
371
372
&:rtl {
373
padding-left: 0;
374
padding-right: 10px;
375
}
376
}
377
378
.polkit-dialog-user-icon {
379
border-radius: $circular-radius;
380
background-size: contain;
381
382
@if $version <= 3.34 {
383
width: 48px;
384
height: 48px;
385
}
386
}
387
388
.polkit-dialog-user-root-label {
389
color: $warning;
390
}
391
}
392
393
/* Audio selection dialog */
394
.audio-device-selection-dialog {
395
@if $version >= 3.36 {
396
.modal-dialog-content-box {
397
margin-bottom: 28px;
398
}
399
} @else {
400
spacing: 30px;
401
402
.audio-selection-content {
403
spacing: 20px;
404
padding: 24px;
405
}
406
407
.audio-selection-title {
408
font-weight: bold;
409
text-align: inherit;
410
}
411
}
412
413
.audio-selection-box {
414
spacing: 20px;
415
}
416
}
417
418
.audio-selection-device {
419
transition-duration: $duration;
420
border: 0;
421
border-radius: $corner-radius;
422
423
&:focus {
424
background-color: overlay("focus", $on-surface);
425
}
426
427
&:hover {
428
background-color: overlay("hover", $on-surface);
429
}
430
431
&:active {
432
transition-duration: $duration-ripple;
433
background-color: overlay("pressed", $on-surface);
434
color: inherit;
435
}
436
}
437
438
.audio-selection-device-box {
439
padding: 20px;
440
spacing: 20px;
441
}
442
443
.audio-selection-device-icon {
444
icon-size: 64px;
445
}
446
447
@if $version <= 3.34 {
448
/* ShellMountOperation Dialogs */
449
.shell-mount-operation-icon {
450
icon-size: 48px;
451
}
452
453
.mount-dialog-subject {
454
@include type(headline6);
455
}
456
457
.mount-dialog {
458
spacing: 24px;
459
460
.message-dialog-title {
461
max-width: 34em;
462
padding-top: 10px;
463
padding-bottom: 6px;
464
padding-left: 17px;
465
466
&:rtl {
467
padding-left: 0;
468
padding-right: 17px;
469
}
470
}
471
472
.message-dialog-body {
473
width: 28em;
474
padding-left: 17px;
475
476
&:rtl {
477
padding-left: 0;
478
padding-right: 17px;
479
}
480
}
481
}
482
483
.mount-dialog-app-list {
484
max-height: 200px;
485
padding-top: 24px;
486
padding-left: 48px;
487
padding-right: 32px;
488
489
&:rtl {
490
padding-right: 48px;
491
padding-left: 32px;
492
}
493
}
494
495
.mount-dialog-app-list-item {
496
&,
497
&:hover {
498
color: inherit;
499
}
500
501
&:ltr {
502
padding-right: 1em;
503
}
504
505
&:rtl {
506
padding-left: 1em;
507
}
508
}
509
510
.mount-dialog-app-list-item-icon {
511
&:ltr {
512
padding-right: 16px;
513
}
514
515
&:rtl {
516
padding-left: 16px;
517
}
518
}
519
520
.mount-dialog-app-list-item-name {
521
font-size: 1em;
522
}
523
524
/* Access Dialog */
525
.access-dialog {
526
spacing: 30px;
527
}
528
529
/* Geolocation Dialog */
530
.geolocation-dialog {
531
spacing: 30px;
532
}
533
534
/* Extension Dialog */
535
.extension-dialog {
536
.message-dialog-main-layout {
537
spacing: 24px;
538
padding: 10px;
539
}
540
541
.message-dialog-title {
542
color: hint($on-surface);
543
font-weight: normal;
544
}
545
}
546
547
/* Inhibit-Shortcuts Dialog */
548
.inhibit-shortcuts-dialog {
549
spacing: 30px;
550
}
551
552
/* Network Agent Dialog */
553
554
.network-dialog-secret-table {
555
spacing-rows: 15px;
556
spacing-columns: 1em;
557
}
558
559
.keyring-dialog-control-table {
560
spacing-rows: 15px;
561
spacing-columns: 1em;
562
}
563
}
564