foliage 0.1.0

data/app/assets/stylesheets/all.scss

@@ -0,0 +1,16 @@
+/*
+ * This is a manifest file that'll be compiled into screen.css, which will include all the files
+ * listed below.
+ *
+ *= require_self
+ */
+
+// Core variables and mixins
+@import "variables";
+@import "mixins";
+
+// Reset
+@import "reset";
+
+// Leaflet
+@import "leaflet";

data/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require all
+ *= require_self
+ */

data/app/assets/stylesheets/compass/reset.scss

@@ -0,0 +1,3 @@
+@import "reset/utilities";
+
+@include global-reset;

data/app/assets/stylesheets/compass/reset/utilities.scss

@@ -0,0 +1,142 @@
+// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+@mixin global-reset {
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font; }
+  // Unlike Eric's original reset, we reset the html element to be compatible
+  // with the vertical rhythm mixins.
+  html {
+    @include reset-body; }
+  ol, ul {
+    @include reset-list-style; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; }
+  @include reset-html5; }
+
+// Reset all elements within some selector scope. To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+@mixin nested-reset {
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset the box model measurements.
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0; }
+
+// Reset the font and vertical alignment.
+@mixin reset-font {
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline; }
+
+// Resets the outline when focus.
+// For accessibility you need to apply some styling in its place.
+@mixin reset-focus {
+  outline: 0; }
+
+// Reset a body element.
+@mixin reset-body {
+  line-height: 1; }
+
+// Reset the list style of an element.
+@mixin reset-list-style {
+  list-style: none; }
+
+// Reset a table
+@mixin reset-table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+// Reset a table cell (`th`, `td`)
+@mixin reset-table-cell {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+// Reset a quotation (`q`, `blockquote`)
+@mixin reset-quotation {
+  quotes: none;
+  &:before, &:after {
+    content: "";
+    content: none; } }
+
+// Resets the border.
+@mixin reset-image-anchor-border {
+  border: none; }
+
+// Unrecognized elements are displayed inline.
+// This reset provides a basic reset for block html5 elements
+// so they are rendered correctly in browsers that don't recognize them
+// and reset in browsers that have default styles for them.
+@mixin reset-html5 {
+  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+    display: block; } }
+
+// Resets the display of inline and block elements to their default display
+// according to their tag type. Elements that have a default display that varies across
+// versions of html or browser are not handled here, but this covers the 90% use case.
+// Usage Example:
+//
+//     // Turn off the display for both of these classes
+//     .unregistered-only, .registered-only
+//       display: none
+//     // Now turn only one of them back on depending on some other context.
+//     body.registered
+//       +reset-display(".registered-only")
+//     body.unregistered
+//       +reset-display(".unregistered-only")
+@mixin reset-display($selector: "", $important: false) {
+  #{append-selector("a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr", $selector)} {
+    @if $important {
+      display: inline !important; }
+    @else {
+      display: inline; } }
+  #{append-selector("address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul", $selector)} {
+    @if $important {
+      display: block !important; }
+    @else {
+      display: block; } } }

data/app/assets/stylesheets/leaflet.scss

