From 124d90665311dfe732732d06042b9e89112517be Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Mon, 6 Feb 2017 15:11:44 +0000 Subject: [PATCH] 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: https://github.com/alphagov/govuk_elements/pull/296 --- pages_builder/assets/javascripts/onready.js | 5 +- toolkit/scss/forms/_selection-buttons.scss | 143 ++++++++++++++---- .../templates/forms/selection-buttons.html | 8 +- 3 files changed, 119 insertions(+), 37 deletions(-) diff --git a/pages_builder/assets/javascripts/onready.js b/pages_builder/assets/javascripts/onready.js index c7fe381d..c8891e1b 100644 --- a/pages_builder/assets/javascripts/onready.js +++ b/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('label.selection-button'); } if (GOVUK.CheckboxFilter) { diff --git a/toolkit/scss/forms/_selection-buttons.scss b/toolkit/scss/forms/_selection-buttons.scss index fe1427b5..cdc817f4 100644 --- a/toolkit/scss/forms/_selection-buttons.scss +++ b/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,122 @@ // 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; + + input:focus { + outline: none; + } + } + } + } -// Add focus to block labels -.js-enabled label.selection-button-focused { - outline: 3px solid $yellow; + // Selected state + &.selection-button-radio, + &.selection-button-checkbox { + &.selected::after { + @include opacity(1); + } + } + } + + &:last-child, + &:last-of-type { + margin-bottom: 0; + } + + .inline & { + clear: none; + margin-right: $gutter-half; + } } -// Remove focus from radio/checkboxes -.js-enabled .selection-button-focused input:focus { - outline: none; +// To stack horizontally, use .inline on parent, to sit block labels next to each other +.inline .block-label { + clear: none; + + @include media (tablet) { + margin-bottom: 0; + margin-right: $gutter; + } } // Styles specific to Digital Marketplace diff --git a/toolkit/templates/forms/selection-buttons.html b/toolkit/templates/forms/selection-buttons.html index bdfaf12b..bd22a016 100644 --- a/toolkit/templates/forms/selection-buttons.html +++ b/toolkit/templates/forms/selection-buttons.html @@ -8,7 +8,7 @@ {% if error %}
{% endif %} -
+
{% if question_number %} @@ -40,7 +40,7 @@ {% endif %} {% if type == "boolean" %} -