Skip to content

Commit

Permalink
Fix warning text if border-box sizing applied globally
Browse files Browse the repository at this point in the history
If a user applies a global box-sizing reset [1], the warning text icon is 'squished' horizontally as the border is 'accounted for' within the 29px min-width.

Explicitly use border-box sizing, as this means that the min-width reflects the actual desired width of the icon, rather than having to factor the border width in separately. As the box-sizing model is now set explicitly, it should display correctly whether the reset is applied or not.

Increase the min-width and min-height of the icon to include the border (3px border * 2 in each direction = 6px).

[1]: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  • Loading branch information
36degrees committed Jul 16, 2020
1 parent f57d338 commit d425b29
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions src/govuk/components/warning-text/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@
.govuk-warning-text__icon {
@include govuk-font($size: false, $weight: bold);

box-sizing: border-box;

display: inline-block;

position: absolute;
left: 0;

min-width: 29px;
min-height: 29px;
min-width: 35px;
min-height: 35px;
margin-top: -7px;

@include govuk-media-query($from: tablet) {
Expand Down

0 comments on commit d425b29

Please sign in to comment.