Merge pull request #852 from alphagov/make-warning-text-icon-better-w…

…hen-overriden-colours Add border to warning text circle for overriden colours
alphagov · Jul 4, 2018 · 2a6569c · 2a6569c
2 parents 6979369 + 5b0dfd0
commit 2a6569c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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:
 

diff --git 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;