framework7/lazy-components/dialog.css

Full featured mobile HTML framework for building iOS & Android apps

.dialog-backdrop{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;visibility:hidden;opacity:0;-webkit-transition-duration:.4s;transition-duration:.4s}.dialog-backdrop.not-animated{-webkit-transition-duration:0s;transition-duration:0s}.dialog-backdrop.backdrop-in{visibility:visible;opacity:1}.dialog{position:absolute;z-index:13500;left:50%;margin-top:0;top:50%;overflow:hidden;opacity:0;-webkit-transform:translate3d(0,0,0) scale(1.185);transform:translate3d(0,0,0) scale(1.185);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;display:none;-webkit-transition-duration:.4s;transition-duration:.4s}.dialog.modal-in{opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}.dialog.modal-out{opacity:0;z-index:13499}.dialog.not-animated{-webkit-transition-duration:0s;transition-duration:0s}.dialog-inner{position:relative}.dialog-title{font-weight:500}.dialog-buttons{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.dialog-buttons-vertical .dialog-buttons{display:block;height:auto!important}.dialog-no-buttons .dialog-buttons{display:none}.dialog-input-field{position:relative}.dialog-input-field .item-input-wrap{margin:0;padding:0}.dialog-input{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;margin-top:15px;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;display:block;font-family:inherit;-webkit-box-shadow:none;box-shadow:none}html.with-modal-dialog .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.ios .dialog{width:270px;margin-left:-135px;text-align:center;border-radius:13px;color:#000}.ios .dialog.modal-out{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}.ios .dialog-inner{padding:15px;border-radius:13px 13px 0 0;background:rgba(255,255,255,.95)}.ios .dialog-inner:after{content:'';position:absolute;background-color:rgba(0,0,0,.2);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.ios.device-pixel-ratio-2 .dialog-inner:after{-webkit-transform:scaleY(.5);transform:scaleY(.5)}.ios.device-pixel-ratio-3 .dialog-inner:after{-webkit-transform:scaleY(.33);transform:scaleY(.33)}.ios .dialog-title{font-size:18px;text-align:center;font-weight:600}.ios .dialog-title+.dialog-text{margin-top:5px}.ios .dialog-buttons{height:44px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.ios .dialog-button{width:100%;padding:0 5px;height:44px;font-size:17px;line-height:44px;text-align:center;color:#007aff;display:block;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;background:rgba(255,255,255,.95)}.ios .dialog-button:first-child{border-radius:0 0 0 13px}.ios .dialog-button:last-child{border-radius:0 0 13px 0}.ios .dialog-button:last-child:after{display:none!important}.ios .dialog-button:first-child:last-child{border-radius:0 0 13px 13px}.ios .dialog-button.dialog-button-bold{font-weight:500}.ios .dialog-button.active-state{background:rgba(230,230,230,.95)}.ios .dialog-buttons-vertical .dialog-buttons{height:auto}.ios .dialog-buttons-vertical .dialog-button{border-radius:0}.ios .dialog-buttons-vertical .dialog-button:last-child{border-radius:0 0 13px 13px}.ios .dialog-buttons-vertical .dialog-button:last-child:after{display:none!important}.ios .dialog-button:after{content:'';position:absolute;background-color:rgba(0,0,0,.2);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.ios.device-pixel-ratio-2 .dialog-button:after{-webkit-transform:scaleX(.5);transform:scaleX(.5)}.ios.device-pixel-ratio-3 .dialog-button:after{-webkit-transform:scaleX(.33);transform:scaleX(.33)}.ios .dialog-buttons-vertical .dialog-button:after{content:'';position:absolute;background-color:rgba(0,0,0,.2);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.ios.device-pixel-ratio-2 .dialog-buttons-vertical .dialog-button:after{-webkit-transform:scaleY(.5);transform:scaleY(.5)}.ios.device-pixel-ratio-3 .dialog-buttons-vertical .dialog-button:after{-webkit-transform:scaleY(.33);transform:scaleY(.33)}.ios .dialog-no-buttons .dialog-inner{border-radius:13px}.ios .dialog-no-buttons .dialog-inner:after{display:none!important}.ios .dialog-input-field{margin-top:15px}.ios .dialog-input-field .item-input-wrap{margin:0}.ios .dialog-input{height:26px;background:#fff;padding:0 5px;border:1px solid rgba(0,0,0,.3);font-size:14px}.ios .dialog-input+.dialog-input{margin-top:5px}.ios .dialog-input-double+.dialog-input-double{margin-top:0}.ios .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.ios .dialog-preloader .dialog-text~.preloader,.ios .dialog-preloader .dialog-title~.preloader{margin-top:5px}.ios .dialog-preloader .preloader{width:34px;height:34px}.ios .dialog-progress .dialog-text~.progressbar,.ios .dialog-progress .dialog-text~.progressbar-infinite,.ios .dialog-progress .dialog-title~.progressbar,.ios .dialog-progress .dialog-title~.progressbar-infinite{margin-top:15px}.ios .dialog-button.color-red{color:#ff3b30}.ios .dialog-button.color-green{color:#4cd964}.ios .dialog-button.color-blue{color:#007aff}.ios .dialog-button.color-pink{color:#ff2d55}.ios .dialog-button.color-yellow{color:#fc0}.ios .dialog-button.color-orange{color:#ff9500}.ios .dialog-button.color-gray{color:#8e8e93}.ios .dialog-button.color-white{color:#fff}.ios .dialog-button.color-black{color:#000}.md .dialog{width:280px;margin-left:-140px;border-radius:4px;color:#757575;background:#fff;font-size:16px;-webkit-box-shadow:0px 11px 15px -7px rgba(0,0,0,.2),0px 24px 38px 3px rgba(0,0,0,.14),0px 9px 46px 8px rgba(0,0,0,.12);box-shadow:0px 11px 15px -7px rgba(0,0,0,.2),0px 24px 38px 3px rgba(0,0,0,.14),0px 9px 46px 8px rgba(0,0,0,.12)}.md .dialog.modal-in{opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}.md .dialog.modal-out{opacity:0;z-index:13499;-webkit-transform:translate3d(0,0,0) scale(.815);transform:translate3d(0,0,0) scale(.815)}.md .dialog-inner{padding:24px 24px 20px}.md .dialog-title{font-size:20px;color:#212121;line-height:1.3}.md .dialog-title+.dialog-text{margin-top:20px}.md .dialog-text{line-height:1.5}.md .dialog-buttons{height:48px;padding:6px 8px;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.md .dialog-buttons-vertical .dialog-buttons{padding:0 0 8px 0}.md .dialog-buttons-vertical .dialog-buttons .dialog-button{margin-left:0;text-align:right;height:48px;line-height:48px;border-radius:0;padding-left:16px;padding-right:16px}.md .dialog-button{text-decoration:none;text-align:center;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;padding:0 10px;margin:0;white-space:nowrap;text-overflow:ellipsis;font-size:14px;position:relative;overflow:hidden;font-family:inherit;cursor:pointer;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle;color:#2196f3;border-radius:4px;line-height:36px;height:36px;text-transform:uppercase;min-width:64px;padding:0 8px;border:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);letter-spacing:.03em;font-weight:500}input[type=button].md .dialog-button,input[type=submit].md .dialog-button{width:100%}.md .dialog-button.active-state{background:rgba(0,0,0,.1)}.md .dialog-button.dialog-button-bold{font-weight:700}.md .dialog-button+.dialog-button{margin-left:4px}.md .dialog-input{height:36px;padding:0;border:none;font-size:16px;-webkit-transition-duration:.2s;transition-duration:.2s;position:relative}.md .dialog-input::-webkit-input-placeholder{color:rgba(0,0,0,.35)}.md .dialog-input:-ms-input-placeholder{color:rgba(0,0,0,.35)}.md .dialog-input::-ms-input-placeholder{color:rgba(0,0,0,.35)}.md .dialog-input::placeholder{color:rgba(0,0,0,.35)}.md .dialog-input+.dialog-input{margin-top:16px}.md .dialog-preloader .dialog-inner,.md .dialog-preloader .dialog-title,.md .dialog-progress .dialog-inner,.md .dialog-progress .dialog-title{text-align:center}.md .dialog-preloader .dialog-text~.preloader,.md .dialog-preloader .dialog-title~.preloader{margin-top:20px}.md .dialog-progress .dialog-text~.progressbar,.md .dialog-progress .dialog-text~.progressbar-infinite,.md .dialog-progress .dialog-title~.progressbar,.md .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}.md .dialog-button.color-red{color:#f44336}.md .dialog-button.color-green{color:#4caf50}.md .dialog-button.color-blue{color:#2196f3}.md .dialog-button.color-pink{color:#e91e63}.md .dialog-button.color-yellow{color:#ffeb3b}.md .dialog-button.color-orange{color:#ff9800}.md .dialog-button.color-gray{color:#9e9e9e}.md .dialog-button.color-white{color:#fff}.md .dialog-button.color-black{color:#000}