mapbox-rails 1.0.3.1 → 1.6.1

data/vendor/assets/stylesheets/mapbox.css.scss

@@ -0,0 +1,763 @@
+/* general typography
+
+.leaflet-container
+  background: #fff
+  font: 15px/25px 'Helvetica Neue', Arial, Helvetica, sans-serif
+  color: #404040
+  color: rgba(0, 0, 0, 0.75)
+  outline: 0
+  overflow: hidden
+  -ms-touch-action: none
+  *
+    -webkit-box-sizing: border-box
+    -moz-box-sizing: border-box
+    box-sizing: border-box
+    &:after, &:before
+      -webkit-box-sizing: border-box
+      -moz-box-sizing: border-box
+      box-sizing: border-box
+  h1, h2, h3, h4, h5, h6, p
+    font-size: 15px
+    line-height: 25px
+    margin: 0 0 10px
+
+.mapbox-small, .leaflet-control-attribution, .leaflet-control-scale
+  font-size: 12px
+  line-height: 20px
+
+.leaflet-container
+  input, textarea, label, small
+    font-size: 12px
+    line-height: 20px
+  a
+    color: #3887BE
+    font-weight: normal
+    text-decoration: none
+    &:hover
+      color: #63b6e5
+  &.dark
+    a
+      color: #63b6e5
+      &:hover
+        color: #8fcaec
+    .mapbox-button
+      background-color: #3887be
+      display: inline-block
+      height: 40px
+      line-height: 40px
+      text-decoration: none
+      color: #fff
+      font-size: 12px
+      white-space: nowrap
+      text-overflow: ellipsis
+  .mapbox-button
+    background-color: #3887be
+    display: inline-block
+    height: 40px
+    line-height: 40px
+    text-decoration: none
+    color: #fff
+    font-size: 12px
+    white-space: nowrap
+    text-overflow: ellipsis
+  &.dark .mapbox-button:hover, .mapbox-button:hover
+    color: #fff
+    background-color: #3bb2d0
+
+/* Base Leaflet
+ *-------------------------------------------------------
+
+.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-tile, .leaflet-marker-icon, .leaflet-marker-shadow
+  -webkit-user-drag: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  user-select: none
+
+.leaflet-marker-icon, .leaflet-marker-shadow
+  display: block
+
+.leaflet-tile
+  filter: inherit
+  visibility: hidden
+
+.leaflet-tile-loaded
+  visibility: inherit
+
+.leaflet-zoom-box
+  width: 0
+  height: 0
+
+.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-control
+  position: relative
+  z-index: 7
+  pointer-events: auto
+  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
+
+.leaflet-top, .leaflet-bottom
+  position: absolute
+  z-index: 1000
+  pointer-events: none
+
+.leaflet-top
+  top: 0
+
+.leaflet-right
+  right: 0
+
+.leaflet-bottom
+  bottom: 0
+
+.leaflet-left
+  left: 0
+
+/* zoom and fade animations
+
+.leaflet-fade-anim
+  .leaflet-tile, .leaflet-popup
+    opacity: 0
+    -webkit-transition: opacity 0.2s linear
+    -moz-transition: opacity 0.2s linear
+    -o-transition: opacity 0.2s linear
+    transition: opacity 0.2s linear
+  .leaflet-tile-loaded, .leaflet-map-pane .leaflet-popup
+    opacity: 1
+
+.leaflet-zoom-anim
+  .leaflet-zoom-animated
+    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1)
+    -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1)
+    -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1)
+    transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1)
+  .leaflet-tile
+    -webkit-transition: none
+    -moz-transition: none
+    -o-transition: none
+    transition: none
+
+.leaflet-pan-anim .leaflet-tile, .leaflet-touching .leaflet-zoom-animated
+  -webkit-transition: none
+  -moz-transition: none
+  -o-transition: none
+  transition: none
+
+.leaflet-zoom-anim .leaflet-zoom-hide
+  visibility: hidden
+
+/* cursors
+
+.map-clickable, .leaflet-clickable
+  cursor: pointer
+
+.leaflet-popup-pane, .leaflet-control
+  cursor: auto
+
+.leaflet-container
+  cursor: -webkit-grab
+  cursor: -moz-grab
+
+.leaflet-dragging
+  cursor: move
+  cursor: -webkit-grabbing
+  cursor: -moz-grabbing
+  .map-clickable, .leaflet-clickable, .leaflet-container
+    cursor: move
+    cursor: -webkit-grabbing
+    cursor: -moz-grabbing
+
+.leaflet-zoom-box
+  background: #fff
+  border: 2px dotted #202020
+  opacity: 0.5
+
+/* general toolbar styles
+
+.leaflet-control-layers
+  background-color: #fff
+  border: 1px solid #999
+  border-color: rgba(0, 0, 0, 0.4)
+  border-radius: 3px
+  box-shadow: none
+
+.leaflet-bar
+  background-color: #fff
+  border: 1px solid #999
+  border-color: rgba(0, 0, 0, 0.4)
+  border-radius: 3px
+  box-shadow: none
+  a
+    color: #404040
+    color: rgba(0, 0, 0, 0.75)
+    border-bottom: 1px solid #ddd
+    border-bottom-color: rgba(0, 0, 0, 0.1)
+    &:hover
+      color: #404040
+      color: rgba(0, 0, 0, 0.75)
+      border-bottom: 1px solid #ddd
+      border-bottom-color: rgba(0, 0, 0, 0.1)
+      background-color: #f8f8f8
+      cursor: pointer
+    &:active
+      background-color: #f8f8f8
+      cursor: pointer
+    &:first-child
+      border-radius: 3px 3px 0 0
+    &:last-child
+      border-bottom: none
+      border-radius: 0 0 3px 3px
+    &:only-of-type
+      border-radius: 3px
+  .leaflet-disabled
+    cursor: default
+    opacity: 0.75
+
+.leaflet-control-zoom-in, .leaflet-control-zoom-out
+  display: block
+  content: ''
+  text-indent: -999em
+
+.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
+  background: #fff
+  padding: 6px 10px 6px 6px
+  color: #404040
+  color: rgba(0, 0, 0, 0.75)
+
+.leaflet-control-layers-selector
+  margin-top: 2px
+  position: relative
+  top: 1px
+
+.leaflet-control-layers label
+  display: block
+
+.leaflet-control-layers-separator
+  height: 0
+  border-top: 1px solid #ddd
+  border-top-color: rgba(0, 0, 0, 0.1)
+  margin: 5px -10px 5px -6px
+
+.leaflet-container .leaflet-control-attribution
+  background-color: rgba(255, 255, 255, 0.25)
+  margin: 0
+  box-shadow: none
+
+.leaflet-control-attribution a:hover, .map-info-container a:hover
+  color: inherit
+  text-decoration: underline
+
+.leaflet-control-attribution, .leaflet-control-scale-line
+  padding: 0 5px
+
+.leaflet-left .leaflet-control-scale
+  margin-left: 5px
+
+.leaflet-bottom .leaflet-control-scale
+  margin-bottom: 5px
+
+.leaflet-control-scale-line
+  background-color: rgba(255, 255, 255, 0.5)
+  border: 1px solid #999
+  border-color: rgba(0, 0, 0, 0.4)
+  border-top: none
+  padding: 2px 5px 1px
+  white-space: nowrap
+  overflow: hidden
+  &:not(:first-child)
+    border-top: 2px solid #ddd
+    border-top-color: rgba(0, 0, 0, 0.1)
+    border-bottom: none
+    margin-top: -2px
+    &:not(:last-child)
+      border-bottom: 2px solid #777
+
+/* popup
+
+.leaflet-popup
+  position: absolute
+  text-align: center
+  pointer-events: none
+
+.leaflet-popup-content-wrapper
+  padding: 1px
+  text-align: left
+  pointer-events: all
+
+.leaflet-popup-content
+  padding: 10px 10px 15px
+  margin: 0
+  line-height: inherit
+
+.leaflet-popup-tip-container
+  width: 20px
+  height: 20px
+  margin: 0 auto
+  position: relative
+
+.leaflet-popup-tip
+  width: 0
+  height: 0
+  margin: 0
+  border-left: 10px solid transparent
+  border-right: 10px solid transparent
+  border-top: 10px solid #fff
+  box-shadow: none
+
+.leaflet-popup-close-button
+  text-indent: -999em
+  position: absolute
+  top: 0
+  right: 0
+  pointer-events: all
+  &:hover
+    background-color: #f8f8f8
+
+.leaflet-popup-scrolled
+  overflow: auto
+  border-bottom: 1px solid #ddd
+  border-top: 1px solid #ddd
+
+/* div icon
+
+.leaflet-div-icon
+  background: #fff
+  border: 1px solid #999
+  border-color: rgba(0, 0, 0, 0.4)
+
+.leaflet-editing-icon
+  border-radius: 3px
+
+/* Leaflet + Mapbox
+ *-------------------------------------------------------
+
+.leaflet-bar a, .mapbox-icon, .map-tooltip.closable .close, .leaflet-control-layers-toggle, .leaflet-popup-close-button, .mapbox-button-icon:before
+  content: ''
+  display: inline-block
+  width: 26px
+  height: 26px
+  vertical-align: middle
+  background-repeat: no-repeat
+
+.leaflet-bar a
+  display: block
+
+.leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-popup-close-button, .leaflet-control-layers-toggle, .leaflet-container.dark .map-tooltip .close, .map-tooltip .close, .mapbox-icon
+  opacity: .75
+  background-image: image-url('assets/icons-000000.png')
+  background-repeat: no-repeat
+  background-size: 26px 260px
+
+.mapbox-button-icon:before
+  opacity: 1
+  background-image: image-url('assets/icons-ffffff.png')
+  background-size: 26px 260px
+
+.leaflet-container.dark
+  .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-layers-toggle, .mapbox-icon
+    opacity: 1
+    background-image: image-url('assets/icons-ffffff.png')
+    background-size: 26px 260px
+
+.leaflet-bar
+  .leaflet-control-zoom-in
+    background-position: 0 0
+  .leaflet-control-zoom-out
+    background-position: 0 -26px
+
+.map-tooltip .close, .leaflet-popup-close-button
+  background-position: 0 -52px
+
+.mapbox-icon-info
+  background-position: 0 -78px
+
+.leaflet-control-layers-toggle
+  background-position: 0 -104px
+
+.mapbox-icon-share
+  &:before
+    background-position: 0 -130px
+  background-position: 0 -130px
+
+.mapbox-icon-geocoder
+  &:before
+    background-position: 0 -156px
+  background-position: 0 -156px
+
+.mapbox-icon-facebook
+  &:before
+    background-position: 0 -182px
+  background-position: 0 -182px
+
+.mapbox-icon-twitter
+  &:before
+    background-position: 0 -208px
+  background-position: 0 -208px
+
+.mapbox-icon-pinterest
+  &:before
+    background-position: 0 -234px
+  background-position: 0 -234px
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
+  .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-popup-close-button, .leaflet-control-layers-toggle, .mapbox-icon
+    background-image: image-url('assets/icons-000000@2x.png')
+  .mapbox-button-icon:before
+    background-image: image-url('assets/icons-ffffff@2x.png')
+  .leaflet-container.dark
+    .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-layers-toggle, .mapbox-icon
+      background-image: image-url('assets/icons-ffffff@2x.png')
+
+.leaflet-popup-content-wrapper, .map-legends, .map-tooltip
+  background: #fff
+  border-radius: 3px
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+
+.map-legends, .map-tooltip
+  max-width: 300px
+
+.map-legends .map-legend
+  padding: 10px
+
+.map-tooltip
+  z-index: 999999
+  padding: 10px
+  min-width: 180px
+  max-height: 400px
+  overflow: auto
+  opacity: 1
+  -webkit-transition: opacity 150ms
+  -moz-transition: opacity 150ms
+  -o-transition: opacity 150ms
+  transition: opacity 150ms
+  .close
+    text-indent: -999em
+    overflow: hidden
+    display: none
+  &.closable .close
+    position: absolute
+    top: 0
+    right: 0
+    border-radius: 3px
+    &:active
+      background-color: #f8f8f8
+
+.leaflet-control-interaction
+  position: absolute
+  top: 10px
+  right: 10px
+  width: 300px
+
+.leaflet-popup-content .marker-title
+  font-weight: bold
+
+.leaflet-control .mapbox-button
+  background-color: #fff
+  border: 1px solid #ddd
+  border-color: rgba(0, 0, 0, 0.1)
+  padding: 5px 10px
+  border-radius: 3px
+
+/* Share modal
+ *-------------------------------------------------------
+
+.mapbox-modal
+  > div
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    z-index: -1
+    overflow-y: auto
+  &.active > div
+    z-index: 99999
+    transition: all .2s, z-index 0 0
+  .mapbox-modal-mask
+    background: rgba(0, 0, 0, 0.5)
+    opacity: 0
+  &.active .mapbox-modal-mask
+    opacity: 1
+  .mapbox-modal-content
+    -webkit-transform: translateY(-100%)
+    -moz-transform: translateY(-100%)
+    -ms-transform: translateY(-100%)
+    transform: translateY(-100%)
+  &.active .mapbox-modal-content
+    -webkit-transform: translateY(0)
+    -moz-transform: translateY(0)
+    -ms-transform: translateY(0)
+    transform: translateY(0)
+
+.mapbox-modal-body
+  position: relative
+  background: #fff
+  padding: 20px
+  z-index: 1000
+  width: 50%
+  margin: 20px 0 20px 25%
+
+.mapbox-share-buttons
+  margin: 0 0 20px
+  a
+    width: 33.3333%
+    border-left: 1px solid #fff
+    text-align: center
+    border-radius: 0
+    &:last-child
+      border-radius: 0 3px 3px 0
+    &:first-child
+      border: none
+      border-radius: 3px 0 0 3px
+
+.mapbox-modal input
+  width: 100%
+  height: 40px
+  padding: 10px
+  border: 1px solid #ddd
+  border-color: rgba(0, 0, 0, 0.1)
+  color: rgba(0, 0, 0, 0.5)
+
+/* Info Control
+ *-------------------------------------------------------
+
+.leaflet-control
+  &.mapbox-control-info
+    margin: 5px 30px 10px 10px
+    min-height: 26px
+  &.mapbox-control-info-right
+    margin: 5px 10px 10px 30px
+
+.mapbox-info-toggle
+  background-color: #fff
+  background-color: rgba(255, 255, 255, 0.5)
+  border-radius: 50%
+  position: absolute
+  bottom: 0
+  left: 0
+  z-index: 1
+
+.mapbox-control-info-right .mapbox-info-toggle
+  left: auto
+  right: 0
+
+.mapbox-info-toggle:hover
+  background-color: #fff
+
+.map-info-container
+  background: #fff
+  padding: 3px 5px 3px 27px
+  display: none
+  position: relative
+  bottom: 0
+  left: 0
+  border-radius: 13px 3px 3px 13px
+
+.mapbox-control-info.active .map-info-container
+  display: inline-block
+
+.mapbox-control-info-right .map-info-container
+  left: auto
+  right: 0
+  padding: 3px 27px 3px 5px
+  border-radius: 3px 13px 13px 3px
+
+/* Geocoder
+ *-------------------------------------------------------
+
+.leaflet-control-mapbox-geocoder
+  position: relative
+  &.searching
+    opacity: 0.75
+  .leaflet-control-mapbox-geocoder-wrap
+    background: #fff
+    position: absolute
+    border: 1px solid #999
+    border-color: rgba(0, 0, 0, 0.4)
+    border-bottom-width: 0
+    overflow: hidden
+    left: 26px
+    height: 27px
+    width: 0
+    top: -1px
+    border-radius: 0 3px 3px 0
+    opacity: 0
+    -webkit-transition: opacity 100ms
+    -moz-transition: opacity 100ms
+    -o-transition: opacity 100ms
+    transition: opacity 100ms
+  &.active .leaflet-control-mapbox-geocoder-wrap
+    width: 180px
+    opacity: 1
+
+.leaflet-bar .leaflet-control-mapbox-geocoder-toggle
+  border-bottom: none
+  &:hover
+    border-bottom: none
+
+.leaflet-control-mapbox-geocoder-toggle
+  border-radius: 3px
+
+.leaflet-control-mapbox-geocoder
+  &.active
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
+    .leaflet-control-mapbox-geocoder-toggle
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
+  .leaflet-control-mapbox-geocoder-form input
+    background: transparent
+    border: 0
+    width: 180px
+    padding: 0 0 0 10px
+    height: 26px
+    outline: none
+
+.leaflet-control-mapbox-geocoder-results
+  width: 180px
+  position: absolute
+  left: 26px
+  top: 25px
+  border-radius: 0 0 3px 3px
+
+.leaflet-control-mapbox-geocoder.active .leaflet-control-mapbox-geocoder-results
+  background: #fff
+  border: 1px solid #999
+  border-color: rgba(0, 0, 0, 0.4)
+
+.leaflet-control-mapbox-geocoder-results
+  a, span
+    padding: 0 10px
+    text-overflow: ellipsis
+    white-space: nowrap
+    display: block
+    width: 100%
+    font-size: 12px
+    line-height: 26px
+    text-align: left
+    overflow: hidden
+  a:first-child
+    border-top: 1px solid #999
+    border-top-color: rgba(0, 0, 0, 0.4)
+    border-radius: 0
+
+.leaflet-container.dark .leaflet-control .leaflet-control-mapbox-geocoder-results a:hover, .leaflet-control-mapbox-geocoder-results a:hover
+  background: #f8f8f8
+  opacity: 1
+
+/* Dark Theme
+ *-------------------------------------------------------
+
+.leaflet-container
+  &.dark
+    .leaflet-bar
+      background-color: #404040
+      border-color: #202020
+      border-color: rgba(0, 0, 0, 0.75)
+      a
+        color: #404040
+        border-color: rgba(0, 0, 0, 0.5)
+        &:active, &:hover
+          background-color: #505050
+    .mapbox-info-toggle, .map-info-container, .leaflet-control-attribution
+      background-color: rgba(0, 0, 0, 0.25)
+      color: #f8f8f8
+    .leaflet-bar a.leaflet-disabled, .leaflet-control .mapbox-button.disabled
+      background-color: #252525
+      color: #404040
+    .leaflet-control-mapbox-geocoder > div
+      border-color: #202020
+      border-color: rgba(0, 0, 0, 0.75)
+    .leaflet-control .leaflet-control-mapbox-geocoder-results
+      a
+        border-color: #ddd #202020
+        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.75)
+      span
+        border-color: #202020
+        border-color: rgba(0, 0, 0, 0.75)
+  img
+    max-width: none !important
+    &.leaflet-image-layer
+      max-width: 15000px !important
+
+/* Larger Screens
+ *-------------------------------------------------------
+@media only screen and (max-width: 800px)
+  .mapbox-modal-body
+    width: 83.3333%
+    margin-left: 8.3333%
+
+/* Smaller Screens
+ *-------------------------------------------------------
+@media only screen and (max-width: 640px)
+  .mapbox-modal-body
+    width: 100%
+    height: 100%
+    margin: 0
+
+/* Browser Fixes
+ *-------------------------------------------------------
+/* Map is broken in FF if you have max-width: 100% on tiles
+
+/* Stupid Android 2 doesn't understand "max-width: none" properly
+
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319
+
+.leaflet-overlay-pane svg
+  -moz-user-select: none
+
+/* Older IEs don't support the translateY property for display animation
+
+.leaflet-oldie .mapbox-modal
+  .mapbox-modal-content
+    display: none
+  &.active .mapbox-modal-content
+    display: block
+
+.map-tooltip
+  width: 280px\8
+  /* < IE9