diff --git a/CHANGELOG.md b/CHANGELOG.md index dea804cbed..f78fc75722 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ We made this change in [pull request #6861: Resolve `pkg:` URLs from `dist/govuk We've made fixes to GOV.UK Frontend in the following pull requests: - [#6831: Fix header link hover state in Safari](https://github.com/alphagov/govuk-frontend/pull/6831) +- [#6993: Remove Internet Explorer specific CSS hacks, bugfixes and styles](https://github.com/alphagov/govuk-frontend/pull/6993) ## v6.1.0 (Feature release) diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_mixin.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_mixin.scss index 4c5cda86e7..5f15561c9e 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/_mixin.scss @@ -78,9 +78,6 @@ transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - // Fix bug in IE11 caused by transform rotate (-45deg). - // See: alphagov/govuk_elements/issues/518 - border-top-color: transparent; opacity: 0; background: transparent; } @@ -280,30 +277,18 @@ // // 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 { - // Set different HCM colour when we have both hover/focus applied at once - @media screen and (forced-colors: active), (-ms-high-contrast: active) { - outline-color: Highlight; - } - // prettier-ignore - box-shadow: - 0 0 0 base.$govuk-focus-width base.govuk-functional-colour(focus), // 1 - 0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 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; - } - + // We only want this to apply to browsers that support hover states. + @media (hover: hover) { .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 base.$govuk-focus-width base.govuk-functional-colour(focus); + // Set different HCM colour when we have both hover/focus applied at once + @media screen and (forced-colors: active), (-ms-high-contrast: active) { + outline-color: Highlight; + } + // prettier-ignore + box-shadow: + 0 0 0 base.$govuk-focus-width base.govuk-functional-colour(focus), // 1 + 0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 2 } } } diff --git a/packages/govuk-frontend/src/govuk/components/details/_mixin.scss b/packages/govuk-frontend/src/govuk/components/details/_mixin.scss index 7954b5877b..3e223a87ad 100644 --- a/packages/govuk-frontend/src/govuk/components/details/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/details/_mixin.scss @@ -44,26 +44,6 @@ margin-bottom: 0; } - // Hack to target IE8 - IE11 (and REALLY old Firefox) - // These browsers don't support the details element, so fall back to looking - // like inset text - @media screen\0 { - .govuk-details { - border-left: base.$govuk-border-width-wide solid; - border-left-color: base.govuk-functional-colour(border); - } - - .govuk-details__summary { - margin-top: base.govuk-spacing(3); - } - - .govuk-details__summary-text { - @include base.govuk-typography-weight-bold; - @include base.govuk-responsive-margin(4, "bottom"); - padding-left: base.govuk-spacing(4); - } - } - // We wrap styles for newer browsers in a feature query, which is ignored by // older browsers, which always expand the details element. // diff --git a/packages/govuk-frontend/src/govuk/components/fieldset/_mixin.scss b/packages/govuk-frontend/src/govuk/components/fieldset/_mixin.scss index 35d163eea3..2e35b982b7 100644 --- a/packages/govuk-frontend/src/govuk/components/fieldset/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/fieldset/_mixin.scss @@ -23,16 +23,12 @@ .govuk-fieldset__legend { @include base.govuk-font($size: 19); - // Fix legend text wrapping in Edge and IE - // 1. IE9-11 & Edge 12-13 - // 2. IE8-11 + // 1. Fix legend text wrapping in IE9-11 & Edge 12-13 box-sizing: border-box; // 1 - display: table; // 2 max-width: 100%; // 1 margin-bottom: base.govuk-spacing(2); padding: 0; color: base.govuk-functional-colour(text); - white-space: normal; // 1 } diff --git a/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss b/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss index 0e701ea9ba..fecf6b5ada 100644 --- a/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss @@ -17,9 +17,6 @@ @media #{base.govuk-until-breakpoint(tablet)} { padding: base.govuk-spacing(4) - base.$govuk-border-width; - // Support IE (autoprefixer doesn't add this as it's not a prefix) - word-wrap: break-word; - // This is an if-all-else-fails attempt to stop long words from // overflowing the container on very narrow viewports by forcing them to // break and wrap instead. This overflowing is more likely to happen when diff --git a/packages/govuk-frontend/src/govuk/components/password-input/_mixin.scss b/packages/govuk-frontend/src/govuk/components/password-input/_mixin.scss index 2291f75812..4fa9c5a2d9 100644 --- a/packages/govuk-frontend/src/govuk/components/password-input/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/password-input/_mixin.scss @@ -19,8 +19,8 @@ } .govuk-password-input__input { - // IE 11 and Microsoft Edge comes with its own password reveal function. We - // want to hide it, so that there aren't two controls presented to the user + // Microsoft Edge comes with its own password reveal function. We want + // to hide it, so that there aren't two controls presented to the user // that do the same thing but aren't in sync with one another. This doesn't // affect the function that allows Edge users to toggle password visibility // by pressing Alt+F8, which cannot be programmatically disabled. diff --git a/packages/govuk-frontend/src/govuk/components/radios/_mixin.scss b/packages/govuk-frontend/src/govuk/components/radios/_mixin.scss index b5ad2a1223..9bd70bd3c2 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/radios/_mixin.scss @@ -299,30 +299,18 @@ // // 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 { - // Set different HCM colour when we have both hover/focus applied at once - @media screen and (forced-colors: active), (-ms-high-contrast: active) { - outline-color: Highlight; - } - // prettier-ignore - box-shadow: - 0 0 0 $govuk-radios-focus-width base.govuk-functional-colour(focus), // 1 - 0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 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; - } - + // We only want this to apply to browsers that support hover states. + @media (hover: hover) { .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 $govuk-radios-focus-width base.govuk-functional-colour(focus); + // Set different HCM colour when we have both hover/focus applied at once + @media screen and (forced-colors: active), (-ms-high-contrast: active) { + outline-color: Highlight; + } + // prettier-ignore + box-shadow: + 0 0 0 $govuk-radios-focus-width base.govuk-functional-colour(focus), // 1 + 0 0 0 base.$govuk-hover-width base.govuk-functional-colour(hover); // 2 } } } diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/_mixin.scss b/packages/govuk-frontend/src/govuk/components/service-navigation/_mixin.scss index bad5521099..83358809a5 100644 --- a/packages/govuk-frontend/src/govuk/components/service-navigation/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/service-navigation/_mixin.scss @@ -174,16 +174,6 @@ display: flex; flex-wrap: wrap; margin-bottom: 0; - - // However... IE11 totally trips over flexbox and doesn't wrap anything, - // making all of the items into a single, horizontally scrolling row, - // which is no good. This CSS hack removes the flexbox definition for - // IE 9–11, reverting it to the flawed, but OK, non-flexbox version. - // - // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64 - @media screen and (min-width: 0\0) { - display: block; - } } } diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_mixin.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_mixin.scss index 0955b9ca57..b81330a0cd 100644 --- a/packages/govuk-frontend/src/govuk/components/summary-list/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/summary-list/_mixin.scss @@ -244,19 +244,6 @@ .govuk-summary-card__action { display: inline; - - // We use the following media query to target IE11 and 10 only to add margin - // between actions. - // - // We do this because we're using row-gap to create space between actions on - // more evergreen browsers which IE doesn't support. @supports currently isn't - // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559. - // - // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860 - // which also includes an explanation of why this works - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - margin-bottom: base.govuk-spacing(1); - } } .govuk-summary-card__action:last-child { diff --git a/packages/govuk-frontend/src/govuk/helpers/_links.scss b/packages/govuk-frontend/src/govuk/helpers/_links.scss index 7d67f36725..2744b5d484 100644 --- a/packages/govuk-frontend/src/govuk/helpers/_links.scss +++ b/packages/govuk-frontend/src/govuk/helpers/_links.scss @@ -58,8 +58,8 @@ text-decoration-thickness: $govuk-link-hover-underline-thickness; // Disable ink skipping on underlines on hover. Browsers haven't // standardised on this part of the spec yet, so set both properties - text-decoration-skip-ink: none; // Chromium, Firefox - text-decoration-skip: none; // Safari + text-decoration-skip-ink: none; // Chromium, Firefox, Safari 15.4+ + text-decoration-skip: none; // Safari 12.1–15.3 } } diff --git a/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss b/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss index 4b4cb2cee5..b92edcc5cb 100644 --- a/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss +++ b/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss @@ -26,9 +26,6 @@ padding: 0 govuk-if($important, !important); overflow: hidden govuk-if($important, !important); - - // `clip` is needed for IE11 support - clip: rect(0 0 0 0) govuk-if($important, !important); clip-path: inset(50%) govuk-if($important, !important); border: 0 govuk-if($important, !important); @@ -75,11 +72,10 @@ /// @access public @mixin govuk-visually-hidden-focusable($important: true) { - // IE 11 doesn't support the combined `:not(:active, :focus)` syntax. // Also allows for ':focus' companion classes from postcss-pseudo-classes // which the plugin unfortunately doesn't handle automatically. // stylelint-disable-next-line selector-class-pattern - &:not(:active):not(:focus):not(.\:focus) { + &:not(:active):not(.\:focus):not(:focus) { @include _govuk-visually-hide-content($important: $important); } } diff --git a/packages/govuk-frontend/src/govuk/objects/_button-group.mixin.scss b/packages/govuk-frontend/src/govuk/objects/_button-group.mixin.scss index 6bb2360360..d35c053239 100644 --- a/packages/govuk-frontend/src/govuk/objects/_button-group.mixin.scss +++ b/packages/govuk-frontend/src/govuk/objects/_button-group.mixin.scss @@ -42,9 +42,6 @@ .govuk-link { @include base.govuk-font($size: 19, $line-height: 19px); display: inline-block; - // Prevent links overflowing their container in IE10/11 because of bug - // with align-items: center - max-width: 100%; margin-top: $link-spacing; margin-bottom: $link-spacing + $vertical-gap; text-align: center; diff --git a/packages/govuk-frontend/src/govuk/objects/_main-wrapper.mixin.scss b/packages/govuk-frontend/src/govuk/objects/_main-wrapper.mixin.scss index 7405e52892..ee02f5312a 100644 --- a/packages/govuk-frontend/src/govuk/objects/_main-wrapper.mixin.scss +++ b/packages/govuk-frontend/src/govuk/objects/_main-wrapper.mixin.scss @@ -24,10 +24,6 @@ /// @access private @mixin styles { .govuk-main-wrapper { - // In IE11 the `main` element can be used, but is not recognized – - // meaning it's not defined in IE's default style sheet, - // so it uses CSS initial value, which is inline. - display: block; padding-top: base.govuk-spacing(4); padding-bottom: base.govuk-spacing(4); diff --git a/packages/govuk-frontend/src/govuk/objects/_template.mixin.scss b/packages/govuk-frontend/src/govuk/objects/_template.mixin.scss index 35f86f225d..c2d3633e5f 100644 --- a/packages/govuk-frontend/src/govuk/objects/_template.mixin.scss +++ b/packages/govuk-frontend/src/govuk/objects/_template.mixin.scss @@ -31,12 +31,6 @@ scroll-padding-top: 0; } } - - // Force the scrollbar to always display in IE, to prevent horizontal page - // jumps as content height changes (e.g. autocomplete results open). - @media screen { - overflow-y: scroll; - } } // Applied to the element diff --git a/tests/sass-tests/__snapshots__/all-components-with-config.integration.test.mjs.snap b/tests/sass-tests/__snapshots__/all-components-with-config.integration.test.mjs.snap index 17002296f3..02ba8e2b7e 100644 --- a/tests/sass-tests/__snapshots__/all-components-with-config.integration.test.mjs.snap +++ b/tests/sass-tests/__snapshots__/all-components-with-config.integration.test.mjs.snap @@ -623,7 +623,6 @@ p + .govuk-heading-s, font-size: 1.1875rem; line-height: 1; display: inline-block; - max-width: 100%; margin-top: 5px; margin-bottom: 20px; text-align: center; @@ -818,7 +817,6 @@ p + .govuk-heading-s, } } .govuk-main-wrapper { - display: block; padding-top: 20px; padding-bottom: 20px; } @@ -850,11 +848,6 @@ p + .govuk-heading-s, scroll-padding-top: 0; } } -@media screen { - .govuk-template { - overflow-y: scroll; - } -} .govuk-template__body { margin: 0; background-color: var(--govuk-body-background-colour, #ffffff); @@ -1845,7 +1838,6 @@ p + .govuk-heading-s, font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -1973,7 +1965,6 @@ p + .govuk-heading-s, transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - border-top-color: transparent; opacity: 0; background: transparent; } @@ -2088,20 +2079,14 @@ p + .govuk-heading-s, outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-cookie-banner { @@ -2354,25 +2339,6 @@ p + .govuk-heading-s, .govuk-details__text > :last-child { margin-bottom: 0; } -@media screen\\0 { - .govuk-details { - border-left: 10px solid; - border-left-color: var(--govuk-border-colour, #cecece); - } - .govuk-details__summary { - margin-top: 15px; - } - .govuk-details__summary-text { - font-weight: 700; - margin-bottom: 15px; - padding-left: 20px; - } -} -@media screen\\0 and (min-width: 40.0625em) { - .govuk-details__summary-text { - margin-bottom: 20px; - } -} @supports not (-ms-ime-align: auto) { .govuk-details__summary { position: relative; @@ -3591,7 +3557,6 @@ p + .govuk-heading-s, @media (max-width: 40.0525em) { .govuk-panel { padding: 15px; - word-wrap: break-word; overflow-wrap: break-word; } } @@ -3951,20 +3916,14 @@ p + .govuk-heading-s, outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-select { @@ -4239,11 +4198,6 @@ p + .govuk-heading-s, margin-bottom: 0; } } -@media screen and (min-width: 40.0625em) and (min-width: 0\\0 ) { - .govuk-service-navigation__list { - display: block; - } -} .govuk-service-navigation__active-fallback { font-weight: inherit; } @@ -4286,14 +4240,13 @@ p + .govuk-heading-s, display: block; padding: 10px 15px; } -.govuk-skip-link:not(:active):not(:focus):not(.\\:focus) { +.govuk-skip-link:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -4589,11 +4542,6 @@ p + .govuk-heading-s, .govuk-summary-card__action { display: inline; } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .govuk-summary-card__action { - margin-bottom: 5px; - } -} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .govuk-summary-card__action:last-child { margin-bottom: 0; @@ -5073,7 +5021,6 @@ p + .govuk-heading-s, margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -5085,14 +5032,13 @@ p + .govuk-heading-s, .govuk-visually-hidden::after { content: " "; } -.govuk-visually-hidden-focusable:not(:active):not(:focus):not(.\\:focus) { +.govuk-visually-hidden-focusable:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; diff --git a/tests/sass-tests/__snapshots__/all-components.integration.test.mjs.snap b/tests/sass-tests/__snapshots__/all-components.integration.test.mjs.snap index b2fba3bacd..8b0f632966 100644 --- a/tests/sass-tests/__snapshots__/all-components.integration.test.mjs.snap +++ b/tests/sass-tests/__snapshots__/all-components.integration.test.mjs.snap @@ -621,7 +621,6 @@ exports[`All components works when user @imports everything 1`] = ` font-size: 1.1875rem; line-height: 1; display: inline-block; - max-width: 100%; margin-top: 5px; margin-bottom: 20px; text-align: center; @@ -816,7 +815,6 @@ exports[`All components works when user @imports everything 1`] = ` } } .govuk-main-wrapper { - display: block; padding-top: 20px; padding-bottom: 20px; } @@ -848,11 +846,6 @@ exports[`All components works when user @imports everything 1`] = ` scroll-padding-top: 0; } } -@media screen { - .govuk-template { - overflow-y: scroll; - } -} .govuk-template__body { margin: 0; background-color: var(--govuk-body-background-colour, #ffffff); @@ -1843,7 +1836,6 @@ exports[`All components works when user @imports everything 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -1971,7 +1963,6 @@ exports[`All components works when user @imports everything 1`] = ` transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - border-top-color: transparent; opacity: 0; background: transparent; } @@ -2086,20 +2077,14 @@ exports[`All components works when user @imports everything 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-cookie-banner { @@ -2352,25 +2337,6 @@ exports[`All components works when user @imports everything 1`] = ` .govuk-details__text > :last-child { margin-bottom: 0; } -@media screen\\0 { - .govuk-details { - border-left: 10px solid; - border-left-color: var(--govuk-border-colour, #cecece); - } - .govuk-details__summary { - margin-top: 15px; - } - .govuk-details__summary-text { - font-weight: 700; - margin-bottom: 15px; - padding-left: 20px; - } -} -@media screen\\0 and (min-width: 40.0625em) { - .govuk-details__summary-text { - margin-bottom: 20px; - } -} @supports not (-ms-ime-align: auto) { .govuk-details__summary { position: relative; @@ -3589,7 +3555,6 @@ exports[`All components works when user @imports everything 1`] = ` @media (max-width: 40.0525em) { .govuk-panel { padding: 15px; - word-wrap: break-word; overflow-wrap: break-word; } } @@ -3949,20 +3914,14 @@ exports[`All components works when user @imports everything 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-select { @@ -4237,11 +4196,6 @@ exports[`All components works when user @imports everything 1`] = ` margin-bottom: 0; } } -@media screen and (min-width: 40.0625em) and (min-width: 0\\0 ) { - .govuk-service-navigation__list { - display: block; - } -} .govuk-service-navigation__active-fallback { font-weight: inherit; } @@ -4284,14 +4238,13 @@ exports[`All components works when user @imports everything 1`] = ` display: block; padding: 10px 15px; } -.govuk-skip-link:not(:active):not(:focus):not(.\\:focus) { +.govuk-skip-link:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -4583,11 +4536,6 @@ exports[`All components works when user @imports everything 1`] = ` .govuk-summary-card__action { display: inline; } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .govuk-summary-card__action { - margin-bottom: 5px; - } -} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .govuk-summary-card__action:last-child { margin-bottom: 0; @@ -5067,7 +5015,6 @@ exports[`All components works when user @imports everything 1`] = ` margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -5079,14 +5026,13 @@ exports[`All components works when user @imports everything 1`] = ` .govuk-visually-hidden::after { content: " "; } -.govuk-visually-hidden-focusable:not(:active):not(:focus):not(.\\:focus) { +.govuk-visually-hidden-focusable:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; diff --git a/tests/sass-tests/__snapshots__/individual-components.integration.test.mjs.snap b/tests/sass-tests/__snapshots__/individual-components.integration.test.mjs.snap index c3b4221973..4691f9c424 100644 --- a/tests/sass-tests/__snapshots__/individual-components.integration.test.mjs.snap +++ b/tests/sass-tests/__snapshots__/individual-components.integration.test.mjs.snap @@ -1292,7 +1292,6 @@ exports[`Individual components src/govuk/components/checkboxes works when user @ font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -1532,7 +1531,6 @@ exports[`Individual components src/govuk/components/checkboxes works when user @ transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - border-top-color: transparent; opacity: 0; background: transparent; } @@ -1647,20 +1645,14 @@ exports[`Individual components src/govuk/components/checkboxes works when user @ outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } }" `; @@ -2275,7 +2267,6 @@ exports[`Individual components src/govuk/components/date-input works when user @ font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -2480,25 +2471,6 @@ exports[`Individual components src/govuk/components/details works when user @imp .govuk-details__text > :last-child { margin-bottom: 0; } -@media screen\\0 { - .govuk-details { - border-left: 10px solid; - border-left-color: var(--govuk-border-colour, #cecece); - } - .govuk-details__summary { - margin-top: 15px; - } - .govuk-details__summary-text { - font-weight: 700; - margin-bottom: 15px; - padding-left: 20px; - } -} -@media screen\\0 and (min-width: 40.0625em) { - .govuk-details__summary-text { - margin-bottom: 20px; - } -} @supports not (-ms-ime-align: auto) { .govuk-details__summary { position: relative; @@ -3178,7 +3150,6 @@ exports[`Individual components src/govuk/components/fieldset works when user @im font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -5299,7 +5270,6 @@ exports[`Individual components src/govuk/components/panel works when user @impor @media (max-width: 40.0525em) { .govuk-panel { padding: 15px; - word-wrap: break-word; overflow-wrap: break-word; } } @@ -6161,7 +6131,6 @@ exports[`Individual components src/govuk/components/radios works when user @impo font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -6522,20 +6491,14 @@ exports[`Individual components src/govuk/components/radios works when user @impo outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } }" `; @@ -7052,11 +7015,6 @@ exports[`Individual components src/govuk/components/service-navigation works whe margin-bottom: 0; } } -@media screen and (min-width: 40.0625em) and (min-width: 0\\0 ) { - .govuk-service-navigation__list { - display: block; - } -} .govuk-service-navigation__active-fallback { font-weight: inherit; } @@ -7137,14 +7095,13 @@ exports[`Individual components src/govuk/components/skip-link works when user @i display: block; padding: 10px 15px; } -.govuk-skip-link:not(:active):not(:focus):not(.\\:focus) { +.govuk-skip-link:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -7504,11 +7461,6 @@ exports[`Individual components src/govuk/components/summary-list works when user .govuk-summary-card__action { display: inline; } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .govuk-summary-card__action { - margin-bottom: 5px; - } -} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .govuk-summary-card__action:last-child { margin-bottom: 0; diff --git a/tests/sass-tests/__snapshots__/itcss-layers.integration.test.mjs.snap b/tests/sass-tests/__snapshots__/itcss-layers.integration.test.mjs.snap index 60130a298d..174084dea3 100644 --- a/tests/sass-tests/__snapshots__/itcss-layers.integration.test.mjs.snap +++ b/tests/sass-tests/__snapshots__/itcss-layers.integration.test.mjs.snap @@ -1003,7 +1003,6 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -1131,7 +1130,6 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - border-top-color: transparent; opacity: 0; background: transparent; } @@ -1246,20 +1244,14 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-cookie-banner { @@ -1512,25 +1504,6 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` .govuk-details__text > :last-child { margin-bottom: 0; } -@media screen\\0 { - .govuk-details { - border-left: 10px solid; - border-left-color: var(--govuk-border-colour, #cecece); - } - .govuk-details__summary { - margin-top: 15px; - } - .govuk-details__summary-text { - font-weight: 700; - margin-bottom: 15px; - padding-left: 20px; - } -} -@media screen\\0 and (min-width: 40.0625em) { - .govuk-details__summary-text { - margin-bottom: 20px; - } -} @supports not (-ms-ime-align: auto) { .govuk-details__summary { position: relative; @@ -2749,7 +2722,6 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` @media (max-width: 40.0525em) { .govuk-panel { padding: 15px; - word-wrap: break-word; overflow-wrap: break-word; } } @@ -3109,20 +3081,14 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-select { @@ -3397,11 +3363,6 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` margin-bottom: 0; } } -@media screen and (min-width: 40.0625em) and (min-width: 0\\0 ) { - .govuk-service-navigation__list { - display: block; - } -} .govuk-service-navigation__active-fallback { font-weight: inherit; } @@ -3444,14 +3405,13 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` display: block; padding: 10px 15px; } -.govuk-skip-link:not(:active):not(:focus):not(.\\:focus) { +.govuk-skip-link:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -3743,11 +3703,6 @@ exports[`ITCSS layers components works when user @imports the layer 1`] = ` .govuk-summary-card__action { display: inline; } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .govuk-summary-card__action { - margin-bottom: 5px; - } -} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .govuk-summary-card__action:last-child { margin-bottom: 0; @@ -4913,7 +4868,6 @@ exports[`ITCSS layers objects works when user @imports the layer 1`] = ` font-size: 1.1875rem; line-height: 1; display: inline-block; - max-width: 100%; margin-top: 5px; margin-bottom: 20px; text-align: center; @@ -5123,7 +5077,6 @@ exports[`ITCSS layers objects works when user @imports the layer 1`] = ` } } .govuk-main-wrapper { - display: block; padding-top: 20px; padding-bottom: 20px; } @@ -5155,11 +5108,6 @@ exports[`ITCSS layers objects works when user @imports the layer 1`] = ` scroll-padding-top: 0; } } -@media screen { - .govuk-template { - overflow-y: scroll; - } -} .govuk-template__body { margin: 0; background-color: var(--govuk-body-background-colour, #ffffff); @@ -6446,7 +6394,6 @@ exports[`ITCSS layers utilities works when user @imports the layer 1`] = ` margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -6458,14 +6405,13 @@ exports[`ITCSS layers utilities works when user @imports the layer 1`] = ` .govuk-visually-hidden::after { content: " "; } -.govuk-visually-hidden-focusable:not(:active):not(:focus):not(.\\:focus) { +.govuk-visually-hidden-focusable:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; diff --git a/tests/sass-tests/__snapshots__/sass-file-compilation.integration.test.mjs.snap b/tests/sass-tests/__snapshots__/sass-file-compilation.integration.test.mjs.snap index 46dd619611..d20095940c 100644 --- a/tests/sass-tests/__snapshots__/sass-file-compilation.integration.test.mjs.snap +++ b/tests/sass-tests/__snapshots__/sass-file-compilation.integration.test.mjs.snap @@ -1041,7 +1041,6 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -1169,7 +1168,6 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - border-top-color: transparent; opacity: 0; background: transparent; } @@ -1284,20 +1282,14 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-cookie-banner { @@ -1550,25 +1542,6 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` .govuk-details__text > :last-child { margin-bottom: 0; } -@media screen\\0 { - .govuk-details { - border-left: 10px solid; - border-left-color: var(--govuk-border-colour, #cecece); - } - .govuk-details__summary { - margin-top: 15px; - } - .govuk-details__summary-text { - font-weight: 700; - margin-bottom: 15px; - padding-left: 20px; - } -} -@media screen\\0 and (min-width: 40.0625em) { - .govuk-details__summary-text { - margin-bottom: 20px; - } -} @supports not (-ms-ime-align: auto) { .govuk-details__summary { position: relative; @@ -2787,7 +2760,6 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` @media (max-width: 40.0525em) { .govuk-panel { padding: 15px; - word-wrap: break-word; overflow-wrap: break-word; } } @@ -3147,20 +3119,14 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-select { @@ -3435,11 +3401,6 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` margin-bottom: 0; } } -@media screen and (min-width: 40.0625em) and (min-width: 0\\0 ) { - .govuk-service-navigation__list { - display: block; - } -} .govuk-service-navigation__active-fallback { font-weight: inherit; } @@ -3482,14 +3443,13 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` display: block; padding: 10px 15px; } -.govuk-skip-link:not(:active):not(:focus):not(.\\:focus) { +.govuk-skip-link:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -3781,11 +3741,6 @@ exports[`src/govuk/components/_index.scss matches snapshot 1`] = ` .govuk-summary-card__action { display: inline; } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .govuk-summary-card__action { - margin-bottom: 5px; - } -} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .govuk-summary-card__action:last-child { margin-bottom: 0; @@ -5559,7 +5514,6 @@ exports[`src/govuk/components/checkboxes/_index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -5799,7 +5753,6 @@ exports[`src/govuk/components/checkboxes/_index.scss matches snapshot 1`] = ` transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - border-top-color: transparent; opacity: 0; background: transparent; } @@ -5914,20 +5867,14 @@ exports[`src/govuk/components/checkboxes/_index.scss matches snapshot 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } }" `; @@ -6546,7 +6493,6 @@ exports[`src/govuk/components/date-input/_index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -6753,25 +6699,6 @@ exports[`src/govuk/components/details/_index.scss matches snapshot 1`] = ` .govuk-details__text > :last-child { margin-bottom: 0; } -@media screen\\0 { - .govuk-details { - border-left: 10px solid; - border-left-color: var(--govuk-border-colour, #cecece); - } - .govuk-details__summary { - margin-top: 15px; - } - .govuk-details__summary-text { - font-weight: 700; - margin-bottom: 15px; - padding-left: 20px; - } -} -@media screen\\0 and (min-width: 40.0625em) { - .govuk-details__summary-text { - margin-bottom: 20px; - } -} @supports not (-ms-ime-align: auto) { .govuk-details__summary { position: relative; @@ -7459,7 +7386,6 @@ exports[`src/govuk/components/fieldset/_index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -9600,7 +9526,6 @@ exports[`src/govuk/components/panel/_index.scss matches snapshot 1`] = ` @media (max-width: 40.0525em) { .govuk-panel { padding: 15px; - word-wrap: break-word; overflow-wrap: break-word; } } @@ -10468,7 +10393,6 @@ exports[`src/govuk/components/radios/_index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -10829,20 +10753,14 @@ exports[`src/govuk/components/radios/_index.scss matches snapshot 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } }" `; @@ -11363,11 +11281,6 @@ exports[`src/govuk/components/service-navigation/_index.scss matches snapshot 1` margin-bottom: 0; } } -@media screen and (min-width: 40.0625em) and (min-width: 0\\0 ) { - .govuk-service-navigation__list { - display: block; - } -} .govuk-service-navigation__active-fallback { font-weight: inherit; } @@ -11450,14 +11363,13 @@ exports[`src/govuk/components/skip-link/_index.scss matches snapshot 1`] = ` display: block; padding: 10px 15px; } -.govuk-skip-link:not(:active):not(:focus):not(.\\:focus) { +.govuk-skip-link:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -11819,11 +11731,6 @@ exports[`src/govuk/components/summary-list/_index.scss matches snapshot 1`] = ` .govuk-summary-card__action { display: inline; } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .govuk-summary-card__action { - margin-bottom: 5px; - } -} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .govuk-summary-card__action:last-child { margin-bottom: 0; @@ -15883,7 +15790,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1; display: inline-block; - max-width: 100%; margin-top: 5px; margin-bottom: 20px; text-align: center; @@ -16078,7 +15984,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` } } .govuk-main-wrapper { - display: block; padding-top: 20px; padding-bottom: 20px; } @@ -16110,11 +16015,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` scroll-padding-top: 0; } } -@media screen { - .govuk-template { - overflow-y: scroll; - } -} .govuk-template__body { margin: 0; background-color: var(--govuk-body-background-colour, #ffffff); @@ -17105,7 +17005,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1.3157894737; box-sizing: border-box; - display: table; max-width: 100%; margin-bottom: 10px; padding: 0; @@ -17233,7 +17132,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; - border-top-color: transparent; opacity: 0; background: transparent; } @@ -17348,20 +17246,14 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 3px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-cookie-banner { @@ -17614,25 +17506,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` .govuk-details__text > :last-child { margin-bottom: 0; } -@media screen\\0 { - .govuk-details { - border-left: 10px solid; - border-left-color: var(--govuk-border-colour, #cecece); - } - .govuk-details__summary { - margin-top: 15px; - } - .govuk-details__summary-text { - font-weight: 700; - margin-bottom: 15px; - padding-left: 20px; - } -} -@media screen\\0 and (min-width: 40.0625em) { - .govuk-details__summary-text { - margin-bottom: 20px; - } -} @supports not (-ms-ime-align: auto) { .govuk-details__summary { position: relative; @@ -18851,7 +18724,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` @media (max-width: 40.0525em) { .govuk-panel { padding: 15px; - word-wrap: break-word; overflow-wrap: break-word; } } @@ -19211,20 +19083,14 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` outline-offset: 1px; box-shadow: 0 0 0 10px var(--govuk-hover-colour, #cecece); } -.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); -} -@media screen and (forced-colors: active), (-ms-high-contrast: active) { +@media (hover: hover) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - outline-color: Highlight; + box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00), 0 0 0 10px var(--govuk-hover-colour, #cecece); } } -@media (hover: none), (pointer: coarse) { - .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } +@media screen and (hover: hover) and (forced-colors: active), (hover: hover) and (-ms-high-contrast: active) { .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 4px var(--govuk-focus-colour, #ffdd00); + outline-color: Highlight; } } .govuk-select { @@ -19499,11 +19365,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` margin-bottom: 0; } } -@media screen and (min-width: 40.0625em) and (min-width: 0\\0 ) { - .govuk-service-navigation__list { - display: block; - } -} .govuk-service-navigation__active-fallback { font-weight: inherit; } @@ -19546,14 +19407,13 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` display: block; padding: 10px 15px; } -.govuk-skip-link:not(:active):not(:focus):not(.\\:focus) { +.govuk-skip-link:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -19845,11 +19705,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` .govuk-summary-card__action { display: inline; } -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .govuk-summary-card__action { - margin-bottom: 5px; - } -} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .govuk-summary-card__action:last-child { margin-bottom: 0; @@ -20329,7 +20184,6 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -20341,14 +20195,13 @@ exports[`src/govuk/index.scss matches snapshot 1`] = ` .govuk-visually-hidden::after { content: " "; } -.govuk-visually-hidden-focusable:not(:active):not(:focus):not(.\\:focus) { +.govuk-visually-hidden-focusable:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -21495,7 +21348,6 @@ exports[`src/govuk/objects/_button-group.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1; display: inline-block; - max-width: 100%; margin-top: 5px; margin-bottom: 20px; text-align: center; @@ -21841,7 +21693,6 @@ exports[`src/govuk/objects/_index.scss matches snapshot 1`] = ` font-size: 1.1875rem; line-height: 1; display: inline-block; - max-width: 100%; margin-top: 5px; margin-bottom: 20px; text-align: center; @@ -22051,7 +21902,6 @@ exports[`src/govuk/objects/_index.scss matches snapshot 1`] = ` } } .govuk-main-wrapper { - display: block; padding-top: 20px; padding-bottom: 20px; } @@ -22083,11 +21933,6 @@ exports[`src/govuk/objects/_index.scss matches snapshot 1`] = ` scroll-padding-top: 0; } } -@media screen { - .govuk-template { - overflow-y: scroll; - } -} .govuk-template__body { margin: 0; background-color: var(--govuk-body-background-colour, #ffffff); @@ -22168,7 +22013,6 @@ exports[`src/govuk/objects/_main-wrapper.scss matches snapshot 1`] = ` } } .govuk-main-wrapper { - display: block; padding-top: 20px; padding-bottom: 20px; } @@ -22240,11 +22084,6 @@ exports[`src/govuk/objects/_template.scss matches snapshot 1`] = ` scroll-padding-top: 0; } } -@media screen { - .govuk-template { - overflow-y: scroll; - } -} .govuk-template__body { margin: 0; background-color: var(--govuk-body-background-colour, #ffffff); @@ -24582,7 +24421,6 @@ exports[`src/govuk/utilities/_index.scss matches snapshot 1`] = ` margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -24594,14 +24432,13 @@ exports[`src/govuk/utilities/_index.scss matches snapshot 1`] = ` .govuk-visually-hidden::after { content: " "; } -.govuk-visually-hidden-focusable:not(:active):not(:focus):not(.\\:focus) { +.govuk-visually-hidden-focusable:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -24620,7 +24457,6 @@ exports[`src/govuk/utilities/_visually-hidden.scss matches snapshot 1`] = ` margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; @@ -24632,14 +24468,13 @@ exports[`src/govuk/utilities/_visually-hidden.scss matches snapshot 1`] = ` .govuk-visually-hidden::after { content: " "; } -.govuk-visually-hidden-focusable:not(:active):not(:focus):not(.\\:focus) { +.govuk-visually-hidden-focusable:not(:active):not(.\\:focus):not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; - clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important;