graceful-unwinding-widget/es/styles.js

graceful-unwinding-widget React component

import _taggedTemplateLiteralLoose from 'babel-runtime/helpers/taggedTemplateLiteralLoose';

var _templateObject = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\n  padding: 25px;\n'], ['\n  padding: 25px;\n']),
    _templateObject7 = _taggedTemplateLiteralLoose(['\n  padding-left: 52px;\n'], ['\n  padding-left: 52px;\n']),
    _templateObject8 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\n  text-align: center;\n'], ['\n  text-align: center;\n']),
    _templateObject11 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\n  color: #3f4277;\n  font-size: 14px;\n'], ['\n  color: #3f4277;\n  font-size: 14px;\n']),
    _templateObject15 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\n  color: #a8afc9;\n  font-size: 18px;\n'], ['\n  color: #a8afc9;\n  font-size: 18px;\n']),
    _templateObject20 = _taggedTemplateLiteralLoose(['\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 = _taggedTemplateLiteralLoose(['\n  color: #b0b2bb;\n  float: left;\n'], ['\n  color: #b0b2bb;\n  float: left;\n']),
    _templateObject22 = _taggedTemplateLiteralLoose(['\n  float: right;\n  color: #5d5d69;\n'], ['\n  float: right;\n  color: #5d5d69;\n']);

import styled from 'styled-components';

export var StyledModal = styled.div(_templateObject);
export var StyledOverlay = styled.div(_templateObject2);
export var CloseIcon = styled.div(_templateObject3);

export var WidgetWrapper = styled.div(_templateObject4);

export var Circle = styled.div(_templateObject5, function (props) {
  return props.background;
});

export var Box = styled.div(_templateObject6);

export var StyledCheckbox = styled.div(_templateObject7);

export var LabelText = styled.p(_templateObject8);

export var MoreInfoLink = styled.a(_templateObject9);

export var PolicyContainer = styled.div(_templateObject10);

export var BoxTitle = styled.p(_templateObject11);

export var CheckboxLabel = styled.label(_templateObject12);

export var BoxFlex = styled.div(_templateObject13);

export var BoxText = styled.p(_templateObject14);

export var CentralizationBox = styled.div(_templateObject15);

export var Checkbox = styled.input(_templateObject16);

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

export var ButtonLink = styled.a(_templateObject18);

export var QuoteTitle = styled.div(_templateObject19);

export var Row = styled.div(_templateObject20);

export var Option = styled.div(_templateObject21);

export var Value = styled.div(_templateObject22);