///// PATHS \\\\\
// FEATURES PIN \\
@path-pin-feat : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/defs/map-pin-wide-empty.svg);
// ICONS \\
@path-beach : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/beach.svg);
@path-benches : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/benches.svg);
@path-bpark : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/bpark.svg);
@path-commserv : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/commserv.svg);
@path-conc : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/conc.svg);
@path-event : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/event.svg);
@path-historic : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/historic.svg);
@path-mainpoints : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/mainpoints.svg);
@path-other : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/other.svg);
@path-parking : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/parking.svg);
@path-ranger : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/ranger.svg);
@path-restroom : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/restroom.svg);
@path-signs : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/signs.svg);
@path-trails : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/trails.svg);
@path-vista : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/vista.svg);
@path-water : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/water.svg);
///// COLORS \\\\\
// FEATURES MAP PINS \\
@c-perm-pin-fill: #7caad4;
@c-feat-pin-fill: #934e7d;
@c-feat-pin-stroke: darken(@c-feat-pin-fill, 25%);
// WHITE ICON FILL \\
@c-icon-fill: #f9f9f9;
// SELECTED FEATURE \\
@c-sel-feat-fill: red;
@c-sel-feat-stroke: darken(@c-sel-feat-fill, 25%);
///// SIZES & POSITIONING \\\\\
/// Middle zooms (use as base) \\\
// MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\
@pin-h-mid: 34;
@pin-line-w-mid: 28;
@pin-shift-y-mid: @pin-h-mid/2*-1;
// ICON HEIGHT \\
@icon-h-mid: 17;
@icon-shift-y-mid: @icon-h-mid * -.25;
/// Close zooms \\\
// MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\
@pin-h-close: 32;
@pin-line-w-close: 24;
@pin-shift-y-close: @pin-h-close/2*-1;
// ICON HEIGHT \\
@icon-h-close: 15;
@icon-shift-y-close: @icon-h-close * -.25;
/* Not mainpoints */
#features{
bg/marker-allow-overlap: true;
bg/marker-file: @path-pin-feat;
bg/marker-fill : @c-feat-pin-fill;
bg/marker-height: @pin-h-mid;
bg/marker-line-color: @c-feat-pin-stroke;
bg/marker-line-width: @pin-line-w-mid;
bg/marker-opacity : .9;
bg/marker-transform: translate(0,@pin-shift-y-mid);
fg/marker-allow-overlap: true;
fg/marker-fill: @c-icon-fill;
fg/marker-height: @icon-h-mid;
fg/marker-transform: translate(0,@pin-shift-y-mid*1.25);
[type="mainpoints"]{
[zoom<14]{
bg/marker-fill: @c-perm-pin-fill;
bg/marker-line-color: darken(@c-perm-pin-fill, 25%);
fg/marker-file: @path-mainpoints;
}
[zoom>=14]{
bg/marker-height: 1;
bg/marker-width: 1;
fg/marker-height: 1;
fg/marker-width: 1;
}
}
[type="beach"] {fg/marker-file: @path-beach; fg/marker-height: @icon-h-mid*.5;}
[type="benches"] {fg/marker-file: @path-benches; fg/marker-height: @icon-h-mid*.35;}
[type="bpark"] {fg/marker-file: @path-bpark; }
[type="commserv"] {fg/marker-file: @path-commserv;}
[type="conc"] {fg/marker-file: @path-conc; fg/marker-height: 13; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);}
[type="event"] {fg/marker-file: @path-event; fg/marker-height: 14; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);}
[type="historic"] {fg/marker-file: @path-historic; fg/marker-height: 13; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);}
[type="other"] {fg/marker-file: @path-other;}
[type="parking"] {fg/marker-file: @path-parking; fg/marker-width: 13; fg/marker-transform: translate(1,@pin-shift-y-mid*1.2);}
[type="ranger"] {fg/marker-file: @path-ranger; }
[type="restroom"] {fg/marker-file: @path-restroom; fg/marker-height: 13; fg/marker-transform: translate(-1,@pin-shift-y-mid*1.3);}
[type="signs"] {fg/marker-file: @path-signs;}
[type="trails"] {fg/marker-file: @path-trails;}
[type="vista"] {fg/marker-file: @path-vista; fg/marker-height: @icon-h-close*.9; fg/marker-transform: translate(0,@pin-shift-y-mid - 6);}
[type="water"] {fg/marker-file: @path-water;}
}///// PATHS \\\\\
// FEATURES PIN \\
@path-pin-feat : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/defs/map-pin-wide-empty.svg);
// ICONS \\
@path-bb : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/bb.svg);
@path-cottage : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/cottage.svg);
@path-financial : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/financial.svg);
@path-food : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/food.svg);
@path-gallery : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/gallery.svg);
@path-grocery : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/grocery.svg);
@path-hardware : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/hardware.svg);
@path-health : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/health.svg);
@path-motel : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/motel.svg);
@path-organization : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/organization.svg);
@path-professional : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/professional.svg);
@path-realestate : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/realestate.svg);
@path-recreation : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/recreation.svg);
@path-rental : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/rental.svg);
@path-shops : url(http://friendsofsleepingbear.org/sbht-i-map/src/assets/img/svg/project/min/shops.svg);
///// SIZES & POSITIONING \\\\\
/// Middle zooms (use as base) \\\
// MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\
@pin-h-mid: 34;
@pin-line-w-mid: 28;
@pin-shift-y-mid: @pin-h-mid/2*-1;
// ICON HEIGHT \\
@icon-h-mid: 17;
@icon-shift-y-mid: @icon-h-mid * -.25;
/// Close zooms \\\
// MAP PIN HEIGHT AND LINE (STROKE) WIDTH \\
@pin-h-close: 32;
@pin-line-w-close: 24;
@pin-shift-y-close: @pin-h-close/2*-1;
// ICON HEIGHT \\
@icon-h-close: 15;
@icon-shift-y-close: @icon-h-close * -.25;
///// COLORS \\\\\
// MAP PINS \\
@c-feat-pin-fill: #f7892e;
@c-feat-pin-stroke: darken(@c-feat-pin-fill, 25%);
// WHITE ICON FILL \\
@c-icon-fill: #f9f9f9;
// SELECTED FEATURE \\
@c-sel-feat-fill: red;
@c-sel-feat-stroke: darken(@c-sel-feat-fill, 25%);
#commercial{
bg/marker-allow-overlap: true;
bg/marker-file: @path-pin-feat;
bg/marker-fill: #f7892e;
bg/marker-height: @pin-h-mid;
bg/marker-line-color: darken(#f7892e,25%);
bg/marker-line-width: @pin-line-w-mid;
bg/marker-opacity : .9;
bg/marker-transform: translate(0,@pin-shift-y-mid);
fg/marker-allow-overlap: true;
fg/marker-fill: @c-icon-fill;
fg/marker-height: @icon-h-mid;
fg/marker-transform: translate(0,@pin-shift-y-mid*1.25);
[type="bb"] {fg/marker-file: @path-bb;}
[type="cottage"] {fg/marker-file: @path-cottage; fg/marker-height: @icon-h-mid * .9;}
[type="financial"] {fg/marker-file: @path-financial;}
[type="food"] {fg/marker-file: @path-food;}
[type="gallery"] {fg/marker-file: @path-gallery;}
[type="grocery"] {fg/marker-file: @path-grocery; fg/marker-height: @icon-h-mid * .85; fg/marker-transform: translate(0,@pin-shift-y-mid - 3);}
[type="hardware"] {fg/marker-file: @path-hardware; fg/marker-height: @icon-h-mid * .9;}
[type="health"] {fg/marker-file: @path-health;}
[type="motel"] {fg/marker-file: @path-motel; fg/marker-height: @icon-h-mid * .6;}
[type="organization"] {fg/marker-file: @path-organization; fg/marker-height: @icon-h-mid * .7; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);}
[type="professional"] {fg/marker-file: @path-professional;}
[type="realestate"] {fg/marker-file: @path-realestate; fg/marker-height: @icon-h-mid * .9;}
[type="recreation"] {fg/marker-file: @path-recreation; fg/marker-height: @icon-h-mid * .9;}
[type="rental"] {fg/marker-file: @path-rental; fg/marker-height: @icon-h-mid * .75;}
[type="shops"] {fg/marker-file: @path-shops;}
/* Second-to-closest zoom level group; set sizes only */
// [zoom>=15][zoom<17]{
// bg/marker-height: @pin-h-close;
// bg/marker-transform: translate(0,@pin-shift-y-close);
// [type="grocery"] {fg/marker-height: @icon-h-close * .85;}
// [type="motel"] {fg/marker-height: @icon-h-close * .65;}
// [type="organization"] {fg/marker-height: @icon-h-close * .7;}
// [type="rental"] {fg/marker-height: @icon-h-close * .8; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);}
// [type="recreation"] {fg/marker-height: @icon-h-close * .9;}
// fg/marker-height: @icon-h-close;
// fg/marker-transform: translate(0,@pin-shift-y-close*1.25);
// }
/* Closest zoom level group; set sizes only (same as mid?) */
// [zoom>=17]{
// bg/marker-height: @pin-h-mid;
// bg/marker-transform: translate(0,@pin-shift-y-mid);
// [type="grocery"] {fg/marker-height: @icon-h-mid * .85;}
// [type="motel"] {fg/marker-height: @icon-h-mid * .65; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);}
// [type="organization"] {fg/marker-height: @icon-h-mid * .7; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);}
// [type="recreation"] {fg/marker-height: @icon-h-mid * .9;}
// [type="rental"] {fg/marker-height: @icon-h-mid * .7; fg/marker-transform: translate(0,@pin-shift-y-mid - 5);}
// fg/marker-height: @icon-h-mid;
// fg/marker-transform: translate(0,@pin-shift-y-mid*1.2);
// }
}/****** VARIABLES ******/
/* Sizes */
@trail-w-init: 6;
/* Colors */
@c-shadow : #333;
@c-dash-light : #eee;
@c-dash-dark : #eee;
/****** TRAIL ******/
#sbht{
::waybottom {
line-width: 30;
line-opacity: .01;
}
::bottom {
line-width: 10;
line-opacity: .15;
line-color: #fff;
line-join: round;
}
::next {
line-width: 9;
line-opacity: .3;
line-color: #fff;
line-join: round;
}
::mid {
line-width: 8;
opacity: .3;
line-color: @c-shadow;
line-join: round;
line-smooth: .25;
}
::tiptop {
line-width: 4.75;
line-color: @c-shadow;
line-join: round;
line-smooth: .25;
line-cap: round;
}
::dash {
line-color: #eee;
line-width: 3.5;
line-smooth: .25;
line-dasharray: 8;
}
}