From 0335e7ad170b08b286381a47a93c24300c41149c Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 18 Feb 2020 12:02:54 +0000 Subject: [PATCH] Give dashboard banner items some vertical space Giving the count-label some vertical margin means it has enough space when the flexbox contents wrap. This requires a bit extra on the top to counter the negative margin the count has subtracting 5px from the parent box. --- app/assets/stylesheets/components/banner.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss index 2b4af0c62..8e0e60e0d 100644 --- a/app/assets/stylesheets/components/banner.scss +++ b/app/assets/stylesheets/components/banner.scss @@ -151,7 +151,7 @@ display: flex; align-items: baseline; flex-wrap: wrap; - padding: ($gutter-two-thirds - 1px) 0 ($gutter-two-thirds + 1px) 0; + padding: ($gutter-half - 1px) 0 ($gutter-half + 1px) 0; border-top: 1px solid $border-colour; border-bottom: 1px solid $border-colour; margin-bottom: $gutter; @@ -181,6 +181,7 @@ @include govuk-font(24, $weight: bold); text-decoration: underline; padding-right: govuk-spacing(6); + margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item flex: 2 1 auto; }