@mixin icon-add ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin icon-all-out ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin icon-close ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin icon-fullscreen ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin icon-fullscreen-exit ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin icon-navigation ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin icon-remove ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin icon-search ($color: black) {
background-image: url('data:image/svg+xml;utf8,');
}
@mixin mat-elevation-2 {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
@mixin lja-map-theme($theme, $typography) {
$accent: map-get($theme, accent);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.lja-map {
&.mapboxgl-map {
@include mat-typography-level-to-styles($typography, body-1);
}
.mapboxgl-ctrl-group,
.mapboxgl-ctrl-icon {
background-color: mat-color($background, raised-button);
}
.mapboxgl-ctrl-group {
@include mat-elevation-2;
> button + button {
border-top: solid 1px mat-color($foreground, divider);
}
}
.mapboxgl-ctrl-icon,
.mapboxgl-ctrl-icon > span {
&.mapboxgl-ctrl-zoom-in {
@include icon-add(mat-color($foreground, icon));
}
&.mapboxgl-ctrl-zoom-out {
@include icon-remove(mat-color($foreground, icon));
}
&.mapboxgl-ctrl-fullscreen {
@include icon-fullscreen(mat-color($foreground, icon));
}
&.mapboxgl-ctrl-shrink {
@include icon-fullscreen-exit(mat-color($foreground, icon));
}
&.mapboxgl-ctrl-home {
@include icon-all-out(mat-color($foreground, icon));
}
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
@include icon-navigation(mat-color($foreground, icon));
}
.mapboxgl-ctrl > button:hover {
background-color: mat-color($background, hover);
}
.mapboxgl-popup-content {
background: mat-color($background, card);
@include mat-elevation-2;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
border-top-color: mat-color($background, card);
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
border-bottom-color: mat-color($background, card);
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
border-right-color: mat-color($background, card);
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
border-left-color: mat-color($background, card);
}
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
border-bottom-color: mat-color($background, card);
}
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
border-top-color: mat-color($background, card);
}
// Geocoder
.mapboxgl-ctrl-geocoder {
font-size: mat-font-size($typography, body-1);
input[type='text'] {
@include mat-typography-level-to-styles($typography, input);
color: mat-color($foreground, text);
&::placeholder {
color: mat-color($foreground, secondary-text);
}
}
&,
& ul {
background-color: mat-color($background, raised-button);
@include mat-elevation-2;
}
ul {
@include mat-typography-level-to-styles($typography, body-1);
}
ul > li > a {
@include mat-typography-level-to-styles($typography, body-1);
color: mat-color($foreground, secondary-text);
border-bottom: solid 1px mat-color($foreground, divider);
strong {
font-weight: normal;
color: mat-color($accent, 500);
}
}
ul > li.active > a,
ul > li > a:hover {
color: mat-color($foreground, text);
background-color: mat-color($background, hover);
}
.geocoder-pin-right * {
background-color: mat-color($background, raised-button);
}
}
.geocoder-icon-search {
@include icon-search(mat-color($foreground, icon));
}
.geocoder-icon-close {
@include icon-close(mat-color($foreground, icon));
}
.mapboxgl-ctrl-scale {
background-color: transparent;
@include mat-typography-level-to-styles($typography, body-1);
color: mat-color($foreground, text);
border-color: mat-color($foreground, text);
}
}
}
@mixin lja-map-components-theme ($theme, $typography) {
@include lja-map-theme($theme, $typography);
}