From 32a1e75b5eb3e0b8fc11b054dbd625db228b708e Mon Sep 17 00:00:00 2001 From: Vladyslav Ilchenko Date: Wed, 22 Jan 2025 22:17:42 +0200 Subject: [PATCH 1/5] 100% height when opened --- src/components/opt-in-flyout/flyout-impl.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/opt-in-flyout/flyout-impl.js b/src/components/opt-in-flyout/flyout-impl.js index ef54962..64b6d0d 100644 --- a/src/components/opt-in-flyout/flyout-impl.js +++ b/src/components/opt-in-flyout/flyout-impl.js @@ -47,13 +47,17 @@ class FlyoutImplementation extends composeMixins( heading1Styles, css` :host { - height: var(--d2l-flyout-custom-element-height, 100%); + height: var(--d2l-flyout-custom-element-height, auto); overflow: hidden; pointer-events: none; position: absolute; width: 100%; } + :host([opened]) { + height: 100%; + } + #flyout { background-color: white; border-bottom: 1px solid var(--d2l-color-mica); @@ -62,7 +66,7 @@ class FlyoutImplementation extends composeMixins( overflow: visible; padding-bottom: 2rem; pointer-events: auto; - position: var(--d2l-flyout-custom-element-position, absolute); + position: var(--d2l-flyout-custom-element-position, relative); top: var(--d2l-flyout-custom-element-top, 0); width: 100%; z-index: var(--d2l-flyout-custom-element-z-index, 900); From 2011ab3e6f96465cec1a18e84be3a02b7049ef83 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 22 Jan 2025 20:58:39 +0000 Subject: [PATCH 2/5] Updating vdiff goldens --- .../flyout-impl/chromium/closed-focus.png | Bin 8956 -> 8424 bytes .../golden/flyout-impl/chromium/closed.png | Bin 8416 -> 7872 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/test/components/opt-in-flyout/golden/flyout-impl/chromium/closed-focus.png b/test/components/opt-in-flyout/golden/flyout-impl/chromium/closed-focus.png index 1fba1172f3dce0c7153942e51fdb8b781e5f1340..53bc9faa008bdb8203b775b2471939c3d5f8aec9 100644 GIT binary patch delta 51 zcmez4`oeL7I9Ce?69WT-$eNa08x^G$m>8x_wo{lQwwYn0b&-?*H>2l3Nd`|>KbLh* G2~7aCxe%)W delta 55 zcmaFi_{VjEIM)RZCI$wE=FR7GZx^prw85k58HX2pRZQdZ=&B#+cf8|!7 kbf2e-W60z{=}u8r{@1rJ?KyhlAyAaT)78&qol`;+094-_{{R30 From 43677bcd2abc63661f2232566c535bdfca2ddb45 Mon Sep 17 00:00:00 2001 From: Vladyslav Ilchenko Date: Wed, 22 Jan 2025 23:53:51 +0200 Subject: [PATCH 3/5] add fade behind flyout --- src/components/opt-in-flyout/flyout-impl.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/opt-in-flyout/flyout-impl.js b/src/components/opt-in-flyout/flyout-impl.js index 64b6d0d..a08d406 100644 --- a/src/components/opt-in-flyout/flyout-impl.js +++ b/src/components/opt-in-flyout/flyout-impl.js @@ -56,6 +56,8 @@ class FlyoutImplementation extends composeMixins( :host([opened]) { height: 100%; + pointer-events: auto; + background-color: rgba(255, 255, 255, 0.7); } #flyout { From e8a6af2ab8ae8105b6055eeb7a74af1328e4d198 Mon Sep 17 00:00:00 2001 From: Vladyslav Ilchenko Date: Wed, 22 Jan 2025 23:56:04 +0200 Subject: [PATCH 4/5] fix lint --- src/components/opt-in-flyout/flyout-impl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/opt-in-flyout/flyout-impl.js b/src/components/opt-in-flyout/flyout-impl.js index a08d406..1266044 100644 --- a/src/components/opt-in-flyout/flyout-impl.js +++ b/src/components/opt-in-flyout/flyout-impl.js @@ -56,8 +56,8 @@ class FlyoutImplementation extends composeMixins( :host([opened]) { height: 100%; - pointer-events: auto; background-color: rgba(255, 255, 255, 0.7); + pointer-events: auto; } #flyout { From 0caaa974d09bf23c90adcd78bb29d5134d3a6884 Mon Sep 17 00:00:00 2001 From: Vladyslav Ilchenko Date: Wed, 22 Jan 2025 23:59:26 +0200 Subject: [PATCH 5/5] fix style --- src/components/opt-in-flyout/flyout-impl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/opt-in-flyout/flyout-impl.js b/src/components/opt-in-flyout/flyout-impl.js index 1266044..040b011 100644 --- a/src/components/opt-in-flyout/flyout-impl.js +++ b/src/components/opt-in-flyout/flyout-impl.js @@ -55,8 +55,8 @@ class FlyoutImplementation extends composeMixins( } :host([opened]) { - height: 100%; background-color: rgba(255, 255, 255, 0.7); + height: 100%; pointer-events: auto; }