_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-4; 11background-color: $surface; 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: $warning; 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: $warning; 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&.leightweight { 151@include type(headline6); 152} 153} 154 155.message-dialog-description { 156color: hint($on-surface); 157text-align: inherit; 158} 159} 160} @else { 161.message-dialog-main-layout { 162padding: 12px 20px 0; 163spacing: 12px; 164} 165 166.message-dialog-content { 167max-width: 28em; 168spacing: 20px; 169} 170 171.message-dialog-icon { 172min-width: 48px; 173icon-size: 48px; 174} 175 176.message-dialog-title { 177font-weight: bold; 178} 179 180.message-dialog-subtitle { 181color: hint($on-surface); 182font-weight: normal; 183} 184} 185 186/* Dialog List */ 187.dialog-list { 188spacing: 18px; 189 190.dialog-list-title { 191text-align: inherit; 192font-weight: bold; 193} 194 195.dialog-list-scrollview { 196max-height: 200px; 197} 198 199.dialog-list-box { 200spacing: 1em; 201 202.dialog-list-item { 203spacing: 1em; 204 205.dialog-list-item-title { 206font-weight: bold; 207} 208 209.dialog-list-item-description { 210color: hint($on-surface); 211font-size: 1em; 212} 213} 214} 215} 216 217/* Run Dialog */ 218.run-dialog { 219@if $version >= 3.36 { 220.modal-dialog-content-box { 221margin-top: 24px; 222margin-bottom: 16px; 223} 224 225.run-dialog-entry { 226width: 20em; 227} 228 229.run-dialog-description { 230text-align: inherit; 231color: hint($on-surface); 232font-size: 1em; 233} 234} @else { 235.run-dialog-label { 236padding-bottom: .4em; 237color: hint($on-surface); 238font-weight: normal; 239font-size: 1em; 240} 241 242.run-dialog-entry { 243width: 20em; 244margin-bottom: 0; 245} 246 247.run-dialog-error-box { 248padding-top: 16px; 249spacing: 6px; 250color: $error; 251} 252 253.run-dialog-button-box { 254padding-top: 1em; 255} 256} 257} 258 259/* Password or Authentication Dialog */ 260 261@if $version >= 3.36 { 262.prompt-dialog { 263width: 28em; 264 265.modal-dialog-content-box { 266margin-bottom: 24px; 267} 268} 269 270.prompt-dialog-password-grid { 271spacing-rows: 8px; 272spacing-columns: 4px; 273 274.prompt-dialog-password-entry { 275width: auto; 276 277// 4px (spacing) + 16px (spinner-width) 278&:ltr { 279margin-left: 20px; 280} 281 282&:rtl { 283margin-right: 20px; 284} 285} 286} 287 288.prompt-dialog-password-layout { 289spacing: 8px; 290} 291 292.prompt-dialog-password-entry { 293width: 18em; 294} 295} @else { 296.prompt-dialog { 297// this is the width of the entire modal popup 298width: 34em; 299 300.message-dialog-main-layout { 301spacing: 24px; 302padding: 10px; 303} 304 305.message-dialog-content { 306spacing: 16px; 307} 308 309.message-dialog-title { 310color: inherit; 311@include type(headline6); 312} 313} 314 315.prompt-dialog-description:rtl { 316text-align: right; 317} 318 319.prompt-dialog-password-box { 320spacing: 1em; 321padding-bottom: 1em; 322} 323} 324 325.prompt-dialog-error-label, 326.prompt-dialog-info-label, 327.prompt-dialog-null-label { 328font-size: 1em; 329 330@if $version >= 3.36 { 331text-align: inherit; 332} @else { 333padding-bottom: 8px; 334} 335} 336 337.prompt-dialog-error-label { 338color: $error; 339} 340 341@if $version == 3.34 { 342.prompt-dialog-pim-box { 343spacing: 1em; 344} 345 346.prompt-dialog-grid { 347spacing-rows: 15px; 348spacing-columns: 1em; 349} 350 351.prompt-dialog-keyfiles-box { 352spacing: 1em; 353} 354 355.prompt-dialog-button.button { 356padding: 0 8px; 357} 358} 359 360 361/* Polkit Dialog */ 362 363.polkit-dialog-user-layout { 364@if $version >= 3.36 { 365text-align: center; 366spacing: 8px; 367margin-bottom: 6px; 368} @else { 369spacing: 10px; 370padding-left: 10px; 371 372&:rtl { 373padding-left: 0; 374padding-right: 10px; 375} 376} 377 378.polkit-dialog-user-icon { 379border-radius: $circular-radius; 380background-size: contain; 381 382@if $version <= 3.34 { 383width: 48px; 384height: 48px; 385} 386} 387 388.polkit-dialog-user-root-label { 389color: $warning; 390} 391} 392 393/* Audio selection dialog */ 394.audio-device-selection-dialog { 395@if $version >= 3.36 { 396.modal-dialog-content-box { 397margin-bottom: 28px; 398} 399} @else { 400spacing: 30px; 401 402.audio-selection-content { 403spacing: 20px; 404padding: 24px; 405} 406 407.audio-selection-title { 408font-weight: bold; 409text-align: inherit; 410} 411} 412 413.audio-selection-box { 414spacing: 20px; 415} 416} 417 418.audio-selection-device { 419transition-duration: $duration; 420border: 0; 421border-radius: $corner-radius; 422 423&:focus { 424background-color: overlay("focus", $on-surface); 425} 426 427&:hover { 428background-color: overlay("hover", $on-surface); 429} 430 431&:active { 432transition-duration: $duration-ripple; 433background-color: overlay("pressed", $on-surface); 434color: inherit; 435} 436} 437 438.audio-selection-device-box { 439padding: 20px; 440spacing: 20px; 441} 442 443.audio-selection-device-icon { 444icon-size: 64px; 445} 446 447@if $version <= 3.34 { 448/* ShellMountOperation Dialogs */ 449.shell-mount-operation-icon { 450icon-size: 48px; 451} 452 453.mount-dialog-subject { 454@include type(headline6); 455} 456 457.mount-dialog { 458spacing: 24px; 459 460.message-dialog-title { 461max-width: 34em; 462padding-top: 10px; 463padding-bottom: 6px; 464padding-left: 17px; 465 466&:rtl { 467padding-left: 0; 468padding-right: 17px; 469} 470} 471 472.message-dialog-body { 473width: 28em; 474padding-left: 17px; 475 476&:rtl { 477padding-left: 0; 478padding-right: 17px; 479} 480} 481} 482 483.mount-dialog-app-list { 484max-height: 200px; 485padding-top: 24px; 486padding-left: 48px; 487padding-right: 32px; 488 489&:rtl { 490padding-right: 48px; 491padding-left: 32px; 492} 493} 494 495.mount-dialog-app-list-item { 496&, 497&:hover { 498color: inherit; 499} 500 501&:ltr { 502padding-right: 1em; 503} 504 505&:rtl { 506padding-left: 1em; 507} 508} 509 510.mount-dialog-app-list-item-icon { 511&:ltr { 512padding-right: 16px; 513} 514 515&:rtl { 516padding-left: 16px; 517} 518} 519 520.mount-dialog-app-list-item-name { 521font-size: 1em; 522} 523 524/* Access Dialog */ 525.access-dialog { 526spacing: 30px; 527} 528 529/* Geolocation Dialog */ 530.geolocation-dialog { 531spacing: 30px; 532} 533 534/* Extension Dialog */ 535.extension-dialog { 536.message-dialog-main-layout { 537spacing: 24px; 538padding: 10px; 539} 540 541.message-dialog-title { 542color: hint($on-surface); 543font-weight: normal; 544} 545} 546 547/* Inhibit-Shortcuts Dialog */ 548.inhibit-shortcuts-dialog { 549spacing: 30px; 550} 551 552/* Network Agent Dialog */ 553 554.network-dialog-secret-table { 555spacing-rows: 15px; 556spacing-columns: 1em; 557} 558 559.keyring-dialog-control-table { 560spacing-rows: 15px; 561spacing-columns: 1em; 562} 563} 564