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

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _settings = require("../../../settings.json");

var _settings2 = _interopRequireDefault(_settings);

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

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

var styles = {
  container: {
    base: {
      display: "inline-block",
      fontFamily: (0, _font2.default)("benton"),
      position: "relative"
    },

    alignment: {
      center: {
        float: "none"
      }
    }
  },

  options: {
    base: {
      backfaceVisibility: "hidden",
      display: "inline-block",
      position: "absolute",
      transition: "opacity " + _settings2.default.timing.default + ",\n        transform " + _settings2.default.timing.default + ",\n        visibility " + _settings2.default.timing.default,
      width: "200px"
    },

    position: {
      above: {
        bottom: "38px",
        left: "50%"
      },
      below: {
        left: "50%",
        top: "38px"
      },
      left: {
        right: "38px",
        top: "50%"
      },
      right: {
        left: "38px",
        top: "50%"
      }
    },

    state: {
      hidden: {
        base: {
          opacity: 0,
          visibility: "hidden"
        },

        position: {
          above: {
            transform: "translate(-50%, -10px)"
          },
          below: {
            transform: "translate(-50%, 10px)"
          },
          left: {
            transform: "translate(-10px, -50%)"
          },
          right: {
            transform: "translate(10px, -50%)"
          }
        }
      },
      visible: {
        base: {
          opacity: 1,
          pointerEvents: "all",
          visibility: "visible"
        },

        position: {
          above: {
            transform: "translate(-50%, 0)"
          },
          below: {
            transform: "translate(-50%, 0)"
          },
          left: {
            transform: "translate(0, -50%)"
          },
          right: {
            transform: "translate(0, -50%)"
          }
        }
      }
    }
  },

  item: {
    base: {
      backgroundColor: "transparent",
      color: _settings2.default.color.text,
      display: "block",
      fontSize: "13px",
      paddingBottom: "4px",
      paddingTop: "6px",
      textAlign: "left",
      textDecoration: "none",
      width: "100%"
    },

    label: {
      paddingLeft: "6px",
      verticalAlign: "-2px"
    }
  }
};

exports.default = styles;