US206196 vertically/horizontally centered modal with flexbox.

Author: chrisdo1

elements/pfe-modal/src/pfe-modal.html

@@ -1,13 +1,14 @@
 <slot name="pfe-modal--trigger"></slot>
-<section class="pfe-modal__wrapper" tabindex="0" role="dialog" hidden>
-	<div class="pfe-modal__container">
-		<slot name="pfe-modal--header"></slot>
-		<slot></slot>
-		<button class="pfe-modal__close" aria-label="Close dialog">
-			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="-11 11 22 23">
-				<path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/>
-			</svg>
-		</button>
+<section class="pfe-modal__overlay" hidden>
+	<div class="pfe-modal__wrapper" tabindex="0" role="dialog" hidden>
+		<div class="pfe-modal__container">
+			<slot name="pfe-modal--header"></slot>
+			<slot></slot>
+			<button class="pfe-modal__close" aria-label="Close dialog">
+				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="-11 11 22 23">
+					<path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/>
+				</svg>
+			</button>
+		</div>
 	</div>
 </section>
-<div class="pfe-modal__overlay" hidden></div>

elements/pfe-modal/src/pfe-modal.scss

@@ -22,33 +22,43 @@ $pfe-modal--breakpoint--medium: 640px;
 }
 
 .pfe-modal {
+	&__overlay {
+		display: flex;
+		position: fixed;
+		height: 100%;
+		width: 100%;
+		top: 0;
+		left: 0;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		z-index: 2;
+		background-color: pfe-local($cssvar: BackgroundColor, $region: overlay);
+		cursor: pointer;
+
+		&[hidden] {
+			display: none;
+		}
+	}
 	&__wrapper {
-		position: absolute;
 		z-index: 2;
-		top: 10%;
-		left: 0;
-		right: 0;
 		max-width: pfe-local(MaxWidth--mobile);
 		min-width: pfe-local(MinWidth);
 		min-height: pfe-local(MinHeight);
 		margin: 0 auto;
 		box-shadow: pfe-var(box-shadow--lg);
 		background-color: pfe-color(surface--lightest);
 		border-radius: #{pfe-var(ui--border-radius)};
-		overflow-y: scroll;
-		scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* IE 10+ */
-
-    &::-webkit-scrollbar {
-    	display: none;
-    }
+		overflow-y: auto;
+		overscroll-behavior: contain;
 
 		@media screen and (min-width: $pfe-modal--breakpoint--medium) {
 			max-width: pfe-local(MaxWidth);
 			max-height: pfe-local(MaxHeight);	
 		}
 	}
 	&__container {
+		position: relative;
 		padding: var(--pfe-modal--Padding--mobile);
 		max-width: calc(100% - #{pfe-var(ui--element--size)});
 
@@ -99,20 +109,4 @@ $pfe-modal--breakpoint--medium: 640px;
 			width: pfe-local(CloseButtonSize);
 		}
 	}
-
-	&__overlay {
-		display: block;
-		background-color: pfe-local($cssvar: BackgroundColor, $region: overlay);
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%; // Fallback
-		width: 100vw;
-		height: 100%; // Fallback
-		height: 100vh;
-		z-index: 1;
-		&[hidden] {
-			display: none;
-		}
-	}
 }