search

mapbox / mapbox-gl-geocoder

Geocoder control for mapbox-gl-js using Mapbox Geocoding API
https://mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/
ISC License
368 stars 179 forks source link

Match collapsed theming with navigation controls #296

Open tristen opened 5 years ago

tristen commented 5 years ago

In this collapsed state, the container has a wide box shadow, slightly grey icon and different dimensions:

Screen Shot 2019-09-20 at 9 46 07 AM

For consistency with the default navigation controls, I think the styling to conform so its flush and resembles a member of the same system.

cc/ @scottsfarley93

kmanzana commented 3 years ago

Did you end up styling this to match? or has someone else and can they share the code?

kmanzana commented 3 years ago

for future reference or in case it helps anyone, here is how i styled the button 

.mapboxgl-ctrl-geocoder {
  height: 29px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon-search {
  top: 0;
  left: 5px;
  height: 100%;
  fill: rgba(0, 0, 0, 0.87);
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  height: 29px;
}
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--collapsed {
  width: 29px !important;
  min-width: 29px;
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
  top: 4px;
}

button collapsed image

search box expanded image

if the maintainers fix this or someone wants to open a PR, may be easiest to add a .mapbox-ctrl-group to the top level div, then put the svg inside of a button. this would allow styles applied by .mapboxgl-ctrl-group button from Mapbox GL to get applied here too, may help, but haven't dug into that myself.