From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Wed, 13 Jul 2016 17:27:20 +0000 (+0000)
Subject: Done #546 @3.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e65ddc55f7b5e48f4f6ce28234b9b662010e4d59;p=fluidbook-v3.git

Done #546 @3.5
---

diff --git a/less/315-quote.less b/less/315-quote.less
index 501cd15..81d2c86 100644
--- a/less/315-quote.less
+++ b/less/315-quote.less
@@ -1,16 +1,37 @@
 @import "000-imports";
 
+@wrapForm: ~"(max-width: 700px)";
+
 // Request a quote section
 .request-quote {
 
+	@media @m1024 {
+		flex-wrap: wrap;
+	}
+
 	// Styling when open in a popup
 	.popupWindow & {
 		padding: 0 2% 1%;
+
+		// Wrap at a wider breakpoint when inside the popup
+		@media @m1280 {
+			flex-wrap: wrap;
+
+			.text {
+				flex-basis: 100%;
+				padding-bottom: 20px;
+			}
+		}
 	}
 
 	.text {
 		padding-right: 30px;
 
+		@media @m1024 {
+			flex-basis: 100%;
+			padding-bottom: 20px;
+		}
+
 		.dotclear {
 			br {
 				line-height: 2.5;
@@ -18,6 +39,14 @@
 		}
 	}
 
+	.form {
+		font-size: 15px; // Controls size of labels and input fields
+
+		@media @m900 {
+			font-size: 13px;
+		}
+	}
+
 	.zend_form {
 		display: flex;
 		flex-wrap: wrap;
@@ -27,13 +56,17 @@
 		> div {
 			flex-basis: 50%;
 			padding: 0 14px; // To create a 28px gap between cells
+
+			@media @wrapForm {
+				flex-basis: 100%;
+			}
 		}
 	}
 
 	label {
 		display: block;
-		margin-bottom: 8px;
-		font-size: 15px;
+		margin-bottom: 8/15em;
+		font-size: 1em;
 
 		&.required:after {
 			content: '*';
@@ -42,35 +75,30 @@
 
 	input[type="text"], input[type="email"], textarea, select {
 		border: 1px solid @color-text;
-		line-height: 53px;
 		padding: 0 15px;
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
 		border-radius: 0;
-		color: @color-text;
-		font-size: 14px;
+		line-height: (51/15); // Target height / font size = relative sizing
+		font-size: 1em;
 		font-family: @body-font;
+		color: @color-text;
 
 		&:focus {
 			box-shadow: inset 0 -4px 0 #c2c4c7;
 		}
 	}
 
-	input[type="text"], input[type="email"] {
-		max-height: 53px;
-	}
-
 	select {
 		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAICAYAAADuv08kAAAAnElEQVQoz2M4f/Hy8UNHjv8nhC9cunL4379/zAzUAt++f1c7cuzkN3yWAuW/ANUpM1AbPHn6rACfxU+fPc9hoAUABiHTxctXDmCz9NLlq3v+///PyEAr8P37D6Wjx09+RrYUyP/048cPeQZag2fPX2QgW/z8xctkBnoAUJBeunJtF8jSy1evb6NpEKMDYNDKnTpz7v7Pnz+laGkPAKftxKb2aSY8AAAAAElFTkSuQmCC');
 		background-position: center right;
 		background-repeat: no-repeat;
 		padding-right: 40px;
-		height: 53px;
 	}
 
 	textarea {
-		line-height: 1.3;
+		line-height: 1.4;
 		padding: 15px;
 		height: 170px;
 		display: block; // Removes space below element caused by inline-block
@@ -88,6 +116,14 @@
 		min-height: 170px; // Same as textarea height
 		position: relative;
 
+		@media @wrapForm {
+			margin-top: 10px;
+			min-height: 0;
+			&:after {
+				display: none;
+			}
+		}
+
 		// < arrow
 		&:after {
 			right: 100%;
@@ -107,6 +143,11 @@
 		}
 	}
 
+	// Hidden fields
+	#wrap-pays, #wrap-tips {
+		margin: 0;
+	}
+
 	#submit-element {
 		margin: 14px;