mirror of
https://github.com/discourse/discourse.git
synced 2024-11-30 03:33:39 +08:00
f7b73f3d70
This commit mainly improves three things: - slide up/down animation of the modals on mobile, also allowing swipe down to close the modal - body scroll locked modals, it means that only the body of the modal can scroll - a new `<:headerPrimaryAction>` block for `d-modal` which when present will move the cancel button to the left of the modal title, and this primary action to the right of the title
134 lines
2.5 KiB
SCSS
134 lines
2.5 KiB
SCSS
// base styles for every modal popup used in Discourse
|
|
|
|
// prevents bg scrolling when modal is open
|
|
html:has(.d-modal) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
html.keyboard-visible.mobile-view {
|
|
.d-modal {
|
|
max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
|
height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
|
bottom: 0;
|
|
}
|
|
|
|
.d-modal__container {
|
|
max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
|
height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
|
}
|
|
}
|
|
|
|
html:not(.keyboard-visible.mobile-view) {
|
|
.d-modal__container {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
}
|
|
|
|
.d-modal {
|
|
align-items: flex-end;
|
|
|
|
&__container {
|
|
// this is a hack to prevent issues on safari with transforms
|
|
position: fixed;
|
|
|
|
width: 100%;
|
|
max-width: 100%;
|
|
max-height: calc(var(--composer-vh, var(--1dvh)) * 85);
|
|
will-change: auto;
|
|
}
|
|
|
|
&__header {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.ios-device & {
|
|
&__footer {
|
|
margin-top: auto;
|
|
}
|
|
}
|
|
|
|
&__title-text {
|
|
font-size: var(--font-up-1-rem);
|
|
}
|
|
|
|
// fixes modal placement on Android when keyboard is visible
|
|
html.keyboard-visible:not(.ios-device) & {
|
|
height: calc(100% - env(keyboard-inset-height));
|
|
|
|
.d-modal__container {
|
|
max-height: 100%;
|
|
min-height: 100%;
|
|
height: 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.close {
|
|
font-size: var(--font-up-4);
|
|
}
|
|
|
|
@media only screen and (max-device-width: 568px) {
|
|
.flag-modal-body .flag-message {
|
|
height: 3em;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|