// base styles for every modal popup used in Discourse .modal-open #main {overflow:hidden;} .modal-middle-container { margin-top: 10%; max-width: 100%; margin-bottom: 30px; // For iOS Safari issues } // Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same .bootbox.modal { top: 10%; width: 100%; } .modal.fade { transition: opacity .3s linear, top .3s ease-out; top: -25%; } .modal.fade.in { top: 50%; } .modal-body { overflow-y: auto; max-height: 400px; padding: 10px; } // we need a little extra room on mobile for the // stuff inside the footer to fit .modal-footer { padding: 15px 7px 10px 7px; } .modal-close { display: inline-block; float: right; } .modal-header { padding: 10px 0 10px 10px; h3 { display: inline; font-size: $font-up-2; margin: 0; } } .close { font-size: $font-up-4; padding: 10px 15px 5px 5px; color: $primary; } #move-selected { p { margin-top: 0; } input[type=radio] { margin-right: 10px; } button { margin-top: 10px; display: block; width: 300px; } form { margin-top: 20px; input[type=text] { box-sizing: border-box; width: 100%; } } } .flag-modal { max-height: 450px; } @media only screen and (max-device-width: 568px) { .modal .flag-modal .flag-message { height: 1.2em; } } .custom-message-length { margin: -4px 0 10px 20px; color: dark-light-choose($primary-high, $secondary-low); font-size: $font-down-1; } .flag-message { margin-left: 20px; width: 95% !important; } .edit-category-modal { .modal-body { box-sizing: border-box; position: relative; height: 350px; } &.small .modal-body { height: 310px; } .secure-category-options { margin: 10px 0 0 16px; .badge-list { margin: 10px 0; li { margin: 0 4px 8px 0; a { color: #888; cursor: pointer; } } } } .disable_info_wrap .cannot_delete_reason { top: -114px; right: 8px; min-width: 200px; } } .tabbed-modal { .modal-body { position: relative; height: 350px; } } .modal-tab { position: absolute; } /* fixes for the new account confirm dialog on mobile */ .modal-inner-container { margin-bottom: 20px; } .alert { padding: 5px; &.alert-success { background-color: $success-low; color: $success; } } #search-help { max-width: 98%; } // this makes the table behave like a flat list #search-help td { display: block; padding-left: 10px; } #search-help h3 { display: none; } #search-help p { margin: 10px; } #search-help .btn-primary { float: none; } #google-search form { padding-left: 10px; } .change-timestamp-footer .btn-primary { float: right; margin-right: 5px; }