diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css index 3b0524e25cd..6a5cb7dfeb8 100644 --- a/src/css/mapbox-gl.css +++ b/src/css/mapbox-gl.css @@ -135,31 +135,35 @@ background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg'); } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate { +.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before { background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#333); + content: ""; + display: block; + width: 100%; + height: 100%; } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:disabled { +.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before:disabled { background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#aaa); } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active { +.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active::before { background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#33b5e5); } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error { +.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error::before { background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#e58978); } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background { +.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background::before { background-image: svg-load('svg/mapboxgl-ctrl-geolocate-background.svg', fill=#33b5e5); } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error { +.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error::before { background-image: svg-load('svg/mapboxgl-ctrl-geolocate-background.svg', fill=#e54e33); } -.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting { +.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting::before { -webkit-animation: mapboxgl-spin 2s infinite linear; -moz-animation: mapboxgl-spin 2s infinite linear; -o-animation: mapboxgl-spin 2s infinite linear;