@@ -0,0 +1,1093 @@
+// External dependencies
+// @import "leaflet/measure";
+@import "leaflet/modal";
+@import "leaflet/easy-button";
+@import "leaflet/label";
+@import "leaflet/fullscreen";
+@import "leaflet/tooltip";
+
+/* required styles */
+
+.leaflet-map-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-pane, .leaflet-tile-container, .leaflet-overlay-pane, .leaflet-shadow-pane, .leaflet-marker-pane, .leaflet-popup-pane, .leaflet-overlay-pane svg, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.leaflet-container {
+  overflow: hidden;
+  -ms-touch-action: none;
+}
+
+.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow {
+  @include user-select(none);
+}
+
+.leaflet-marker-icon, .leaflet-marker-shadow {
+  display: block;
+}
+
+/* map is broken in FF if you have max-width: 100% on tiles */
+
+.leaflet-container img {
+  max-width: none !important;
+  &.leaflet-image-layer {
+    max-width: 15000px !important;
+  }
+}
+
+/* stupid Android 2 doesn't understand "max-width: none" properly */
+
+.leaflet-tile {
+  filter: inherit;
+  visibility: hidden;
+}
+
+.leaflet-tile-loaded {
+  visibility: inherit;
+}
+
+.leaflet-zoom-box {
+  width: 0;
+  height: 0;
+}
+
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+
+.leaflet-overlay-pane svg {
+  -moz-user-select: none;
+}
+
+.leaflet-tile-pane {
+  z-index: 2;
+}
+
+.leaflet-objects-pane {
+  z-index: 3;
+}
+
+.leaflet-overlay-pane {
+  z-index: 4;
+}
+
+.leaflet-shadow-pane {
+  z-index: 5;
+}
+
+.leaflet-marker-pane {
+  z-index: 6;
+}
+
+.leaflet-popup-pane {
+  z-index: 7;
+}
+
+.leaflet-vml-shape {
+  width: 1px;
+  height: 1px;
+}
+
+.lvml {
+  behavior: url(#default#VML);
+  @include inline-block;
+  position: absolute;
+}
+
+/* control positioning */
+
+.leaflet-control {
+  position: relative;
+  z-index: 7;
+  pointer-events: auto;
+}
+
+.leaflet-top, .leaflet-bottom {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.leaflet-top {
+  top: 0;
+  z-index: 11;
+}
+
+.leaflet-right {
+  right: 0;
+}
+
+.leaflet-bottom {
+  bottom: 0;
+}
+
+.leaflet-left {
+  left: 0;
+}
+
+.leaflet-control {
+  float: left;
+  clear: both;
+}
+
+.leaflet-right .leaflet-control {
+  float: right;
+}
+
+.leaflet-top .leaflet-control {
+  margin-top: 10px;
+}
+
+.leaflet-bottom .leaflet-control {
+  margin-bottom: 10px;
+}
+
+.leaflet-left .leaflet-control {
+  margin-left: 10px;
+}
+
+.leaflet-right .leaflet-control {
+  margin-right: 10px;
+}
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim {
+  .leaflet-tile, .leaflet-popup {
+    opacity: 0;
+    @include transition(opacity 0.2s linear);
+  }
+  .leaflet-tile-loaded, .leaflet-map-pane .leaflet-popup {
+    opacity: 1;
+  }
+}
+
+.leaflet-zoom-anim {
+  .leaflet-zoom-animated {
+    @include transition(transform 0.25s cubic-bezier(0, 0, 0.25, 1));
+  }
+  .leaflet-tile {
+    @include transition(none);
+  }
+}
+
+.leaflet-pan-anim .leaflet-tile, .leaflet-touching .leaflet-zoom-animated {
+  @include transition(none);
+}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+  visibility: hidden;
+}
+
+/* cursors */
+
+.leaflet-clickable {
+  cursor: pointer;
+}
+
+.leaflet-container {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+}
+
+.leaflet-popup-pane, .leaflet-control {
+  cursor: auto;
+}
+
+.leaflet-dragging {
+  .leaflet-container, .leaflet-clickable {
+    cursor: move;
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+  }
+}
+
+/* visual tweaks */
+
+.leaflet-container {
+  background: #ddd;
+  outline: 0;
+}
+
+.leaflet-zoom-box {
+  border: 2px dotted #38f;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* general typography */
+
+.leaflet-container {
+  font: $fs-small/$lh-small $base-font-family;
+}
+
+/* general toolbar styles */
+
+.leaflet-control-layers-toggle {
+  &:before{
+    content: "=";
+  }
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.leaflet-bar {
+  $default-opacity: 0.8;
+  @include menu;
+  // box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+  // @include border-radius($default-border-radius * 2);
+  // border: $default-border-radius solid rgba($neutral-color, $default-opacity / 2);
+  a {
+    @include user-select(none);
+    @include is-icon;
+    // background-color: rgba($mapbar-background-color, $default-opacity);
+    border-bottom: $menu-border;
+    width: $map-button-size;
+    height: $map-button-size;
+    line-height: $map-button-size;
+    display: block;
+    @include text-align(center);
+    text-decoration: none;
+    color: $active-link-color;
+    @include transition(background 0.2s);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:hover {
+      outline: none;
+      background: background-hover($menu-background);
+      //background-color: background-hover($mapbar-background-color);
+    }
+    &:first-child {
+      // @include border-top-radius($default-border-radius);
+    }
+    &:last-child {
+      // @include border-bottom-radius($default-border-radius);
+      border-bottom: none;
+    }
+    &.leaflet-disabled {
+      &,
+      &:active,
+      &:focus,
+      &:hover {
+        outline: none;
+        cursor: default;
+        // background-color: rgba($neutral-color, $default-opacity);
+        background-color: $menu-border-color;
+        // color: $text-color;
+        @include opacity(0.5);
+        // @include text-shadow(-1px -1px 0 white);
+      }
+    }
+    .leaflet-touch & {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+    }
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+  }
+}
+
+/* zoom control */
+.leaflet-control-zoom-in, .leaflet-control-zoom-out {
+  @include text-align(center);
+}
+
+.leaflet-control-zoom-in {
+  &::before {
+    content: "+";
+  }
+  @include use-icon(plus);
+}
+
+.leaflet-control-zoom-out {
+  &::before {
+    content: "-";
+  }
+  @include use-icon(minus);
+}
+
+.leaflet-control-zoom-fullscreen {
+  &::before {
+    content: "<>";
+    transform: rotate(45deg);
+  }
+  @include use-icon(arrows-alt);
+}
+
+.leaflet-touch {
+  .leaflet-control-zoom-in {
+    font-size: 22px;
+  }
+  .leaflet-control-zoom-out {
+    font-size: 24px;
+  }
+}
+
+/* layers control */
+
+.leaflet-control-layers {
+  @include menu-box;
+  .leaflet-control-layers-toggle {
+    color: $active-link-color;
+    @include is-icon;
+    @include use-icon(layers);
+    @include text-align(center);
+    width: $map-button-size;
+    height: $map-button-size;
+    line-height: $map-button-size;
+  }
+}
+
+
+
+.leaflet-retina .leaflet-control-layers-toggle {
+  // background-image: url(images/layers-2x.png);
+  background-size: 26px 26px;
+}
+
+.leaflet-touch .leaflet-control-layers-toggle {
+  width: 44px;
+  height: 44px;
+}
+
+.leaflet-control-layers .leaflet-control-layers-list {
+  display: none;
+}
+
+.leaflet-control-layers-expanded {
+  .leaflet-control-layers-toggle {
+    display: none;
+  }
+  .leaflet-control-layers-list {
+    display: block;
+    position: relative;
+    .leaflet-control-layers-separator {
+      height: 0;
+      border-top: $menu-border;
+    }
+    .leaflet-control-layers-base, .leaflet-control-layers-overlays {
+      padding: $default-gap;
+      label {
+        &, * {
+          vertical-align: middle;
+          line-height: $lh-normal;
+        }
+      }
+    }
+  }
+}
+
+.leaflet-control-layers-selector {
+  margin-top: 2px;
+  position: relative;
+  top: 1px;
+}
+
+.leaflet-control-layers label {
+  display: block;
+}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.7);
+  margin: 0;
+}
+
+.leaflet-control-attribution, .leaflet-control-scale-line {
+  padding: 0 5px;
+  color: #333;
+}
+
+.leaflet-control-attribution a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.leaflet-container {
+  .leaflet-control-attribution, .leaflet-control-scale {
+    &, * {
+      font-size: $fs-small;
+    }
+  }
+}
+
+.leaflet-left .leaflet-control-scale {
+  margin-left: 5px;
+}
+
+.leaflet-bottom .leaflet-control-scale {
+  margin-bottom: 5px;
+}
+
+.leaflet-control-scale-line {
+  border: 2px solid #777;
+  border-top: none;
+  line-height: 1.1em;
+  padding: 2px 5px 1px;
+  font-size: $fs-small;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  background: #fff;
+  background: rgba(255, 255, 255, 0.5);
+  &:not(:first-child) {
+    border-top: 2px solid #777;
+    border-bottom: none;
+    margin-top: -2px;
+    &:not(:last-child) {
+      border-bottom: 2px solid #777;
+    }
+  }
+}
+
+.leaflet-touch {
+  .leaflet-control-attribution, .leaflet-control-layers, .leaflet-bar {
+    box-shadow: none;
+  }
+  .leaflet-control-layers, .leaflet-bar {
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    background-clip: padding-box;
+  }
+}
+
+/* popup */
+
+.leaflet-popup {
+  position: absolute;
+  z-index: 2;
+  @include text-align(center);
+  .leaflet-popup-content-wrapper {
+    @include text-align(left);
+    @include menu-box;
+    background: white;
+    border: none;
+    .leaflet-popup-content {
+      .popup-header {
+        .popup-block-content{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+      .popup-content, .popup-header, .popup-footer {
+        padding: $default-gap 2*$default-gap;
+      }
+      .popup-header, .popup-footer {
+        background-color: $popover-title-bg;
+      }
+      .popup-content {
+        .popup-block-label {
+          display: block;
+          @include legend-label;
+        }
+        &:last-child {
+          padding-bottom: 2*$default-gap;
+        }
+      }
+    }
+  }
+  .leaflet-popup-tip-container {
+    margin: 0 auto;
+    width: 40px;
+    height: 20px;
+    position: relative;
+    overflow: hidden;
+    .leaflet-popup-tip {
+      width: 17px;
+      height: 17px;
+      padding: 1px;
+      margin: -10px auto 0;
+      position: relative;
+      z-index: 11;
+      @include rotate(45deg);
+      background: white;
+      @include menu-shadow;
+    }
+  }
+  .leaflet-container & a.leaflet-popup-close-button {
+    $size: 18px;
+    $padding: round($default-gap * 0.4);
+    @include menu-box;
+    position: absolute;
+    top: -1 * round(($size + $padding) / 2);
+    right: -1 * round(($size + $padding) / 2);
+    padding: $padding;
+    @include border-radius(50%);
+    @include text-align(center);
+    width: $size;
+    height: $size;
+    font-size: $size;
+    line-height: $size;
+    text-decoration: none;
+    font-weight: bold;
+  }
+}
+
+
+
+.leaflet-popup-scrolled {
+  overflow: auto;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+}
+
+.leaflet-oldie {
+  .leaflet-popup-content-wrapper {
+    zoom: 1;
+  }
+  .leaflet-popup-tip {
+    width: 24px;
+    margin: 0 auto;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+  }
+  .leaflet-popup-tip-container {
+    margin-top: -1px;
+  }
+  .leaflet-control-zoom, .leaflet-control-layers, .leaflet-popup-content-wrapper, .leaflet-popup-tip {
+    border: 1px solid #999;
+  }
+}
+
+/* div icon */
+
+.leaflet-div-icon {
+  background: #fff;
+  border: 1px solid #666;
+}
+
+
+/* ================================================================== */
+/* Toolbars
+/* ================================================================== */
+
+.leaflet-draw-section {
+  position: relative;
+}
+
+.leaflet-draw-toolbar {
+  margin-top: 12px;
+}
+
+.leaflet-draw-toolbar-top {
+  margin-top: 0;
+}
+
+.leaflet-draw-toolbar-notop a:first-child {
+  border-top-right-radius: 0;
+}
+
+.leaflet-draw-toolbar-nobottom a:last-child {
+  border-bottom-right-radius: 0;
+}
+
+
+/* ================================================================== */
+/* Toolbar actions menu
+/* ================================================================== */
+
+.leaflet-draw-actions {
+  display: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: $map-button-size;
+  /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
+  top: 0;
+  white-space: nowrap;
+}
+
+.leaflet-right .leaflet-draw-actions {
+  right: $map-button-size;
+  left: auto;
+}
+
+.leaflet-draw-actions li {
+  display: inline-block;
+  &:first-child a {
+    border-left: none;
+  }
+  &:last-child a {
+    -webkit-border-radius: 0 $default-border-radius $default-border-radius 0;
+    border-radius: 0 $default-border-radius $default-border-radius 0;
+  }
+}
+
+.leaflet-right .leaflet-draw-actions li {
+  &:last-child a {
+    @include border-radius(0);
+  }
+  &:first-child a {
+    -webkit-border-radius: $default-border-radius 0 0 $default-border-radius;
+    border-radius: $default-border-radius 0 0 $default-border-radius;
+  }
+}
+
+.leaflet-draw-actions a {
+  background-color: #919187;
+  border-left: 1px solid #AAA;
+  color: #FFF;
+  font: $fs-small/$lh-small $base-font-family;
+  line-height: 28px;
+  text-decoration: none;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 28px;
+}
+
+.leaflet-draw-actions-bottom {
+  margin-top: 0;
+}
+
+.leaflet-draw-actions-top {
+  margin-top: 1px;
+  a {
+    height: $map-button-size + 1px;
+    line-height: $map-button-size + 1px;
+  }
+}
+
+.leaflet-draw-actions-bottom a {
+  height: $map-button-size + 1px;
+  line-height: $map-button-size + 1px;
+}
+
+.leaflet-draw-actions a:hover {
+  background-color: #A0A098;
+}
+
+.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
+  height: $map-button-size;
+  line-height: $map-button-size;
+}
+
+/* ================================================================== */
+/* Draw toolbar
+/* ================================================================== */
+
+.leaflet-draw-toolbar {
+  .leaflet-draw-draw-polyline {
+    @include use-icon(angle-down);
+  }
+  .leaflet-draw-draw-polygon {
+    @include use-icon(star-o);
+  }
+  .leaflet-draw-draw-rectangle {
+    @include use-icon(square-o);
+  }
+  .leaflet-draw-draw-circle {
+    @include use-icon(circle-thin);
+  }
+  .leaflet-draw-draw-marker {
+    @include use-icon(map-marker);
+  }
+  .leaflet-draw-edit-edit {
+    @include use-icon(edit);
+  }
+  .leaflet-draw-edit-remove {
+    @include use-icon(times);
+  }
+}
+
+/* ================================================================== */
+/* Edit toolbar
+/* ================================================================== */
+
+/* ================================================================== */
+/* Drawing styles
+/* ================================================================== */
+
+.leaflet-mouse-marker {
+  background-color: #fff;
+  cursor: crosshair;
+}
+
+.leaflet-draw-tooltip {
+  background: rgb(54, 54, 54);
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid transparent;
+  @include border-radius($default-border-radius);
+  color: #fff;
+  font: $fs-normal/$lh-normal $base-font-family;
+  margin-left: 20px;
+  margin-top: -21px;
+  padding: 4px 8px;
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  z-index: 6;
+  &:before {
+    border-right: 6px solid black;
+    border-right-color: rgba(0, 0, 0, 0.5);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: -7px;
+  }
+  span {
+    color: inherit;
+  }
+}
+
+.leaflet-error-draw-tooltip {
+  background-color: #F2DEDE;
+  border: 1px solid #E6B6BD;
+  color: #B94A48;
+  &:before {
+    border-right-color: #E6B6BD;
+  }
+}
+
+.leaflet-draw-tooltip-single {
+  margin-top: -12px;
+}
+
+.leaflet-draw-tooltip-subtext {
+  color: #f8d5e4;
+}
+
+.leaflet-draw-guide-dash {
+  font-size: 1%;
+  opacity: 0.6;
+  position: absolute;
+  width: 5px;
+  height: 5px;
+}
+
+.leaflet-draw-tooltip-top {
+  background: rgb(54, 54, 54);
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid transparent;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  color: #fff;
+  font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
+  margin-left: 0;
+  margin-top: -38px;
+  padding: 4px 8px;
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  z-index: 6;
+  &:before {
+    border-top: 6px solid black;
+    border-top-color: rgba(0, 0, 0, 0.5);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    content: "";
+    position: absolute;
+    top: 30px;
+    @include calc('left','50% - 3px');
+  }
+
+  transition: margin-left 1s ease;
+
+}
+
+/* ================================================================== */
+/* Edit styles
+/* ================================================================== */
+
+.leaflet-edit-marker-selected {
+  background: rgba(254, 87, 161, 0.1);
+  border: 4px dashed rgba(254, 87, 161, 0.6);
+  @include border-radius($default-border-radius);
+}
+
+.leaflet-edit-move {
+  cursor: move;
+}
+
+.leaflet-edit-resize {
+  cursor: pointer;
+}
+
+/* ================================================================== */
+/* Old IE styles
+/* ================================================================== */
+
+.leaflet-oldie {
+  .leaflet-draw-toolbar {
+    border: 3px solid #999;
+    a {
+      background-color: #eee;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+  .leaflet-draw-actions {
+    left: 32px;
+    margin-top: 3px;
+    li {
+      display: inline;
+      zoom: 1;
+    }
+  }
+  .leaflet-edit-marker-selected {
+    border: 4px dashed #fe93c2;
+  }
+  .leaflet-draw-actions a {
+    background-color: #999;
+    &:hover {
+      background-color: #a5a5a5;
+    }
+  }
+  .leaflet-draw-actions-top a {
+    margin-top: 1px;
+  }
+  .leaflet-draw-actions-bottom a {
+    height: 28px;
+    line-height: 28px;
+  }
+  .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
+    height: 27px;
+    line-height: 27px;
+  }
+}
+
+
+/* ================================================================== */
+/* Legends
+/* ================================================================== */
+
+.leaflet-legend-control {
+  $cell-height: $fs-small;
+  @include menu-box;
+  min-width: 220px;
+
+  &.empty {
+    display: none;
+  }
+
+  .leaflet-legend-item {
+    padding: $default-gap;
+    border-top: $menu-border;
+    display: block;
+    min-width: 15 * $lh-normal;
+    max-width: 18 * $lh-normal;
+    &.first,
+    &:first-child {
+      border-top: none;
+    }
+    h3 {
+      color: $text-color;
+      font-size: $fs-normal;
+      line-height: $lh-normal;
+      font-weight: bold;
+    }
+    .leaflet-legend-body {
+      .min-value, .max-value {
+        color: $neutral-color;
+        font-size: $fs-small;
+        line-height: $lh-small;
+        font-weight: bold;
+      }
+    }
+
+    &.minified {
+      height: 0;
+      padding: 0;
+      overflow: hidden;
+      transition: 1s ease;
+    }
+  }
+
+  .leaflet-bubbles-scale {
+    text-align: center;
+    .min-value {
+      @include margin-right($default-gap);
+    }
+    .max-value {
+      @include margin-left($default-gap);
+    }
+    .leaflet-bubbles-grades {
+      .leaflet-bubbles-grade {
+        @include inline-block;
+        @include border-radius(50%);
+        margin: 0 round(0.6*$default-gap);
+        border-style: solid;
+      }
+    }
+  }
+
+  .leaflet-categories-scale {
+    .leaflet-categories-items {
+      .leaflet-categories-item {
+        display: block;
+
+        margin-top: round($default-gap * 0.3);
+        &:first-child {
+          margin-top: 0;
+        }
+        .leaflet-categories-sample {
+          @include inline-block;
+          height: $cell-height;
+          width: $cell-height;
+          @include border-radius(50%);
+          border: 1px solid #333;
+          position: absolute;
+          margin-top: 3px;
+        }
+        .leaflet-categories-item_label {
+          display: inherit;
+          margin-left: 20px;
+          color: $neutral-color;
+          font-size: $fs-small;
+          line-height: $lh-small;
+          font-weight: bold;
+          text-transform: uppercase;
+        }
+      }
+    }
+  }
+
+  .leaflet-choropleth-scale {
+    .min-value {
+      @include float(left);
+    }
+    .max-value {
+      @include float(right);
+    }
+    .leaflet-choropleth-grades {
+      display: block;
+      clear: both;
+      $border: 1px solid #333;
+      // margin: $default-gap 0 0 0;
+      // width: 15 * $lh-normal;
+      height: $cell-height;
+      border: $border;
+      .leaflet-choropleth-grade {
+        @include inline-block;
+        vertical-align: top;
+        height: $cell-height;
+      }
+    }
+  }
+  .leaflet-legend-circle {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #000000;
+    @include inline-block;
+    border-radius: 50%;
+    margin-top: 8px;
+  }
+
+}
+
+
+
+i.leaflet-importer-ctrl, button.leaflet-importer-ctrl {
+  @include is-icon;
+  @include use-icon(download);
+  color: $active-link-color;
+  width: $map-button-size;
+  height: $map-button-size;
+  line-height: $map-button-size;
+}
+
+span.leaflet-importer-geojson, span.leaflet-importer-gml {
+  font-size: $default-gap;
+}
+
+.leaflet-multilevel-legend {
+  i {
+    display: inline-block;
+    width: 18px !important;
+    height: 18px !important;
+
+    &.active {
+      @include is-icon(10px);
+      @include use-icon(check);
+      color: white;
+      text-align: center;
+    }
+  }
+  span {
+    display: inline-block;
+    margin-left: 10px;
+  }
+}
+
+.leaflet-reference-label {
+  //background-color: #fff;
+}
+
+.leaflet-ghost-label {
+  &:before, &:after {
+    box-shadow: none;
+    border: none;
+    background: transparent;
+  }
+  .leaflet-ghost-label-collapsed {
+    color: $active-color;
+    background: white;
+    font-weight: bold;
+    /* text-shadow: none; */
+    display: block;
+    min-width: $lh-normal;
+    /* height: 20px; */
+    border-radius: 50%;
+    border: $menu-border;
+    /* background-color: white; */
+    text-align: center;
+  }
+}
+
+
+.leaflet-popup-warning {
+  @include is-icon;
+  @include use-icon(warning);
+  &.hide {
+    display: none;
+  }
+  &.right {
+    @include float(right);
+  }
+}
+
+.choice-padding {
+  @include inline-block;
+  margin-right: 15px;
+
+  input[type=radio] {
+    margin-right: 3px;
+  }
+}
+
+.modal-header {
+  .leaflet-importer-ctrl {
+    color: black;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 18px;
+  }
+}
+
+.leaflet-control-measure-toggle{
+  visibility: hidden;
+  &:before {
+    visibility: visible;
+    font-size: 26px;
+    line-height: 44px;
+    text-align: center;
+    vertical-align: middle;
+    width: 44px;
+    display: block;
+    height: 44px;
+  }
+}