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

Lonely Planet's Components

"use strict";

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

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

var _colors2 = _interopRequireDefault(_colors);

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

var _timing2 = _interopRequireDefault(_timing);

var _typography = require("../../styles/typography");

var _mixins = require("../../utils/mixins");

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

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

var _font2 = _interopRequireDefault(_font);

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

var styles = {
  ".Typeahead": {
    backgroundColor: _colors2.default.bgPrimary,
    color: _colors2.default.textPrimary,
    fontFamily: (0, _font2.default)("benton"),
    fontSize: _typography.fontSizeHeading7 + "px",
    lineHeight: _typography.lineHeightReset,
    position: "relative"
  },

  ".Typeahead-dropdown": {
    boxShadow: "0 5px 10px 1px " + (0, _color.rgba)("#99a9b3", 0.5),
    left: 0,
    listStyle: "none",
    marginBottom: 0,
    marginTop: 0,
    overflow: "hidden",
    paddingLeft: 0,
    width: "100%"
  },

  ".Typeahead-option": {
    fontWeight: _typography.fontWeightLight,
    padding: "12px 4px",
    whiteSpace: "nowrap"
  },

  ".Typeahead-option--hover": {
    backgroundColor: _colors2.default.bgSecondary
  },

  ".Typeahead-value": {
    cursor: "default"
  },

  ".Typeahead-token": {
    alignItems: "center",
    backgroundColor: _colors2.default.bgPrimary,
    border: "1px solid " + _colors2.default.borderPrimary,
    borderRadius: "32px",
    display: "inline-flex",
    color: _colors2.default.textPrimary,
    fontFamily: (0, _font2.default)("benton"),
    fontSize: _typography.fontSizeBodySmall + "px",
    fontWeight: _typography.fontWeightRegular,
    height: "32px",
    justifyContent: "center",
    lineHeight: _typography.lineHeightReset,
    paddingLeft: "24px",
    paddingRight: "24px",
    position: "relative"
  },

  ".Typeahead-tokenDelete": {
    backgroundColor: "transparent",
    border: 0,
    cursor: "pointer",
    display: "inline-block",
    fontSize: "8px",
    lineHeight: _typography.lineHeightReset,
    marginRight: "-8px",
    padding: "8px",
    transition: "color " + _timing2.default.fast + " ease-in-out"
  },

  ".Typeahead-tokenDelete:hover": {
    color: (0, _color.rgba)(_colors2.default.textPrimary, 0.7)
  },

  ".Typeahead-tokenDelete:active": {
    color: (0, _color.rgba)(_colors2.default.textPrimary, 0.7)
  },

  ".Typeahead-tokenDelete:focus": {
    color: (0, _color.rgba)(_colors2.default.textPrimary, 0.7),
    outline: 0
  },

  ".Typeahead-tokenDelete:focus > svg": (0, _mixins.outline)(),

  ".Typeahead-token:not(:first-of-type)": {
    marginLeft: "8px"
  },

  ".Typeahead-input": {
    backgroundColor: _colors2.default.bgPrimary,
    border: 0,
    color: "inherit",
    display: "block",
    fontFamily: "inherit",
    fontSize: "1em",
    lineHeight: _typography.lineHeightHeading7,
    position: "relative",
    padding: "16px 4px 15px",
    transition: "border-bottom-color " + _timing2.default.fast + " ease-in-out",
    width: "100%"
  },

  ".Typeahead-input:focus": {
    borderBottomColor: _colors2.default.textPrimary,
    outline: 0
  },

  ".Typeahead-input::-webkit-input-placeholder": {
    color: (0, _color.rgba)(_colors2.default.textPrimary, 0.3)
  },

  ".Typeahead-input::-moz-placeholder": {
    color: (0, _color.rgba)(_colors2.default.textPrimary, 0.3)
  },

  ".Typeahead-input:-ms-input-placeholder": {
    color: (0, _color.rgba)(_colors2.default.textPrimary, 0.3)
  },

  ".Typeahead-input:-moz-placeholder": {
    color: (0, _color.rgba)(_colors2.default.textPrimary, 0.3)
  }
};

exports.default = styles;