app/assets/stylesheets/maplibre-gl-all.scss

   1 /*
   2  *= require maplibre-gl
   3  */
   4
   5 @import "parameters";
   6
   7 .maplibregl-ctrl {
   8   margin-right: 0 !important;
   9 }
  10
  11 .maplibregl-control-container .maplibregl-ctrl button {
  12   display: block;
  13   height: 40px;
  14   width: 40px;
  15   padding: 10px;
  16   background-color: rgba(0, 0, 0, 0.6);
  17
  18   &:hover, &:focus {
  19     background-color: black !important;
  20   }
  21
  22   &:first-child,
  23   &:first-child:focus {
  24     border-radius: 4px 0 0 0;
  25   }
  26
  27   &:last-child,
  28   &:last-child:focus {
  29     border-radius: 0 0 0 4px;
  30   }
  31 }
  32
  33 .maplibregl-ctrl-group {
  34   background-color: transparent !important;
  35 }
  36
  37 .maplibregl-ctrl-group button+button {
  38   border-top: 0;
  39 }
  40
  41 .maplibregl-user-location-accuracy-circle {
  42   background-color: $green !important;
  43   opacity: 0.2 !important;
  44 }
  45
  46 .maplibregl-user-location-dot, .maplibregl-user-location-dot:before {
  47   background-color: $vibrant-green !important;
  48 }
  49
  50 .maplibregl-ctrl button .maplibregl-ctrl-icon {
  51   background-image: none !important;
  52   background-color: white;
  53 }
  54
  55 .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  56   mask-image: image-url("map-controls/zoomin.svg");
  57 }
  58
  59 .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  60   mask-image: image-url("map-controls/zoomout.svg");
  61 }
  62
  63 .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
  64   mask-image: image-url("map-controls/geolocate.svg");
  65 }
  66
  67 .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
  68   background-color: $vibrant-green;
  69 }