Merge pull request #648 from alphagov/form-styling-tweaks

Update form elements to match latest designs

Author: pixeltrix

app/assets/stylesheets/govuk_elements/_forms.scss

@@ -1,27 +1,82 @@
 // Forms
 // ==========================================================================
-// GOV.UK front end toolkit dependencies
-@import "helpers";
-@import "../govuk_frontend_toolkit/colours";
+
+// Contents:
+//
+// 1. Helpers
+// 2. Form wrappers
+// 3. Form labels
+// 4. Form hints
+// 5. Form controls
+// 6. Form control widths
+// 7. Browser accessibility fixes
+
+// 1. Helpers
+// ==========================================================================
 
 // Fieldset is used to group more than one .form-group
 fieldset {
   @extend %contain-floats;
   width: 100%;
+
+  // Avoid extra vertical space (caused by fieldsets preventing margin collapse) when fieldsets with an h1 in the legend appear after the error-summary element.
+  // (Class used instead of adjacent sibling selector for IE 8 compatibility.)
+  &.after-error-summary {
+    margin-top: -$gutter-half;
+
+    @include media(tablet) {
+      margin-top: -$gutter;
+    }
+  }
 }
 
-// Form group is used to wrap label and input pairs
+// Hack to let legends or elements within legends have margins in webkit browsers
+legend {
+  overflow: hidden;
+}
+
+// Fix left hand gap in IE7 and below
+@include ie-lte(7) {
+  legend {
+    margin-left: -7px;
+  }
+}
+
+// Remove margin under textarea in Chrome and FF
+textarea {
+  display: block;
+}
+
+
+// 2. Form wrappers
+// ==========================================================================
+
+.form-section,
 .form-group {
   @extend %contain-floats;
   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) {
+    margin-bottom: $gutter * 2;
+  }
+}
+
+// Form group is used to wrap label and input pairs
+.form-group {
   margin-bottom: $gutter-half;
 
   @include media(tablet) {
     margin-bottom: $gutter;
   }
 }
 
+// Form group related is used to reduce the space between label and input pairs
 .form-group-related {
   margin-bottom: 10px;
 
@@ -30,66 +85,68 @@ fieldset {
   }
 }
 
+// Form group compound is used to reduce the space between label and input pairs
 .form-group-compound {
   margin-bottom: 10px;
 }
 
 
-// Form title
-.form-title {
-  margin-bottom: $gutter;
-
-  @include media(tablet) {
-    margin-bottom: ($gutter*1.5);
-  }
-}
-
-
-// Labels
+// 3. Form labels
+// ==========================================================================
 
 // Form labels, or for legends styled to look like labels
+// TODO: Amend so there is only one label style
 .form-label,
 .form-label-bold {
   display: block;
   color: $text-colour;
+  padding-bottom: 2px;
 }
 
 .form-label {
   @include core-19;
-  margin-bottom: 5px;
 }
 
 .form-label-bold {
-  @include bold-24;
-  margin-bottom: 0;
-
-  .form-hint {
-    @include core-19;
-  }
+  @include bold-19;
 }
 
-// Used for paragraphs in-between form elements
+// 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;
 
+  @include media(tablet) {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+}
 
-// Hints
+// 4. Form hints
+// ==========================================================================
 
-// Form hints & examples are light grey and sit above a form control
+// Form hints and example text are light grey and sit above a form control
 .form-hint {
+  @include core-19;
   display: block;
   color: $secondary-text-colour;
-  margin-bottom: 5px;
+  font-weight: normal;
 
-  @include media (tablet) {
-    margin-top: 8px;
-  }
+  margin-top: -2px;
+  padding-bottom: 2px;
+}
+
+.form-label .form-hint,
+.form-label-bold .form-hint {
+  margin-top: 0;
+  padding-bottom: 0;
 }
 
-// Form controls
+// 5. Form controls
+// ==========================================================================
 
 // By default, form controls are 50% width for desktop,
 // and 100% width for mobile
@@ -98,21 +155,42 @@ fieldset {
   @include core-19;
   width: 100%;
 
-  padding: 4px;
-  background-color: $white;
-  border: 1px solid $border-colour;
-
-  // Disable webkit appearance and remove rounded corners
-  -webkit-appearance: none;
-  border-radius: 0;
+  padding: 5px 4px 4px;
+  // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
+  // as background-color and color need to always be set together, color should not be set either
+  border: 2px solid $text-colour;
 
+  // TODO: Remove 50% width set for tablet and up
+  // !! BREAKING CHANGE !!
   @include media(tablet) {
     width: 50%;
   }
+
 }
 
+// Allow a qualifying element, remove rounded corners from inputs and textareas
+// scss-lint:disable QualifyingElement
+input.form-control,
+textarea.form-control {
+  // Disable inner shadow and remove rounded corners
+  -webkit-appearance: none;
+  border-radius: 0;
+}
+
+textarea.form-control {
+  // Disable opacity and background image for Firefox
+  opacity: 1;
+  background-image: none;
+}
+// scss-lint:enable QualifyingElement
+
 
+// 6. Form control widths
+// ==========================================================================
+
+// TODO: Update these
 // Form control widths
+
 .form-control-3-4 {
   width: 100%;
 
@@ -121,6 +199,14 @@ fieldset {
   }
 }
 
+.form-control-2-3 {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 66.66%;
+  }
+}
+
 .form-control-1-2 {
   width: 100%;
 
@@ -129,44 +215,38 @@ fieldset {
   }
 }
 
-.form-control-1-4 {
-  width: 25%;
-}
+.form-control-1-3 {
+  width: 100%;
 
-.form-control-1-8 {
-  width: 12.5%;
+  @include media(tablet) {
+    width: 33.33%;
+  }
 }
 
+.form-control-1-4 {
+  width: 100%;
 
-// Radio buttons
-.form-radio {
-  display: block;
-  margin: 10px 0;
-
-  input {
-    vertical-align: middle;
-    margin: -4px 5px 0 0;
+  @include media(tablet) {
+    width: 25%;
   }
 }
 
+.form-control-1-8 {
+  width: 100%;
 
-// Checkboxes
-.form-checkbox {
-  display: block;
-  margin: $gutter-half 0;
-
-  input {
-    vertical-align: middle;
-    margin: -2px 5px 0 0;
+  @include media(tablet) {
+    width: 12.5%;
   }
 }
 
+// 7. Browser accessibility fixes
+// ==========================================================================
 
-// Buttons
-.form .button {
-  @include media(mobile) {
-    width: 100%;
-  }
+option:active,
+option:checked,
+select:focus::-ms-value {
+  color: $white;
+  background-color: $govuk-blue;
 }