graceful-unwinding-widget/lib/styles.js

graceful-unwinding-widget React component

'use strict';

exports.__esModule = true;
exports.Value = exports.Option = exports.Row = exports.QuoteTitle = exports.ButtonLink = exports.Button = exports.Checkbox = exports.CentralizationBox = exports.BoxText = exports.BoxFlex = exports.CheckboxLabel = exports.BoxTitle = exports.PolicyContainer = exports.MoreInfoLink = exports.LabelText = exports.StyledCheckbox = exports.Box = exports.Circle = exports.WidgetWrapper = exports.CloseIcon = exports.StyledOverlay = exports.StyledModal = undefined;

var _taggedTemplateLiteralLoose2 = require('babel-runtime/helpers/taggedTemplateLiteralLoose');

var _taggedTemplateLiteralLoose3 = _interopRequireDefault(_taggedTemplateLiteralLoose2);

var _templateObject = (0, _taggedTemplateLiteralLoose3.default)(['\n  width: 80%;\n  height: 80%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fff;\n  transition: opacity ease 500ms;\n  border: 1px grey solid;\n  border-radius: 16px;\n  flex-direction: column;\n  padding: 1rem;\n  iframe: {\n    border: none;\n  }\n'], ['\n  width: 80%;\n  height: 80%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fff;\n  transition: opacity ease 500ms;\n  border: 1px grey solid;\n  border-radius: 16px;\n  flex-direction: column;\n  padding: 1rem;\n  iframe: {\n    border: none;\n  }\n']),
    _templateObject2 = (0, _taggedTemplateLiteralLoose3.default)(['\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n'], ['\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n']),
    _templateObject3 = (0, _taggedTemplateLiteralLoose3.default)(['\n  position: absolute;\n  right: 32px;\n  top: 32px;\n  width: 32px;\n  height: 32px;\n  opacity: 0.6;\n\n  &:hover {\n    opacity: 1;\n  }\n  &:before, &:after {\n    position: absolute;\n    left: 15px;\n    content: \' \';\n    height: 33px;\n    width: 2px;\n    background-color: #333;\n  }\n  &:before {\n    transform: rotate(45deg);\n  }\n  &:after {\n    transform: rotate(-45deg);\n  }\n'], ['\n  position: absolute;\n  right: 32px;\n  top: 32px;\n  width: 32px;\n  height: 32px;\n  opacity: 0.6;\n\n  &:hover {\n    opacity: 1;\n  }\n  &:before, &:after {\n    position: absolute;\n    left: 15px;\n    content: \' \';\n    height: 33px;\n    width: 2px;\n    background-color: #333;\n  }\n  &:before {\n    transform: rotate(45deg);\n  }\n  &:after {\n    transform: rotate(-45deg);\n  }\n']),
    _templateObject4 = (0, _taggedTemplateLiteralLoose3.default)(['\n  background: #ffffff;\n  border-radius: 8px;\n  max-width: 400px;\n  box-shadow: 0 8px 32px 0 rgba(42, 44, 208, 0.15);\n  border: solid 1px rgba(42, 44, 208, 0.05);\n  &:last-child {\n    border-bottom: none;\n  }\n  &.loading {\n    position: relative\n    z-index: 5;\n    &:after {\n      content: \' .\';\n      color: #2d7fff;\n      position: absolute;\n      font-size: 60px;\n      display: block;\n      width: 60px;\n      height: 100px;\n      top: 0;\n      bottom: 0\n      right: 0;\n      left: 0;\n      margin: auto;\n      z-index: 6;\n      animation: dots 1s steps(5, end) infinite;\n    }\n    &::before {\n      position: absolute;\n      z-index: 5;\n      content: \'\';\n      top: 0;\n      bottom: 0\n      right: 0;\n      left: 0;\n      background-color: rgba(255,255,255,0.7)\n    }\n  }\n  @keyframes dots {\n    0%, 20% {\n      color: rgba(0,0,0,0);\n      text-shadow:\n        .25em 0 0 rgba(0,0,0,0),\n        .5em 0 0 rgba(0,0,0,0);}\n    40% {\n      color: white;\n      text-shadow:\n        .25em 0 0 rgba(0,0,0,0),\n        .5em 0 0 rgba(0,0,0,0);}\n    60% {\n      text-shadow:\n        .25em 0 0 #2d7fff,\n        .5em 0 0 rgba(0,0,0,0);}\n    80%, 100% {\n      text-shadow:\n        .25em 0 0 #2d7fff,\n        .5em 0 0 #2d7fff;\n      }\n    }\n'], ['\n  background: #ffffff;\n  border-radius: 8px;\n  max-width: 400px;\n  box-shadow: 0 8px 32px 0 rgba(42, 44, 208, 0.15);\n  border: solid 1px rgba(42, 44, 208, 0.05);\n  &:last-child {\n    border-bottom: none;\n  }\n  &.loading {\n    position: relative\n    z-index: 5;\n    &:after {\n      content: \' .\';\n      color: #2d7fff;\n      position: absolute;\n      font-size: 60px;\n      display: block;\n      width: 60px;\n      height: 100px;\n      top: 0;\n      bottom: 0\n      right: 0;\n      left: 0;\n      margin: auto;\n      z-index: 6;\n      animation: dots 1s steps(5, end) infinite;\n    }\n    &::before {\n      position: absolute;\n      z-index: 5;\n      content: \'\';\n      top: 0;\n      bottom: 0\n      right: 0;\n      left: 0;\n      background-color: rgba(255,255,255,0.7)\n    }\n  }\n  @keyframes dots {\n    0%, 20% {\n      color: rgba(0,0,0,0);\n      text-shadow:\n        .25em 0 0 rgba(0,0,0,0),\n        .5em 0 0 rgba(0,0,0,0);}\n    40% {\n      color: white;\n      text-shadow:\n        .25em 0 0 rgba(0,0,0,0),\n        .5em 0 0 rgba(0,0,0,0);}\n    60% {\n      text-shadow:\n        .25em 0 0 #2d7fff,\n        .5em 0 0 rgba(0,0,0,0);}\n    80%, 100% {\n      text-shadow:\n        .25em 0 0 #2d7fff,\n        .5em 0 0 #2d7fff;\n      }\n    }\n']),
    _templateObject5 = (0, _taggedTemplateLiteralLoose3.default)(['\n  background: ', '\n  width: 40px !important;\n  height: 40px;\n  border-radius: 50%;\n  border-color: lightgrey;\n  margin: -45px 0px 0 0;\n  border-width: thin;\n  border-style: solid;\n  flex-shrink: 0;\n'], ['\n  background: ', '\n  width: 40px !important;\n  height: 40px;\n  border-radius: 50%;\n  border-color: lightgrey;\n  margin: -45px 0px 0 0;\n  border-width: thin;\n  border-style: solid;\n  flex-shrink: 0;\n']),
    _templateObject6 = (0, _taggedTemplateLiteralLoose3.default)(['\n  padding: 25px;\n'], ['\n  padding: 25px;\n']),
    _templateObject7 = (0, _taggedTemplateLiteralLoose3.default)(['\n  padding-left: 52px;\n'], ['\n  padding-left: 52px;\n']),
    _templateObject8 = (0, _taggedTemplateLiteralLoose3.default)(['\n  color: #a8afc9;\n  font-size: 14px;\n  margin-top: 5px;\n  margin-bottom: 5px;\n  a {\n    color: #a8afc9;\n  }\n'], ['\n  color: #a8afc9;\n  font-size: 14px;\n  margin-top: 5px;\n  margin-bottom: 5px;\n  a {\n    color: #a8afc9;\n  }\n']),
    _templateObject9 = (0, _taggedTemplateLiteralLoose3.default)(['\n  color: #3f4277;\n  font-size: 14px;\n  margin-top: 5px;\n  margin-bottom: 5px;\n  text-decoration: underline;\n  &:hover {\n    cursor: pointer;\n  }\n'], ['\n  color: #3f4277;\n  font-size: 14px;\n  margin-top: 5px;\n  margin-bottom: 5px;\n  text-decoration: underline;\n  &:hover {\n    cursor: pointer;\n  }\n']),
    _templateObject10 = (0, _taggedTemplateLiteralLoose3.default)(['\n  text-align: center;\n'], ['\n  text-align: center;\n']),
    _templateObject11 = (0, _taggedTemplateLiteralLoose3.default)(['\n  color: #a8afc9;\n  font-size: 14px;\n  margin-top: 5px;\n  margin-bottom: 5px;\n  padding-left: 52px;\n'], ['\n  color: #a8afc9;\n  font-size: 14px;\n  margin-top: 5px;\n  margin-bottom: 5px;\n  padding-left: 52px;\n']),
    _templateObject12 = (0, _taggedTemplateLiteralLoose3.default)(['\n  font-size: 14px;\n  font-weight: 600;\n  text-align: left;\n  color: #3f4277;\n'], ['\n  font-size: 14px;\n  font-weight: 600;\n  text-align: left;\n  color: #3f4277;\n']),
    _templateObject13 = (0, _taggedTemplateLiteralLoose3.default)(['\n  display: flex;\n  align-items: center;\n  img {\n    height: 26px;\n  }\n  div:first-child {\n    width: 52px;\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  img {\n    height: 26px;\n  }\n  div:first-child {\n    width: 52px;\n  }\n']),
    _templateObject14 = (0, _taggedTemplateLiteralLoose3.default)(['\n  color: #3f4277;\n  font-size: 14px;\n'], ['\n  color: #3f4277;\n  font-size: 14px;\n']),
    _templateObject15 = (0, _taggedTemplateLiteralLoose3.default)(['\n  width: 52px;\n  img {\n    margin: 0\n    &:nth-child(2) {\n      position: relative\n      top:10px;\n      right:18px;\n    }\n  }\n'], ['\n  width: 52px;\n  img {\n    margin: 0\n    &:nth-child(2) {\n      position: relative\n      top:10px;\n      right:18px;\n    }\n  }\n']),
    _templateObject16 = (0, _taggedTemplateLiteralLoose3.default)(['\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  & + label {\n    position: relative;\n    cursor: pointer;\n    padding: 0;\n  }\n  & + label:before {\n    content: \'\';\n    margin-right: 10px;\n    display: inline-block;\n    vertical-align: text-top;\n    width: 16px;\n    height: 16px;\n    background: white;\n    border: solid 1px #dae4f5;\n    border-radius: 4px;\n    position: absolute;\n    left: -40px;\n  }\n  &:checked + label:before {\n    background: #2c80ff;\n  }\n  &:checked + label:after {\n    content: \'\';\n    position: absolute;\n    left: -37px;\n    top: 9px;\n    background: white;\n    width: 2px;\n    height: 2px;\n    box-shadow:\n      2px 0 0 white,\n      4px 0 0 white,\n      4px -2px 0 white,\n      4px -4px 0 white,\n      4px -6px 0 white,\n      4px -8px 0 white;\n    transform: rotate(45deg);\n  }\n'], ['\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  & + label {\n    position: relative;\n    cursor: pointer;\n    padding: 0;\n  }\n  & + label:before {\n    content: \'\';\n    margin-right: 10px;\n    display: inline-block;\n    vertical-align: text-top;\n    width: 16px;\n    height: 16px;\n    background: white;\n    border: solid 1px #dae4f5;\n    border-radius: 4px;\n    position: absolute;\n    left: -40px;\n  }\n  &:checked + label:before {\n    background: #2c80ff;\n  }\n  &:checked + label:after {\n    content: \'\';\n    position: absolute;\n    left: -37px;\n    top: 9px;\n    background: white;\n    width: 2px;\n    height: 2px;\n    box-shadow:\n      2px 0 0 white,\n      4px 0 0 white,\n      4px -2px 0 white,\n      4px -4px 0 white,\n      4px -6px 0 white,\n      4px -8px 0 white;\n    transform: rotate(45deg);\n  }\n']),
    _templateObject17 = (0, _taggedTemplateLiteralLoose3.default)(['\n  background: ', ';\n  color: #fff;\n  width: 100%;\n  padding: 20px 20px;\n  border-radius: 4px;\n  border: 0 none;\n  font-size: 15px;\n  margin: 20px 10px 0 0;\n  &:disabled {\n    background: #8bf;\n  }\n'], ['\n  background: ', ';\n  color: #fff;\n  width: 100%;\n  padding: 20px 20px;\n  border-radius: 4px;\n  border: 0 none;\n  font-size: 15px;\n  margin: 20px 10px 0 0;\n  &:disabled {\n    background: #8bf;\n  }\n']),
    _templateObject18 = (0, _taggedTemplateLiteralLoose3.default)(['\n  display: block;\n  text-align: center;\n  background: #ebf2ff;\n  color: #4b7ad2;\n  font-size: 15px;\n  font-weight: bold;\n  padding: 20px;\n  margin: 40px 0 20px;\n  border-radius: 4px;\n  text-decoration: none;\n'], ['\n  display: block;\n  text-align: center;\n  background: #ebf2ff;\n  color: #4b7ad2;\n  font-size: 15px;\n  font-weight: bold;\n  padding: 20px;\n  margin: 40px 0 20px;\n  border-radius: 4px;\n  text-decoration: none;\n']),
    _templateObject19 = (0, _taggedTemplateLiteralLoose3.default)(['\n  color: #a8afc9;\n  font-size: 18px;\n'], ['\n  color: #a8afc9;\n  font-size: 18px;\n']),
    _templateObject20 = (0, _taggedTemplateLiteralLoose3.default)(['\n  display: flex;\n  flex-grow: 1;\n  flex-direction: row;\n  padding: 15px 0;\n  align-items: center;\n  justify-content: space-between;\n'], ['\n  display: flex;\n  flex-grow: 1;\n  flex-direction: row;\n  padding: 15px 0;\n  align-items: center;\n  justify-content: space-between;\n']),
    _templateObject21 = (0, _taggedTemplateLiteralLoose3.default)(['\n  color: #b0b2bb;\n  float: left;\n'], ['\n  color: #b0b2bb;\n  float: left;\n']),
    _templateObject22 = (0, _taggedTemplateLiteralLoose3.default)(['\n  float: right;\n  color: #5d5d69;\n'], ['\n  float: right;\n  color: #5d5d69;\n']);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var StyledModal = exports.StyledModal = _styledComponents2.default.div(_templateObject);
