@stokr/components-library/dist/components/CryptoAddress/CryptoAddress.styles.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Value = exports.TitleSide = exports.Title = exports.TableAddress = exports.Status = exports.Radio = exports.OptionsWrapper = exports.InfoBox = exports.Head = exports.Equal = exports.DataWrapper = exports.DataBox = exports.CryptoAddressToggle = exports.CryptoAddressOptionIcon = exports.CryptoAddressOption = exports.CopyToClipboardButton = exports.Container = exports.CheckMark = exports.Body = exports.AddressWrap = exports.Address = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _rwd = _interopRequireDefault(require("../../styles/rwd"));
var _Icon = _interopRequireWildcard(require("../Icon/Icon.style"));
var _theme = _interopRequireDefault(require("../../styles/theme"));
var _copy_icon = require("../../static/images/copy_icon.svg");
var _templateObject, _templateObject2;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const Container = exports.Container = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__Container",
  componentId: "sc-1wjvdgu-0"
})(["position:relative;"]);
const Head = exports.Head = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__Head",
  componentId: "sc-1wjvdgu-1"
})(["position:relative;margin-bottom:5px;&:after{content:'';display:block;width:100%;height:0;clear:both;}", " ", " ", ""], _ref => {
  let {
    noBody
  } = _ref;
  return noBody && "margin-bottom: 0";
}, _ref2 => {
  let {
    flexHead
  } = _ref2;
  return flexHead && "\n         display:flex;\n         justify-content:space-between;\n         align-items:center;\n         flex-wrap:wrap;\n         ";
}, _ref3 => {
  let {
    noHead
  } = _ref3;
  return noHead && "display: none";
});
//think I took flexhead out of CL ..
//seems it is something passed from Algorand
//so leaving it here

