342 lines
6.9 KiB
SCSS
342 lines
6.9 KiB
SCSS
$marker_width: 40px;
|
|
$medium_marker_width: 32px;
|
|
$small_marker_width: 20px;
|
|
|
|
$marker_icons: (
|
|
(ambulance, "\f0f9"),
|
|
(asterisk, "\f069"),
|
|
(bed, "\f236"),
|
|
(beer, "\f0fc"),
|
|
(bell, "\f0a2"), // bell-o
|
|
(bicycle, "\f206"),
|
|
(binoculars, "\f1e5"),
|
|
(bolt, "\f0e7"),
|
|
(book, "\f02d"),
|
|
(briefcase, "\f0b1"),
|
|
(broken_chain, "\f127"), // chain-broken
|
|
(building, "\f0f7"),
|
|
(bullhorn, "\f0a1"),
|
|
(bus, "\f207"),
|
|
(car, "\f1b9"),
|
|
(checkmark, "\f00c"), // check
|
|
(child, "\f1ae"),
|
|
(cloud, "\f0c2"),
|
|
(coffee, "\f0f4"),
|
|
(comments, "\f086"),
|
|
(cube, "\f1b2"),
|
|
(cutlery, "\f0f5"),
|
|
(desktop, "\f108"),
|
|
(drop, "\f043"), // tint
|
|
(eye, "\f06e"),
|
|
(female, "\f182"),
|
|
(fire_extinguisher, "\f134"),
|
|
(flag, "\f024"),
|
|
(gavel, "\f0e3"),
|
|
(gift, "\f06b"),
|
|
(glass, "\f000"),
|
|
(group, "\f0c0"),
|
|
(heartbeat, "\f21e"),
|
|
(heart, "\f004"),
|
|
(hospital, "\f0fd"), // h-square
|
|
(house, "\f015"),
|
|
(key, "\f084"),
|
|
(leaf, "\f06c"),
|
|
(life_ring, "\f1cd"),
|
|
(lightbulb, "\f0eb"), // lightbulb-o
|
|
(male, "\f183"),
|
|
(map_signs, "\f277"),
|
|
(medkit, "\f0fa"),
|
|
(microphone, "\f130"),
|
|
(mobile, "\f10b"),
|
|
(motorcycle, "\f21c"),
|
|
(music, "\f001"),
|
|
(paint_brush, "\f1fc"),
|
|
(paw, "\f1b0"),
|
|
(phone, "\f095"),
|
|
(recycle, "\f1b8"),
|
|
(road, "\f018"),
|
|
(ship, "\f21a"),
|
|
(shopping_bag, "\f290"),
|
|
(shopping_cart, "\f07a"),
|
|
(shower, "\f2cc"),
|
|
(soccer_ball, "\f1e3"), // futbol-o
|
|
(star, "\f005"),
|
|
(subway, "\f239"),
|
|
(taxi, "\f1ba"),
|
|
(ticket, "\f145"),
|
|
(train, "\f238"),
|
|
(trash, "\f1f8"),
|
|
(tree, "\f1bb"),
|
|
(truck, "\f0d1"),
|
|
(university, "\f19c"),
|
|
(video_camera, "\f03d"),
|
|
(warning, "\f071"), // exclamation-triangle
|
|
(wheelchair, "\f193"),
|
|
(wifi, "\f1eb"),
|
|
);
|
|
|
|
div.combo-cell-map.leaflet-container {
|
|
height: 60vh;
|
|
font: inherit;
|
|
}
|
|
|
|
/* leaflet styles */
|
|
|
|
div.leaflet-marker-icon.leaflet-div-icon {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
div.leaflet-div-icon span {
|
|
width: #{$marker_width};
|
|
height: #{$marker_width};
|
|
display: block;
|
|
left: #{0 - $marker_width / 2};
|
|
top: #{0 - $marker_width * 1.2};
|
|
position: relative;
|
|
border-radius: #{$marker_width * 10} #{$marker_width * 6} #{$marker_width * 0.5};
|
|
transform: scale(1, 1.3) rotate(45deg);
|
|
box-sizing: content-box;
|
|
&.leaflet-icon-marker-medium {
|
|
width: #{$medium_marker_width};
|
|
height: #{$medium_marker_width};
|
|
left: #{0 - $medium_marker_width / 2};
|
|
top: #{0 - $medium_marker_width * 1.2};
|
|
border-radius: #{$medium_marker_width * 10} #{$medium_marker_width * 6} #{$medium_marker_width * 0.5};
|
|
}
|
|
&.leaflet-icon-marker-small {
|
|
width: #{$small_marker_width};
|
|
height: #{$small_marker_width};
|
|
left: #{0 - $small_marker_width / 2};
|
|
top: #{0 - $small_marker_width * 1.2};
|
|
border-radius: #{$small_marker_width * 10} #{$small_marker_width * 6} #{$small_marker_width * 0.5};
|
|
}
|
|
}
|
|
|
|
div.leaflet-div-icon span {
|
|
border: 1px solid white;
|
|
box-shadow: 0 0 0 1px #aaa;
|
|
}
|
|
|
|
div.leaflet-div-icon span i {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
transform: translateY(50%) rotate(-45deg);
|
|
height: 50%;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
div.leaflet-popup-content {
|
|
div.popup-field {
|
|
margin: 0.5rem 0;
|
|
}
|
|
span.field-label,
|
|
span.field-value {
|
|
display: block;
|
|
}
|
|
span.field-label + span.field-value {
|
|
font-weight: bold;
|
|
a {
|
|
overflow-wrap: break-word;
|
|
}
|
|
}
|
|
div.file-field {
|
|
font-weight: normal;
|
|
font-size: 90%;
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
max-height: 10vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.leaflet-div-icon span {
|
|
i::before {
|
|
display: inline-block;
|
|
background: white;
|
|
border-radius: 100%;
|
|
padding: #{$marker_width * 0.1};
|
|
transform: scale(1.3, 1);
|
|
position: relative;
|
|
top: #{0 - $marker_width * 0.1};
|
|
height: #{$marker_width * 0.5};
|
|
line-height: #{$marker_width * 0.5};
|
|
width: #{$marker_width * 0.5};
|
|
font-size: #{$marker_width * 0.4};
|
|
}
|
|
&.leaflet-icon-marker-medium i::before {
|
|
padding: #{$medium_marker_width * 0.1};
|
|
top: #{0 - $medium_marker_width * 0.1};
|
|
height: #{$medium_marker_width * 0.5};
|
|
line-height: #{$medium_marker_width * 0.5};
|
|
width: #{$medium_marker_width * 0.5};
|
|
font-size: #{$medium_marker_width * 0.4};
|
|
}
|
|
&.leaflet-icon-marker-small i::before {
|
|
padding: #{$small_marker_width * 0.1};
|
|
top: #{0 - $small_marker_width * 0.25};
|
|
height: #{$small_marker_width * 0.5};
|
|
line-height: #{$small_marker_width * 0.5};
|
|
width: #{$small_marker_width * 0.5};
|
|
font-size: #{$small_marker_width * 0.5};
|
|
}
|
|
}
|
|
|
|
/* leaflet markers icons */
|
|
|
|
.layers a::before,
|
|
select#id_icon option::before,
|
|
ul#id_icon span label::before,
|
|
i.leaflet-marker-icon {
|
|
font: normal normal normal 1em/1 FontAwesome;
|
|
}
|
|
|
|
.layers a::before,
|
|
select#id_icon option::before {
|
|
padding-right: 1ex;
|
|
display: inline-block;
|
|
width: 3ex;
|
|
text-align: center;
|
|
}
|
|
|
|
@each $marker_icon_name, $marker_icon_symbol in $marker_icons {
|
|
ul#id_icon li span.icon-#{$marker_icon_name} label::before,
|
|
a.layer-icon-#{$marker_icon_name}::before,
|
|
select#id_icon option[value=#{$marker_icon_name}]::before,
|
|
i.leaflet-marker-icon.#{$marker_icon_name}::before {
|
|
content: $marker_icon_symbol;
|
|
}
|
|
}
|
|
|
|
ul#id_icon {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
column-width: 30ex;
|
|
li {
|
|
margin-right: 1em;
|
|
margin-top: -1px;
|
|
span label {
|
|
display: block;
|
|
border: 1px solid #bcbcbc;
|
|
width: 100%;
|
|
padding: 0.5ex;
|
|
}
|
|
span label::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 2.5em;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* leaflet markercluster styles */
|
|
|
|
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
|
|
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
|
|
}
|
|
|
|
.leaflet-cluster-spider-leg {
|
|
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
|
|
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
|
|
}
|
|
|
|
.marker-cluster {
|
|
background-clip: padding-box;
|
|
border-radius: 30px;
|
|
div {
|
|
display: block;
|
|
background: #fff;
|
|
border-radius: 30px;
|
|
font-weight: bold;
|
|
height: 50px;
|
|
width: 50px;
|
|
text-align: center;
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
span {
|
|
line-height: 50px;
|
|
}
|
|
&-small {
|
|
background: #b5e28c;
|
|
div {
|
|
font-size: 200%;
|
|
}
|
|
}
|
|
&-medium {
|
|
background: #f1d357;
|
|
div {
|
|
font-size: 200%;
|
|
}
|
|
}
|
|
&-large {
|
|
background: #fd9c73;
|
|
div {
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.leaflet-top.leaflet-right {
|
|
width: 40%;
|
|
}
|
|
|
|
.leaflet-search {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: right;
|
|
align-items: start;
|
|
|
|
&.leaflet-control {
|
|
pointer-events: none;
|
|
&.open {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.leaflet-bar {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
&--control {
|
|
width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
&.open &--control {
|
|
width: 100%
|
|
}
|
|
|
|
&--input {
|
|
width: 100%;
|
|
}
|
|
|
|
&--result-list {
|
|
padding-right: 0.7em;
|
|
background: white;
|
|
font-size: 100%;
|
|
}
|
|
|
|
&--result-item {
|
|
text-wrap: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
font-size: 1em;
|
|
white-space: nowrap;
|
|
|
|
&:hover, &.selected {
|
|
color: white;
|
|
background-color: #5897fb;
|
|
}
|
|
}
|
|
}
|