publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-22 09:41:26 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Zoom button styling does not match spec (#395)

Browse source 
* Fixes #320, Zoom button styling does not match spec
* Setting explicit size for icon dimension to avoid automatic SVG sizing weirdness for gatsby build static site
This commit is contained in:
Nat Hillard 2021-07-22 12:53:18 -04:00 • committed by GitHub
parent 8eb15bcac0
commit ab72dc24cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/territoryFocusControl.module.scss
View file

@ -1,6 +1,6 @@
.territoryFocusButton {
width: 40px;
height: 40px;
width: 2.5em;
height: 2.5em;
border-width: 1px 2px;
border-color: #000000;
border-style: solid;
@ -16,7 +16,7 @@
flex-direction: column;
text-align: center;
font-size: 16px;
line-height: 40px;
line-height: 1.75em;
position: absolute;
left: 20px;
top: 300px;

63
client/src/styles/global.scss
View file

@ -211,15 +211,58 @@ $primary-color: #112f4e;
}
// Because we're using react-map-gl, you need to use
// the mapboxgl- class name variables
// the mapboxgl- class name variables.
// Maplibre has its own classnames with a maplibre prefix,
// but it after 1.14.0 it optionally still allows for the mapbox-gl prefix
.mapboxgl-ctrl-group button {
height: 40px;
width: 40px;
box-sizing: border-box;
border-width: 2px;
border-color: #000000;
border-style: solid;
background-color: #ffffff;
font-size: 24px;
// Below properties override mb defaults
.mapboxgl-ctrl-group:not(:empty) {
box-shadow: none;
}
@media (-ms-high-contrast: active) {
.mapboxgl-ctrl-group:not(:empty) {
box-shadow: none;
}
}
.mapboxgl-ctrl-group {
border-radius: 0px;
}
.mapboxgl-ctrl {
button + button {
border-top: 1px;
}
button {
border-radius: 0px;
height: 1.66em;
width: 1.66em;
box-sizing: border-box;
background-color: #ffffff;
border-width: 2px;
border-color: #000000;
border-style: solid;
font-size: 1.5em;
// It seems necessary to set an explicit size for one of the dimensions
// in order for this icon to be rendered correctly by gatsby build
// see more here: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/
.mapboxgl-ctrl-icon {
height: 1em;
}
}
button.mapboxgl-ctrl-zoom-in {
.mapboxgl-ctrl-icon {
background-image: url("../../node_modules/uswds/dist/img/usa-icons/add.svg");
}
}
button.mapboxgl-ctrl-zoom-out {
.mapboxgl-ctrl-icon {
background-image: url("../../node_modules/uswds/dist/img/usa-icons/remove.svg");
}
}
}