/* === Dialog === */ @import (reference) '../button/button.less'; .dialog-backdrop { .modal-backdrop(); } .dialog { position: absolute; z-index: 13500; left: 50%; margin-top: 0; top: 50%; overflow: hidden; opacity: 0; transform: translate3d(0,0,0) scale(1.185); transition-property: transform, opacity; display: none; transition-duration: 400ms; &.modal-in { opacity: 1; transform: translate3d(0,0,0) scale(1); } &.modal-out { opacity: 0; z-index: 13500 - 1; } &.not-animated { transition-duration: 0ms; } } .dialog-inner { position: relative; } .dialog-title { font-weight: 500; } .dialog-buttons { position: relative; display: flex; .rtl({ flex-direction: row-reverse; }); .dialog-buttons-vertical & { display: block; height: auto !important; } } .dialog-no-buttons { .dialog-buttons { display: none; } } .dialog-input-field { position: relative; .item-input-wrap { margin: 0; padding: 0; } } .dialog-input { box-sizing: border-box; margin: 0; margin-top: 15px; border-radius: 0; appearance: none; width: 100%; display: block; font-family: inherit; box-shadow: none; } html.with-modal-dialog { .page-content { .not-scrollable(); } } & when (@includeIosTheme) { @import url('./dialog-ios.less'); } & when (@includeMdTheme) { @import url('./dialog-md.less'); }