US206196 set mobile modal styles, reduced close button size, adjusted close button position.

Author: chrisdo1

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

@@ -1,14 +1,18 @@
 @import "../../pfe-sass/pfe-sass";
 $LOCAL: modal;
 
+$pfe-modal--breakpoint--medium: 640px;
+
 :host {
 	--pfe-modal--MaxWidth: 70vw;
 	--pfe-modal--MinWidth: 50vw;
+	--pfe-modal--MaxWidth--mobile: 94vw;
 	--pfe-modal--MaxHeight: 70vh;
 	--pfe-modal--MinHeight: 40vh;
+	--pfe-modal--Padding--mobile: calc(#{pfe-var(container-padding)} * 1.25) calc(#{pfe-var(container-padding)} * 3) calc(#{pfe-var(container-padding)} * 1.25) calc(#{pfe-var(container-padding)} * 1.25);
 	--pfe-modal--Padding: calc(#{pfe-var(container-padding)} * 2);
 	--pfe-modal__overlay--BackgroundColor: #{pfe-color(overlay)};
-
+	--pfe-modal--CloseButtonSize: calc(#{pfe-var(ui--element--size)} - 4px);
 	display: block;
 }
 
@@ -33,40 +37,58 @@ $LOCAL: modal;
 		top: calc(#{pfe-local(MaxHeight)} - 50vh);
 		left: 0;
 		right: 0;
-		max-width: pfe-local(MaxWidth);
+		max-width: pfe-local(MaxWidth--mobile);
 		min-width: pfe-local(MinWidth);
-		max-height: pfe-local(MaxHeight);
 		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)};
+
+		@media screen and (min-width: $pfe-modal--breakpoint--medium) {
+			max-width: pfe-local(MaxWidth);
+			max-height: pfe-local(MaxHeight);	
+		}
 	}
 	&__container {
-		padding: pfe-local(Padding);
+		padding: var(--pfe-modal--Padding--mobile);
 		max-width: calc(100% - #{pfe-var(ui--element--size)});
 
+		@media screen and (min-width: $pfe-modal--breakpoint--medium) {
+			padding: pfe-local(Padding);
+		}
+
 		&[hidden] {
 			display: none;
 		}
 
 		&[no_header] {
-			padding: calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 6) calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2);			
+			@media screen and (min-width: $pfe-modal--breakpoint--medium) {
+				padding: calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 6) calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2);			
+			}
 		}
 	}
 
 	&__close {
 		@include pfe-reset-button;
 		position: absolute;
-		top: pfe-var(container-padding);
-		right: calc(#{pfe-var(container-padding)} * 2);
+		top: calc(#{pfe-var(container-padding)} * .5);
+		right: calc(#{pfe-var(container-padding)} * .5);
 		cursor: pointer;
 		line-height: .5;
+
+		@media screen and (min-width: $pfe-modal--breakpoint--medium) {
+			top: calc(#{pfe-var(container-padding)} * .75);
+			right: calc(#{pfe-var(container-padding)} * .75);
+		}
+
 		> svg {
 			padding: 20px;
 			fill: pfe-radio(text);
 			height: pfe-var(ui--element--size);
 			width: pfe-var(ui--element--size);
+			height: pfe-local(CloseButtonSize);
+			width: pfe-local(CloseButtonSize);
 		}
 	}