mirror of
https://github.com/discourse/discourse.git
synced 2025-03-01 22:17:23 +08:00
be513ed9a3
```
WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
```
90 lines
1.6 KiB
SCSS
90 lines
1.6 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, 1dvh) * 100);
|
|
height: calc(var(--composer-vh, 1dvh) * 100);
|
|
bottom: 0;
|
|
}
|
|
|
|
.d-modal__container {
|
|
max-height: calc(var(--composer-vh, 1dvh) * 100);
|
|
height: calc(var(--composer-vh, 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, 1dvh) * 85);
|
|
}
|
|
|
|
&__footer {
|
|
margin-top: auto;
|
|
|
|
.--stacked & {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
&.fade {
|
|
transition: opacity 0.3s linear, top 0.3s ease-out;
|
|
top: -25%;
|
|
}
|
|
|
|
&.fade.in {
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
font-size: var(--font-up-4);
|
|
}
|
|
|
|
@media only screen and (max-device-width: 568px) {
|
|
.flag-modal-body .flag-message {
|
|
height: 3em;
|
|
}
|
|
}
|