From fb3da9d3324367117c2cbb8f88bef63b1711047b Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Mon, 6 Feb 2017 15:09:14 +0000 Subject: [PATCH 01/30] Bump govuk_frontend_toolkit to 5.0.3 According to their changelog, they're up to 5.1.1, but on npm they're only at 5.0.3. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1095e018..8ffb38bb 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dependencies": { "gulp": "3.8.7", "gulp-jasmine-phantom": "2.0.1", - "govuk_frontend_toolkit": "4.18.1" + "govuk_frontend_toolkit": "5.0.3" }, "scripts": { "copy": "./node_modules/gulp/bin/gulp.js copy", From 6a89a7d8e1fe5707de6bf8860bc9534db158ac03 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Tue, 7 Feb 2017 14:17:52 +0000 Subject: [PATCH 02/30] Remove external-link styles This has been removed from the govuk_frontend_toolkit so it was breaking our imports. Just going to remove them entirely. Removing external links in the govuk_frontend_toolkit: https://github.com/alphagov/govuk_frontend_toolkit/pull/293 --- pages_builder/assets/scss/index.scss | 5 ----- toolkit/scss/forms/_summary.scss | 5 ----- 2 files changed, 10 deletions(-) diff --git a/pages_builder/assets/scss/index.scss b/pages_builder/assets/scss/index.scss index d527b87d..f3b3f5d5 100644 --- a/pages_builder/assets/scss/index.scss +++ b/pages_builder/assets/scss/index.scss @@ -138,11 +138,6 @@ a.version-link { } - a[rel~="external"] { - @include external-link-default; - @include external-link-16; - } - .index-list { @include core-19; diff --git a/toolkit/scss/forms/_summary.scss b/toolkit/scss/forms/_summary.scss index 117c672b..f9006b67 100644 --- a/toolkit/scss/forms/_summary.scss +++ b/toolkit/scss/forms/_summary.scss @@ -190,11 +190,6 @@ table.summary-item-body-no-bottom-border-row-bold-borders-text-large { margin-bottom: 5px; } } - - a[rel~="external"] { - @include external-link-default; - @include external-link-16; - } } %summary-item-field-no-padding, From 633f65615a86dc9da2eb3d86aaf4181f26e9d394 Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Tue, 7 Feb 2017 14:18:02 +0000 Subject: [PATCH 03/30] Add `noopener noreferrer` to external-link macro Apparently, _blank links are the most underestimated vulnerability ever. Source: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/ I'm not convinced, but, as @tombye pointed out, we don't lose anything. Adding them where external links have a target="_blank" *** Also worth mentioning that even though I've removed all of the external-link styles from the toolkit, our frontend apps (at this point, supplier and admin) are using the external-link template and so rely on its markup. Probably worth removing the surrounding div eventually (maybe removing the pattern altogether) but not now. --- toolkit/templates/external-link.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/toolkit/templates/external-link.html b/toolkit/templates/external-link.html index e3825625..bd71b5d7 100644 --- a/toolkit/templates/external-link.html +++ b/toolkit/templates/external-link.html @@ -1,3 +1,7 @@ From 21e3d6bad3f04175c13dab3f2f148fafdd223c2d Mon Sep 17 00:00:00 2001 From: Paul Craig Date: Mon, 6 Feb 2017 15:11:44 +0000 Subject: [PATCH 04/30] 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 | 138 ++++++++++++++---- .../templates/forms/selection-buttons.html | 8 +- 3 files changed, 114 insertions(+), 37 deletions(-) diff --git a/pages_builder/assets/javascripts/onready.js b/pages_builder/assets/javascripts/onready.js index c7fe381d..7a1fa552 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('.selection-button input'); } if (GOVUK.CheckboxFilter) { diff --git a/toolkit/scss/forms/_selection-buttons.scss b/toolkit/scss/forms/_selection-buttons.scss index fe1427b5..badf79bc 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,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 diff --git a/toolkit/templates/forms/selection-buttons.html b/toolkit/templates/forms/selection-buttons.html index 54b5fdbe..35c54129 100644 --- a/toolkit/templates/forms/selection-buttons.html +++ b/toolkit/templates/forms/selection-buttons.html @@ -10,7 +10,7 @@ {% elif message %}
{% endif %} -
+
{% if question_number %} @@ -46,7 +46,7 @@ {% endif %} {% if type == "boolean" %} -