Done #546 @3.5

diff --git a/less/315-quote.less b/less/315-quote.less
index 501cd15fdedd95712f6de7643f15503203114d6e..81d2c86cb41d252e81ba59b69e85d2f911d387fa 100644 (file)
--- 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;