diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss index d9e51f85f..672ce5207 100644 --- a/app/assets/stylesheets/components/broadcast-message.scss +++ b/app/assets/stylesheets/components/broadcast-message.scss @@ -6,6 +6,7 @@ max-width: 464px; box-sizing: border-box; padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3); + border: solid 1px transparent; // to show it's area in high contrast mode background: $panel-colour; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05); border-radius: 5px; @@ -18,10 +19,11 @@ &-heading { display: block; position: absolute; - top: 0; - left: 0; + top: -1px; + left: -1px; padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px; - width: 100%; + border: solid 1px transparent; // to show it's area in high contrast mode + width: calc(100% + 2px); // grow to overlap wrapper's border (when combined with top and left) box-sizing: border-box; font-weight: bold; background: $grey-1 file-url('exclamation.svg'); diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index e497852de..8ef516b31 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -122,7 +122,8 @@ display: block; text-align: left; - padding: 10px govuk-spacing(3); + padding: 9px (govuk-spacing(3) - 1); + border: 1px solid transparent; text-align: center; &:link, diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index c20769caa..f9687a7ea 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -39,6 +39,11 @@ padding-bottom: govuk-spacing(3); z-index: 10; + // transparent borders become visible in high contrast modes so set to match background + @media (-ms-high-contrast: active), (forced-colors: active) { + border-color: Canvas; + } + .placeholder, .placeholder-conditional { color: transparent;