const Body = exports.Body = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__Body",
  componentId: "sc-1wjvdgu-2"
})(["position:relative;&:after{content:'';display:block;width:100%;height:0;clear:both;}", ""], _ref4 => {
  let {
    noBody
  } = _ref4;
  return noBody && "display: none";
});
const Title = exports.Title = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__Title",
  componentId: "sc-1wjvdgu-3"
})(["float:left;font-weight:bold;font-size:11px;line-height:24px;letter-spacing:2px;text-transform:uppercase;padding-right:20px;color:", ";"], props => props.color);
const Status = exports.Status = _styledComponents.default.span.withConfig({
  displayName: "CryptoAddressstyles__Status",
  componentId: "sc-1wjvdgu-4"
})(["display:inline-block;vertical-align:top;padding:0px 16px;background-color:", ";color:", ";font-weight:600;font-size:8px;letter-spacing:1.78px;line-height:16px;border-radius:8px;margin-left:12px;margin-top:4px;"], props => _theme.default.cBlack, props => _theme.default.cWhite);
const TitleSide = exports.TitleSide = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__TitleSide",
  componentId: "sc-1wjvdgu-5"
})(["display:block;float:right;margin:4px 0;width:40%;"]);
const AddressWrap = exports.AddressWrap = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__AddressWrap",
  componentId: "sc-1wjvdgu-6"
})(["display:flex;align-items:center;"]);
const Address = exports.Address = _styledComponents.default.span.withConfig({
  displayName: "CryptoAddressstyles__Address",
  componentId: "sc-1wjvdgu-7"
})(["display:block;font-weight:600;font-size:11px;line-height:16px;margin-right:6px;color:", ";transition:color 0.2s;cursor:pointer;&:before{content:'\\f3d1';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:12px;line-height:8px;display:inline-block;width:8px;height:8px;margin-right:6px;}&:hover{color:", ";}"], props => _theme.default.cBlack, props => _theme.default.cPrimary);
// TableAddress from VD
const TableAddress = exports.TableAddress = _styledComponents.default.span.withConfig({
  displayName: "CryptoAddressstyles__TableAddress",
  componentId: "sc-1wjvdgu-8"
})(["line-height:16px;cursor:pointer;&:hover{color:", ";}"], props => _theme.default.cPrimary);
const CopyToClipboardButton = exports.CopyToClipboardButton = (0, _styledComponents.default)(_copy_icon.ReactComponent).withConfig({
  displayName: "CryptoAddressstyles__CopyToClipboardButton",
  componentId: "sc-1wjvdgu-9"
})(["color:", ";cursor:pointer;height:1em;width:1em;"], props => _theme.default.black);
const DataBox = exports.DataBox = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__DataBox",
  componentId: "sc-1wjvdgu-10"
})(["float:left;"]);
const InfoBox = exports.InfoBox = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__InfoBox",
  componentId: "sc-1wjvdgu-11"
})(["float:right;width:40%;@media (max-width:430px){width:100%;padding-top:14px;text-align:start;}"]);
const Value = exports.Value = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__Value",
  componentId: "sc-1wjvdgu-12"
})(["position:relative;font-weight:300;font-size:22px;font-size:", "px;line-height:28px;letter-spacing:0.4px;strong{font-weight:normal;&:after{content:' ';}}& > div{display:inline-block;margin-left:30px;& svg{max-width:16px;max-height:16px;}}"], props => props.fontSize);
const Equal = exports.Equal = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__Equal",
  componentId: "sc-1wjvdgu-13"
})(["position:relative;font-size:9px;font-size:", "px;font-style:italic;line-height:16px;letter-spacing:0.4px;margin-top:8px;"], props => props.fontSize);
const DataWrapper = exports.DataWrapper = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__DataWrapper",
  componentId: "sc-1wjvdgu-14"
})(["position:relative;padding-right:24px;", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  \n  "])), props => props.withOptions && "\n      padding-right: 100px;\n\n      ".concat(TitleSide, " {\n        width: 50%;\n      }\n\n      ").concat(InfoBox, " {\n        width: 50%;\n      }\n    ")));
const CheckMark = exports.CheckMark = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__CheckMark",
  componentId: "sc-1wjvdgu-15"
})(["position:absolute;display:block;width:14px;height:14px;top:50%;right:0;margin-top:-7px;border:1px solid #9b9b9b;border-radius:7px;background-color:transparent;transition:border-color 0.2s,background-color 0.2s;&:before,&:after{content:'';display:block;position:absolute;top:50%;left:50%;opacity:0;transform:scale(0);transition:opacity 0.2s,transform 0.4s cubic-bezier(0.8,-0.5,0.6,0.6);}&:after{width:4px;height:4px;margin-top:-2px;margin-left:-2px;border-radius:2px;background-color:", ";box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);}"], props => _theme.default.cPrimary);
const Radio = exports.Radio = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__Radio",
  componentId: "sc-1wjvdgu-16"
})(["& > input{", ";z-index:-1;position:absolute;top:4px;left:4px;display:block;width:1px;height:0;opacity:0;border:0;& + label{display:block;position:relative;", ";", "}&:disabled + label{&:before{background-color:transparent !important;}", "{border-color:", "!important;background-color:", "!important;}}&:checked + label{&:before{background-color:", "!important;}", "{&:before,&:after{opacity:1;transform:scale(1);transition:opacity 0.2s,transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);}}}&:focus + label,&:hover + label,& + label:hover{&:before{background-color:", ";}", "{border-color:", ";}}}"], props => props.hide && 'visibility: hidden', props => !props.disabled && 'cursor: pointer', props => !props.hideLine && "\n      &:before {\n        content: '';\n        width: 6px;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        background-color: transparent;\n        transition: background-color 0.2s;\n      }\n      ", CheckMark, props => _theme.default.cLightGrey, props => _theme.default.cGrey, props => _theme.default.cWarning, CheckMark, props => _theme.default.cLightGrey, CheckMark, props => _theme.default.cPrimary);
const OptionsWrapper = exports.OptionsWrapper = _styledComponents.default.div.withConfig({
  displayName: "CryptoAddressstyles__OptionsWrapper",
  componentId: "sc-1wjvdgu-17"
})(["text-align:center;margin-right:-24px;", ""], _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-right: 0;\n    position: absolute;\n    display: block;\n    width: 100px;\n    top: 50%;\n    right: 0;\n    text-align:center;\n    transform: translate(0, -50%);  \n  "]))));
const CryptoAddressOption = exports.CryptoAddressOption = _styledComponents.default.button.withConfig({
  displayName: "CryptoAddressstyles__CryptoAddressOption",
  componentId: "sc-1wjvdgu-18"
})(["display:inline-block;position:relative;width:40px;height:40px;outline:none;margin-left:10px;border:1px solid ", ";border-radius:20px;color:", ";transition:color 0.2s;&:focus,&:hover{color:", ";}"], props => _theme.default.cLightGrey, props => _theme.default.cWarning, props => _theme.default.cPrimary);
const CryptoAddressOptionIcon = exports.CryptoAddressOptionIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
  displayName: "CryptoAddressstyles__CryptoAddressOptionIcon",
  componentId: "sc-1wjvdgu-19"
})(["position:absolute;top:50%;left:50%;width:16px;height:16px;font-size:16px;line-height:16px;margin-top:-8px;margin-left:-8px;text-align:center;", ""], props => props.large && "\n    width: 20px;\n    height: 20px;\n    font-size: 20px;\n    line-height: 20px;\n    margin-top: -10px;\n    margin-left: -10px;\n  ");
const CryptoAddressToggle = exports.CryptoAddressToggle = _styledComponents.default.button.withConfig({
  displayName: "CryptoAddressstyles__CryptoAddressToggle",
  componentId: "sc-1wjvdgu-20"
})(["display:inline-block;position:relative;width:40px;height:40px;outline:none;margin-left:10px;border-radius:20px;color:", ";transition:color 0.2s;transform:translateZ(0);&:focus,&:hover{color:", ";}&:before{content:'", "';position:absolute;top:50%;left:50%;width:16px;height:16px;font-size:16px;line-height:16px;margin-top:-8px;margin-left:-8px;font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;transition:transform 0.2s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}", ""], props => _theme.default.cBlack, props => _theme.default.cPrimary, _Icon.iconsMap.arrowDown, props => props.isActive && "\n    &:before {\n      transform: rotate(180deg);\n    }\n  ");