ukraine-timemap/src/scss/map.scss

@import 'popup';

@-webkit-keyframes pulsate {
  0% { opacity: 0.1; }
  50% { opacity: 0.25; }
  100% { opacity: 0.1; }
}

.map-wrapper {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 110px;
  right: 0;

  .leaflet-container {
    height: 100%;

    img.leaflet-tile {
      -webkit-filter: contrast(120%) brightness(115%) grayscale(95%); /* Webkit */
     filter: gray; /* IE6-9 */
     filter: contrast(120%) brightness(115%) grayscale(95%); /* W3C */
    }
  }

  &.hidden {
    z-index: $hidden;
  }
  &.show {
    z-index: $map;
  }
  &.narrative-mode {
    left: 0;
  }

  .event {
    fill: $event_default;
    cursor: pointer;
    opacity: 0.45;
  }

  .narrative {
    cursor: pointer;
  }

  .link {
    stroke: $midgrey;
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 2px 5px;
  }

  .site-label {
    background: rgba($black,0.6);
    color: #fff;
    padding: 5px;
    font-weight: 500;
    font-size: 11px;
    font-family: 'Lato', Helvetica, sans-serif;
    border: rgba($black,0.6);
    letter-spacing: 0.05em;

    &::before {
      border-top-color: rgba($black,0.6);
    }
  }

  .sites-layer {
    position: fixed;
    top: 0px;
    left: 110px;
  }

  &.narrative-mode {
    .sites-layer {
      position: fixed;
      top: 0px;
      left: 0px;
    }
  }
}

/*
* Leaflet mapping controls
*/
.leaflet-touch .leaflet-bar {
  .leaflet-control-zoom {
    border: 0;
    margin-left: 20px;
    margin-top: 20px;
  }

  a.leaflet-control-zoom-in,
  a.leaflet-control-zoom-out {
    border: 0;
    border-radius: 2px;
    color: $yellow;
  }

  a.leaflet-control-zoom-in {
    border-bottom: 1px solid $yellow;
  }
}

/*
* Leaflet marker and popups
*/

.leaflet-svg {
  display: block;

  &.hide {
    display: none;
  }
}

.leaflet-popup {
  display: none;

  &.do-display {
    display: block;
  }
}

.leaflet-popup-content-wrapper {
  border-radius: 3px;
  background: $black;

  .leaflet-popup-content {
    color: white;
    margin: 0;
    padding: 3px 5px;

    .event-card {
      margin: 0;
    }
  }
}

.leaflet-popup-close-button {
  display: none;

  & + .leaflet-popup-content-wrapper .leaflet-popup-content {
    padding-top: 3px;
  }
}

.leaflet-popup-tip-container {
  display: none;
}

.leaflet-pane > svg path.bus-route,
.leaflet-pane > svg path.district {
  pointer-events: auto;
}

.eventLocationMarker {
  fill: none;
  stroke: $yellow;
  stroke-width: 2;
}

/*
*
* Elements
*/

.location {
  cursor: pointer;
}

.location-event-marker {
  fill: $event_default;
  stroke-width: 0;
}

.path-polyline {
  stroke: $darkgrey;
  stroke-width: 2px;
}

.location-count {
  z-index: 100;
  fill: #a4a4a4;
}