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

Fixes for the comments in the map CSS

Browse Source 
Based on a range of comments made in the
associated pull request:
- 7c2f4adfd5 (r701234728)
- 7c2f4adfd5 (r701235330)
- 7c2f4adfd5 (r701235586)
- 7c2f4adfd5 (r701242035)
- 7c2f4adfd5 (r701241659)

Co-authored-by: Ben Thorner <benthorner@users.noreply.github.com>
This commit is contained in:
Tom Byers
2021-09-03 11:54:06 +01:00
parent c1c80802e2
commit 87674aef08
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,7 +39,7 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
// Overrides for zoom controls to make them match GOVUK buttons // Overrides for zoom controls to make them match GOVUK buttons
// https://design-system.service.gov.uk/components/button/ // https://design-system.service.gov.uk/components/button/
// //
// GOVUK buttons have an invisible outline, used for high contrast modes. Our buttons are cropped by // GOVUK buttons usually have an outline that shows up in high contrast modes. Our buttons are cropped by
// their container so we use their border instead. // their container so we use their border instead.
// //
// Also introduces a thick black divider between the buttons, made with a pseudo element, appearing // Also introduces a thick black divider between the buttons, made with a pseudo element, appearing
@@ -47,7 +47,7 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
// buttons and links have. // buttons and links have.
.leaflet-bar { .leaflet-bar {
border-radius: 0; // Remove rounded corners border-radius: 0; // Remove rounded corners
background: #CCCCCC; background: #CCCCCC; // Grey background to give a thin divider between buttons when they're not in focus
@media (forced-colors: active) { @media (forced-colors: active) {
background: canvasText; background: canvasText;
@@ -60,7 +60,7 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
&:first-child { &:first-child {
border-bottom: none; border-bottom: none;
margin-bottom: 1px; margin-bottom: 1px; // Thin divider to distinguish buttons
} }
&:last-child { &:last-child {
@@ -114,14 +114,14 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
// Styles for the divider, specifc to the second button being focused // Styles for the divider, specifc to the second button being focused
&:last-child:focus:not(:active):not(:hover):before { &:last-child:focus:not(:active):not(:hover):before {
left: -2px; // Subtract 2px left border left: -2px; // Subtract 2px left border
top: -3px; // Subtract 2px top border and position so it overlaps space above button top: -3px; // Shift divider up 1px so it overlaps buttons equally, and another 2px to compensate for the reduced height of the last button (due to the border)
width: calc(100% + 4px); // Compensate for borders width: calc(100% + 4px); // Compensate for borders
} }
// Styles for the divider, specifc to the first button being focused // Styles for the divider, specifc to the first button being focused
&:first-child:focus:not(:active):not(:hover) + a:before { &:first-child:focus:not(:active):not(:hover) + a:before {
left: 0px; // No borders on parent of :before when not focused left: 0px; // No borders on parent of :before when not focused
top: -1px; // No borders so just overlap space above parent button top: -1px; // Shift divider up 1px so it overlaps buttons equally
width: 100%; width: 100%;
} }
} }