From f69cf3331414285ae18a7d6dfe8edb652cf957fc Mon Sep 17 00:00:00 2001 From: Dave House Date: Wed, 5 Dec 2018 15:20:02 +0000 Subject: [PATCH 01/23] Add styles for small checkboxes --- src/components/checkboxes/_checkboxes.scss | 50 ++++++++- src/components/checkboxes/checkboxes.yaml | 119 +++++++++++++++++++++ 2 files changed, 165 insertions(+), 4 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 22e19391a6..1b666ccc85 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -9,6 +9,7 @@ @include govuk-exports("govuk/component/checkboxes") { $govuk-checkboxes-size: govuk-spacing(7); + $govuk-small-checkboxes-size: 24px; $govuk-checkboxes-label-padding-left-right: govuk-spacing(3); .govuk-checkboxes__item { @@ -34,11 +35,11 @@ position: absolute; z-index: 1; - top: 0; - left: 0; + top: -2px; + left: -2px; - width: $govuk-checkboxes-size; - height: $govuk-checkboxes-size; + width: $govuk-checkboxes-size + 4px; + height: $govuk-checkboxes-size + 4px; cursor: pointer; @@ -154,4 +155,45 @@ margin-bottom: 0; } } + + .govuk-checkboxes--small { + .govuk-checkboxes__item { + min-height: 0; + margin-bottom: govuk-spacing(1); + padding-left: 35px; + } + + .govuk-checkboxes__input { + left: -9px; + } + + .govuk-checkboxes__label { + display: block; + margin-top: -2px; + padding: 13px govuk-spacing(3) 8px 0; + + @include govuk-media-query($from: tablet) { + padding: 11px govuk-spacing(3) 8px 0; + } + } + + .govuk-checkboxes__label::before { + top: 8px; + left: 0; + width: $govuk-small-checkboxes-size; + height: $govuk-small-checkboxes-size; + } + + .govuk-checkboxes__label::after { + top: 15px; + left: 6px; + width: 9px; + height: 3.5px; + border-width: 0 0 3px 3px; + } + + .govuk-checkboxes__item:hover > .govuk-checkboxes__label { + text-decoration: underline; + } + } } diff --git a/src/components/checkboxes/checkboxes.yaml b/src/components/checkboxes/checkboxes.yaml index f49b3918db..a3f9bf7e30 100644 --- a/src/components/checkboxes/checkboxes.yaml +++ b/src/components/checkboxes/checkboxes.yaml @@ -421,3 +421,122 @@ examples: html: | + +- name: small + data: + idPrefix: nationality + name: nationality + classes: govuk-checkboxes--small + fieldset: + legend: + text: Filter by + items: + - value: a + text: a thing + - value: b + text: another thing + - value: c + text: this thing + +- name: small with long text + data: + idPrefix: nationality + name: nationality + classes: govuk-checkboxes--small + fieldset: + legend: + text: Filter by + items: + - value: nullam + text: + Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo + quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida + at eget metus. + - value: aenean + text: + Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis + vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, + nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam + venenatis vestibulum. Cras mattis consectetur purus sit amet + fermentum. + - value: fusce + text: + Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum + nibh, ut fermentum massa justo sit amet risus. Etiam porta sem + malesuada magna mollis euismod. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Etiam porta sem malesuada magna + mollis euismod. Etiam porta sem malesuada magna mollis euismod. + Donec sed odio dui. Sed posuere consectetur est at lobortis. + +- name: small with error + data: + idPrefix: nationality + name: nationality + classes: govuk-checkboxes--small + errorMessage: + text: "Select a thing" + fieldset: + legend: + text: Filter by + items: + - value: a + text: a thing + - value: b + text: another thing + - value: c + text: this thing + +- name: small with hint + data: + idPrefix: nationality + name: nationality + classes: govuk-checkboxes--small + fieldset: + legend: + text: Filter by + items: + - value: a + text: a thing + hint: + text: hint for a thing + - value: b + text: another thing + - value: c + text: this thing + +- name: small with disabled + data: + idPrefix: nationality + name: nationality + classes: govuk-checkboxes--small + fieldset: + legend: + text: Filter by + items: + - value: a + text: a thing + - value: b + text: another thing + - value: c + text: this thing + disabled: true + +- name: small with conditional reveal + data: + idPrefix: how-contacted + classes: govuk-checkboxes--small + fieldset: + legend: + text: How do you want to be contacted? + items: + - value: a + text: a thing + conditional: + html: | + + + - value: b + text: another thing From 2dfb39be50a57325f88d1e6c41384311baa96ac1 Mon Sep 17 00:00:00 2001 From: David House Date: Tue, 11 Dec 2018 10:58:35 +0000 Subject: [PATCH 02/23] Change hover to box shadow, update hover and focus combination --- src/components/checkboxes/_checkboxes.scss | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 1b666ccc85..240220a01a 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -170,10 +170,10 @@ .govuk-checkboxes__label { display: block; margin-top: -2px; - padding: 13px govuk-spacing(3) 8px 0; + padding: 11px govuk-spacing(3) 9px 0; @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 8px 0; + padding: 9px govuk-spacing(3) 6px 0; } } @@ -192,8 +192,16 @@ border-width: 0 0 3px 3px; } - .govuk-checkboxes__item:hover > .govuk-checkboxes__label { - text-decoration: underline; - } + .govuk-checkboxes__input + .govuk-checkboxes__label::after { + border-width: 0 0 3px 3px; + } + + .govuk-checkboxes__item:hover > .govuk-checkboxes__label::before { + box-shadow: 0 0 0 10px govuk-colour("grey-3"); + } + + .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, 0 0 0 10px govuk-colour("grey-3"); + } } } From e493f45f8b61bf53a6708340a6e8775df133aa4a Mon Sep 17 00:00:00 2001 From: Dave House Date: Thu, 10 Jan 2019 15:46:35 +0000 Subject: [PATCH 03/23] Add styles for small radios --- src/components/radios/_radios.scss | 49 ++++++++++++++++++++++++++++++ src/components/radios/radios.yaml | 17 +++++++++++ 2 files changed, 66 insertions(+) diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index ca8f03e867..77f1c1f86b 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -9,6 +9,7 @@ @include govuk-exports("govuk/component/radios") { $govuk-radios-size: govuk-spacing(7); + $govuk-small-radios-size: 24px; $govuk-radios-label-padding-left-right: govuk-spacing(3); // When the default focus width is used on a curved edge it looks visually smaller. // So for the circular radios we bump the default to make it look visually consistent. @@ -184,4 +185,52 @@ margin-bottom: 0; } } + + .govuk-radios--small .govuk-radios__input { + left: -9px; + } + + .govuk-radios--small .govuk-radios__input + .govuk-radios__label::before { + top: 8px; + left: 0; + width: $govuk-small-radios-size; + height: $govuk-small-radios-size; + } + + .govuk-radios--small .govuk-radios__input + .govuk-radios__label::after { + top: 14px; + left: 6px; + width: 9px; + height: 3.5px; + } + + .govuk-radios--small .govuk-radios__label { + display: block; + margin-top: -2px; + padding: 11px govuk-spacing(3) 9px 0; + + @include govuk-media-query($from: tablet) { + padding: 9px govuk-spacing(3) 6px 0; + } + + } + + .govuk-radios--small .govuk-radios__item { + min-height: 0; + padding-left: 35px; + } + + .govuk-radios--small .govuk-radios__input + .govuk-radios__label::after { + width: 10px; + height: 10px; + border-width: 1px; + } + + .govuk-radios--small .govuk-radios__item:hover > .govuk-radios__label::before { + box-shadow: 0 0 0 10px govuk-colour("grey-3"); + } + + .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, 0 0 0 10px govuk-colour("grey-3"); + } } diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml index 53e9cf21d8..65188f7321 100644 --- a/src/components/radios/radios.yaml +++ b/src/components/radios/radios.yaml @@ -417,3 +417,20 @@ examples: html: | + +- name: small + data: + idPrefix: 'how-contacted-2' + name: 'how-contacted-2' + formGroup: + classes: 'govuk-radios--small' + fieldset: + legend: + text: How do you want to be contacted? + items: + - value: email + text: Email + - value: phone + text: Phone + - value: text + text: Text message From 334c220152221c56aa3f326f1dbc89ddadcb920c Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 5 Feb 2019 15:50:59 +0000 Subject: [PATCH 04/23] Update to use float --- src/components/checkboxes/_checkboxes.scss | 2 +- src/components/radios/_radios.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 240220a01a..7d510cb88b 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -168,9 +168,9 @@ } .govuk-checkboxes__label { - display: block; margin-top: -2px; padding: 11px govuk-spacing(3) 9px 0; + float: left; @include govuk-media-query($from: tablet) { padding: 9px govuk-spacing(3) 6px 0; diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 77f1c1f86b..8411c961b0 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -205,9 +205,9 @@ } .govuk-radios--small .govuk-radios__label { - display: block; margin-top: -2px; padding: 11px govuk-spacing(3) 9px 0; + float: left; @include govuk-media-query($from: tablet) { padding: 9px govuk-spacing(3) 6px 0; From 5362d16d7c6f61f5ec716cfa573f208bcd3f55ad Mon Sep 17 00:00:00 2001 From: Dave House Date: Thu, 7 Feb 2019 09:20:21 +0000 Subject: [PATCH 05/23] Adjust spacing for NTA --- src/components/checkboxes/_checkboxes.scss | 4 ++-- src/components/radios/_radios.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 7d510cb88b..80e4f065fa 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -169,11 +169,11 @@ .govuk-checkboxes__label { margin-top: -2px; - padding: 11px govuk-spacing(3) 9px 0; + padding: 13px govuk-spacing(3) 9px 0; float: left; @include govuk-media-query($from: tablet) { - padding: 9px govuk-spacing(3) 6px 0; + padding: 11px govuk-spacing(3) 7px 0; } } diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 8411c961b0..3f5bf0c856 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -206,11 +206,11 @@ .govuk-radios--small .govuk-radios__label { margin-top: -2px; - padding: 11px govuk-spacing(3) 9px 0; + padding: 13px govuk-spacing(3) 9px 0; float: left; @include govuk-media-query($from: tablet) { - padding: 9px govuk-spacing(3) 6px 0; + padding: 11px govuk-spacing(3) 7px 0; } } From e625f0e9a89a55321e4428a278aad60d158cc0a1 Mon Sep 17 00:00:00 2001 From: Dave House Date: Wed, 13 Feb 2019 13:17:53 +0000 Subject: [PATCH 06/23] Update spacing to stop overlap --- src/components/radios/_radios.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 3f5bf0c856..ee8461d393 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -206,11 +206,11 @@ .govuk-radios--small .govuk-radios__label { margin-top: -2px; - padding: 13px govuk-spacing(3) 9px 0; + padding: 13px govuk-spacing(3) 13px 0; float: left; @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 7px 0; + padding: 11px govuk-spacing(3) 10px 0; } } From d12d026af32a7697fb41ff6041c76e784999753b Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 7 Mar 2019 09:58:29 +0000 Subject: [PATCH 07/23] Document small checkboxes --- src/components/checkboxes/_checkboxes.scss | 68 +++++++++++++++++----- src/settings/_colours-applied.scss | 8 +++ src/settings/_measurements.scss | 7 +++ 3 files changed, 69 insertions(+), 14 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 80e4f065fa..db2f47265d 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -8,7 +8,9 @@ @import "../label/label"; @include govuk-exports("govuk/component/checkboxes") { - $govuk-checkboxes-size: govuk-spacing(7); + + $govuk-touch-target-size: 44px; + $govuk-checkboxes-size: 40px; $govuk-small-checkboxes-size: 24px; $govuk-checkboxes-label-padding-left-right: govuk-spacing(3); @@ -156,17 +158,40 @@ } } + // ========================================================= + // Small checkboxes + // ========================================================= + .govuk-checkboxes--small { + + $input-size-with-borders: $govuk-small-checkboxes-size + ($govuk-border-width-form-element * 2); + $offset: ($govuk-touch-target-size - $input-size-with-borders) / 2; + .govuk-checkboxes__item { + @include govuk-clearfix; min-height: 0; - margin-bottom: govuk-spacing(1); + margin-bottom: 0; padding-left: 35px; } + // Shift the touch target into the left margin so that the visible edge of + // the control is aligned + // + // ┆What colours do you like? + // ┌┆───┐ + // │┆[] │ Purple + // └┆▲──┘ + // ▲┆└─ Check box pseudo element, aligned with margin + // └─── Touch target (invisible input), shifted into the margin .govuk-checkboxes__input { - left: -9px; + left: $offset * -1; } + // Adjust the size and position of the label. + // + // Unlike larger checkboxes, we also have to float the label in order to + // 'shrink' it, preventing the hover state from kicking in across the full + // width of the parent element. .govuk-checkboxes__label { margin-top: -2px; padding: 13px govuk-spacing(3) 9px 0; @@ -177,13 +202,19 @@ } } + // [ ] Check box + // + // Reduce the size of the check box [1], vertically center it within the + // touch target [2] .govuk-checkboxes__label::before { - top: 8px; - left: 0; - width: $govuk-small-checkboxes-size; - height: $govuk-small-checkboxes-size; + top: $offset; // 2 + width: $govuk-small-checkboxes-size; // 1 + height: $govuk-small-checkboxes-size; // 1 } + // ✔ Check mark + // + // Reduce the size of the check mark and re-align within the checkbox .govuk-checkboxes__label::after { top: 15px; left: 6px; @@ -192,16 +223,25 @@ border-width: 0 0 3px 3px; } - .govuk-checkboxes__input + .govuk-checkboxes__label::after { - border-width: 0 0 3px 3px; - } - - .govuk-checkboxes__item:hover > .govuk-checkboxes__label::before { - box-shadow: 0 0 0 10px govuk-colour("grey-3"); + // Hover state for small checkbox. + // + // We use a hover state for small checkboxes because the touch target size + // is so much larger than their visible size, and so we need to provide + // feedback to the user as to which checkbox they will select when their + // cursor is outside of the visible area. + .govuk-checkboxes__item:hover .govuk-checkboxes__label::before { + box-shadow: 0 0 0 $govuk-hover-width $govuk-input-hover-colour; } + // Because we've overridden the border-shadow provided by the focus state, + // we need to redefine that too. + // + // We use two box shadows, one that restores the original focus state [1] + // and another that then applies the hover state [2]. .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, 0 0 0 10px govuk-colour("grey-3"); + // sass-lint:disable indentation + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // [1] + 0 0 0 $govuk-hover-width $govuk-input-hover-colour; // [2] } } } diff --git a/src/settings/_colours-applied.scss b/src/settings/_colours-applied.scss index a08c168445..1140cf109d 100644 --- a/src/settings/_colours-applied.scss +++ b/src/settings/_colours-applied.scss @@ -105,6 +105,14 @@ $govuk-border-colour: govuk-colour("grey-2") !default; $govuk-input-border-colour: govuk-colour("black") !default; +/// Input border colour +/// +/// Used for hover states on form controls +/// +/// @type Colour +/// @access public + +$govuk-input-hover-colour: govuk-colour("grey-3") !default; // ============================================================================= diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss index 5332711147..8f477c06fc 100644 --- a/src/settings/_measurements.scss +++ b/src/settings/_measurements.scss @@ -97,3 +97,10 @@ $govuk-border-width-form-group-error: $govuk-border-width !default; /// @access public $govuk-focus-width: 3px !default; + +/// Hover width for form controls with a hover state +/// +/// @type Number +/// @access public + +$govuk-input-hover-width: 10px !default; From 7c83d7c06f6f9216071bff34633f6323f67ce41d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 7 Mar 2019 11:58:21 +0000 Subject: [PATCH 08/23] Simplify variable names --- src/components/checkboxes/_checkboxes.scss | 6 +++--- src/settings/_colours-applied.scss | 4 ++-- src/settings/_measurements.scss | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index db2f47265d..f6c62dc2d4 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -229,8 +229,8 @@ // is so much larger than their visible size, and so we need to provide // feedback to the user as to which checkbox they will select when their // cursor is outside of the visible area. - .govuk-checkboxes__item:hover .govuk-checkboxes__label::before { - box-shadow: 0 0 0 $govuk-hover-width $govuk-input-hover-colour; + .govuk-checkboxes__item:not(:disabled):hover .govuk-checkboxes__label::before { + box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; } // Because we've overridden the border-shadow provided by the focus state, @@ -241,7 +241,7 @@ .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { // sass-lint:disable indentation box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // [1] - 0 0 0 $govuk-hover-width $govuk-input-hover-colour; // [2] + 0 0 0 $govuk-hover-width $govuk-hover-colour; // [2] } } } diff --git a/src/settings/_colours-applied.scss b/src/settings/_colours-applied.scss index 1140cf109d..e09ea81c9b 100644 --- a/src/settings/_colours-applied.scss +++ b/src/settings/_colours-applied.scss @@ -105,14 +105,14 @@ $govuk-border-colour: govuk-colour("grey-2") !default; $govuk-input-border-colour: govuk-colour("black") !default; -/// Input border colour +/// Input hover colour /// /// Used for hover states on form controls /// /// @type Colour /// @access public -$govuk-input-hover-colour: govuk-colour("grey-3") !default; +$govuk-hover-colour: govuk-colour("grey-3") !default; // ============================================================================= diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss index 8f477c06fc..bd2ac483aa 100644 --- a/src/settings/_measurements.scss +++ b/src/settings/_measurements.scss @@ -103,4 +103,4 @@ $govuk-focus-width: 3px !default; /// @type Number /// @access public -$govuk-input-hover-width: 10px !default; +$govuk-hover-width: 10px !default; From 5620742b8de61e5b448e970ed3373990b2de9103 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 7 Mar 2019 14:42:58 +0000 Subject: [PATCH 09/23] Disable hover state when checkbox is disabled --- src/components/checkboxes/_checkboxes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index f6c62dc2d4..49c2a0c9b3 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -229,7 +229,7 @@ // is so much larger than their visible size, and so we need to provide // feedback to the user as to which checkbox they will select when their // cursor is outside of the visible area. - .govuk-checkboxes__item:not(:disabled):hover .govuk-checkboxes__label::before { + .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; } From d16c286904380411cd33a29755628589746f5871 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 7 Mar 2019 14:47:37 +0000 Subject: [PATCH 10/23] Fix hint with small checkboxes --- src/components/checkboxes/_checkboxes.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 49c2a0c9b3..58b7551237 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -223,6 +223,21 @@ border-width: 0 0 3px 3px; } + // Fix position of hint with small checkboxes + // + // Do not use hints with small checkboxes – because they're within the input + // wrapper they trigger the hover state, but clicking them doesn't actually + // activate the control. + // + // (But if you do use them – which you probably will 😩 – they won't look + // completely broken) + // + // (Seriously don't use them though ✋) + .govuk-checkboxes__hint { + padding: 0; + clear: both; + } + // Hover state for small checkbox. // // We use a hover state for small checkboxes because the touch target size From 746f73f5db13ab2454517faeab65d5287bde492f Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 7 Mar 2019 15:01:21 +0000 Subject: [PATCH 11/23] Fix conditional reveals with checkboxes --- src/components/checkboxes/_checkboxes.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 58b7551237..cb02c8c137 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -165,13 +165,15 @@ .govuk-checkboxes--small { $input-size-with-borders: $govuk-small-checkboxes-size + ($govuk-border-width-form-element * 2); - $offset: ($govuk-touch-target-size - $input-size-with-borders) / 2; + $input-offset: ($govuk-touch-target-size - $input-size-with-borders) / 2; + + $label-offset: $input-size-with-borders + $input-offset; .govuk-checkboxes__item { @include govuk-clearfix; min-height: 0; margin-bottom: 0; - padding-left: 35px; + padding-left: $label-offset; } // Shift the touch target into the left margin so that the visible edge of @@ -184,7 +186,7 @@ // ▲┆└─ Check box pseudo element, aligned with margin // └─── Touch target (invisible input), shifted into the margin .govuk-checkboxes__input { - left: $offset * -1; + left: $input-offset * -1; } // Adjust the size and position of the label. @@ -207,7 +209,7 @@ // Reduce the size of the check box [1], vertically center it within the // touch target [2] .govuk-checkboxes__label::before { - top: $offset; // 2 + top: $input-offset; // 2 width: $govuk-small-checkboxes-size; // 1 height: $govuk-small-checkboxes-size; // 1 } @@ -238,6 +240,13 @@ clear: both; } + // Align conditional reveals with small checkboxes + .govuk-checkboxes__conditional { + $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2); + margin-left: $margin-left; + padding-left: $label-offset - ($margin-left + $conditional-border-width); + } + // Hover state for small checkbox. // // We use a hover state for small checkboxes because the touch target size From ce82a150978bc25077868ff6f75c07c4fedb3eac Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 2 Apr 2019 12:54:21 +0100 Subject: [PATCH 12/23] Port checkbox fixes to radios, refactoring - Nest small radios selectors and re-order - Improve documentation - Fix display of hints - Fix alignment of conditional reveals - Disable hover on disabled radios - General tidy up --- src/components/checkboxes/_checkboxes.scss | 60 ++++---- src/components/radios/_radios.scss | 168 +++++++++++++++------ 2 files changed, 152 insertions(+), 76 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index cb02c8c137..87e59ec9c9 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -23,7 +23,7 @@ min-height: $govuk-checkboxes-size; margin-bottom: govuk-spacing(2); - padding: 0 0 0 $govuk-checkboxes-size; + padding-left: $govuk-checkboxes-size; clear: left; } @@ -34,18 +34,21 @@ } .govuk-checkboxes__input { + $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2; + position: absolute; z-index: 1; - top: -2px; - left: -2px; + top: $input-offset * -1; + left: $input-offset * -1; - width: $govuk-checkboxes-size + 4px; - height: $govuk-checkboxes-size + 4px; + width: $govuk-touch-target-size; + height: $govuk-touch-target-size; cursor: pointer; - // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. + // IE8 doesn’t support pseudo-elements, so we don’t want to hide native + // elements there. @include govuk-not-ie8 { margin: 0; opacity: 0; @@ -69,13 +72,8 @@ touch-action: manipulation; } - .govuk-checkboxes__hint { - display: block; - padding-right: $govuk-checkboxes-label-padding-left-right; - padding-left: $govuk-checkboxes-label-padding-left-right; - } - - .govuk-checkboxes__input + .govuk-checkboxes__label::before { + // [ ] Check box + .govuk-checkboxes__label::before { content: ""; box-sizing: border-box; position: absolute; @@ -85,11 +83,13 @@ height: $govuk-checkboxes-size; border: $govuk-border-width-form-element solid currentColor; background: transparent; - - // padding-bottom: 1px; } - .govuk-checkboxes__input + .govuk-checkboxes__label::after { + // ✔ Check mark + // + // The check mark is a box with a border on the left and bottom side (└──), + // rotated 45 degrees + .govuk-checkboxes__label::after { content: ""; position: absolute; @@ -110,10 +110,16 @@ background: transparent; } + .govuk-checkboxes__hint { + display: block; + padding-right: $govuk-checkboxes-label-padding-left-right; + padding-left: $govuk-checkboxes-label-padding-left-right; + } + // Focused state .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - // Since box-shadows are removed when users customise their colours - // We set a transparent outline that is shown instead. + // Since box-shadows are removed when users customise their colours, we set + // a transparent outline that is shown instead. // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ outline: $govuk-focus-width solid transparent; outline-offset: $govuk-focus-width; @@ -135,6 +141,10 @@ opacity: .5; } + // ========================================================= + // Conditional reveals + // ========================================================= + $conditional-border-width: $govuk-border-width-mobile; // Calculate the amount of padding needed to keep the border centered against the checkbox. $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2); @@ -164,16 +174,15 @@ .govuk-checkboxes--small { - $input-size-with-borders: $govuk-small-checkboxes-size + ($govuk-border-width-form-element * 2); - $input-offset: ($govuk-touch-target-size - $input-size-with-borders) / 2; - - $label-offset: $input-size-with-borders + $input-offset; + $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2; + $label-offset: $govuk-touch-target-size - $input-offset; .govuk-checkboxes__item { @include govuk-clearfix; min-height: 0; margin-bottom: 0; padding-left: $label-offset; + float: left; } // Shift the touch target into the left margin so that the visible edge of @@ -231,10 +240,8 @@ // wrapper they trigger the hover state, but clicking them doesn't actually // activate the control. // - // (But if you do use them – which you probably will 😩 – they won't look - // completely broken) - // - // (Seriously don't use them though ✋) + // (If you do use them, they won't look completely broken... but seriously, + // don't use them) .govuk-checkboxes__hint { padding: 0; clear: both; @@ -245,6 +252,7 @@ $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2); margin-left: $margin-left; padding-left: $label-offset - ($margin-left + $conditional-border-width); + clear: both; } // Hover state for small checkbox. diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index ee8461d393..62c3f26a32 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -19,13 +19,12 @@ @include govuk-font($size: 19); display: block; - position: relative; min-height: $govuk-radios-size; margin-bottom: govuk-spacing(2); - padding: 0 0 0 $govuk-radios-size; + padding-left: $govuk-radios-size; clear: left; } @@ -47,7 +46,8 @@ cursor: pointer; - // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8. + // IE8 doesn’t support pseudo-elements, so we don’t want to hide native + // elements there. @include govuk-not-ie8 { margin: 0; opacity: 0; @@ -71,13 +71,8 @@ touch-action: manipulation; } - .govuk-radios__hint { - display: block; - padding-right: $govuk-radios-label-padding-left-right; - padding-left: $govuk-radios-label-padding-left-right; - } - - .govuk-radios__input + .govuk-radios__label::before { + // ( ) Radio ring + .govuk-radios__label::before { content: ""; box-sizing: border-box; position: absolute; @@ -92,7 +87,8 @@ background: transparent; } - .govuk-radios__input + .govuk-radios__label::after { + // • Radio button + .govuk-radios__label::after { content: ""; position: absolute; @@ -108,10 +104,16 @@ background: currentColor; } + .govuk-radios__hint { + display: block; + padding-right: $govuk-radios-label-padding-left-right; + padding-left: $govuk-radios-label-padding-left-right; + } + // Focused state .govuk-radios__input:focus + .govuk-radios__label::before { - // Since box-shadows are removed when users customise their colours - // We set a transparent outline that is shown instead. + // Since box-shadows are removed when users customise their colours we set a + // transparent outline that is shown instead. // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ outline: $govuk-focus-width solid transparent; outline-offset: $govuk-focus-width; @@ -133,7 +135,10 @@ opacity: .5; } - // Inline variant + // ========================================================= + // Inline radios + // ========================================================= + .govuk-radios--inline { @include mq ($from: tablet) { @include govuk-clearfix; @@ -154,6 +159,10 @@ } } + // ========================================================= + // Dividers ('or') + // ========================================================= + .govuk-radios__divider { $govuk-divider-size: $govuk-radios-size !default; @include govuk-font($size: 19); @@ -186,51 +195,110 @@ } } - .govuk-radios--small .govuk-radios__input { - left: -9px; - } + .govuk-radios--small { - .govuk-radios--small .govuk-radios__input + .govuk-radios__label::before { - top: 8px; - left: 0; - width: $govuk-small-radios-size; - height: $govuk-small-radios-size; - } + $input-size-with-borders: $govuk-small-radios-size + ($govuk-border-width-form-element * 2); + $input-offset: ($govuk-touch-target-size - $input-size-with-borders) / 2; - .govuk-radios--small .govuk-radios__input + .govuk-radios__label::after { - top: 14px; - left: 6px; - width: 9px; - height: 3.5px; - } + $label-offset: $input-size-with-borders + $input-offset; - .govuk-radios--small .govuk-radios__label { - margin-top: -2px; - padding: 13px govuk-spacing(3) 13px 0; - float: left; + .govuk-radios__item { + @include govuk-clearfix; + min-height: 0; + margin-bottom: 0; + padding-left: $label-offset; + float: left; + } - @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 10px 0; + // Shift the touch target into the left margin so that the visible edge of + // the control is aligned + // + // ┆Which colour is your favourite? + // ┌┆───┐ + // │┆() │ Purple + // └┆▲──┘ + // ▲┆└─ Radio pseudo element, aligned with margin + // └─── Touch target (invisible input), shifted into the margin + .govuk-radios__input { + left: $input-offset * -1; } - } + // Adjust the size and position of the label. + // + // Unlike larger radios, we also have to float the label in order to + // 'shrink' it, preventing the hover state from kicking in across the full + // width of the parent element. + .govuk-radios__label { + margin-top: -2px; + padding: 13px govuk-spacing(3) 13px 0; + float: left; + + @include govuk-media-query($from: tablet) { + padding: 11px govuk-spacing(3) 10px 0; + } + } - .govuk-radios--small .govuk-radios__item { - min-height: 0; - padding-left: 35px; - } + // ( ) Radio ring + // + // Reduce the size of the control [1], vertically centering it within the + // touch target [2] + .govuk-radios__label::before { + top: $input-offset; // 2 + width: $govuk-small-radios-size; // 1 + height: $govuk-small-radios-size; // 1 + } - .govuk-radios--small .govuk-radios__input + .govuk-radios__label::after { - width: 10px; - height: 10px; - border-width: 1px; - } + // • Radio button + // + // Reduce the size of the 'button' and center it within the ring + .govuk-radios__label::after { + top: 14px; + left: 6px; + width: 10px; + height: 10px; + border-width: 1px; + } - .govuk-radios--small .govuk-radios__item:hover > .govuk-radios__label::before { - box-shadow: 0 0 0 10px govuk-colour("grey-3"); - } + // Fix position of hint with small radios + // + // Do not use hints with small radios – because they're within the input + // wrapper they trigger the hover state, but clicking them doesn't actually + // activate the control. + // + // (If you do use them, they won't look completely broken... but seriously, + // don't use them) + .govuk-radios__hint { + padding: 0; + clear: both; + } - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, 0 0 0 10px govuk-colour("grey-3"); + // Align conditional reveals with small radios + .govuk-radios__conditional { + $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2); + margin-left: $margin-left; + padding-left: $label-offset - ($margin-left + $conditional-border-width); + clear: both; + } + + // Hover state for small radios. + // + // We use a hover state for small radios because the touch target size + // is so much larger than their visible size, and so we need to provide + // feedback to the user as to which radio they will select when their + // cursor is outside of the visible area. + .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { + box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; + } + + // Because we've overridden the border-shadow provided by the focus state, + // we need to redefine that too. + // + // We use two box shadows, one that restores the original focus state [1] + // and another that then applies the hover state [2]. + .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { + // sass-lint:disable indentation + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, + 0 0 0 $govuk-hover-width $govuk-hover-colour; // [2] + } } } From 3cfb4c0bf4c851506e0c32c288304c01f2059382 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 2 Apr 2019 12:52:48 +0100 Subject: [PATCH 13/23] Add radios examples --- src/components/radios/radios.yaml | 156 ++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml index 65188f7321..d08612e3d0 100644 --- a/src/components/radios/radios.yaml +++ b/src/components/radios/radios.yaml @@ -434,3 +434,159 @@ examples: text: Phone - value: text text: Text message + +- name: small with long text + data: + idPrefix: foo + name: foo + classes: govuk-radios--small + fieldset: + legend: + text: Venenatis Condimentum + items: + - value: nullam + text: + Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo + quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida + at eget metus. + - value: aenean + text: + Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis + vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, + nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam + venenatis vestibulum. Cras mattis consectetur purus sit amet + fermentum. + - value: fusce + text: + Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum + nibh, ut fermentum massa justo sit amet risus. Etiam porta sem + malesuada magna mollis euismod. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Etiam porta sem malesuada magna + mollis euismod. Etiam porta sem malesuada magna mollis euismod. + Donec sed odio dui. Sed posuere consectetur est at lobortis. + +- name: small with error + data: + idPrefix: 'how-contacted-2' + name: 'how-contacted-2' + formGroup: + classes: 'govuk-radios--small' + fieldset: + legend: + text: How do you want to be contacted? + errorMessage: + text: "Select a thing" + items: + - value: email + text: Email + - value: phone + text: Phone + - value: text + text: Text message + +- name: small with hint + data: + idPrefix: 'how-contacted-2' + name: 'how-contacted-2' + formGroup: + classes: 'govuk-radios--small' + fieldset: + legend: + text: How do you want to be contacted? + items: + - value: email + text: Email + hint: + text: Hint for email address + - value: phone + text: Phone + - value: text + text: Text message + +- name: small with disabled + data: + idPrefix: 'how-contacted-2' + name: 'how-contacted-2' + formGroup: + classes: 'govuk-radios--small' + fieldset: + legend: + text: How do you want to be contacted? + items: + - value: email + text: Email + - value: phone + text: Phone + - value: text + text: Text message + disabled: true + +- name: small with conditional reveal + data: + idPrefix: 'how-contacted-2' + name: 'how-contacted-2' + formGroup: + classes: 'govuk-radios--small' + fieldset: + legend: + text: How do you want to be contacted? + items: + - value: email + text: Email + conditional: + html: | + + + - value: phone + text: Phone + - value: text + text: Text message + +- name: small inline + data: + idPrefix: sort + classes: govuk-radios--small govuk-radios--inline + name: example + fieldset: + legend: + text: Sort by + items: + - value: relevance + text: relevance + - value: title + text: title + - value: created + text: created + +- name: small inline extreme + data: + idPrefix: sort + classes: govuk-radios--small govuk-radios--inline + name: example + fieldset: + legend: + text: Sort by + items: + - value: relevance + text: relevance + - value: title + text: title + - value: created + text: created + - value: modified + text: modified + - value: category + text: category + - value: votes + text: votes + - value: flavour + text: flavour + - value: hue + text: hue + - value: happiness + text: happiness + - value: funkiness + text: funkiness From f0a9dffba04c312d0e58c50dd0de4dc106ff1b4e Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 12 Mar 2019 11:44:30 +0000 Subject: [PATCH 14/23] Bump radio inputs to 44 x 44px --- src/components/radios/_radios.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 62c3f26a32..20ce347eb5 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -8,7 +8,9 @@ @import "../label/label"; @include govuk-exports("govuk/component/radios") { - $govuk-radios-size: govuk-spacing(7); + + $govuk-touch-target-size: 44px; + $govuk-radios-size: 40px; $govuk-small-radios-size: 24px; $govuk-radios-label-padding-left-right: govuk-spacing(3); // When the default focus width is used on a curved edge it looks visually smaller. @@ -35,14 +37,16 @@ } .govuk-radios__input { + $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2; + position: absolute; z-index: 1; - top: 0; - left: 0; + top: $input-offset * -1; + left: $input-offset * -1; - width: $govuk-radios-size; - height: $govuk-radios-size; + width: $govuk-touch-target-size; + height: $govuk-touch-target-size; cursor: pointer; From 777de0d7392180ad28070eae770f0a8fa6479317 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 12 Mar 2019 13:43:10 +0000 Subject: [PATCH 15/23] Disable hover state on checkboxes and radios --- src/components/checkboxes/_checkboxes.scss | 22 +++++++++++++++++++--- src/components/radios/_radios.scss | 20 ++++++++++++++++++-- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 87e59ec9c9..bd1200bf07 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -255,7 +255,7 @@ clear: both; } - // Hover state for small checkbox. + // Hover state for small checkboxes. // // We use a hover state for small checkboxes because the touch target size // is so much larger than their visible size, and so we need to provide @@ -272,8 +272,24 @@ // and another that then applies the hover state [2]. .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { // sass-lint:disable indentation - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // [1] - 0 0 0 $govuk-hover-width $govuk-hover-colour; // [2] + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1 + 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 + } + + // For devices that explicitly don't support hover, don't provide a hover + // state (e.g. on touch devices like iOS). + // + // We can't use `@media (hover: hover)` because we wouldn't get the hover + // state in browsers that don't support `@media (hover)` (like Internet + // Explorer) – so we have to 'undo' the hover state instead. + @media (hover: none) { + .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { + box-shadow: initial; + } + + .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; + } } } } diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 20ce347eb5..b5ddd29472 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -301,8 +301,24 @@ // and another that then applies the hover state [2]. .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { // sass-lint:disable indentation - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, - 0 0 0 $govuk-hover-width $govuk-hover-colour; // [2] + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1 + 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 + } + + // For devices that explicitly don't support hover, don't provide a hover + // state (e.g. on touch devices like iOS). + // + // We can't use `@media (hover: hover)` because we wouldn't get the hover + // state in browsers that don't support `@media (hover)` (like Internet + // Explorer) – so we have to 'undo' the hover state instead. + @media (hover: none) { + .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { + box-shadow: initial; + } + + .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; + } } } } From 6a0bc5c916b4dd41732545390e237ba8e1079854 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 2 Apr 2019 12:47:43 +0100 Subject: [PATCH 16/23] Centre the inputs around pseudo inputs --- src/components/checkboxes/_checkboxes.scss | 6 +++--- src/components/radios/_radios.scss | 20 +++++++++++++------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index bd1200bf07..0f2e7e4e81 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -205,11 +205,11 @@ // width of the parent element. .govuk-checkboxes__label { margin-top: -2px; - padding: 13px govuk-spacing(3) 9px 0; + padding: 13px govuk-spacing(3) 13px 1px; float: left; @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 7px 0; + padding: 11px govuk-spacing(3) 10px 1px; } } @@ -218,7 +218,7 @@ // Reduce the size of the check box [1], vertically center it within the // touch target [2] .govuk-checkboxes__label::before { - top: $input-offset; // 2 + top: $input-offset - $govuk-border-width-form-element; // 2 width: $govuk-small-checkboxes-size; // 1 height: $govuk-small-checkboxes-size; // 1 } diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index b5ddd29472..141869c5c7 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -176,6 +176,10 @@ text-align: center; } + // ========================================================= + // Conditional reveals + // ========================================================= + $conditional-border-width: $govuk-border-width-mobile; // Calculate the amount of padding needed to keep the border centered against the radios. $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2); @@ -199,12 +203,14 @@ } } - .govuk-radios--small { + // ========================================================= + // Small checkboxes + // ========================================================= - $input-size-with-borders: $govuk-small-radios-size + ($govuk-border-width-form-element * 2); - $input-offset: ($govuk-touch-target-size - $input-size-with-borders) / 2; + .govuk-radios--small { - $label-offset: $input-size-with-borders + $input-offset; + $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2; + $label-offset: $govuk-touch-target-size - $input-offset; .govuk-radios__item { @include govuk-clearfix; @@ -234,11 +240,11 @@ // width of the parent element. .govuk-radios__label { margin-top: -2px; - padding: 13px govuk-spacing(3) 13px 0; + padding: 13px govuk-spacing(3) 13px 1px; float: left; @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 10px 0; + padding: 11px govuk-spacing(3) 10px 1px; } } @@ -247,7 +253,7 @@ // Reduce the size of the control [1], vertically centering it within the // touch target [2] .govuk-radios__label::before { - top: $input-offset; // 2 + top: $input-offset - $govuk-border-width-form-element; // 2 width: $govuk-small-radios-size; // 1 height: $govuk-small-radios-size; // 1 } From 384f2728ab6d90b89b2e1680d2ccec4668c1e823 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 12 Mar 2019 15:41:23 +0000 Subject: [PATCH 17/23] Remove prefixed -ms-touch-action This should be handled by autoprefixer instead. --- src/components/checkboxes/_checkboxes.scss | 1 - src/components/radios/_radios.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 0f2e7e4e81..1a41924566 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -68,7 +68,6 @@ padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1); cursor: pointer; // remove 300ms pause on mobile - -ms-touch-action: manipulation; touch-action: manipulation; } diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 141869c5c7..6526d1f713 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -71,7 +71,6 @@ padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1); cursor: pointer; // remove 300ms pause on mobile - -ms-touch-action: manipulation; touch-action: manipulation; } @@ -280,6 +279,7 @@ .govuk-radios__hint { padding: 0; clear: both; + pointer-events: none; } // Align conditional reveals with small radios From b645ac16c5c802e6a3a53125ac588166a8d20872 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 13 Mar 2019 09:17:12 +0000 Subject: [PATCH 18/23] Adjust dividers with small radios --- src/components/radios/_radios.scss | 5 +++++ src/components/radios/radios.yaml | 17 +++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 6526d1f713..dd1de905b5 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -290,6 +290,11 @@ clear: both; } + .govuk-radios__divider { + width: $govuk-small-radios-size; + margin-bottom: govuk-spacing(1); + } + // Hover state for small radios. // // We use a hover state for small radios because the touch target size diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml index d08612e3d0..f001ef2830 100644 --- a/src/components/radios/radios.yaml +++ b/src/components/radios/radios.yaml @@ -590,3 +590,20 @@ examples: text: happiness - value: funkiness text: funkiness + +- name: small with a divider + data: + idPrefix: example-small-divider + name: example + fieldset: + legend: + text: How do you want to sign in? + classes: govuk-radios--small + items: + - value: governement-gateway + text: Use Government Gateway + - value: govuk-verify + text: Use GOV.UK Verify + - divider: or + - value: create-account + text: Create an account From 19da14a327b3f43f5a4ac608a41116e9572f173f Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 13 Mar 2019 10:23:12 +0000 Subject: [PATCH 19/23] Improve IE8 rendering --- src/components/checkboxes/_checkboxes.scss | 33 ++++++++++++++-------- src/components/radios/_radios.scss | 33 ++++++++++++++-------- 2 files changed, 44 insertions(+), 22 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 1a41924566..670ba71443 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -36,26 +36,31 @@ .govuk-checkboxes__input { $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2; - position: absolute; - - z-index: 1; - top: $input-offset * -1; - left: $input-offset * -1; - - width: $govuk-touch-target-size; - height: $govuk-touch-target-size; - cursor: pointer; // IE8 doesn’t support pseudo-elements, so we don’t want to hide native // elements there. @include govuk-not-ie8 { + position: absolute; + + z-index: 1; + top: $input-offset * -1; + left: $input-offset * -1; + + width: $govuk-touch-target-size; + height: $govuk-touch-target-size; margin: 0; + opacity: 0; } - // add focus outline to input element for IE8 @include govuk-if-ie8 { + margin-top: 10px; + margin-right: $govuk-checkboxes-size / -2; + margin-left: $govuk-checkboxes-size / -2; + float: left; + + // add focus outline to input &:focus { outline: $govuk-focus-width solid $govuk-focus-colour; } @@ -194,7 +199,13 @@ // ▲┆└─ Check box pseudo element, aligned with margin // └─── Touch target (invisible input), shifted into the margin .govuk-checkboxes__input { - left: $input-offset * -1; + @include govuk-not-ie8 { + left: $input-offset * -1; + } + + @include govuk-if-ie8 { + margin-left: $govuk-small-checkboxes-size * -1; + } } // Adjust the size and position of the label. diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index dd1de905b5..85dc3c83c3 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -39,26 +39,31 @@ .govuk-radios__input { $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2; - position: absolute; - - z-index: 1; - top: $input-offset * -1; - left: $input-offset * -1; - - width: $govuk-touch-target-size; - height: $govuk-touch-target-size; - cursor: pointer; // IE8 doesn’t support pseudo-elements, so we don’t want to hide native // elements there. @include govuk-not-ie8 { + position: absolute; + + z-index: 1; + top: $input-offset * -1; + left: $input-offset * -1; + + width: $govuk-touch-target-size; + height: $govuk-touch-target-size; margin: 0; + opacity: 0; } - // add focus outline to input element for IE8 @include govuk-if-ie8 { + margin-top: 10px; + margin-right: $govuk-radios-size / -2; + margin-left: $govuk-radios-size / -2; + float: left; + + // add focus outline to input &:focus { outline: $govuk-focus-width solid $govuk-focus-colour; } @@ -229,7 +234,13 @@ // ▲┆└─ Radio pseudo element, aligned with margin // └─── Touch target (invisible input), shifted into the margin .govuk-radios__input { - left: $input-offset * -1; + @include govuk-not-ie8 { + left: $input-offset * -1; + } + + @include govuk-if-ie8 { + margin-left: $govuk-small-radios-size * -1; + } } // Adjust the size and position of the label. From 971299ae24c390ea6dd27b67cfe7f1dbd0efe06d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 14 Mar 2019 15:47:44 +0000 Subject: [PATCH 20/23] Avoid hover state for coarse pointers --- src/components/checkboxes/_checkboxes.scss | 2 +- src/components/radios/_radios.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 670ba71443..0ff04c3325 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -292,7 +292,7 @@ // We can't use `@media (hover: hover)` because we wouldn't get the hover // state in browsers that don't support `@media (hover)` (like Internet // Explorer) – so we have to 'undo' the hover state instead. - @media (hover: none) { + @media (hover: none), (pointer: coarse) { .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { box-shadow: initial; } diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 85dc3c83c3..84246786df 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -333,7 +333,7 @@ // We can't use `@media (hover: hover)` because we wouldn't get the hover // state in browsers that don't support `@media (hover)` (like Internet // Explorer) – so we have to 'undo' the hover state instead. - @media (hover: none) { + @media (hover: none), (pointer: coarse) { .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { box-shadow: initial; } From 4a009e3ec94b3fb522842c617e80c98d0184d83e Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 14 Mar 2019 15:52:46 +0000 Subject: [PATCH 21/23] Add small form controls example --- .../examples/small-form-controls/index.njk | 137 ++++++++++++++++++ src/objects/_form-group.scss | 1 + 2 files changed, 138 insertions(+) create mode 100644 app/views/examples/small-form-controls/index.njk diff --git a/app/views/examples/small-form-controls/index.njk b/app/views/examples/small-form-controls/index.njk new file mode 100644 index 0000000000..1334a4179d --- /dev/null +++ b/app/views/examples/small-form-controls/index.njk @@ -0,0 +1,137 @@ +{% extends "layout.njk" %} + +{% from "back-link/macro.njk" import govukBackLink %} +{% from "checkboxes/macro.njk" import govukCheckboxes %} +{% from "radios/macro.njk" import govukRadios %} + +{% block beforeContent %} + {{ govukBackLink({ + "href": "/" + }) }} +{% endblock %} + +{% block content %} +

Small form controls

+ +
+
+ {{ govukCheckboxes({ + fieldset: { + legend: { + text: "Display", + classes: "govuk-fieldset__legend--s" + } + }, + idPrefix: "display", + name: "sort", + classes: "govuk-checkboxes--small", + items: [ + { + value: "consultations", + text: "Consultations" + }, + { + value: "guidance", + text: "Guidance" + }, + { + value: "notices", + text: "Notices" + }, + { + value: "reports", + text: "Reports" + } + ] + }) }} + + {{ govukRadios({ + fieldset: { + legend: { + text: "Include", + classes: "govuk-fieldset__legend--s" + } + }, + idPrefix: "include", + name: "include", + classes: "govuk-radios--small", + items: [ + { + value: "everything", + text: "Everything" + }, + { + value: "something", + text: "Something" + }, + { + value: "nothing", + text: "Nothing" + } + ] + }) }} +
+
+ {{ govukRadios({ + fieldset: { + legend: { + text: "Sort by", + classes: "govuk-fieldset__legend--s" + } + }, + formGroup: { + classes: "govuk-!-margin-bottom-0" + }, + idPrefix: "sort", + name: "sort", + classes: "govuk-radios--small govuk-radios--inline", + items: [ + { + value: "relevance", + text: "Relevance" + }, + { + value: "created", + text: "Created" + }, + { + value: "title", + text: "Title" + } + ] + }) }} + + {{ govukCheckboxes({ + name: "grobulate", + classes: "govuk-checkboxes--small", + formGroup: { + classes: "govuk-!-margin-bottom-0" + }, + items: [ + { + value: "grobulate", + text: "Grobulate results" + } + ] + }) }} + +
+ +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit

+ +

Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.

+ +
+ +

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh

+ +

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.

+ +
+ +

Bibendum Commodo Ullamcorper Vulputate

+ +

Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

+
+
+{% endblock %} diff --git a/src/objects/_form-group.scss b/src/objects/_form-group.scss index 0a0b8e83cc..29e9bf3531 100644 --- a/src/objects/_form-group.scss +++ b/src/objects/_form-group.scss @@ -5,6 +5,7 @@ @include govuk-exports("govuk/objects/form-group") { .govuk-form-group { + @include govuk-clearfix; @include govuk-responsive-margin(6, "bottom"); .govuk-form-group:last-of-type { From 6276830bdfab10a0248554077dad8150e9d23cd9 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 18 Mar 2019 14:53:09 +0000 Subject: [PATCH 22/23] Use border for small radio buttons This means that they display correctly when colours are overridden in the browser. --- src/components/radios/_radios.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index 84246786df..8333e035ae 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -96,6 +96,9 @@ } // • Radio button + // + // We create the 'button' entirely out of 'border' so that they remain + // 'filled' even when colours are overridden in the browser. .govuk-radios__label::after { content: ""; @@ -274,9 +277,7 @@ .govuk-radios__label::after { top: 14px; left: 6px; - width: 10px; - height: 10px; - border-width: 1px; + border-width: 6px; } // Fix position of hint with small radios From 23d0d71928e6897ad418023ae05e4854de9a1865 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 19 Mar 2019 13:37:16 +0000 Subject: [PATCH 23/23] Add example of form controls in all states --- .../examples/form-controls-states/index.njk | 310 ++++++++++++++++++ tasks/gulp/compile-assets.js | 6 +- 2 files changed, 315 insertions(+), 1 deletion(-) create mode 100644 app/views/examples/form-controls-states/index.njk diff --git a/app/views/examples/form-controls-states/index.njk b/app/views/examples/form-controls-states/index.njk new file mode 100644 index 0000000000..280983dcf8 --- /dev/null +++ b/app/views/examples/form-controls-states/index.njk @@ -0,0 +1,310 @@ +{% extends "layout.njk" %} + +{% from "back-link/macro.njk" import govukBackLink %} +{% from "checkboxes/macro.njk" import govukCheckboxes %} +{% from "radios/macro.njk" import govukRadios %} + +{% block beforeContent %} + {{ govukBackLink({ + "href": "/" + }) }} +{% endblock %} + +{% block content %} + + +
+
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+
+ +
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+ +{% endblock %} diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js index 66204d9bb5..c80f2021b6 100644 --- a/tasks/gulp/compile-assets.js +++ b/tasks/gulp/compile-assets.js @@ -14,7 +14,11 @@ const uglify = require('gulp-uglify') const eol = require('gulp-eol') const rename = require('gulp-rename') const cssnano = require('cssnano') -const postcsspseudoclasses = require('postcss-pseudo-classes') +const postcsspseudoclasses = require('postcss-pseudo-classes')({ + // Work around a bug in pseudo classes plugin that badly transforms + // :not(:whatever) pseudo selectors + blacklist: [':not(', ':disabled)', ':last-child)', ':focus)'] +}) // Compile CSS and JS task -------------- // --------------------------------------