From ee3e3c6c90d6b9e10957792f45a10061a941bacd Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 2 Sep 2021 11:59:39 +0100
Subject: [PATCH] Change how line between map buttons is styled

There is a slight variance in how the line between
the map buttons is rendered when in forced-colors
mode and when not. This is not helped by it
alternately being rendered as either:
- a gap between buttons, showing the container
  colour
- a border-bottom on the first button

This attempts to flatten these styles so it is
only styled as a gap between the buttons so
changes to how its colour renders in different
modes can just be dealt with on the container.
---
 app/assets/stylesheets/map.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss
index 78aa580e9..e226cd521 100644
--- a/app/assets/stylesheets/map.scss
+++ b/app/assets/stylesheets/map.scss
@@ -49,6 +49,7 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
 // focus to mimic the 2-colour style GOVUK Frontend buttons and links have
 .leaflet-bar {
   border-radius: 0; // Remove rounded corners
+  background: #CCCCCC;
 
   @media (forced-colors: active) {
     background: canvasText;
@@ -59,6 +60,11 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
     // Outlines don't work because of the buttons being so close together so turn off
     outline: none;
 
+    &:first-child {
+      border-bottom: none;
+      margin-bottom: 1px;
+    }
+
     &:last-child {
       // Allow it to contain the absolutely positioned divider bar we show between buttons
       // when one is focused
@@ -93,11 +99,6 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
       background-color: $govuk-focus-colour;
     }
 
-    // Retain the space between buttons now we're using the border in the focus style
-    &:first-child:focus {
-      margin-bottom: 1px;
-    }
-
     // 3px divider between buttons as a version of the underline from the GOVUK focus style
     &:last-child:focus:not(:active):not(:hover):before,
     &:first-child:focus:not(:active):not(:hover) + a:before {