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/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/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index 22e19391a6..0ff04c3325 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/src/components/checkboxes/_checkboxes.scss @@ -8,7 +8,10 @@ @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); .govuk-checkboxes__item { @@ -20,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; } @@ -31,25 +34,33 @@ } .govuk-checkboxes__input { - position: absolute; - - z-index: 1; - top: 0; - left: 0; - - width: $govuk-checkboxes-size; - height: $govuk-checkboxes-size; + $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2; 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 { + 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; } @@ -62,17 +73,11 @@ 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; } - .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; @@ -82,11 +87,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; @@ -107,10 +114,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; @@ -132,6 +145,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); @@ -154,4 +171,135 @@ margin-bottom: 0; } } + + // ========================================================= + // Small checkboxes + // ========================================================= + + .govuk-checkboxes--small { + + $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 + // 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 { + @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. + // + // 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) 13px 1px; + float: left; + + @include govuk-media-query($from: tablet) { + padding: 11px govuk-spacing(3) 10px 1px; + } + } + + // [ ] Check box + // + // Reduce the size of the check box [1], vertically center it within the + // touch target [2] + .govuk-checkboxes__label::before { + top: $input-offset - $govuk-border-width-form-element; // 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; + width: 9px; + height: 3.5px; + 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. + // + // (If you do use them, they won't look completely broken... but seriously, + // don't use them) + .govuk-checkboxes__hint { + padding: 0; + 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); + clear: both; + } + + // 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 + // 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__input:not(:disabled) + .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, + // 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 { + // 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 + } + + // 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), (pointer: coarse) { + .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/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 diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index ca8f03e867..8333e035ae 100644 --- a/src/components/radios/_radios.scss +++ b/src/components/radios/_radios.scss @@ -8,7 +8,10 @@ @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. // So for the circular radios we bump the default to make it look visually consistent. @@ -18,13 +21,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; } @@ -35,25 +37,33 @@ } .govuk-radios__input { - position: absolute; - - z-index: 1; - top: 0; - left: 0; - - width: $govuk-radios-size; - height: $govuk-radios-size; + $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2; 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 { + 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; } @@ -66,17 +76,11 @@ 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; } - .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; @@ -91,7 +95,11 @@ background: transparent; } - .govuk-radios__input + .govuk-radios__label::after { + // • 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: ""; position: absolute; @@ -107,10 +115,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; @@ -132,7 +146,10 @@ opacity: .5; } - // Inline variant + // ========================================================= + // Inline radios + // ========================================================= + .govuk-radios--inline { @include mq ($from: tablet) { @include govuk-clearfix; @@ -153,6 +170,10 @@ } } + // ========================================================= + // Dividers ('or') + // ========================================================= + .govuk-radios__divider { $govuk-divider-size: $govuk-radios-size !default; @include govuk-font($size: 19); @@ -162,6 +183,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); @@ -184,4 +209,139 @@ margin-bottom: 0; } } + + // ========================================================= + // Small checkboxes + // ========================================================= + + .govuk-radios--small { + + $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; + 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 + // 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 { + @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. + // + // 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 1px; + float: left; + + @include govuk-media-query($from: tablet) { + padding: 11px govuk-spacing(3) 10px 1px; + } + } + + // ( ) Radio ring + // + // Reduce the size of the control [1], vertically centering it within the + // touch target [2] + .govuk-radios__label::before { + top: $input-offset - $govuk-border-width-form-element; // 2 + width: $govuk-small-radios-size; // 1 + height: $govuk-small-radios-size; // 1 + } + + // • Radio button + // + // Reduce the size of the 'button' and center it within the ring + .govuk-radios__label::after { + top: 14px; + left: 6px; + border-width: 6px; + } + + // 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; + pointer-events: none; + } + + // 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; + } + + .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 + // 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, // 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), (pointer: coarse) { + .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; + } + } + } } diff --git a/src/components/radios/radios.yaml b/src/components/radios/radios.yaml index 53e9cf21d8..f001ef2830 100644 --- a/src/components/radios/radios.yaml +++ b/src/components/radios/radios.yaml @@ -417,3 +417,193 @@ 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 + +- 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 + +- 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 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 { diff --git a/src/settings/_colours-applied.scss b/src/settings/_colours-applied.scss index a08c168445..e09ea81c9b 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 hover colour +/// +/// Used for hover states on form controls +/// +/// @type Colour +/// @access public + +$govuk-hover-colour: govuk-colour("grey-3") !default; // ============================================================================= diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss index 5332711147..bd2ac483aa 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-hover-width: 10px !default; 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 -------------- // --------------------------------------