From 33fe554d59a63e213b01385cd108742e92bbf1f4 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 17 Dec 2019 11:25:08 -0500 Subject: [PATCH 1/4] Components: Remove guide contents centering Doesn't appear to be needed, and causes overflow issues in IE due to Flexbox bug See: https://github.com/philipwalton/flexbugs#flexbug-2 --- packages/components/src/guide/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss index 92044211ce3cd4..257ad088586575 100644 --- a/packages/components/src/guide/style.scss +++ b/packages/components/src/guide/style.scss @@ -11,7 +11,6 @@ } &__container { - align-items: center; display: flex; flex-direction: column; margin-top: -$header-height; From 8f97baeb665d798d658716bcd7c66db253d8a39b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 17 Dec 2019 11:32:27 -0500 Subject: [PATCH 2/4] Components: Use explicit display for guide finish button --- packages/components/src/guide/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss index 257ad088586575..b95fad209af0c7 100644 --- a/packages/components/src/guide/style.scss +++ b/packages/components/src/guide/style.scss @@ -106,7 +106,7 @@ right: 0; @include break-small() { - display: unset; + display: block; } } From ca02024c49d873f6760917128da4fdebce44e679 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 17 Dec 2019 11:32:53 -0500 Subject: [PATCH 3/4] Components: Ensure modal is styled as positioned element --- packages/components/src/modal/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 82826987752074..331a23b097fad6 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -68,9 +68,13 @@ background: $white; align-items: center; height: $header-height; + z-index: z-index(".components-modal__header"); + // For z-index to take effect, the element must be positioned. A "sticky" + // element is positioned, but since this is not supported in IE11, + // "relative" is used as a fallback. + position: relative; position: sticky; top: 0; - z-index: z-index(".components-modal__header"); margin: 0 -#{$grid-size-xlarge} $grid-size-xlarge; // Rules inside this query are only run by Microsoft Edge. From f4001e7ebfc95c43d9fcab74bd92eda49caed3d6 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 17 Dec 2019 11:33:04 -0500 Subject: [PATCH 4/4] Edit Post: Vertically center welcome guide image --- packages/edit-post/src/components/welcome-guide/style.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/welcome-guide/style.scss b/packages/edit-post/src/components/welcome-guide/style.scss index 419a001fdd58e3..790df3cd975318 100644 --- a/packages/edit-post/src/components/welcome-guide/style.scss +++ b/packages/edit-post/src/components/welcome-guide/style.scss @@ -28,10 +28,12 @@ margin: $grid-size 0; @include break-small() { - height: $image-height; - left: 0; position: absolute; + left: 0; + top: 50%; + height: $image-height; width: $image-width; + margin-top: -0.5 * $image-height; } }