govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
2 lines (1 loc) • 15.1 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/radios/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../fieldset/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/radios\") {\n $govuk-touch-target-gutter: 4px;\n $govuk-radios-size: 40px;\n $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);\n $govuk-small-radios-size: 24px;\n $govuk-radios-label-padding-left-right: govuk-spacing(3);\n // When the default focus width is used on a curved edge it looks visually\n // smaller. So for the circular radios we bump the default to make it look\n // visually consistent.\n $govuk-radios-focus-width: $govuk-focus-width + 1px;\n\n .govuk-radios__item {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n margin-bottom: govuk-spacing(2);\n }\n\n .govuk-radios__item:last-child,\n .govuk-radios__item:last-of-type {\n margin-bottom: 0;\n }\n\n .govuk-radios__input {\n // Allow the input to sit above the label, enabling its proper detection\n // when exploring by touch or using automation tools like Selenium\n z-index: 1;\n width: $govuk-touch-target-size;\n height: $govuk-touch-target-size;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n }\n\n .govuk-radios__label {\n align-self: center;\n\n // Ensure that the width of the label is never more than the width of the\n // container minus the input width minus the padding on either side of\n // the label. This prevents the label from going onto the next line due to\n // __item using flex-wrap because we want hints on a separate line\n max-width: calc(100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + govuk-spacing(3))});\n margin-bottom: 0;\n padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);\n cursor: pointer;\n // remove 300ms pause on mobile\n touch-action: manipulation;\n }\n\n // ( ) Radio ring\n .govuk-radios__label::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n top: ($govuk-touch-target-gutter / 2);\n left: ($govuk-touch-target-gutter / 2);\n width: $govuk-radios-size;\n height: $govuk-radios-size;\n border: $govuk-border-width-form-element solid currentcolor;\n border-radius: 50%;\n background: transparent;\n }\n\n // • Radio button\n //\n // We create the 'button' entirely out of 'border' so that they remain\n // 'filled' even when colours are overridden in the browser.\n .govuk-radios__label::after {\n $radio-button-size: govuk-spacing(2);\n\n content: \"\";\n position: absolute;\n\n // Positioned by getting half the touch target, so we have the centre of the\n // input, and then moving back by the button's border width, thus positioning\n // the centre of the button in the centre of the input.\n top: (($govuk-touch-target-size / 2) - $radio-button-size);\n left: (($govuk-touch-target-size / 2) - $radio-button-size);\n width: 0;\n height: 0;\n border: $radio-button-size solid currentcolor;\n border-radius: 50%;\n opacity: 0;\n background: currentcolor;\n }\n\n .govuk-radios__hint {\n display: block;\n width: 100%;\n margin-top: govuk-spacing(-1);\n padding-right: $govuk-radios-label-padding-left-right;\n padding-left: ($govuk-radios-label-padding-left-right + $govuk-touch-target-size);\n }\n\n // This is to bypass govuk-hint's specificity on hints following labels having\n // a margin bottom of 10px (govuk-spacing(2)). Because radios are flexbox,\n // the margin doesn't collapse so we have to do this manually.\n .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-radios__hint {\n margin-bottom: 0;\n }\n\n // Focused state\n .govuk-radios__input:focus + .govuk-radios__label::before {\n border-width: 4px;\n\n // When colours are overridden, the yellow box-shadow becomes invisible\n // which means the focus state is less obvious. By adding a transparent\n // outline, which becomes solid (text-coloured) in that context, we ensure\n // the focus remains clearly visible.\n outline: $govuk-focus-width solid transparent;\n outline-offset: 1px;\n\n // When in an explicit forced-color mode, we can use the Highlight system\n // color for the outline to better match focus states of native controls\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n outline-color: Highlight;\n }\n\n box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;\n }\n\n // Selected state\n .govuk-radios__input:checked + .govuk-radios__label::after {\n opacity: 1;\n }\n\n // Disabled state\n .govuk-radios__input:disabled,\n .govuk-radios__input:disabled + .govuk-radios__label {\n cursor: not-allowed;\n }\n\n .govuk-radios__input:disabled + .govuk-radios__label,\n .govuk-radios__input:disabled ~ .govuk-hint {\n opacity: 0.5;\n }\n\n // =========================================================\n // Inline radios\n // =========================================================\n\n .govuk-radios--inline {\n @include govuk-media-query($from: tablet) {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n\n .govuk-radios__item {\n margin-right: govuk-spacing(4);\n }\n }\n }\n\n // =========================================================\n // Dividers ('or')\n // =========================================================\n\n .govuk-radios__divider {\n @include govuk-font($size: 19);\n @include govuk-text-colour;\n $govuk-divider-size: $govuk-radios-size !default;\n width: $govuk-divider-size;\n margin-bottom: govuk-spacing(2);\n text-align: center;\n }\n\n // =========================================================\n // Conditional reveals\n // =========================================================\n\n // The narrow border is used in the conditional reveals because the border has\n // to be an even number in order to be centred under the 40px checkbox radio.\n $conditional-border-width: $govuk-border-width-narrow;\n // Calculate the amount of padding needed to keep the border centered against\n // the radios.\n $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);\n // Move the border centered with the radios\n $conditional-margin-left: $conditional-border-padding;\n // Move the contents of the conditional inline with the label\n $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;\n\n .govuk-radios__conditional {\n @include govuk-responsive-margin(4, \"bottom\");\n margin-left: $conditional-margin-left;\n padding-left: $conditional-padding-left;\n border-left: $conditional-border-width solid $govuk-border-colour;\n\n .govuk-frontend-supported &--hidden {\n display: none;\n }\n\n & > :last-child {\n margin-bottom: 0;\n }\n }\n\n // =========================================================\n // Small checkboxes\n // =========================================================\n\n .govuk-radios--small {\n $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;\n\n .govuk-radios__item {\n margin-bottom: 0;\n }\n\n // Shift the touch target into the left margin so that the visible edge of\n // the control is aligned\n //\n // ┆Which colour is your favourite?\n // ┌┆───┐\n // │┆() │ Purple\n // └┆▲──┘\n // ▲┆└─ Radio pseudo element, aligned with margin\n // └─── Touch target (invisible input), shifted into the margin\n .govuk-radios__input {\n margin-left: $input-offset * -1;\n }\n\n .govuk-radios__label {\n // Create a tiny space between the small radio hover state so that it\n // doesn't clash with the label\n padding-left: 1px;\n }\n\n // ( ) Radio ring\n //\n // Reduce the size of the control [1], vertically centering it within the\n // touch target [2]\n // Left here is 0 because we've shifted the input into the left margin\n .govuk-radios__label::before {\n top: $input-offset; // 2\n left: 0;\n width: $govuk-small-radios-size; // 1\n height: $govuk-small-radios-size; // 1\n }\n\n // • Radio button\n //\n // Reduce the size of the 'button' and center it within the ring\n .govuk-radios__label::after {\n $radio-button-size: govuk-spacing(1);\n\n // The same calculation as normal radio buttons but reduce the border width\n top: (($govuk-touch-target-size / 2) - $radio-button-size);\n left: ((($govuk-touch-target-size / 2) - $radio-button-size) - $input-offset);\n border-width: $radio-button-size;\n }\n\n // Fix position of hint with small radios\n //\n // Do not use hints with small radios – because they're within the input\n // wrapper they trigger the hover state, but clicking them doesn't actually\n // activate the control.\n //\n // (If you do use them, they won't look completely broken... but seriously,\n // don't use them)\n .govuk-radios__hint {\n padding-left: ($govuk-small-radios-size + $input-offset);\n }\n\n // Align conditional reveals with small radios\n .govuk-radios__conditional {\n $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);\n margin-left: $margin-left;\n padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);\n }\n\n .govuk-radios__divider {\n width: $govuk-small-radios-size;\n margin-bottom: govuk-spacing(1);\n }\n\n // Hover state for small radios.\n //\n // We use a hover state for small radios because the touch target size\n // is so much larger than their visible size, and so we need to provide\n // feedback to the user as to which radio they will select when their\n // cursor is outside of the visible area.\n .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {\n // Forced colours modes tend to ignore box-shadow.\n // Apply an outline for those modes to use instead.\n outline: $govuk-radios-focus-width dashed transparent;\n outline-offset: 1px;\n box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;\n }\n\n // Because we've overridden the border-shadow provided by the focus state,\n // we need to redefine that too.\n //\n // We use two box shadows, one that restores the original focus state [1]\n // and another that then applies the hover state [2].\n .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {\n // Set different HCM colour when we have both hover/focus applied at once\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n outline-color: Highlight;\n }\n // prettier-ignore\n box-shadow:\n 0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,\n 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2\n }\n\n // For devices that explicitly don't support hover, don't provide a hover\n // state (e.g. on touch devices like iOS).\n //\n // We can't use `@media (hover: hover)` because we wouldn't get the hover\n // state in browsers that don't support `@media (hover)` (like Internet\n // Explorer) – so we have to 'undo' the hover state instead.\n @media (hover: none), (pointer: coarse) {\n .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {\n box-shadow: initial;\n }\n\n .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {\n box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;\n }\n }\n }\n}\n"]}