darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-11 02:23:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Remove rounded corners from map controls

Browse Source 
Also includes a quick fix for high contrast mode.
The buttons are separated by a horizontal line by
default, styled as a border above the 2nd button.

Both buttons use the border when focused in high
contrast mode to provide a form of outline.
This takes away the line dividing them, because
you can only have one border.

The buttons are still separated by a 1px margin so
this just sets a background colour on the
container to simulate the divider.
This commit is contained in:
Tom Byers
2021-08-25 15:32:11 +01:00
parent 388edeef5d
commit f70dcc8329
1 changed files with 78 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/map.scss
+25 -5
View File
@@ -51,12 +51,29 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
// //
// Also introduces a black divider between the buttons, made with a pseudo element, appearing on // Also introduces a black divider between the buttons, made with a pseudo element, appearing on
// focus to mimic the 2-colour style GOVUK Frontend buttons and links have // focus to mimic the 2-colour style GOVUK Frontend buttons and links have
.leaflet-bar a { .leaflet-bar {
border-radius: 0; // Remove rounded corners
@media (forced-colors: active) {
background: canvasText;
}
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 // Allow it to contain the absolutely positioned divider bar we show between buttons
// when one is focused // when one is focused
&:last-child {
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
@@ -68,8 +85,8 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
&:focus { &:focus {
// When colours are overridden, for example when users have a dark mode, // When colours are overridden, for example when users have a dark mode,
// backgrounds and box-shadows disappear, so we need to ensure there's a // backgrounds and box-shadows disappear, so we need to ensure there's a
// transparent outline which will be set to a visible colour by the OS. // outline so it can be set to a visible colour by the OS.
border: solid 2px transparent; border: solid 2px $govuk-focus-colour;
box-sizing: border-box; // make sure height includes the border box-sizing: border-box; // make sure height includes the border
line-height: 26px; // subtract the border from the height (normally 30px) line-height: 26px; // subtract the border from the height (normally 30px)
@@ -99,8 +116,9 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
height: 2px; height: 2px;
background: $govuk-focus-text-colour; background: $govuk-focus-text-colour;
// hide for focus:hover state
@media (forced-colors: active) { @media (forced-colors: active) {
background: canvasText; display: none;
} }
} }
@@ -117,6 +135,8 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
top: -1px; // No borders so just overlap space above parent button top: -1px; // No borders so just overlap space above parent button
width: 100%; width: 100%;
} }
}
} }
// Extra block to override specific LeafletJS rounded-corners when buttons are focused // Extra block to override specific LeafletJS rounded-corners when buttons are focused