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