From 0d5e268691a479806c17bcdbf559de4d2a4ce374 Mon Sep 17 00:00:00 2001
From: Matt Eason <matt.eason@fivium.co.uk>
Date: Thu, 6 Jul 2017 15:18:57 +0100
Subject: [PATCH] Remove float from form-group

Merging https://github.com/alphagov/govuk_elements/pull/487/ to fix form group float causing heading padding to disappear
---
 .../template/stylesheets/elements/_forms.scss | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/app/assets/template/stylesheets/elements/_forms.scss b/app/assets/template/stylesheets/elements/_forms.scss
index 9b715f1..983bbdc 100644
--- a/app/assets/template/stylesheets/elements/_forms.scss
+++ b/app/assets/template/stylesheets/elements/_forms.scss
@@ -9,6 +9,7 @@
 // 4. Form hints
 // 5. Form controls
 // 6. Form control widths
+// 7. Browser accessibility fixes
 
 // 1. Helpers
 // ==========================================================================
@@ -35,14 +36,14 @@ textarea {
 // 2. Form wrappers
 // ==========================================================================
 
-// Form section is used to wrap .form-group and has twice its margin
-.form-section {
+.form-section,
+.form-group {
   @extend %contain-floats;
   @include box-sizing(border-box);
+}
 
-  float: left;
-  width: 100%;
-
+// Form section is used to wrap .form-group and has twice its margin
+.form-section {
   margin-bottom: $gutter;
 
   @include media(tablet) {
@@ -52,12 +53,6 @@ textarea {
 
 // Form group is used to wrap label and input pairs
 .form-group {
-  @extend %contain-floats;
-  @include box-sizing(border-box);
-
-  float: left;
-  width: 100%;
-
   margin-bottom: $gutter-half;
 
   @include media(tablet) {
@@ -102,9 +97,8 @@ textarea {
 
 // Used for the 'or' in between block label options
 .form-block {
-  @extend %contain-floats;
   float: left;
-  width: 100%;
+  clear: left;
 
   margin-top: -5px;
   margin-bottom: 5px;
@@ -162,11 +156,16 @@ textarea {
 // scss-lint:disable QualifyingElement
 input.form-control,
 textarea.form-control {
-  // Remove inner shadow
+  // Disable inner shadow and remove rounded corners
   -webkit-appearance: none;
-  // Remove rounded corners
   border-radius: 0;
 }
+
+textarea.form-control {
+  // Disable opacity and background image for Firefox
+  opacity: 1;
+  background-image: none;
+}
 // scss-lint:enable QualifyingElement
 
 
@@ -223,3 +222,13 @@ textarea.form-control {
     width: 12.5%;
   }
 }
+
+// 7. Browser accessibility fixes
+// ==========================================================================
+
+option:active,
+option:checked,
+select:focus::-ms-value {
+  color: $white;
+  background-color: $govuk-blue;
+}
\ No newline at end of file