.dialog-container { display: flex; position: fixed; top: 0; width: 100%; height: 100%; z-index: var(--zindex-dialog); &.dialog-center { align-items: center; justify-content: center; } &.dialog-topcenter { align-items: flex-start; justify-content: center; padding-top: 32px; } &.dialog-bottomcenter { align-items: flex-end; justify-content: center; padding-bottom: 32px; } &.dialog-centerright { align-items: center; justify-content: flex-end; padding-right: 32px; } &.dialog-centerleft { align-items: center; justify-content: flex-start; padding-left: 32px; } &.dialog-topleft .dialog { position: absolute; top: 32px; left: 32px; } &.dialog-topright .dialog { position: absolute; top: 32px; right: 32px; } &.dialog-bottomleft .dialog { position: absolute; bottom: 32px; left: 32px; } &.dialog-bottomright .dialog { position: absolute; bottom: 32px; right: 32px; } } .dialog { display: flex; z-index: calc(var(--zindex-dialog) + 2); flex-direction: column; color: var(--palette-text-primary); background-color: var(--palette-surface); border-radius: var(--default-borderradius); -webkit-animation: open-dialog-center 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: open-dialog-center 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12); &.dialog-rtl .dialog-title .button-root { right: unset; left: 8px; } & .dialog-title { z-index: +1; flex: 0 0 auto; margin: 0; padding: 16px 24px; border-top-left-radius: var(--default-borderradius); border-top-right-radius: var(--default-borderradius); + * > .dialog-content { border-radius: 0 } & .button-root { top: 8px; right: 8px; position: absolute; } } & .dialog-content { position: relative; flex: 1 1 auto; padding: 8px 24px; -webkit-overflow-scrolling: touch; border-top-left-radius: var(--default-borderradius); border-top-right-radius: var(--default-borderradius); &.dialog-no-side-padding { padding: 12px 0px; } } & .dialog-actions { flex: 0 0 auto; display: flex; padding: 8px; align-items: center; justify-content: flex-end; border-bottom-left-radius: var(--default-borderradius); border-bottom-right-radius: var(--default-borderradius); & > :not(:first-child) { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: unset; } } } .dialog-width-false { max-width: calc(100% - 64px); } .dialog-width-xs { max-width: 444px; } .dialog-width-sm { max-width: 600px; } .dialog-width-md { max-width: 960px; } .dialog-width-lg { max-width: 1280px; } .dialog-width-xl { max-width: 1920px; } .dialog-width-xxl { max-width: 2560px; } .dialog-width-full { width: calc(100% - 64px); } .dialog-fullscreen { width: 100%; height: 100%; margin: 0; max-width: 100%; max-height: none; border-radius: 0; } @-webkit-keyframes open-dialog-center { 0% { opacity: 0; } 1% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes open-dialog-center { 0% { opacity: 0; } 1% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); } }