mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 20:53:44 +08:00
f72899401d
This PR refactors the following: * leaving all the CSS applied to the old `modal-body` classes in their respective files * made new clean styling for `.d-modal` and refactored the template to use the new BEM classes * `inner-`, `middle-`, `outer-` container classes are gone and replaced with simplified `wrapper` and `container` classes * use standardised max-sizes with modifiers `-large` and `-max` * lighter backdrop, * min-width to prevent puny modals * other styling changes regarding padding, close button,… * pulled out all modal overrides into a general `modal-overrides` file + cleanup of outdated CSS * pulled out login and create account modal styling into their own file, cause it's such a big override * removed old general login.scss file for mobile & desktop * only kept some remainders I don't want to touch in `app/assets/stylesheets/common/base/login.scss`
147 lines
2.3 KiB
SCSS
147 lines
2.3 KiB
SCSS
// base styles for every modal popup used in Discourse
|
|
|
|
.d-modal {
|
|
&__container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.modal-inner-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
//legacy
|
|
.modal-open #main {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-middle-container {
|
|
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 0.3s linear, top 0.3s ease-out;
|
|
top: -25%;
|
|
}
|
|
&.fade.in {
|
|
top: 50%;
|
|
}
|
|
.modal-body {
|
|
padding: 0.667em;
|
|
overflow-y: scroll;
|
|
|
|
> * {
|
|
// adding box-sizing: border-box; to .modal-body causes iOS dropdown issues
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
// we need a little extra room on mobile for the
|
|
// stuff inside the footer to fit
|
|
.modal-footer {
|
|
padding: 10px;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 10px;
|
|
h3 {
|
|
font-size: var(--font-up-2);
|
|
}
|
|
}
|
|
|
|
.close {
|
|
font-size: var(--font-up-4);
|
|
}
|
|
|
|
#choosing-topic {
|
|
p {
|
|
margin-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.category-chooser {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
button {
|
|
margin-top: 10px;
|
|
display: block;
|
|
}
|
|
|
|
form {
|
|
margin-top: 20px;
|
|
input:not(.filter-input)[type="text"] {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-device-width: 568px) {
|
|
.modal .flag-modal-body .flag-message {
|
|
height: 3em;
|
|
}
|
|
}
|
|
|
|
/* fixes for the new account confirm dialog on mobile */
|
|
|
|
.modal-inner-container {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* fix for tall modals */
|
|
|
|
.fixed-modal {
|
|
.modal-middle-container {
|
|
margin-bottom: 0;
|
|
}
|
|
.modal-inner-container {
|
|
max-height: 90vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
&.insert-hyperlink-modal .modal-inner-container {
|
|
overflow: visible;
|
|
}
|
|
|
|
html.keyboard-visible:not(.ios-device) & {
|
|
height: calc(100% - env(keyboard-inset-height));
|
|
|
|
.modal-inner-container {
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal .modal-body.reorder-categories {
|
|
max-height: calc(100vh - 220px);
|
|
}
|
|
|
|
.discard-draft-modal {
|
|
.modal-inner-container {
|
|
width: 250px;
|
|
}
|
|
.modal-footer {
|
|
justify-content: center;
|
|
flex-flow: column nowrap;
|
|
align-items: stretch;
|
|
|
|
.btn {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|