diff --git a/source/sass/11-base/mixins/_mixins.scss b/source/sass/11-base/mixins/_mixins.scss index c3bd0beae..e64b7708c 100644 --- 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 index fe3d81ddc..c26339599 100644 --- a/source/sass/31-molecules/map/_leaflet.scss +++ b/source/sass/31-molecules/map/_leaflet.scss @@ -4,12 +4,13 @@ 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); } } @@ -17,10 +18,10 @@ 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'); + + } + } + }