135 lines
3.7 KiB
CSS
135 lines
3.7 KiB
CSS
.modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
pointer-events: auto;
|
|
border: var(--expo-router-modal-border, none);
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
will-change: transform;
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: var(--expo-router-modal-overlay-background, rgba(0, 0, 0, 0.25));
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.modal {
|
|
position: relative;
|
|
z-index: 50;
|
|
/* iOS 26 modal dimensions: 83% width with max 936px, 79% height with max 586px */
|
|
width: var(--expo-router-modal-width, 83vw);
|
|
min-width: var(--expo-router-modal-min-width, auto);
|
|
/* Max width follows iOS 26 specifications */
|
|
max-width: var(--expo-router-modal-max-width, min(936px, 83vw));
|
|
/* iOS 26 height: 79% with max 586px, accounting for viewport padding */
|
|
height: var(--expo-router-modal-height, 79dvh);
|
|
max-height: min(var(--expo-router-modal-height, min(586px, 79dvh)), calc(100dvh - 2rem));
|
|
/* Ensure modal retains a reasonable minimum but never bigger than viewport */
|
|
min-height: min(var(--expo-router-modal-min-height, var(--expo-router-modal-height, min(586px, 79dvh))), calc(100dvh - 2rem));
|
|
/*
|
|
It is super expensive to calculate the shadow with box-shadow, so we have to use filter instead.
|
|
Do not change this to box-shadow. Box-shadow caused an INP of 600ms on the modal.
|
|
*/
|
|
filter: var(--expo-router-modal-shadow, drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)));
|
|
overflow: auto;
|
|
outline: none;
|
|
}
|
|
|
|
.modalWrap>.modal {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.drawerContent {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
body>.transparentDrawerContent {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
outline: none;
|
|
animation: none;
|
|
animation-name: none;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.drawerContent {
|
|
max-height: 100%;
|
|
pointer-events: box-none;
|
|
}
|
|
}
|
|
|
|
.modal::-webkit-scrollbar {
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
|
|
.modal::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
}
|
|
|
|
.modalBody {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Ensure bottom sheets (inside drawerContent) can shrink to any detent */
|
|
.drawerContent .modal[data-presentation='formSheet'],
|
|
.drawerContent .modal[data-presentation='containedModal'] {
|
|
/* Reset inherited centering */
|
|
position: relative;
|
|
transform: none;
|
|
box-shadow: none;
|
|
filter: none;
|
|
border-radius: inherit;
|
|
min-height: auto;
|
|
max-height: none;
|
|
}
|
|
|
|
/* Form-sheet style (snap-point based) should be full width */
|
|
.drawerContent .modal[data-presentation='formSheet'],
|
|
.drawerContent .modal[data-presentation='containedModal'] {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
/* Regular modal keeps desktop max-width for nicer look */
|
|
.drawerContent .modal[data-presentation='modal'],
|
|
.drawerContent .modal[data-presentation='fullScreenModal'] {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
/* Use the same sizing variables as the primary desktop rule - iOS 26 dimensions */
|
|
width: var(--expo-router-modal-width, 83vw);
|
|
min-width: var(--expo-router-modal-min-width, auto);
|
|
max-width: var(--expo-router-modal-max-width, min(936px, 83vw));
|
|
margin: 0;
|
|
/*
|
|
It is super expensive to calculate the shadow with box-shadow, so we have to use filter instead.
|
|
Do not change this to box-shadow. Box-shadow caused an INP of 600ms on the modal.
|
|
*/
|
|
filter: var(--expo-router-modal-shadow, drop-shadow(0px 25px 50px rgba(0, 0, 0, 0.3)));
|
|
border-radius: var(--expo-router-modal-border-radius, 24px);
|
|
}
|
|
|
|
.srOnly {
|
|
display: none;
|
|
} |