From b385184f8d22d10d587d8daf1e687ca1e23cfc2d Mon Sep 17 00:00:00 2001 From: Sayo Oladeji Date: Mon, 10 Jun 2019 18:02:48 +0300 Subject: [PATCH 1/3] Make overlay fullscreen on iPhone X --- theme/lumo/vaadin-login-overlay-styles.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/theme/lumo/vaadin-login-overlay-styles.html b/theme/lumo/vaadin-login-overlay-styles.html index c406b2b..6a67d29 100644 --- a/theme/lumo/vaadin-login-overlay-styles.html +++ b/theme/lumo/vaadin-login-overlay-styles.html @@ -154,8 +154,10 @@ and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { [part="card"] { - padding: 0 constant(safe-area-inset-bottom); - padding: 0 env(safe-area-inset-bottom); + padding-top: env(safe-area-inset-top); + padding-right: env(safe-area-inset-right); + padding-left: env(safe-area-inset-left); + padding-bottom: env(safe-area-inset-bottom); } [part="brand"] { From 1645c57f95c6a205786f35a49ca9d66aad130bf4 Mon Sep 17 00:00:00 2001 From: Sayo Oladeji Date: Mon, 10 Jun 2019 18:26:29 +0300 Subject: [PATCH 2/3] Ignore top and bottom --- theme/lumo/vaadin-login-overlay-styles.html | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/theme/lumo/vaadin-login-overlay-styles.html b/theme/lumo/vaadin-login-overlay-styles.html index 6a67d29..5abbf2b 100644 --- a/theme/lumo/vaadin-login-overlay-styles.html +++ b/theme/lumo/vaadin-login-overlay-styles.html @@ -154,17 +154,13 @@ and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { [part="card"] { - padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); - padding-bottom: env(safe-area-inset-bottom); } [part="brand"] { - margin-left: calc(constant(safe-area-inset-bottom) * -1); - margin-left: calc(env(safe-area-inset-bottom) * -1); - padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-bottom)); - padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-bottom)); + margin-left: calc(env(safe-area-inset-left) * -1); + padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left)); } } From d3214a36b5a97cf31f560143c03203ea063c00c3 Mon Sep 17 00:00:00 2001 From: Sayo Oladeji Date: Wed, 12 Jun 2019 14:50:16 +0300 Subject: [PATCH 3/3] Accommodate iPhone X units still running Safari 11.2 --- theme/lumo/vaadin-login-overlay-styles.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/theme/lumo/vaadin-login-overlay-styles.html b/theme/lumo/vaadin-login-overlay-styles.html index 5abbf2b..6398908 100644 --- a/theme/lumo/vaadin-login-overlay-styles.html +++ b/theme/lumo/vaadin-login-overlay-styles.html @@ -154,12 +154,18 @@ and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { [part="card"] { + padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); + + padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); } [part="brand"] { + margin-left: calc(constant(safe-area-inset-left) * -1); margin-left: calc(env(safe-area-inset-left) * -1); + + padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-left)); padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left)); } }