var StyledOverlay = exports.StyledOverlay = _styledComponents2.default.div(_templateObject2);
var CloseIcon = exports.CloseIcon = _styledComponents2.default.div(_templateObject3);

var WidgetWrapper = exports.WidgetWrapper = _styledComponents2.default.div(_templateObject4);

var Circle = exports.Circle = _styledComponents2.default.div(_templateObject5, function (props) {
  return props.background;
});

var Box = exports.Box = _styledComponents2.default.div(_templateObject6);

var StyledCheckbox = exports.StyledCheckbox = _styledComponents2.default.div(_templateObject7);

var LabelText = exports.LabelText = _styledComponents2.default.p(_templateObject8);

var MoreInfoLink = exports.MoreInfoLink = _styledComponents2.default.a(_templateObject9);

var PolicyContainer = exports.PolicyContainer = _styledComponents2.default.div(_templateObject10);

var BoxTitle = exports.BoxTitle = _styledComponents2.default.p(_templateObject11);

var CheckboxLabel = exports.CheckboxLabel = _styledComponents2.default.label(_templateObject12);

var BoxFlex = exports.BoxFlex = _styledComponents2.default.div(_templateObject13);

var BoxText = exports.BoxText = _styledComponents2.default.p(_templateObject14);

var CentralizationBox = exports.CentralizationBox = _styledComponents2.default.div(_templateObject15);

var Checkbox = exports.Checkbox = _styledComponents2.default.input(_templateObject16);

var Button = exports.Button = _styledComponents2.default.button(_templateObject17, function (props) {
  return props.background || '#2d7fff';
});

var ButtonLink = exports.ButtonLink = _styledComponents2.default.a(_templateObject18);

var QuoteTitle = exports.QuoteTitle = _styledComponents2.default.div(_templateObject19);

var Row = exports.Row = _styledComponents2.default.div(_templateObject20);

var Option = exports.Option = _styledComponents2.default.div(_templateObject21);

var Value = exports.Value = _styledComponents2.default.div(_templateObject22);