darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 00:33:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix CSS that removes rounded corners on controls

Browse Source 
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.
This commit is contained in:
Tom Byers
2021-08-26 11:51:44 +01:00
parent 8827b8802e
commit 4950b08d71
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/stylesheets/map.scss
View File

@@ -61,20 +61,10 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
a { a {
&:first-child {
// Remove rounded corners
border-top-left-radius: 0;
border-top-right-radius: 0;
}
&:last-child { &:last-child {
// Allow it to contain the absolutely positioned divider bar we show between buttons // Allow it to contain the absolutely positioned divider bar we show between buttons
// when one is focused // when one is focused
position: relative; position: relative;
// Remove rounded corners
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
// Hover style is darker background // 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 // Extra block to override specific LeafletJS rounded-corners when buttons are focused
.leaflet-bar a,
.leaflet-touch .leaflet-bar a { .leaflet-touch .leaflet-bar a {
&:first-child:focus,
&:last-child:focus { &:first-child {
border-radius: initial; // 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 // Map attribution links