backpack-ui/dist/components/interactiveMap/styles.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.markerStylesMixin = exports.markerColors = exports.markerStyles = exports.scopedStyles = exports.styles = undefined;

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _dimensions = require("../../styles/dimensions");

var _dimensions2 = _interopRequireDefault(_dimensions);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _flyout = require("../flyout");

var _flyout2 = _interopRequireDefault(_flyout);

var _color = require("../../utils/color");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var flyoutPopupStyles = _flyout2.default.styles.type.mapPopup;

var styles = {
  container: {
    base: {
      maxWidth: "100%",
      position: "relative",
      zIndex: _zIndex2.default.default
    },

    fill: {
      height: "100%",
      width: "100%"
    }
  },

  map: {
    base: {
      height: "100%",
      width: "100%"
    }
  },

  popupBanner: {
    container: {
      base: {
        backgroundColor: _colors2.default.bgPrimary,
        fontSize: "16px",
        height: "80px",
        left: 0,
        paddingTop: 17 / 16 + "em",
        position: "absolute",
        textAlign: "center",
        top: _dimensions2.default.headerHeightMobile + "px",
        transition: "transform " + _timing2.default.fast,
        width: "100%",
        zIndex: _zIndex2.default.videoOverlayClose + 1
      },

      hidden: {
        transform: "translateY(-130px)"
      },

      visible: {
        boxShadow: "40px 2px 20px rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", 0.1),\n          -40px 2px 20px rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", 0.1)",
        transform: "translateY(-50px)"
      }
    },

    anchor: {
      base: {
        display: "block"
      }
    },

    name: {
      base: {
        color: _colors2.default.textPrimary,
        fontSize: "1em",
        fontWeight: 600
      }
    },

    subtype: {
      base: {
        color: _colors2.default.accentGray,
        fontSize: 12 / 16 + "em",
        fontWeight: 600,
        marginTop: 4 / 16 + "em",
        textTransform: "uppercase"
      }
    }
  },

  attribution: {
    container: {
      base: {
        bottom: 2 / 10 + "em",
        fontSize: "10px",
        position: "absolute",
        right: 8 / 10 + "em"
      }
    },

    button: {
      base: {
        backgroundColor: "transparent",
        color: _colors2.default.textSecondary,
        fontSize: "1em",
        fontWeight: 600,
        textDecoration: "underline"
      }
    },

    content: {
      base: {
        backgroundColor: "rgba(" + (0, _color.rgb)(_colors2.default.bgPrimary) + ", .8)",
        bottom: 20 / 9 + "em",
        fontSize: 9 / 10 + "em",
        padding: 5 / 9 + "em " + 5 / 9 + "em " + 3 / 9 + "em",
        position: "absolute",
        right: 0,
        textAlign: "right",
        transition: "opacity " + _timing2.default.fast + ",\n          visibility " + _timing2.default.fast + ",\n          transform " + _timing2.default.fast,
        width: 200 / 9 + "em"
      },

      hidden: {
        opacity: 0,
        transform: "translateY(5px)",
        visibility: "hidden"
      },

      visible: {
        opacity: 1,
        transform: "translateY(0)",
        visibility: "visible"
      }
    }
  }
};

var scopedStyles = {
  ".leaflet-popup-content-wrapper": flyoutPopupStyles.container,

  ".leaflet-popup-content": {
    margin: 0,
    lineHeight: "inherit"
  },

  ".leaflet-popup-tip": flyoutPopupStyles.arrow,

  ".leaflet-marker-icon": {
    borderRadius: "100%",
    textAlign: "center",
    transition: "backgroundColor " + _timing2.default.fast + ",\n      color " + _timing2.default.fast + ",\n      height " + _timing2.default.fast + ",\n      transform " + _timing2.default.fast + ",\n      margin " + _timing2.default.fast + ",\n      padding " + _timing2.default.fast + ",\n      width " + _timing2.default.fast
  },

  ".leaflet-marker-icon .svg-icon": {
    pointerEvents: "none",
    position: "relative",
    top: "50%",
    transform: "translateY(-50%)",
    verticalAlign: "top",
    display: "inline-block",
    fill: _colors2.default.bgPrimary,
    height: "1em",
    width: "1em"
  },

  ".leaflet-popup-pane": {
    pointerEvents: "none"
  }
};

var markerStyles = {};

function markerStylesMixin(markerColor, mode, state) {
  if (state === "active") {
    return {
      backgroundColor: _colors2.default.bgPrimary,
      borderColor: _colors2.default.bgPrimary,
      boxShadow: "0 0 5px rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .25)",
      color: markerColor,
      fontSize: "32px"
    };
  }

  return {
    backgroundColor: markerColor,
    borderColor: "rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .12)",
    borderStyle: "solid",
    borderWidth: mode === "explore" ? "2px" : "1px",
    boxShadow: "0 1px 5px rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .25)",
    color: _colors2.default.bgPrimary,
    fontSize: mode === "explore" ? "16px" : "12px",
    lineHeight: 1
  };
}

var markerColors = {
  eat: _colors2.default.poiEat,
  drink: _colors2.default.accentBlue,
  play: _colors2.default.poiPlay,
  see: _colors2.default.poiSee,
  shop: _colors2.default.accentPink,
  sleep: _colors2.default.accentPurple,
  transport: _colors2.default.accentGray,
  default: _colors2.default.poiDefault,
  center: _colors2.default.linkPrimary
};

exports.styles = styles;
exports.scopedStyles = scopedStyles;
exports.markerStyles = markerStyles;
exports.markerColors = markerColors;
exports.markerStylesMixin = markerStylesMixin;