Merge pull request #1006 from StadGent/feature/DMD09LEAFL-4

DMD09LEAFL-4: Add basic css for leaflet maps
StadGent · Jul 8, 2024 · b0bc279 · b0bc279
2 parents cf4b5e6 + 0932ce7
commit b0bc279
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All Notable changes to `StadGent/drupal_theme_gent-base`.
 
+## [Unreleased]
+
+### Added
+
+- DMD09LEAFL-4: Add css for leaflet maps.
+
 ## [6.x]
 
 ### Added

diff --git a/source/sass/31-molecules/map/_leaflet.scss b/source/sass/31-molecules/map/_leaflet.scss
@@ -0,0 +1,108 @@
+.leaflet-container.leaflet-touch {
+  .leaflet-control-layers,
+  .leaflet-bar {
+    border: 0;
+
+    a {
+      width: 50px;
+      height: 50px;
+      line-height: 55px;
+      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-repeat: no-repeat;
+      background-size: auto;
+    }
+  }
+
+  &.leaflet-fullscreen-on {
+    .leaflet-control-fullscreen {
+      a {
+        @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-repeat: no-repeat;
+      }
+    }
+  }
+
+  .leaflet-control-locate {
+    a {
+      .leaflet-control-locate-location-arrow {
+        @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-repeat: no-repeat;
+        width: 50px;
+        height: 50px;
+        margin: 0;
+      }
+    }
+  }
+
+  .leaflet-control-layers {
+    a {
+      @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-repeat: no-repeat;
+      border: 0;
+      background-size: auto;
+    }
+  }
+
+  .leaflet-control-zoom {
+    a {
+      box-shadow: 0 8px 12px 0 rgba(0, 125, 179, .06);
+
+      span {
+        @include theme('color', 'color-zero', 'leaflet-map-zoom-icon-color');
+
+        font-size: 2rem;
+      }
+
+      &.leaflet-control-zoom-in {
+        border: 0;
+        margin-bottom: 10px;
+        border-radius: 0;
+      }
+
+      &.leaflet-control-zoom-out {
+        border: 0;
+        border-radius: 0;
+      }
+    }
+  }
+
+  .leaflet-popup-close-button {
+    span {
+      @include theme('color', 'color-zero', 'leaflet-map-popup-close-button-color');
+
+      font-size: 1.5rem;
+    }
+  }
+
+  .ui-autocomplete-input {
+    @include theme('background-color', 'color-none', 'leaflet-map-search-box-background-color');
+    @include theme('border-color', 'color-zero', 'leaflet-map-search-box-border-color');
+
+    color: rgb(25, 25, 25);
+    border-radius: 3px;
+    outline-style: none;
+    transition: border-color .25s;
+    border-style: solid;
+    border-width: 1px;
+  }
+}