blockstack-ui/dist/components/notifications/styles.js

Blockstack UI components built with css-in-js and styled-system.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Button = exports.Content = exports.Message = exports.Container = void 0;

require("core-js/modules/es6.function.bind");

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

require("core-js/modules/es6.object.assign");

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactSpring = require("react-spring");

var _primitives = require("../primitives");

var _reactPowerplug = require("react-powerplug");

function _templateObject() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  position: fixed;\n  z-index: 9999999999999;\n  width: 0 auto;\n  top: ", ";\n  bottom: ", ";\n  margin: 0 auto;\n  right: 30px;\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  @media (max-width: 680px) {\n    align-items: center;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var Container = (0, _styledComponents.default)('div')(_templateObject(), function (props) {
  return props.top ? '30px' : 'unset';
}, function (props) {
  return props.top ? 'unset' : '30px';
}, function (props) {
  return props.top ? 'column-reverse' : 'column';
}, function (props) {
  return props.position === 'center' ? 'center' : "flex-" + props.position;
});
exports.Container = Container;

var Message = function Message(_ref) {
  var rest = Object.assign({}, _ref);
  return _react.default.createElement(_primitives.Flex, (0, _extends2.default)({
    is: _reactSpring.animated.div,
    position: 'relative',
    overflow: "hidden",
    width: "40ch",
    fontSize: 1
  }, rest));
};

exports.Message = Message;

var Content = function Content(_ref2) {
  var top = _ref2.top,
      canClose = _ref2.canClose,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["top", "canClose"]);
  return _react.default.createElement(_primitives.Flex, (0, _extends2.default)({
    display: "grid",
    gridTemplateColumns: canClose ? '1fr auto' : '1fr',
    gridGap: "10px",
    overflow: "hidden",
    border: 1,
    borderColor: "blue.mid",
    bg: "white",
    color: "blue.dark",
    pl: 4,
    width: 1,
    borderRadius: 6,
    boxShadow: "card",
    mt: top ? '10px' : 0,
    mb: top ? '0' : '10px'
  }, rest));
};

exports.Content = Content;

var Button = function Button(_ref3) {
  var rest = Object.assign({}, _ref3);
  return _react.default.createElement(_reactPowerplug.Hover, null, function (_ref4) {
    var hovered = _ref4.hovered,
        bind = _ref4.bind;
    return _react.default.createElement(_primitives.Flex, (0, _extends2.default)({
      is: "button",
      border: "0",
      bg: "transparent",
      color: "blue.dark",
      opacity: hovered ? 1 : 0.5,
      cursor: hovered ? 'pointer' : 'unset',
      position: "relative",
      zIndex: 9999,
      alignSelf: "flex-start",
      p: 4,
      style: {
        outline: 'none'
      }
    }, rest, bind));
  });
};

exports.Button = Button;