From 4950b08d71dd0588fc75ca9334a8c8e5cec5e3f5 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 26 Aug 2021 11:51:44 +0100
Subject: [PATCH] Fix CSS that removes rounded corners on controls

Users on devices/browsers that support touch have
the rounded corners styles applied by this
selector:

.leaflet-touch .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:last-child

It has a higher precedence than the existing
selector we use to override it so our overrides
are ignored:

.leaflet-bar a:first-child,
.leaflet-bar a:last-child

This changes the selector for our block of styles
to include one matching the existing styles above
so devices/browsers also get our styles.

Note 1: this actually means some styles were no
longer needed so this also removes them.

Note 2: oddly, this was spotted in Firefox when
displaying high contrast mode on desktop. So not a
touch device but leaflet's JS is marking it as
such.
---
 app/assets/stylesheets/map.scss | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss
index 66da5291a..c766fade3 100644
--- a/app/assets/stylesheets/map.scss
+++ b/app/assets/stylesheets/map.scss
@@ -61,20 +61,10 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
 
   a {
 
-    &:first-child {
-      // Remove rounded corners
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
     &:last-child {
       // Allow it to contain the absolutely positioned divider bar we show between buttons
       // when one is focused
       position: relative;
-
-      // Remove rounded corners
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
     }
 
     // Hover style is darker background
@@ -142,11 +132,21 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
 }
 
 // Extra block to override specific LeafletJS rounded-corners when buttons are focused
+.leaflet-bar a,
 .leaflet-touch .leaflet-bar a {
-  &:first-child:focus,
-  &:last-child:focus {
-    border-radius: initial;
+
+  &:first-child {
+    // Remove rounded corners
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
+
+  &:last-child {
+    // Remove rounded corners
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
 }
 
 // Map attribution links