Bring in govuk_elements' checkbox/radio styles

We're following the lead set by govuk_elements.  No more background,
but a bigger hit area for checkboxes and radio buttons.

Also needed a change to our `selected` classname because that's
how these new inputs are driven.

Custom radios / checkboxes, in govuk_elements:
alphagov/govuk_elements#296

pages_builder/assets/javascripts/onready.js

@@ -15,10 +15,7 @@
   }
 
   if (GOVUK.SelectionButtons) {
-    var selectionButtons = new GOVUK.SelectionButtons('label.selection-button', {
-      'focusedClass' : 'selection-button-focused',
-      'selectedClass' : 'selection-button-selected'
-    });
+    var selectionButtons = new GOVUK.SelectionButtons('.selection-button input');
   }
 
   if (GOVUK.CheckboxFilter) {

toolkit/scss/forms/_selection-buttons.scss

@@ -1,5 +1,5 @@
 // Copied from GOVUK Elements
-// Version: https://github.com/alphagov/govuk_elements/commit/391eab1554b05629804837ac0f87583f5b88b1a7
+// Version: https://github.com/alphagov/govuk_elements/commit/537a4c14641377e7686ccc7586c2632c1008d7dc
 //
 // Large hit area
 // Radio buttons & checkboxes
@@ -18,14 +18,16 @@
   clear: left;
   position: relative;
 
-  background: $panel-colour;
-  border: 1px solid $panel-colour;
   padding: 10px $gutter-half 10px ($gutter * 1.5); /* Specific to Digital Marketplace */
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 10px; /* Specific to Digital Marketplace */
+  margin-bottom: 10px; /* Specific to Digital Marketplace */
 
   cursor: pointer; // Encourage clicking on block labels
 
+  // remove 300ms pause on mobile
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+
   @include media(tablet) {
     float: left;
     margin-top: 5px;
@@ -36,39 +38,117 @@
   // Absolutely position inputs within label, to allow text to wrap
   input {
     position: absolute;
-    top: 12px;
-    left: $gutter-half;
     cursor: pointer;
-  }
+    left: 0;
+    top: 0;
+    width: 38px;
+    height: 38px;
 
-  // Change border on hover
-  &:hover {
-    border-color: $black;
+    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
+    @if ($is-ie == false) or ($ie-version == 9) {
+      .js-enabled & {
+        margin: 0;
+        @include opacity(0);
+      }
+    }
   }
-}
 
-.selection-button-boolean,
-.selection-button-inline {
-  clear: none;
-  margin-right: $gutter-half;
-}
+  .js-enabled & {
+    &.selection-button-radio::before {
+      content: "";
+      border: 2px solid;
+      background: transparent;
+      width: 34px;
+      height: 34px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      @include border-radius(50%);
+    }
 
-// Selected and focused states
+    &.selection-button-radio::after {
+      content: "";
+      border: 10px solid;
+      width: 0;
+      height: 0;
+      position: absolute;
+      top: 9px;
+      left: 9px;
+      @include border-radius(50%);
+      @include opacity(0);
+    }
 
-// Add selected state
-.js-enabled label.selection-button-selected {
-  background: $white;
-  border-color: $black;
-}
+    &.selection-button-checkbox::before {
+      content: "";
+      border: 2px solid;
+      background: transparent;
+      width: 34px;
+      height: 34px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &.selection-button-checkbox::after {
+      content: "";
+      border: solid;
+      border-width: 0 0 5px 5px;
+      background: transparent;
+      width: 17px;
+      height: 7px;
+      position: absolute;
+      top: 10px;
+      left: 8px;
+      -moz-transform: rotate(-45deg); // Firefox 15 compatibility
+      -o-transform: rotate(-45deg); // Opera 12.0 compatibility
+      -webkit-transform: rotate(-45deg); // Safari 8 compatibility
+      -ms-transform: rotate(-45deg); // IE9 compatibility
+      transform: rotate(-45deg);
+      @include opacity(0);
+    }
+
+    // Focused state
+    &.selection-button-radio,
+    &.selection-button-checkbox {
+      &.focused::before {
+        @include box-shadow(0 0 0 5px $focus-colour);
+      }
+      // IE8 focus outline should stay as a border around the entire label
+      // Lack of padding doesn’t matter as IE8 won’t resize the inputs.
+      @include ie-lte(8) {
+        &.focused {
+          outline: 3px solid $focus-colour;
 
-// Add focus to block labels
-.js-enabled label.selection-button-focused {
-  outline: 3px solid $yellow;
+          input:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+
+    // Selected state
+    &.selection-button-radio,
+    &.selection-button-checkbox {
+      &.selected::after {
+        @include opacity(1);
+      }
+    }
+  }
+
+  &:last-child,
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
-// Remove focus from radio/checkboxes
-.js-enabled .selection-button-focused input:focus {
-  outline: none;
+// To stack horizontally, use .inline on the wrapping fieldset and selection buttons will be side-by-side
+fieldset.inline .selection-button {
+  clear: none;
+
+  @include media (tablet) {
+    margin-bottom: 0;
+    margin-right: $gutter;
+  }
 }
 
 // Styles specific to Digital Marketplace

toolkit/templates/forms/selection-buttons.html

@@ -8,7 +8,7 @@
 {% if error %}
   <div class="validation-wrapper">
 {% endif %}
-  <fieldset class="question first-question" id="{{ name }}">
+  <fieldset class="question first-question{% if inline or type=='boolean' %} inline{% endif %}" id="{{ name }}">
     <legend>
       <span class="question-heading{% if hint or question_advice %} question-heading-with-hint{% endif %}">
         {% if question_number %}
@@ -40,7 +40,7 @@
       </span>
     {% endif %}
     {% if type == "boolean" %}
-      <label class="selection-button selection-button-boolean {% if followup %}block-label{% endif %}" for="input-{{ name }}-yes" {% if followup %}data-target="{{ followup }}"{% endif %}>
+      <label class="selection-button selection-button-radio {% if followup %}block-label{% endif %}" for="input-{{ name }}-yes" {% if followup %}data-target="{{ followup }}"{% endif %}>
         Yes
         <input
           type="radio"
@@ -51,7 +51,7 @@
           {% if value is sameas true %} checked{% endif %}
         />
       </label>
-      <label class="selection-button selection-button-boolean" for="input-{{ name }}-no">
+      <label class="selection-button selection-button-radio" for="input-{{ name }}-no">
         No
         <input
           type="radio"
@@ -65,7 +65,7 @@
     {% else %}
       {% for option in options %}
         {% set input_value = option.value or option.label %}
-        <label class="selection-button{% if inline %} selection-button-inline{% endif %}" for="input-{{ name }}-{{ loop.index }}">
+        <label class="selection-button selection-button-{{ type }}" for="input-{{ name }}-{{ loop.index }}">
           {{ option.label }}
           {% if type == "radio" %}
             <input