Replace inline submit form with flexbox.

10 files changed, 31 insertions, 117 deletions

diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index b2492d928..0f316b955 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -243,6 +243,12 @@ input.field, input.text,
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
+
+  #postcodeForm & {
+    margin: 0;
+    height: auto;
+    line-height: 1;
+  }
 }
 
 // Bromley's silly A-Z menu
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 5ab22c081..f6d7c9096 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -140,7 +140,6 @@ body.fullwidthpage {
                     color: #777;
                     font-size: 0.9em;
                     height: 2.6em;
-                    width: 20em;
                     &:focus {
                         outline: 0;
                     }
@@ -148,7 +147,6 @@ body.fullwidthpage {
                 input#sub {
                     font-size: 1.1em;
                     height: 2.4em;
-                    width: 3.5em;
                     font-family: $body-font;
                     font-weight: bold;
                 }
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 989c3b19c..999321a7e 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -88,28 +88,14 @@ a:not([class]):focus {
         }
 
         div {
-            display: block;
-            width: auto;
-            background: transparent;
             border: none;
 
             font-size: 1.25em;
             margin-top: 0.5em;
             max-width: 24em;
 
-            @include flex-container();
-
             input#pc {
-                display: block;
                 margin: 0 0.5em 0 0;
-                padding: 0.5em;
-            }
-
-            input#sub {
-                padding-top: 0.6em;
-                padding-bottom: 0.5em;
-                width: auto;
-                height: auto;
             }
         }
     }
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 52b5544ef..1b415903a 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -117,28 +117,16 @@ $mappage-header-height: 10em;
         overflow: visible;
 
         div {
-            display: block;
             width: auto;
             max-width: 38em;
             margin: 0.75em 0 0 0;
-            overflow: visible;
-
-            @include flex-container();
 
             input#pc {
-                display: block;
-                margin: 0 0.5em 0 0;
-                padding: 0.5em;
-                height: auto;
-                width: 100%;
                 max-width: 80%;
             }
 
             input#sub {
                 padding: 0.6em 1.5em;
-                width: auto;
-                height: auto;
-                text-transform: none;
             }
         }
     }
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index b75647575..4cdb483ae 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -489,20 +489,22 @@ small#or:after {
 
 .form-txt-submit-box {
   @include clearfix();
+  @include flex-container();
+  @include flex-wrap(wrap);
   input[type=password],
   input[type=tel],
   input[type=number],
   input[type=text],
   input[type=email] {
-    width: 65%;
-    float: $left;
+    width: auto;
+    max-width: none;
+    @include flex(72 0 auto);
   }
   input[type=submit] {
-    float: $right;
-    width:28%;
-    margin-#{$right}: 0.25em;
-    padding-top:0.6em;
-    padding-bottom:0.5em;
+    @include flex(28 0 auto);
+    margin: 0 0.25em 0.5em;
+    padding-top: 0.6em;
+    padding-bottom: 0.5em;
   }
 }
 
@@ -2267,31 +2269,26 @@ label .muted {
       margin-bottom: 0.5em;
     }
     div {
-      display:table;
-      width:100%;
+      @include flex-container;
+      @include flex-wrap(wrap);
+      width: 100%;
       background:#fff;
       border:1px solid $primary_b;
       input#pc {
-        display:table-cell;
-        margin:0;
-        padding:0.25em 2%;
-        width:86%;
+        @include flex(86 0 auto);
+        width: 50%;
         border:none;
         background:none;
         line-height:1.5em;
       }
       input#sub {
-        display:table-cell;
         border:none;
-        padding:0;
-        margin:0;
-        width:14%;
-        height:35px;
+        padding: 0.5em;
+        @include flex(14 0 auto);
         background:#000;
         color:#fff;
-        text-transform:uppercase;
         @include border-radius(0);
