@stokr/components-library
Version:
STOKR - Components Library
86 lines (85 loc) • 7.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SubscribeTitle = exports.SubscribeSubmit = exports.SubscribeInputError = exports.SubscribeInputBox = exports.SubscribeInput = exports.SubscribeForm = exports.Subscribe = exports.LayoutWrapper = exports.Container = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _rwd = _interopRequireWildcard(require("../../styles/rwd"));
var sc = _interopRequireWildcard(require("../../constants/style"));
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const withMarginsCss = (0, _styledComponents.css)(["padding-left:", "px;padding-right:", "px;", " ", ""], sc.BASE_MARGIN * 2, sc.BASE_MARGIN * 2, _rwd.rwdMax.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0 ", "px;\n "])), sc.BASE_MARGIN * 2), _rwd.rwdMax.Mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 0 ", "px;\n "])), sc.BASE_MARGIN * 2));
const Container = exports.Container = _styledComponents.default.div.withConfig({
displayName: "Newsletterstyles__Container",
componentId: "sc-53m39a-0"
})(["", ";padding:", ";padding:", ";"], _ref => {
let {
compact
} = _ref;
return !compact && withMarginsCss;
}, _ref2 => {
let {
isMobile
} = _ref2;
return isMobile && '52px 32px 56px !important';
}, _ref3 => {
let {
noPaddingHorizontal
} = _ref3;
return noPaddingHorizontal && '52px 0px 56px !important';
});
const LayoutWrapper = exports.LayoutWrapper = _styledComponents.default.div.withConfig({
displayName: "Newsletterstyles__LayoutWrapper",
componentId: "sc-53m39a-1"
})(["display:flex;min-height:", ";flex-direction:column;position:relative;max-width:", "px;margin-left:auto;margin-right:auto;width:100%;", " ", " ", ""], _ref4 => {
let {
notFullHeight
} = _ref4;
return notFullHeight ? 'unset' : '100vh';
}, sc.MAX_WIDTH, _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n "])), sc.GRAY_BASE_HEX, sc.GRAY_BASE_HEX), _ref5 => {
let {
minimal
} = _ref5;
return minimal && (0, _styledComponents.css)(["min-height:0;"]);
}, _ref6 => {
let {
noBorder
} = _ref6;
return noBorder && (0, _styledComponents.css)(["border:none !important;"]);
});
const Subscribe = exports.Subscribe = _styledComponents.default.div.withConfig({
displayName: "Newsletterstyles__Subscribe",
componentId: "sc-53m39a-2"
})(["padding:72px 65px 68px;background-color:", ";", ""], sc.RED_BASE_HEX, _rwd.rwdMax.MLarge(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: 68px ", "px;\n "])), sc.BASE_MARGIN * 2));
const SubscribeTitle = exports.SubscribeTitle = _styledComponents.default.h3.withConfig({
displayName: "Newsletterstyles__SubscribeTitle",
componentId: "sc-53m39a-3"
})(["color:white;font-family:'Open Sans','Helvetica','Helvetica Neue',sans-serif;font-size:22px;font-weight:800;font-style:normal;font-stretch:normal;line-height:1.27;letter-spacing:0.8px;margin:0 0 60px;"]);
const SubscribeInputBox = exports.SubscribeInputBox = _styledComponents.default.div.withConfig({
displayName: "Newsletterstyles__SubscribeInputBox",
componentId: "sc-53m39a-4"
})(["display:flex;flex-direction:column;flex:1 0 auto;position:relative;"]);
const SubscribeInput = exports.SubscribeInput = _styledComponents.default.input.withConfig({
displayName: "Newsletterstyles__SubscribeInput",
componentId: "sc-53m39a-5"
})(["text-transform:initial;letter-spacing:2.1px;font-size:11px;white-space:nowrap;line-height:2.18;color:white;font-weight:400;flex:1 0 auto;margin-right:56px;padding:8px 0;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.2);outline:none;&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-text-fill-color:white !important;-webkit-box-shadow:0 0 0 30px ", " inset !important;transition:background-color 5000s ease-in-out 0s;caret-color:white !important;}", " &::-webkit-input-placeholder{color:white;text-transform:uppercase;}&::-moz-placeholder{color:white;text-transform:uppercase;}&::placeholder{color:white;text-transform:uppercase;}"], sc.RED_BASE_HEX, _rwd.rwdMax.MLarge(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-right: 0;\n display: block;\n width: 100%;\n margin-bottom: 36px;\n "]))));
const SubscribeInputError = exports.SubscribeInputError = _styledComponents.default.p.withConfig({
displayName: "Newsletterstyles__SubscribeInputError",
componentId: "sc-53m39a-6"
})(["color:white;font-size:9px;font-weight:400;letter-spacing:1.8px;margin:9px 0;position:absolute;text-transform:uppercase;top:39px;"]);
const SubscribeSubmit = exports.SubscribeSubmit = (0, _styledComponents.default)(_Button.default).withConfig({
displayName: "Newsletterstyles__SubscribeSubmit",
componentId: "sc-53m39a-7"
})(["padding-left:40px;padding-right:40px;background:", ";font-size:11px;display:flex;justify-content:center;width:136px;", " &&&&{border-color:white;color:white;&:hover{background:", ";color:", ";}&:active,&:focus{background:", ";color:", ";}}", ""], sc.RED_BASE_HEX, _rwd.rwdMax.MLarge(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin: 0 auto 0;\n display: block;\n padding-left: 48px;\n padding-right: 48px;\n width: unset;\n "]))), sc.WHITE_HEX, sc.RED_BASE_HEX, sc.RED_BASE_HEX, sc.WHITE_HEX, _ref7 => {
let {
submitSuccess
} = _ref7;
return submitSuccess && "\n background: ".concat(sc.WHITE_HEX, " !important;\n color: ").concat(sc.RED_BASE_HEX, " !important;\n pointer-events: none;\n ");
});
const SubscribeForm = exports.SubscribeForm = _styledComponents.default.form.withConfig({
displayName: "Newsletterstyles__SubscribeForm",
componentId: "sc-53m39a-8"
})(["display:flex;", ""], _rwd.rwdMax.MLarge(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([" display: block;\n "]))));