discourse/app/assets/stylesheets/mobile/modal.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

89 lines
1.6 KiB
SCSS
Raw Normal View History

2013-09-06 03:37:07 +08:00
// 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);
}
&__header {
padding: 0.5rem;
}
&__footer {
margin-top: auto;
}
.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
2013-09-06 03:37:07 +08:00
2020-02-22 04:44:34 +08:00
.modal {
&.fade {
transition: opacity 0.3s linear, top 0.3s ease-out;
top: -25%;
}
&.fade.in {
top: 50%;
}
2013-09-06 03:37:07 +08:00
}
2014-06-19 02:04:10 +08:00
.close {
font-size: var(--font-up-4);
2014-06-19 02:04:10 +08:00
}
2013-09-06 03:37:07 +08:00
@media only screen and (max-device-width: 568px) {
.flag-modal-body .flag-message {
2018-02-24 10:41:40 +08:00
height: 3em;
}
}