backpack-ui/dist/utils/mixins.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.underlinedLink = exports.blueLink = exports.outline = undefined;

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var _settings2 = _interopRequireDefault(_settings);

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

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

/**
 * Adds outline styles
 * @param  {Number} offset Outline offset amount
 * @return {Object}        CSS styles
 */
function outline() {
  var offset = arguments.length <= 0 || arguments[0] === undefined ? 2 : arguments[0];

  return typeof offset === "number" && {
    outline: "1px lightgray dotted",
    outlineOffset: offset + "px"
  };
}

/**
 * Creates a blue hyperlink; for use with inline styles via Radium
 * @return {Object} CSS styles
 */
function blueLink() {
  var hoverColor = "#4699d9";

  return {
    color: _settings2.default.color.blue,
    textDecoration: "none",
    transition: "color " + _settings2.default.timing.fast + " ease-in-out",

    ":hover": { color: hoverColor },
    ":active": { color: hoverColor },
    ":focus": (0, _objectAssign2.default)({}, outline(), { color: hoverColor })
  };
}

/**
 * Creates a nicely underlined hyperlink
 * @param  {String} linkColor Link color
 * @return {Object}           CSS styles object
 */
function underlinedLink() {
  var linkColor = arguments.length <= 0 || arguments[0] === undefined ? _settings2.default.color.titleGray : arguments[0];

  var underlineOffset = 2;
  var underlineWeight = 1;
  var backgroundColor = _settings2.default.color.white;
  var underlineColor = "rgba(" + (0, _color.rgb)(linkColor) + ", .4)";

  return {
    color: linkColor,
    position: "relative",
    textDecoration: "none",
    transition: "color " + _settings2.default.timing.fast + " ease",

    // Draw the underline with a background gradient
    backgroundImage: "linear-gradient(\n      to top,\n      transparent,\n      transparent " + underlineOffset + "px,\n      " + underlineColor + " " + underlineOffset + "px,\n      " + underlineColor + " " + (underlineOffset + underlineWeight) + "px,\n      transparent " + (underlineOffset + underlineWeight) + "px\n    )",

    // Create breaks in the underline
    textShadow: "-1px -1px 0 " + backgroundColor + ",\n      1px -1px 0 " + backgroundColor + ",\n      -1px 1px 0 " + backgroundColor + ",\n      1px 1px 0 " + backgroundColor
  };
}

exports.outline = outline;
exports.blueLink = blueLink;
exports.underlinedLink = underlinedLink;