Merge pull request #1007 from StadGent/feature/DMD09LEAFL-27

DMD09LEAFL-27: More css for leaflet maps
StadGent · Jul 18, 2024 · e44b349 · e44b349
2 parents b0bc279 + f7c69a3
commit e44b349
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 15 deletions.
diff --git a/source/sass/11-base/mixins/_mixins.scss b/source/sass/11-base/mixins/_mixins.scss
@@ -6,3 +6,7 @@
   width: 1px;
   word-wrap: normal;
 }
+
+@mixin box-shadow($horizontal: 0, $vertical: 3px, $blur: 14px, $rgba: color('gray', -3)) {
+  box-shadow: $horizontal $vertical $blur $rgba;
+}
diff --git a/source/sass/31-molecules/map/_leaflet.scss b/source/sass/31-molecules/map/_leaflet.scss
@@ -4,23 +4,24 @@
     border: 0;
 
     a {
-      width: 50px;
-      height: 50px;
-      line-height: 55px;
+      @include box-shadow();
+
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      box-shadow: 0 8px 12px 0 rgba(0, 125, 179, .06);
     }
   }
 
   .leaflet-control-fullscreen {
     a {
       @include theme('background-color', 'color-none', 'leaflet-map-open-fullscreen-icon-background-color');
 
-      background-image:url('#{$styleguide-dir}/img/svg/fullscreen-enter.svg');
-      background-position:10px 10px;
+      background-image: url('#{$styleguide-dir}/img/svg/fullscreen-enter.svg');
+      background-position: 8px 8px;
       background-repeat: no-repeat;
-      background-size: auto;
+      background-size: 25px 25px;
     }
   }
 
@@ -30,8 +31,9 @@
         @include theme('background-color', 'color-none', 'leaflet-map-close-fullscreen-icon-background-color');
 
         background-image: url('#{$styleguide-dir}/img/svg/fullscreen-exit.svg');
-        background-position:10px 10px;
+        background-position: 8px 8px;
         background-repeat: no-repeat;
+        background-size: 25px 25px;
       }
     }
   }
@@ -42,10 +44,11 @@
         @include theme('background-color', 'color-none', 'leaflet-map-location-icon-background-color');
 
         background-image: url('#{$styleguide-dir}/img/svg/target.svg');
-        background-position:10px 10px;
+        background-position: 8px 8px;
         background-repeat: no-repeat;
-        width: 50px;
-        height: 50px;
+        background-size: 25px 25px;
+        width: 40px;
+        height: 40px;
         margin: 0;
       }
     }
@@ -56,21 +59,21 @@
       @include theme('background-color', 'color-none', 'leaflet-map-layers-icon-background-color');
 
       background-image: url('#{$styleguide-dir}/img/svg/layers.svg');
-      background-position:10px 10px;
+      background-position: 8px 8px;
       background-repeat: no-repeat;
       border: 0;
-      background-size: auto;
+      background-size: 25px 25px;
     }
   }
 
   .leaflet-control-zoom {
     a {
-      box-shadow: 0 8px 12px 0 rgba(0, 125, 179, .06);
+      @include box-shadow();
 
       span {
         @include theme('color', 'color-zero', 'leaflet-map-zoom-icon-color');
 
-        font-size: 2rem;
+        font-size: 1.5rem;
       }
 
       &.leaflet-control-zoom-in {
@@ -83,6 +86,14 @@
         border: 0;
         border-radius: 0;
       }
+
+      &:hover, &:focus {
+        @include theme('background-color', 'color-none', 'leaflet-map-button-hover-background-color');
+
+        background-image: none;
+        background-size: unset;
+        outline: none;
+      }
     }
   }
 
@@ -98,11 +109,52 @@
     @include theme('background-color', 'color-none', 'leaflet-map-search-box-background-color');
     @include theme('border-color', 'color-zero', 'leaflet-map-search-box-border-color');
 
+    background-image: url('#{$styleguide-dir}/img/iconfont/search.svg');
+    background-size: 25px 25px;
     color: rgb(25, 25, 25);
     border-radius: 3px;
     outline-style: none;
+    height: 30px;
     transition: border-color .25s;
     border-style: solid;
     border-width: 1px;
   }
+
+  .gent-leaflet-location-icon {
+    @include theme('background-color', 'color-none', 'leaflet-map-location-icon-background-color');
+    @include box-shadow();
+
+    border-radius: 30px;
+    padding: 5px;
+  }
+
+  .leaflet-popup-content-wrapper {
+    border-radius: 0
+  }
+
+  a.leaflet-popup-close-button {
+    top: 10px;
+    right: 10px;
+  }
+
+  .marker-cluster {
+    span {
+      @include theme('color', 'color-none', 'leaflet-map-marker-cluster-text-color');
+
+      font-size: 15px;
+      font-weight: bold;
+    }
+  }
+
+  .marker-cluster-small,
+  .marker-cluster-medium,
+  .marker-cluster-large {
+    @include theme('background-color', 'color-primary-light', 'leaflet-map-markercluster-background-shadow');
+
+    div {
+      @include theme('background-color','color-primary', 'leaflet-map-markercluster-background-color');
+
+    }
+  }
+
 }