-        &:hover {
+        &:hover, &:focus {
           background:#333;
         }
       }
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index b9e1e47f6..aafb6656a 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -847,24 +847,8 @@ textarea.form-error {
         margin-top: -0.25em;
     }
     div {
-      display:block;
       margin:0 auto;
       width:20em;
-      overflow:hidden;
-      input#pc {
-        display:block;
-        float: $left;
-        padding:0.25em 0.5em;
-        height:2em;
-        width:17em;
-      }
-      input#sub {
-        display:block;
-        float: $right;
-        width:3em;
-        height:2.3em;
-        padding-top:0.2em;
-      }
     }
   }
   a {
diff --git a/web/cobrands/warwickshire/base.scss b/web/cobrands/warwickshire/base.scss
index d3560e0a4..224346195 100644
--- a/web/cobrands/warwickshire/base.scss
+++ b/web/cobrands/warwickshire/base.scss
@@ -32,23 +32,14 @@
         background: transparent;
 
         div {
-            display: block;
-            width: auto;
             background: #fff;
             border: none;
 
             margin-top: 0.5em;
             max-width: 24em;
-
-            @include flex-container();
-            @include flex-align(stretch);
-
             box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.2);
 
             input#pc {
-                display: block;
-                margin: 0;
-                padding: 0.5em;
                 font-family: inherit;
                 color: $primary_text;
 
@@ -73,7 +64,8 @@
                 // or wrap the text content in an element we can hide?
                 text-indent: -9000px;
 
-                &:hover {
+                &:hover,
+                &:focus {
                     background-color: $primary;
                     @include svg-background-image('/cobrands/warwickshire/images/search');
                     background-repeat: no-repeat;
@@ -81,10 +73,8 @@
                     background-size: 20px 20px;
                 }
 
-                // TODO: Because of our text-indent, this draws a
-                // gigantic yellow box off the screen!!!
                 &:focus {
-                    outline: 3px solid $warwickshire-yellow;
+                    background-color: $warwickshire-yellow;
                 }
             }
         }
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index cf98ba32a..ac360f16d 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -33,22 +33,9 @@
             max-width: 38em;
             margin-left: 0;
             margin-right: 0;
-            overflow: visible;
-
-            @include flex-container();
 
             input#pc {
-                width: 100%;
-                height: auto;
-                margin: 0;
                 max-width: none;
-                padding: 0.5em;
-            }
-
-            input#sub {
-                width: 40px;
-                height: auto;
-                padding-top: 0;
             }
         }
 
diff --git a/web/cobrands/westminster/base.scss b/web/cobrands/westminster/base.scss
index 06504be32..c67a67f6d 100644
--- a/web/cobrands/westminster/base.scss
+++ b/web/cobrands/westminster/base.scss
@@ -50,34 +50,27 @@ body.frontpage {
         color: inherit;
 
         div {
-            display: block;
             border: none;
             background: transparent;
             position: relative;
+            background: #fff;
+            box-shadow: 1px 1px 5px 1px rgba(104, 104, 104, 0.4);
 
             input#pc {
-                display: block;
-                width: 100%;
                 box-sizing: border-box;
                 padding: 10px 22px;
-                box-shadow: 1px 1px 5px 1px rgba(104, 104, 104, 0.4);
-                background: #fff;
             }
 
             input#sub {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                display: block;
                 width: 0;
-                height: auto;
                 padding-left: 50px;
                 overflow: hidden;
+                @include flex(0 0 auto);
                 background: transparent url(/cobrands/westminster/images/search-icon.png) no-repeat 50% 50%;
                 background-size: 25px 25px;
 
-                &:hover {
+                &:hover,
+                &:focus {
                     background: transparent url(/cobrands/westminster/images/search-icon.png) no-repeat 50% 50%;
                     background-size: 25px 25px;
                 }
diff --git a/web/cobrands/westminster/layout.scss b/web/cobrands/westminster/layout.scss
index 7864f37ac..94483a523 100644
--- a/web/cobrands/westminster/layout.scss
+++ b/web/cobrands/westminster/layout.scss
@@ -28,21 +28,6 @@
 
         div {
             margin: 0;
-            overflow: visible;
-
-            input#pc {
-                float: none;
-                height: auto;
-                width: 100%;
-                padding: 10px 22px;
-            }
-
-            input#sub {
-                float: none;
-                height: auto;
-                width: 0;
-                padding-top: 0;
-            }
         }
     }