react-life-design/lib/Info/Info.js

Life Design UI components

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_components_1 = require("styled-components");
var index_1 = require("../index");
var styles_1 = require("../utils/styles");
var Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  margin-left: ", "px;\n"], ["\n  position: relative;\n  margin-left: ", "px;\n"])), index_1.Sizes.s4);
var Info = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  &:hover + .tooltip {\n    opacity: 1;\n    z-index: 1\n  }\n"], ["\n  cursor: pointer;\n  &:hover + .tooltip {\n    opacity: 1;\n    z-index: 1\n  }\n"])));
var Tooltip = styled_components_1.default.div.attrs({
    className: 'tooltip',
})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 4px;\n  position: absolute;\n  z-index: 1;\n  left: 18px;\n  bottom: -13px;\n  transition: all 0.3s ease-in;\n  filter: drop-shadow(0 2px 2px rgb(146, 146, 146));\n  padding: 16px;\n  max-width: 266px;\n  width: 266px;\n  z-index: -1;\n  line-height: 24px;\n  font-family: ", ";\n  display: none;\n\n  ", "\n\n  &:before {\n    content: '';\n    position: inherit;\n    left: -13px;\n    bottom: 15px;\n    border-top: 5px solid transparent;\n    border-right: 13px solid ", ";\n    border-bottom: 9px solid transparent;\n  }\n"], ["\n  opacity: 0;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 4px;\n  position: absolute;\n  z-index: 1;\n  left: 18px;\n  bottom: -13px;\n  transition: all 0.3s ease-in;\n  filter: drop-shadow(0 2px 2px rgb(146, 146, 146));\n  padding: 16px;\n  max-width: 266px;\n  width: 266px;\n  z-index: -1;\n  line-height: 24px;\n  font-family: ", ";\n  display: none;\n\n  ", "\n\n  &:before {\n    content: '';\n    position: inherit;\n    left: -13px;\n    bottom: 15px;\n    border-top: 5px solid transparent;\n    border-right: 13px solid ", ";\n    border-bottom: 9px solid transparent;\n  }\n"])), index_1.Colors.regalBlue, index_1.Colors.white, index_1.TextHelper.fontVariant('regular'), styles_1.styledByMediaQuery("display: block;"), index_1.Colors.regalBlue);
exports.default = (function (_a) {
    var children = _a.children;
    return (React.createElement(Box, null,
        React.createElement(Info, null,
            React.createElement(index_1.Icons.Info, null)),
        React.createElement(Tooltip, null, children)));
});
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=Info.js.map