From f90570bb5ad50781d738f15df0a9b2aa538b93f5 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 2 Jul 2018 12:16:42 +0100 Subject: [PATCH 1/2] Add customised colours handling for warning text By adding a border to this component, when a user customises their colour settings they will still see a circle even if the background is removed. --- src/components/warning-text/_warning-text.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/warning-text/_warning-text.scss b/src/components/warning-text/_warning-text.scss index 32f72e6a0c..d5f2fef6a7 100644 --- a/src/components/warning-text/_warning-text.scss +++ b/src/components/warning-text/_warning-text.scss @@ -26,18 +26,21 @@ top: 50%; left: 0; - min-width: 38px; - min-height: 35px; - margin-top: -20px; // Half the height of the 38px circle (adjusted for NTA) + min-width: 32px; + min-height: 29px; + margin-top: -20px; // Half the height of the circle (adjusted for NTA) padding-top: 3px; + // When a user customises their colours the background colour will often be removed. + // Adding a border to the component keeps it's shape as a circle. + border: 3px solid govuk-colour("black"); border-radius: 50%; color: govuk-colour("white"); background: govuk-colour("black"); font-size: 1.6em; - line-height: 35px; + line-height: 29px; text-align: center; From 5b0dfd03daaf41bad23bf0996108d19d5cc0ad9e Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 4 Jul 2018 10:45:51 +0100 Subject: [PATCH 2/2] Add CHANGELOG entry --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a4d2343ee..aecbb32995 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -52,6 +52,11 @@ of text ([PR #856](https://github.com/alphagov/govuk-frontend/pull/856)) +- Add customised colours handling for warning text + + By adding a border to this component, when a user customises their colour settings + they will still see a circle even if the background is removed. + ([PR #852](https://github.com/alphagov/govuk-frontend/pull/852)) 🏠 Internal: