fix: iOS safe area using CSS (#1610)

This commit is contained in:
Aman Harwara
2022-09-22 00:22:11 +05:30
committed by GitHub
parent 9dfeac7489
commit 8fa566336c
5 changed files with 44 additions and 37 deletions

View File

@@ -23,6 +23,15 @@
--sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font);
--reach-checkbox: 1;
--safe-area-inset-top: env(safe-area-inset-top, 0);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
--safe-area-inset-left: env(safe-area-inset-left, 0);
--safe-area-inset-right: env(safe-area-inset-right, 0);
--safe-viewport-height: calc(
var(--viewport-height) - calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom))
);
}
html {
@@ -31,9 +40,16 @@ html {
body {
font-size: var(--sn-stylekit-base-font-size);
background-color: var(--sn-stylekit-background-color);
color: var(--sn-stylekit-foreground-color);
}
body,
.safe-area-padding {
padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom)
var(--safe-area-inset-left);
}
html,
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',