@bonlineza/luxity-lib 2.11.0 → 2.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion.js +34 -0
- package/AddInterest.js +332 -165
- package/BrandSelector.js +344 -177
- package/Checkbox.js +34 -0
- package/CheckboxButton.js +34 -0
- package/GenderSelector.js +34 -0
- package/GraphQLDropdownSelector.js +344 -177
- package/GraphQLMultiSelector.js +50 -69
- package/IconHeader.js +34 -0
- package/InterestCatSelector.js +34 -0
- package/InterestItem.js +34 -0
- package/Interests.js +344 -177
- package/InvertedTextButton.js +34 -0
- package/LuxityGraphQLDropdownSelector.js +344 -177
- package/LuxityGraphQLMultiselector.js +55 -74
- package/LuxityPageReady.js +6 -72
- package/MaterialSelector.js +344 -177
- package/ModelSelector.js +344 -177
- package/NotificationDropDown.js +43 -65
- package/OutlinePrimaryButton.js +34 -0
- package/PriceRangeSelector.js +34 -0
- package/PrimaryButton.js +34 -0
- package/README.md +2 -1
- package/RadioButtons.js +34 -0
- package/RangeSlider.js +34 -0
- package/RareStepFooter.js +54 -16
- package/RareStepHeader.js +215 -96
- package/SecondaryButton.js +34 -0
- package/ShoeSizeSelector.js +34 -0
- package/StyleSelector.js +59 -78
- package/TextButton.js +34 -0
- package/Tooltip.js +34 -0
- package/build/bundle.js +534 -155
- package/package.json +1 -1
package/build/bundle.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components'), require('numeral'), require('@bonlineza/b-lib/PageReady'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components', 'numeral', '@bonlineza/b-lib/PageReady', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast'], factory) :
|
|
4
|
-
(global = global || self, factory(global.blib = {}, global.React, global.AnimateHeight, global.styled, global.numeral, global.PageReady, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast']));
|
|
5
|
-
}(this, (function (exports, React, AnimateHeight, styled, numeral, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components'), require('numeral'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components', 'numeral', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast'], factory) :
|
|
4
|
+
(global = global || self, factory(global.blib = {}, global.React, global.AnimateHeight, global.styled, global.numeral, global.EllipsisLoader, global.PageReady, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast']));
|
|
5
|
+
}(this, (function (exports, React, AnimateHeight, styled, numeral, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications) { 'use strict';
|
|
6
6
|
|
|
7
7
|
var React__default = 'default' in React ? React['default'] : React;
|
|
8
8
|
AnimateHeight = AnimateHeight && Object.prototype.hasOwnProperty.call(AnimateHeight, 'default') ? AnimateHeight['default'] : AnimateHeight;
|
|
9
9
|
var styled__default = 'default' in styled ? styled['default'] : styled;
|
|
10
10
|
numeral = numeral && Object.prototype.hasOwnProperty.call(numeral, 'default') ? numeral['default'] : numeral;
|
|
11
|
+
EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
|
|
11
12
|
PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
|
|
12
13
|
stylisRuleSheet = stylisRuleSheet && Object.prototype.hasOwnProperty.call(stylisRuleSheet, 'default') ? stylisRuleSheet['default'] : stylisRuleSheet;
|
|
13
14
|
PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
|
|
@@ -355,6 +356,40 @@
|
|
|
355
356
|
ntrlMinTen: '#e6e6e6',
|
|
356
357
|
gray: '#efefef',
|
|
357
358
|
darkerGray: '#454141'
|
|
359
|
+
},
|
|
360
|
+
rareStepColors: {
|
|
361
|
+
primary: '#202b58',
|
|
362
|
+
secondary: '#ef5c2d',
|
|
363
|
+
ntrlMin: '#ffffff',
|
|
364
|
+
ntrl40: '#f4f4f4',
|
|
365
|
+
ntrl50: '#808080',
|
|
366
|
+
ntrl60: '#e8e8e8',
|
|
367
|
+
ntrl70: '#252525',
|
|
368
|
+
ntrlMax: '#000000'
|
|
369
|
+
},
|
|
370
|
+
rareStepFontWeights: {
|
|
371
|
+
normal: 400,
|
|
372
|
+
medium: 500,
|
|
373
|
+
semiBold: 600,
|
|
374
|
+
bold: 700
|
|
375
|
+
},
|
|
376
|
+
rareStepFontSize: {
|
|
377
|
+
h1: '36px',
|
|
378
|
+
h2: '30px',
|
|
379
|
+
h3: '24px',
|
|
380
|
+
h4: '20px',
|
|
381
|
+
h5: '16px',
|
|
382
|
+
h6: '14px',
|
|
383
|
+
footerTitle: '18px'
|
|
384
|
+
},
|
|
385
|
+
rareStepPageSizes: {
|
|
386
|
+
mobile: '500px',
|
|
387
|
+
tablet: '768px',
|
|
388
|
+
desktop: '992px',
|
|
389
|
+
screenl: '1280px',
|
|
390
|
+
screenxl: '1680px',
|
|
391
|
+
screenxxl: '1920px',
|
|
392
|
+
container: '1600px'
|
|
358
393
|
}
|
|
359
394
|
};
|
|
360
395
|
|
|
@@ -937,57 +972,6 @@
|
|
|
937
972
|
return message.replace(':error_code', error.status || 'Network Down');
|
|
938
973
|
};
|
|
939
974
|
|
|
940
|
-
var LuxityArrowLeft = (function (props) {
|
|
941
|
-
return /*#__PURE__*/React__default.createElement("svg", {
|
|
942
|
-
version: "1.0",
|
|
943
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
944
|
-
width: props.width || '100%',
|
|
945
|
-
height: props.height || '100%',
|
|
946
|
-
viewBox: "0 0 177.000000 300.000000",
|
|
947
|
-
preserveAspectRatio: "xMidYMid meet"
|
|
948
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
949
|
-
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
950
|
-
fill: "#000000",
|
|
951
|
-
stroke: "none"
|
|
952
|
-
}, /*#__PURE__*/React__default.createElement("path", {
|
|
953
|
-
d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
|
|
954
|
-
})));
|
|
955
|
-
});
|
|
956
|
-
|
|
957
|
-
var LuxityArrowRight = (function (props) {
|
|
958
|
-
return /*#__PURE__*/React__default.createElement("svg", {
|
|
959
|
-
version: "1.0",
|
|
960
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
961
|
-
width: props.width || '100%',
|
|
962
|
-
height: props.height || '100%',
|
|
963
|
-
viewBox: "0 0 177.000000 300.000000",
|
|
964
|
-
preserveAspectRatio: "xMidYMid meet"
|
|
965
|
-
}, /*#__PURE__*/React__default.createElement("g", {
|
|
966
|
-
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
967
|
-
fill: "#000000",
|
|
968
|
-
stroke: "none"
|
|
969
|
-
}, /*#__PURE__*/React__default.createElement("path", {
|
|
970
|
-
d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
|
|
971
|
-
})));
|
|
972
|
-
});
|
|
973
|
-
|
|
974
|
-
var _templateObject$a, _templateObject2$1, _templateObject3$1;
|
|
975
|
-
var LoaderContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin: 20px auto;\n"])));
|
|
976
|
-
var LeftImageContainer = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n object-fit: contain;\n animation: slide-left infinite 3s;\n background-color: white;\n\n @keyframes slide-left {\n 0% {\n transform: translateX(0);\n }\n 40% {\n transform: translateX(50%);\n }\n 100% {\n transform: translateX(150%);\n }\n }\n"])));
|
|
977
|
-
var RightImageContainer = styled__default.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n width: 100%;\n height: 100%;\n object-fit: contain;\n animation: slide-right infinite 3s;\n\n @keyframes slide-right {\n 0% {\n transform: translateX(0);\n }\n 40% {\n transform: translateX(-50%);\n opacity: 1;\n }\n 100% {\n transform: translateX(-150%);\n opacity: 0;\n }\n }\n"])));
|
|
978
|
-
|
|
979
|
-
function LuxityLoader(_ref) {
|
|
980
|
-
var width = _ref.width,
|
|
981
|
-
height = _ref.height;
|
|
982
|
-
return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
|
|
983
|
-
width: width,
|
|
984
|
-
height: height
|
|
985
|
-
})), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
|
|
986
|
-
width: width,
|
|
987
|
-
height: height
|
|
988
|
-
})));
|
|
989
|
-
}
|
|
990
|
-
|
|
991
975
|
var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
|
|
992
976
|
data: null
|
|
993
977
|
});
|
|
@@ -1063,10 +1047,7 @@
|
|
|
1063
1047
|
customErrorMessage: customErrorMessage,
|
|
1064
1048
|
customErrorHandler: customErrorHandler,
|
|
1065
1049
|
renderCustomLoader: function renderCustomLoader() {
|
|
1066
|
-
return /*#__PURE__*/React__default.createElement(
|
|
1067
|
-
height: "40px",
|
|
1068
|
-
width: "95%"
|
|
1069
|
-
});
|
|
1050
|
+
return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
|
|
1070
1051
|
},
|
|
1071
1052
|
errorMessageInterpreter: interpretErrorMessage
|
|
1072
1053
|
}, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
|
|
@@ -1093,42 +1074,42 @@
|
|
|
1093
1074
|
}
|
|
1094
1075
|
};
|
|
1095
1076
|
|
|
1096
|
-
var _templateObject$
|
|
1097
|
-
var RadioButtonsContainer = styled__default.div(_templateObject$
|
|
1077
|
+
var _templateObject$a;
|
|
1078
|
+
var RadioButtonsContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
1098
1079
|
|
|
1099
|
-
var _templateObject$
|
|
1100
|
-
var ButtonListWrapper = styled__default.div(_templateObject$
|
|
1080
|
+
var _templateObject$b;
|
|
1081
|
+
var ButtonListWrapper = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n display: flex;\n flex-grow: 1;\n flex-wrap: ", ";\n"])), function (_ref) {
|
|
1101
1082
|
var noWrap = _ref.noWrap;
|
|
1102
1083
|
return noWrap ? 'nowrap' : 'wrap';
|
|
1103
1084
|
});
|
|
1104
1085
|
|
|
1105
|
-
var _templateObject$
|
|
1106
|
-
var Title$1 = styled__default.div(_templateObject$
|
|
1086
|
+
var _templateObject$c;
|
|
1087
|
+
var Title$1 = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n flex-basis: 40%;\n"])), function (props) {
|
|
1107
1088
|
return props.theme.colors.base;
|
|
1108
1089
|
});
|
|
1109
1090
|
|
|
1110
|
-
var _templateObject$
|
|
1111
|
-
var RadioButtonLabel = styled__default.label(_templateObject$
|
|
1091
|
+
var _templateObject$d;
|
|
1092
|
+
var RadioButtonLabel = styled__default.label(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n display: flex;\n margin-bottom: ", ";\n margin-right: ", ";\n"])), function (props) {
|
|
1112
1093
|
return props.theme.marginPaddings[0];
|
|
1113
1094
|
}, function (props) {
|
|
1114
1095
|
return props.theme.marginPaddings[0];
|
|
1115
1096
|
});
|
|
1116
1097
|
|
|
1117
|
-
var _templateObject$
|
|
1118
|
-
var RadioButtonCircle = styled__default.div(_templateObject$
|
|
1098
|
+
var _templateObject$e;
|
|
1099
|
+
var RadioButtonCircle = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n height: 20px;\n width: 20px;\n border-radius: 50%;\n margin-right: 5px;\n border: 1px solid ", ";\n display: flex;\n"])), function (props) {
|
|
1119
1100
|
return props.theme.colors.base;
|
|
1120
1101
|
});
|
|
1121
1102
|
|
|
1122
|
-
var _templateObject$
|
|
1123
|
-
var RadioButtonCircleInner = styled__default.div(_templateObject$
|
|
1103
|
+
var _templateObject$f;
|
|
1104
|
+
var RadioButtonCircleInner = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n height: 8px;\n width: 8px;\n border-radius: 50%;\n margin: auto;\n"])));
|
|
1124
1105
|
|
|
1125
|
-
var _templateObject$
|
|
1126
|
-
var RadioButtonInput = styled__default.input(_templateObject$
|
|
1106
|
+
var _templateObject$g;
|
|
1107
|
+
var RadioButtonInput = styled__default.input(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n display: none;\n :checked ~ ", " {\n ", " {\n background-color: ", ";\n }\n }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
|
|
1127
1108
|
return props.theme.colors.base;
|
|
1128
1109
|
});
|
|
1129
1110
|
|
|
1130
|
-
var _templateObject$
|
|
1131
|
-
var RadioButtonText = styled__default.div(_templateObject$
|
|
1111
|
+
var _templateObject$h;
|
|
1112
|
+
var RadioButtonText = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
1132
1113
|
|
|
1133
1114
|
var RadioButtonsFormWrapper = function RadioButtonsFormWrapper(_ref) {
|
|
1134
1115
|
var name = _ref.name,
|
|
@@ -1212,13 +1193,13 @@
|
|
|
1212
1193
|
};
|
|
1213
1194
|
var RadioButtons$1 = themed(RadioButtons);
|
|
1214
1195
|
|
|
1215
|
-
var _templateObject$
|
|
1196
|
+
var _templateObject$i, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5;
|
|
1216
1197
|
/* position relative is required for the Body element to be positioned correctly */
|
|
1217
1198
|
|
|
1218
|
-
var relativeInlineStyle = styled.css(_templateObject$
|
|
1219
|
-
var topMiddleBodyStyle = styled.css(_templateObject2$
|
|
1199
|
+
var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
1200
|
+
var topMiddleBodyStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
1220
1201
|
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
1221
|
-
return styled.css(_templateObject3$
|
|
1202
|
+
return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
|
|
1222
1203
|
};
|
|
1223
1204
|
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
1224
1205
|
return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
|
|
@@ -1227,7 +1208,7 @@
|
|
|
1227
1208
|
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /*Top Arrow*/\n bottom: 100%; /* At the top of the tooltip */\n top: initial;\n left: 50%;\n border-style: solid;\n border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
|
|
1228
1209
|
};
|
|
1229
1210
|
|
|
1230
|
-
var _templateObject$
|
|
1211
|
+
var _templateObject$j;
|
|
1231
1212
|
|
|
1232
1213
|
var getBodyStyle = function getBodyStyle() {
|
|
1233
1214
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -1262,7 +1243,7 @@
|
|
|
1262
1243
|
}
|
|
1263
1244
|
};
|
|
1264
1245
|
|
|
1265
|
-
var Body$1 = styled__default.span(_templateObject$
|
|
1246
|
+
var Body$1 = styled__default.span(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n ", ";\n visibility: hidden;\n opacity: 0;\n width: ", ";\n transition: visibility 0.3s linear, opacity 0.3s linear;\n background-color: ", ";\n color: white;\n text-align: center;\n border-radius: 5px;\n ", "\n &::after {\n content: ' ';\n position: absolute;\n ", "\n }\n"])), relativeInlineStyle, function (props) {
|
|
1266
1247
|
return props.bodyWidth;
|
|
1267
1248
|
}, function (props) {
|
|
1268
1249
|
return props.theme.colors.base || 'black';
|
|
@@ -1272,8 +1253,8 @@
|
|
|
1272
1253
|
return getAfterStyling(props);
|
|
1273
1254
|
});
|
|
1274
1255
|
|
|
1275
|
-
var _templateObject$
|
|
1276
|
-
var Container = styled__default.div(_templateObject$
|
|
1256
|
+
var _templateObject$k;
|
|
1257
|
+
var Container = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n ", ";\n cursor: pointer;\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n"])), relativeInlineStyle, Body$1);
|
|
1277
1258
|
|
|
1278
1259
|
var Tooltip = function Tooltip(_ref) {
|
|
1279
1260
|
var children = _ref.children,
|
|
@@ -1304,14 +1285,14 @@
|
|
|
1304
1285
|
};
|
|
1305
1286
|
var index$1 = themed(Tooltip);
|
|
1306
1287
|
|
|
1307
|
-
var _templateObject$
|
|
1308
|
-
var disabledButtonStyle = styled.css(_templateObject$
|
|
1309
|
-
var baseButtonStyle = styled.css(_templateObject2$
|
|
1288
|
+
var _templateObject$l, _templateObject2$2;
|
|
1289
|
+
var disabledButtonStyle = styled.css(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n cursor: not-allowed;\n opacity: 0.4;\n"])));
|
|
1290
|
+
var baseButtonStyle = styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n padding: 1rem 3.5rem;\n cursor: pointer;\n letter-spacing: 1.3px;\n border-style: none;\n text-transform: uppercase;\n font-size: 12px;\n color: #fff;\n transition: 0.2s ease-in-out;\n outline: none;\n min-width: 150px;\n"])));
|
|
1310
1291
|
|
|
1311
1292
|
var _excluded = ["children"];
|
|
1312
1293
|
|
|
1313
|
-
var _templateObject$
|
|
1314
|
-
var Button = styled__default.button(_templateObject$
|
|
1294
|
+
var _templateObject$m;
|
|
1295
|
+
var Button = styled__default.button(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n ", ";\n background-color: ", ";\n color: ", ";\n &:active,\n &:hover {\n background-color: #fff;\n color: ", ";\n }\n\n &:disabled {\n ", "\n\n &:hover {\n background-color: ", ";\n color: #ffff;\n }\n }\n"])), baseButtonStyle, function (props) {
|
|
1315
1296
|
return props.theme.colors.primary;
|
|
1316
1297
|
}, function (props) {
|
|
1317
1298
|
return props.theme.colors.ntrlMin;
|
|
@@ -1332,8 +1313,8 @@
|
|
|
1332
1313
|
|
|
1333
1314
|
var _excluded$1 = ["children"];
|
|
1334
1315
|
|
|
1335
|
-
var _templateObject$
|
|
1336
|
-
var Button$1 = styled__default.button(_templateObject$
|
|
1316
|
+
var _templateObject$n;
|
|
1317
|
+
var Button$1 = styled__default.button(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n ", ";\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:disabled {\n ", "\n &:hover {\n background-color: ", ";\n }\n }\n"])), baseButtonStyle, function (props) {
|
|
1337
1318
|
return props.theme.colors.ntrlMin;
|
|
1338
1319
|
}, function (props) {
|
|
1339
1320
|
return props.theme.colors.primary;
|
|
@@ -1358,8 +1339,8 @@
|
|
|
1358
1339
|
|
|
1359
1340
|
var _excluded$2 = ["children"];
|
|
1360
1341
|
|
|
1361
|
-
var _templateObject$
|
|
1362
|
-
var Button$2 = styled__default.button(_templateObject$
|
|
1342
|
+
var _templateObject$o;
|
|
1343
|
+
var Button$2 = styled__default.button(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n ", ";\n background-color: transparent;\n color: ", ";\n &:hover {\n color: ", ";\n }\n &:disabled {\n ", ";\n color: ", ";\n }\n"])), baseButtonStyle, function (props) {
|
|
1363
1344
|
return props.theme.colors.base;
|
|
1364
1345
|
}, function (props) {
|
|
1365
1346
|
return props.theme.colors.primary;
|
|
@@ -1381,8 +1362,8 @@
|
|
|
1381
1362
|
|
|
1382
1363
|
var _excluded$3 = ["children"];
|
|
1383
1364
|
|
|
1384
|
-
var _templateObject$
|
|
1385
|
-
var Button$3 = styled__default(TextButton$1)(_templateObject$
|
|
1365
|
+
var _templateObject$p;
|
|
1366
|
+
var Button$3 = styled__default(TextButton$1)(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:disabled {\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
1386
1367
|
return props.theme.colors.ntrlMin;
|
|
1387
1368
|
}, function (props) {
|
|
1388
1369
|
return props.theme.colors.primary;
|
|
@@ -1407,8 +1388,8 @@
|
|
|
1407
1388
|
|
|
1408
1389
|
var _excluded$4 = ["children"];
|
|
1409
1390
|
|
|
1410
|
-
var _templateObject$
|
|
1411
|
-
var Button$4 = styled__default.button(_templateObject$
|
|
1391
|
+
var _templateObject$q;
|
|
1392
|
+
var Button$4 = styled__default.button(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n outline: none;\n cursor: pointer;\n background-color: transparent;\n border: none;\n &:disabled {\n ", ";\n }\n"])), disabledButtonStyle);
|
|
1412
1393
|
|
|
1413
1394
|
var WrapperButton = function WrapperButton(_ref) {
|
|
1414
1395
|
var children = _ref.children,
|
|
@@ -8656,8 +8637,8 @@
|
|
|
8656
8637
|
}
|
|
8657
8638
|
};
|
|
8658
8639
|
|
|
8659
|
-
var _templateObject$
|
|
8660
|
-
var SvgWrapper$1 = styled__default.div(_templateObject$
|
|
8640
|
+
var _templateObject$r;
|
|
8641
|
+
var SvgWrapper$1 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n padding: ", ";\n border: 1px solid\n ", ";\n text-align: center;\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n background-color: ", ";\n color: ", ";\n\n h1 {\n color: ", ";\n }\n\n svg {\n margin-left: auto;\n margin-right: auto;\n max-height: 80px;\n width: auto;\n /*condition*/\n\n .fillColor {\n fill: ", ";\n }\n\n .outlineColor {\n fill: ", ";\n }\n }\n @media (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), function (props) {
|
|
8661
8642
|
return props.theme.marginPaddings[4];
|
|
8662
8643
|
}, function (props) {
|
|
8663
8644
|
return props.hasBorder ? props.theme.colors.borderColor : props.theme.colors.ntrlMin;
|
|
@@ -8688,8 +8669,8 @@
|
|
|
8688
8669
|
isChecked: false
|
|
8689
8670
|
};
|
|
8690
8671
|
|
|
8691
|
-
var _templateObject$
|
|
8692
|
-
var Body$2 = styled__default.div(_templateObject$
|
|
8672
|
+
var _templateObject$s;
|
|
8673
|
+
var Body$2 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n .outlineColor {\n fill: #ffffff;\n }\n display: flex;\n flex-flow: row wrap;\n\n button {\n margin-top: 20px;\n width: 150px;\n cursor: pointer;\n padding: 0;\n &:not(:last-child) {\n margin-right: ", ";\n }\n }\n .outlineColor {\n fill: white;\n }\n\n @media (max-width: ", ") {\n display: block;\n button {\n width: 100%;\n &:not(:last-child) {\n margin-right: 0;\n }\n }\n }\n"])), function (props) {
|
|
8693
8674
|
return props.theme.marginPaddings[2];
|
|
8694
8675
|
}, media.sm);
|
|
8695
8676
|
|
|
@@ -8821,14 +8802,14 @@
|
|
|
8821
8802
|
}));
|
|
8822
8803
|
});
|
|
8823
8804
|
|
|
8824
|
-
var _templateObject$
|
|
8825
|
-
var ErrorMessage$1 = styled__default.div(_templateObject$
|
|
8805
|
+
var _templateObject$t;
|
|
8806
|
+
var ErrorMessage$1 = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n color: ", ";\n margin-top: ", ";\n"])), function (props) {
|
|
8826
8807
|
return props.theme.colors.primary;
|
|
8827
8808
|
}, function (props) {
|
|
8828
8809
|
return props.theme.marginPaddings[0];
|
|
8829
8810
|
});
|
|
8830
8811
|
|
|
8831
|
-
var _templateObject$
|
|
8812
|
+
var _templateObject$u, _templateObject2$3;
|
|
8832
8813
|
var categories = catArray;
|
|
8833
8814
|
|
|
8834
8815
|
var getSvg = function getSvg() {
|
|
@@ -8855,10 +8836,10 @@
|
|
|
8855
8836
|
}
|
|
8856
8837
|
};
|
|
8857
8838
|
|
|
8858
|
-
var Container$1 = styled__default.div(_templateObject$
|
|
8839
|
+
var Container$1 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), function (props) {
|
|
8859
8840
|
return props.theme.marginPaddings[5];
|
|
8860
8841
|
});
|
|
8861
|
-
var CategoryTitle = styled__default.h1(_templateObject2$
|
|
8842
|
+
var CategoryTitle = styled__default.h1(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n margin-top: 10px;\n font-size: 14px;\n text-transform: uppercase;\n"])));
|
|
8862
8843
|
/**
|
|
8863
8844
|
* InterestCatSelector is a specialized selector for select luxity specific interest categories
|
|
8864
8845
|
*/
|
|
@@ -9651,12 +9632,12 @@
|
|
|
9651
9632
|
/* ::<number | string, string, string> */
|
|
9652
9633
|
(transparentize);
|
|
9653
9634
|
|
|
9654
|
-
var _templateObject$
|
|
9655
|
-
var baseSliderStyles = styled.css(_templateObject$
|
|
9635
|
+
var _templateObject$v;
|
|
9636
|
+
var baseSliderStyles = styled.css(_templateObject$v || (_templateObject$v = _taggedTemplateLiteral(["\n .rc-slider {\n position: relative;\n height: 14px;\n padding: 5px 0;\n width: 100%;\n border-radius: 6px;\n touch-action: none;\n box-sizing: border-box;\n }\n .rc-slider * {\n box-sizing: border-box;\n }\n .rc-slider-rail {\n position: absolute;\n width: 100%;\n background-color: #e9e9e9;\n height: 4px;\n border-radius: 6px;\n }\n .rc-slider-track {\n position: absolute;\n left: 0;\n height: 4px;\n border-radius: 6px;\n background-color: #abe2fb;\n }\n .rc-slider-handle {\n position: absolute;\n width: 14px;\n height: 14px;\n cursor: pointer;\n margin-top: -5px;\n border-radius: 50%;\n border: solid 2px #96dbfa;\n background-color: #fff;\n -ms-touch-action: pan-x;\n touch-action: pan-x;\n }\n .rc-slider-handle:focus {\n border-color: #57c5f7;\n box-shadow: 0 0 0 5px #96dbfa;\n outline: none;\n }\n .rc-slider-handle-click-focused:focus {\n border-color: #96dbfa;\n box-shadow: unset;\n }\n .rc-slider-handle:hover {\n border-color: #57c5f7;\n }\n .rc-slider-handle:active {\n border-color: #57c5f7;\n box-shadow: 0 0 5px #57c5f7;\n cursor: grabbing;\n }\n .rc-slider-mark {\n position: absolute;\n top: 18px;\n left: 0;\n width: 100%;\n font-size: 12px;\n }\n .rc-slider-mark-text {\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n color: #999;\n }\n .rc-slider-mark-text-active {\n color: #666;\n }\n .rc-slider-step {\n position: absolute;\n width: 100%;\n height: 4px;\n background: transparent;\n }\n .rc-slider-dot {\n position: absolute;\n bottom: -2px;\n margin-left: -4px;\n width: 8px;\n height: 8px;\n border: 2px solid #e9e9e9;\n background-color: #fff;\n cursor: pointer;\n border-radius: 50%;\n vertical-align: middle;\n }\n .rc-slider-dot-active {\n border-color: #96dbfa;\n }\n .rc-slider-dot-reverse {\n margin-left: 0;\n margin-right: -4px;\n }\n .rc-slider-disabled {\n background-color: #e9e9e9;\n }\n .rc-slider-disabled .rc-slider-track {\n background-color: #ccc;\n }\n .rc-slider-disabled .rc-slider-handle,\n .rc-slider-disabled .rc-slider-dot {\n border-color: #ccc;\n box-shadow: none;\n background-color: #fff;\n cursor: not-allowed;\n }\n .rc-slider-disabled .rc-slider-mark-text,\n .rc-slider-disabled .rc-slider-dot {\n cursor: not-allowed !important;\n }\n .rc-slider-vertical {\n width: 14px;\n height: 100%;\n padding: 0 5px;\n }\n .rc-slider-vertical .rc-slider-rail {\n height: 100%;\n width: 4px;\n }\n .rc-slider-vertical .rc-slider-track {\n left: 5px;\n bottom: 0;\n width: 4px;\n }\n .rc-slider-vertical .rc-slider-handle {\n margin-left: -5px;\n -ms-touch-action: pan-y;\n touch-action: pan-y;\n }\n .rc-slider-vertical .rc-slider-mark {\n top: 0;\n left: 18px;\n height: 100%;\n }\n .rc-slider-vertical .rc-slider-step {\n height: 100%;\n width: 4px;\n }\n .rc-slider-vertical .rc-slider-dot {\n left: 2px;\n margin-bottom: -4px;\n }\n .rc-slider-vertical .rc-slider-dot:first-child {\n margin-bottom: -4px;\n }\n .rc-slider-vertical .rc-slider-dot:last-child {\n margin-bottom: -4px;\n }\n .rc-slider-tooltip-zoom-down-enter,\n .rc-slider-tooltip-zoom-down-appear {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n display: block !important;\n animation-play-state: paused;\n }\n .rc-slider-tooltip-zoom-down-leave {\n animation-duration: 0.3s;\n animation-fill-mode: both;\n display: block !important;\n animation-play-state: paused;\n }\n .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,\n .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {\n animation-name: rcSliderTooltipZoomDownIn;\n animation-play-state: running;\n }\n .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {\n animation-name: rcSliderTooltipZoomDownOut;\n animation-play-state: running;\n }\n .rc-slider-tooltip-zoom-down-enter,\n .rc-slider-tooltip-zoom-down-appear {\n transform: scale(0, 0);\n animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n }\n .rc-slider-tooltip-zoom-down-leave {\n animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n }\n @keyframes rcSliderTooltipZoomDownIn {\n 0% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n 100% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n }\n @keyframes rcSliderTooltipZoomDownOut {\n 0% {\n transform-origin: 50% 100%;\n transform: scale(1, 1);\n }\n 100% {\n opacity: 0;\n transform-origin: 50% 100%;\n transform: scale(0, 0);\n }\n }\n .rc-slider-tooltip {\n position: absolute;\n left: -9999px;\n top: -9999px;\n visibility: visible;\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n }\n .rc-slider-tooltip * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n }\n .rc-slider-tooltip-hidden {\n display: none;\n }\n .rc-slider-tooltip-placement-top {\n padding: 4px 0 8px 0;\n }\n .rc-slider-tooltip-inner {\n padding: 6px 2px;\n min-width: 24px;\n height: 24px;\n font-size: 12px;\n line-height: 1;\n color: #fff;\n text-align: center;\n text-decoration: none;\n background-color: #6c6c6c;\n border-radius: 6px;\n box-shadow: 0 0 4px #d9d9d9;\n }\n .rc-slider-tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {\n bottom: 4px;\n left: 50%;\n margin-left: -4px;\n border-width: 4px 4px 0;\n border-top-color: #6c6c6c;\n }\n"])));
|
|
9656
9637
|
|
|
9657
|
-
var _templateObject$
|
|
9638
|
+
var _templateObject$w, _templateObject2$4, _templateObject3$2, _templateObject4$2;
|
|
9658
9639
|
var handleDimension = '14px';
|
|
9659
|
-
var SliderContainer = styled__default.div(_templateObject$
|
|
9640
|
+
var SliderContainer = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n ", ";\n position: relative;\n .rc-slider-handle {\n background-color: ", ";\n border-color: ", ";\n }\n\n .rc-slider {\n margin-bottom: ", ";\n max-width: calc(100% - ", ");\n margin-left: auto;\n margin-right: auto;\n }\n .rc-slider-track {\n background-color: ", ";\n }\n\n .rc-slider-handle {\n height: ", ";\n width: ", ";\n transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;\n &:hover,\n &:focus {\n border: ", ";\n box-shadow: 0 0 0 5px\n ", ";\n }\n }\n ", "\n"])), baseSliderStyles, function (props) {
|
|
9660
9641
|
return props.theme.colors.primary;
|
|
9661
9642
|
}, function (props) {
|
|
9662
9643
|
return props.theme.colors.primary;
|
|
@@ -9675,22 +9656,22 @@
|
|
|
9675
9656
|
var getSliderMarkStyle = function getSliderMarkStyle(_ref) {
|
|
9676
9657
|
var showMarks = _ref.showMarks,
|
|
9677
9658
|
primary = _ref.theme.colors.primary;
|
|
9678
|
-
var visiblityStyle = showMarks ? styled.css(_templateObject2$
|
|
9659
|
+
var visiblityStyle = showMarks ? styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral([""]))) : styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n .rc-slider-mark-text,\n .rc-slider-dot {\n visibility: hidden;\n }\n "])));
|
|
9679
9660
|
return styled.css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n .rc-slider-mark-text {\n color: ", ";\n }\n\n .rc-slider-dot {\n border-color: ", ";\n background-color: white;\n }\n ", "\n "])), primary, primary, visiblityStyle);
|
|
9680
9661
|
};
|
|
9681
9662
|
|
|
9682
|
-
var _templateObject$
|
|
9683
|
-
var ToolTipWrapper = styled__default.div(_templateObject$
|
|
9663
|
+
var _templateObject$x;
|
|
9664
|
+
var ToolTipWrapper = styled__default.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n position: absolute;\n right: auto;\n top: 20px;\n transform: translateX(-50%);\n width: 100px;\n text-align: center;\n"])));
|
|
9684
9665
|
|
|
9685
|
-
var _templateObject$
|
|
9686
|
-
var Footer = styled__default.div(_templateObject$
|
|
9666
|
+
var _templateObject$y;
|
|
9667
|
+
var Footer = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-end;\n"])));
|
|
9687
9668
|
|
|
9688
9669
|
var _excluded$6 = ["dragging", "value", "offset", "index"],
|
|
9689
9670
|
_excluded2 = ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"];
|
|
9690
9671
|
|
|
9691
|
-
var _templateObject$
|
|
9672
|
+
var _templateObject$z;
|
|
9692
9673
|
var debounceBuilder = functions.debounced(100);
|
|
9693
|
-
var ChildrenWrapper = styled__default.div(_templateObject$
|
|
9674
|
+
var ChildrenWrapper = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), function (props) {
|
|
9694
9675
|
return props.theme.marginPaddings[3];
|
|
9695
9676
|
});
|
|
9696
9677
|
|
|
@@ -9849,11 +9830,11 @@
|
|
|
9849
9830
|
};
|
|
9850
9831
|
var RangeSlider$1 = themed(RangeSlider);
|
|
9851
9832
|
|
|
9852
|
-
var _templateObject$
|
|
9853
|
-
var Title$2 = styled__default.h1(_templateObject$
|
|
9833
|
+
var _templateObject$A, _templateObject2$5;
|
|
9834
|
+
var Title$2 = styled__default.h1(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n font-size: ", ";\n font-weight: bold;\n margin-bottom: 0;\n text-transform: uppercase;\n"])), function (props) {
|
|
9854
9835
|
return props.theme.fontSizes[2];
|
|
9855
9836
|
});
|
|
9856
|
-
var InterestsSubheadingContainer = styled__default.div(_templateObject2$
|
|
9837
|
+
var InterestsSubheadingContainer = styled__default.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n border-bottom: 1px solid ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n width: 100%;\n align-items: center;\n"])), function (props) {
|
|
9857
9838
|
return props.theme.marginPaddings[1];
|
|
9858
9839
|
}, function (props) {
|
|
9859
9840
|
return props.theme.colors.primary;
|
|
@@ -9872,8 +9853,8 @@
|
|
|
9872
9853
|
}, /*#__PURE__*/React__default.createElement(Title$2, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
|
|
9873
9854
|
};
|
|
9874
9855
|
|
|
9875
|
-
var _templateObject$
|
|
9876
|
-
var CurrencyInputWrapper = styled__default.div(_templateObject$
|
|
9856
|
+
var _templateObject$B;
|
|
9857
|
+
var CurrencyInputWrapper = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n\n input[data-qe-id='masked-input-min'],\n input[data-qe-id='masked-input-max'] {\n flex-basis: 30%;\n border-left: none;\n border-right: none;\n border-top: none;\n border-bottom: 1px solid ", ";\n }\n"])), function (props) {
|
|
9877
9858
|
return props.theme.colors.primary;
|
|
9878
9859
|
});
|
|
9879
9860
|
|
|
@@ -10115,8 +10096,8 @@
|
|
|
10115
10096
|
showMessageOnError: true
|
|
10116
10097
|
};
|
|
10117
10098
|
|
|
10118
|
-
var _templateObject$
|
|
10119
|
-
var StyledHeader = styled__default.h5(_templateObject$
|
|
10099
|
+
var _templateObject$C;
|
|
10100
|
+
var StyledHeader = styled__default.h5(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n\n @media (max-width: ", ") {\n display: block;\n }\n\n .icon-header__left {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n\n @media (max-width: ", ") {\n align-self: flex-start;\n }\n\n svg {\n height: 1.5em;\n width: 1.5em;\n margin-right: ", ";\n }\n }\n\n .icon-header__right {\n display: flex;\n flex-grow: 1;\n justify-content: flex-end;\n }\n"])), media.sm, media.sm, function (props) {
|
|
10120
10101
|
return props.theme.marginPaddings[1];
|
|
10121
10102
|
});
|
|
10122
10103
|
|
|
@@ -10162,8 +10143,8 @@
|
|
|
10162
10143
|
}));
|
|
10163
10144
|
});
|
|
10164
10145
|
|
|
10165
|
-
var _templateObject$
|
|
10166
|
-
var NotifyContainer = styled__default.div(_templateObject$
|
|
10146
|
+
var _templateObject$D;
|
|
10147
|
+
var NotifyContainer = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n .page-ready {\n display: flex;\n align-items: center;\n }\n\n .loader {\n min-width: 150px;\n }\n\n .notification-dropdown-select-container {\n min-width: 150px;\n\n .notification-dropdown-select__control {\n min-height: auto;\n background-color: ", ";\n border: none;\n border-radius: 0;\n\n &--is-focused {\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n\n .notification-dropdown-select__value-container {\n & > div {\n padding: 0;\n margin: 0;\n color: ", ";\n }\n & .notification-dropdown-select__single-value,\n & .notification-dropdown-select__placeholder {\n overflow: visible;\n font-weight: lighter;\n }\n }\n }\n }\n\n .notification-dropdown-select__indicators {\n padding: 0 !important;\n .notification-dropdown-select__dropdown-indicator {\n color: ", ";\n }\n }\n\n .notification-dropdown-select__menu {\n border-radius: 0;\n\n & > .notification-dropdown-select__menu-list {\n border-radius: 0;\n\n & > .notification-dropdown-select__option {\n font-weight: bold;\n &:last-child {\n border-bottom: none;\n }\n\n &.notification-dropdown-select__option--is-focused {\n background-color: ", ";\n border-style: hidden;\n }\n &.notification-dropdown-select__option--is-selected {\n color: ", ";\n background-color: ", ";\n border-style: hidden;\n }\n &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n border-style: hidden;\n }\n }\n }\n }\n"])), function (props) {
|
|
10167
10148
|
return props.theme.colors.ntrlMin;
|
|
10168
10149
|
}, function (props) {
|
|
10169
10150
|
return props.theme.colors.base;
|
|
@@ -10272,10 +10253,7 @@
|
|
|
10272
10253
|
}
|
|
10273
10254
|
}, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
10274
10255
|
className: "notification-dropdown-label"
|
|
10275
|
-
}, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(
|
|
10276
|
-
height: "20px",
|
|
10277
|
-
width: "95%"
|
|
10278
|
-
}) : /*#__PURE__*/React__default.createElement(index$1$1, {
|
|
10256
|
+
}, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1$1, {
|
|
10279
10257
|
isMulti: false,
|
|
10280
10258
|
isSearchable: false,
|
|
10281
10259
|
components: {
|
|
@@ -10304,12 +10282,12 @@
|
|
|
10304
10282
|
|
|
10305
10283
|
var NotificationDropDown$1 = themed(NotificationDropDown);
|
|
10306
10284
|
|
|
10307
|
-
var _templateObject$
|
|
10285
|
+
var _templateObject$E;
|
|
10308
10286
|
var ALL_ITEM = {
|
|
10309
10287
|
label: 'ALL',
|
|
10310
10288
|
value: 'ALL'
|
|
10311
10289
|
};
|
|
10312
|
-
var StyledMultiselector = styled__default.div(_templateObject$
|
|
10290
|
+
var StyledMultiselector = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: no-wrap;\n margin-bottom: 40px;\n .dropdown-select-container {\n width: 100%;\n .dropdown-select {\n &__control {\n border-color: ", ";\n border-radius: 0px;\n background-color: ", ";\n color: ", ";\n }\n &__multi-value {\n background-color: ", ";\n }\n &__multi-value__label {\n color: ", ";\n font-size: 100%;\n }\n &__multi-value__remove {\n svg {\n fill: ", ";\n }\n }\n }\n }\n }\n"])), function (props) {
|
|
10313
10291
|
return props.theme.colors.primary;
|
|
10314
10292
|
}, function (props) {
|
|
10315
10293
|
return props.theme.colors.ntrlMin;
|
|
@@ -10587,15 +10565,15 @@
|
|
|
10587
10565
|
}
|
|
10588
10566
|
};
|
|
10589
10567
|
|
|
10590
|
-
var _templateObject$
|
|
10568
|
+
var _templateObject$F, _templateObject2$6;
|
|
10591
10569
|
var ALL_ITEM$1 = {
|
|
10592
10570
|
id: 'ALL',
|
|
10593
10571
|
name: 'ALL'
|
|
10594
10572
|
};
|
|
10595
10573
|
var multiSelectorItemMaxHeight = '3rem';
|
|
10596
10574
|
var multiSelectorItemAnimationDuration = '300ms';
|
|
10597
|
-
var multiselectorItemFadeIn = styled.keyframes(_templateObject$
|
|
10598
|
-
var StyledMultiselector$1 = styled__default.div(_templateObject2$
|
|
10575
|
+
var multiselectorItemFadeIn = styled.keyframes(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n from {\n margin: 0;\n max-height: 0px;\n opacity: 0;\n }\n to {\n max-height: ", ";\n opacity: 1;\n }\n"])), multiSelectorItemMaxHeight);
|
|
10576
|
+
var StyledMultiselector$1 = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: wrap;\n margin-left: calc(-1 * ", ");\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n text-transform: none;\n box-sizing: border-box;\n animation: ", " ease-in-out\n ", " forwards;\n flex-basis: calc(25% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n text-overflow: ellipsis;\n overflow-x: hidden;\n min-height: 40px;\n\n @media (max-width: ", ") {\n flex-basis: calc(50% - ", ");\n }\n }\n }\n\n .multiselector__footer {\n display: flex;\n justify-content: center;\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
10599
10577
|
return props.theme.marginPaddings[2];
|
|
10600
10578
|
}, function (props) {
|
|
10601
10579
|
return props.theme.colors.ntrlMin;
|
|
@@ -10832,7 +10810,7 @@
|
|
|
10832
10810
|
}));
|
|
10833
10811
|
});
|
|
10834
10812
|
|
|
10835
|
-
var _templateObject$
|
|
10813
|
+
var _templateObject$G;
|
|
10836
10814
|
|
|
10837
10815
|
var Title$3 = function Title(_ref) {
|
|
10838
10816
|
var baseClass = _ref.baseClass,
|
|
@@ -10853,7 +10831,7 @@
|
|
|
10853
10831
|
})));
|
|
10854
10832
|
};
|
|
10855
10833
|
|
|
10856
|
-
var StyledTitle = styled__default(Title$3)(_templateObject$
|
|
10834
|
+
var StyledTitle = styled__default(Title$3)(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n font-weight: bold;\n display: flex;\n align-items: center;\n font-size: ", ";\n\n .title__search,\n .title__search {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 30px;\n margin-bottom: ", ";\n\n svg {\n margin-left: ", ";\n fill: ", ";\n stroke: ", ";\n }\n\n input {\n width: 140px;\n border: none;\n font-size: ", ";\n transition: 0.2s border-color ease-in-out;\n margin-left: ", ";\n padding: 0;\n\n :focus {\n border-color: ", ";\n border-bottom: none;\n }\n }\n }\n"])), function (props) {
|
|
10857
10835
|
return props.theme.marginPaddings[2];
|
|
10858
10836
|
}, function (props) {
|
|
10859
10837
|
return props.theme.fontSizes[2];
|
|
@@ -10993,8 +10971,8 @@
|
|
|
10993
10971
|
baseQueryLimit: 12
|
|
10994
10972
|
};
|
|
10995
10973
|
|
|
10996
|
-
var _templateObject$
|
|
10997
|
-
var BaseButton = styled__default.button(_templateObject$
|
|
10974
|
+
var _templateObject$H;
|
|
10975
|
+
var BaseButton = styled__default.button(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n color: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n"])), function (props) {
|
|
10998
10976
|
return props.theme.colors.base;
|
|
10999
10977
|
}, function (props) {
|
|
11000
10978
|
return props.theme.colors.borderColor;
|
|
@@ -11063,12 +11041,12 @@
|
|
|
11063
11041
|
}
|
|
11064
11042
|
};
|
|
11065
11043
|
|
|
11066
|
-
var _templateObject$
|
|
11067
|
-
var TitleWrapper = styled__default.div(_templateObject$
|
|
11044
|
+
var _templateObject$I, _templateObject2$7;
|
|
11045
|
+
var TitleWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: nowrap row;\n justify-content: space-between;\n margin-bottom: ", ";\n label {\n margin-bottom: 0;\n }\n"])), function (props) {
|
|
11068
11046
|
return props.theme.marginPaddings[4];
|
|
11069
11047
|
});
|
|
11070
11048
|
var onShoeSizeTypeChangeTimeout = 300;
|
|
11071
|
-
var ShoeSizeFadeContainer = styled__default.div(_templateObject2$
|
|
11049
|
+
var ShoeSizeFadeContainer = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n .rc-slider-handle,\n .rc-slider-handle-2,\n .shoe-size-tooltip {\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n }\n"])), onShoeSizeTypeChangeTimeout, function (props) {
|
|
11072
11050
|
return props.childVisible ? 1 : 0;
|
|
11073
11051
|
}, onShoeSizeTypeChangeTimeout, function (props) {
|
|
11074
11052
|
return props.childVisible ? 1 : 0;
|
|
@@ -11202,8 +11180,8 @@
|
|
|
11202
11180
|
}
|
|
11203
11181
|
};
|
|
11204
11182
|
|
|
11205
|
-
var _templateObject$
|
|
11206
|
-
var SelectionWrapper = styled__default.div(_templateObject$
|
|
11183
|
+
var _templateObject$J;
|
|
11184
|
+
var SelectionWrapper = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n display: flex;\n margin-left: calc(-1 * ", ");\n label {\n margin-bottom: ", ";\n flex-basis: calc(33.33% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n }\n @media (max-width: ", ") {\n label {\n flex-basis: calc(50% - ", ");\n }\n }\n"])), function (props) {
|
|
11207
11185
|
return props.theme.marginPaddings[2];
|
|
11208
11186
|
}, function (props) {
|
|
11209
11187
|
return props.theme.marginPaddings[2];
|
|
@@ -11219,14 +11197,14 @@
|
|
|
11219
11197
|
|
|
11220
11198
|
var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
|
|
11221
11199
|
|
|
11222
|
-
var _templateObject$
|
|
11223
|
-
var Content = styled__default.div(_templateObject$
|
|
11200
|
+
var _templateObject$K, _templateObject2$8, _templateObject3$3;
|
|
11201
|
+
var Content = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n background-color: transparent;\n border: 1px solid ", ";\n transition: 200ms ease-in-out;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n cursor: pointer;\n"])), function (props) {
|
|
11224
11202
|
return props.theme.colors.primary;
|
|
11225
11203
|
}, function (props) {
|
|
11226
11204
|
return props.theme.marginPaddings[0];
|
|
11227
11205
|
});
|
|
11228
|
-
var InputText = styled__default.div(_templateObject2$
|
|
11229
|
-
var StyledLabel = styled__default.label(_templateObject3$
|
|
11206
|
+
var InputText = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n transition: 200ms ease-in;\n margin-left: auto;\n margin-right: auto;\n"])));
|
|
11207
|
+
var StyledLabel = styled__default.label(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n line-height: initial;\n display: block;\n box-sizing: border-box;\n transition: 200ms ease-in-out;\n text-align: center;\n\n &:hover ", " {\n color: ", ";\n }\n\n input {\n display: none;\n &:checked ~ ", " {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:checked ~ ", " ", " {\n color: ", ";\n }\n\n &:disabled ~ ", " {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n"])), InputText, function (props) {
|
|
11230
11208
|
return props.theme.colors.primary;
|
|
11231
11209
|
}, Content, function (props) {
|
|
11232
11210
|
return props.theme.colors.primary;
|
|
@@ -11455,23 +11433,23 @@
|
|
|
11455
11433
|
}
|
|
11456
11434
|
};
|
|
11457
11435
|
|
|
11458
|
-
var _templateObject$
|
|
11436
|
+
var _templateObject$L, _templateObject2$9, _templateObject3$4, _templateObject4$3, _templateObject5$1;
|
|
11459
11437
|
var UNISEX$1 = genders.UNISEX;
|
|
11460
|
-
var AddInterestContainer = styled__default.div(_templateObject$
|
|
11438
|
+
var AddInterestContainer = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n border: 1px solid ", ";\n padding: ", ";\n"])), function (props) {
|
|
11461
11439
|
return props.theme.marginPaddings[6];
|
|
11462
11440
|
}, function (props) {
|
|
11463
11441
|
return props.theme.colors.borderColor;
|
|
11464
11442
|
}, function (props) {
|
|
11465
11443
|
return props.theme.marginPaddings[6];
|
|
11466
11444
|
});
|
|
11467
|
-
var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$
|
|
11445
|
+
var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n margin-top: ", ";\n\n @media (max-width: ", ") {\n .fl-right__item {\n flex-direction: column;\n margin-right: 0;\n margin-left: ", ";\n }\n\n button {\n margin-bottom: ", ";\n }\n }\n"])), function (props) {
|
|
11468
11446
|
return props.theme.marginPaddings[6];
|
|
11469
11447
|
}, media.xs, function (props) {
|
|
11470
11448
|
return props.theme.marginPaddings[0];
|
|
11471
11449
|
}, function (props) {
|
|
11472
11450
|
return props.theme.marginPaddings[1];
|
|
11473
11451
|
});
|
|
11474
|
-
var CatSelectorParagraph = styled__default.div(_templateObject3$
|
|
11452
|
+
var CatSelectorParagraph = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n margin-bottom: ", ";\n"])), function (props) {
|
|
11475
11453
|
return props.theme.colors.darkerGray;
|
|
11476
11454
|
}, function (props) {
|
|
11477
11455
|
return props.theme.marginPaddings[2];
|
|
@@ -11782,8 +11760,8 @@
|
|
|
11782
11760
|
|
|
11783
11761
|
var AddInterest$1 = themed(AddInterest);
|
|
11784
11762
|
|
|
11785
|
-
var _templateObject$
|
|
11786
|
-
var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$
|
|
11763
|
+
var _templateObject$M;
|
|
11764
|
+
var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n\n .heading-title-section {\n display: flex;\n justify-content: space-between;\n width: 95%;\n padding: ", ";\n }\n\n .heading-title {\n color: ", ";\n font-weight: bold;\n flex-basis: calc(100% / 6);\n margin-left: ", ";\n padding-bottom: 0;\n }\n\n .heading-title-empty {\n flex-basis: 5%;\n margin-left: 1rem;\n }\n\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (props) {
|
|
11787
11765
|
return props.theme.marginPaddings[0];
|
|
11788
11766
|
}, function (props) {
|
|
11789
11767
|
return props.theme.colors.primary;
|
|
@@ -11817,8 +11795,8 @@
|
|
|
11817
11795
|
|
|
11818
11796
|
var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
|
|
11819
11797
|
|
|
11820
|
-
var _templateObject$
|
|
11821
|
-
var SvgWrapper$2 = styled__default.span(_templateObject$
|
|
11798
|
+
var _templateObject$N;
|
|
11799
|
+
var SvgWrapper$2 = styled__default.span(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n svg {\n path {\n fill: ", ";\n }\n }\n"])), function (props) {
|
|
11822
11800
|
return props.theme.colors.primary;
|
|
11823
11801
|
});
|
|
11824
11802
|
var AccountIcon = themed(function () {
|
|
@@ -11968,6 +11946,405 @@
|
|
|
11968
11946
|
defaultShoeSizeType: shoeSizeTypes.eu.value
|
|
11969
11947
|
};
|
|
11970
11948
|
|
|
11949
|
+
var _templateObject$O, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
|
|
11950
|
+
var HeaderWrapper = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n {\n display: inline-block;\n background-color: ", ";\n position: relative;\n width: 100%;\n }\n"])), function (props) {
|
|
11951
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
11952
|
+
});
|
|
11953
|
+
var PageContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n {\n max-width: ", ";\n margin: 0 auto;\n width: 100%;\n padding: 0 5%;\n display: flex;\n justify-content: space-between;\n }\n"])), function (props) {
|
|
11954
|
+
return props.theme.rareStepPageSizes.container;
|
|
11955
|
+
});
|
|
11956
|
+
var HeaderContainer = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: space-between;\n padding: ", " 5%;\n max-width: ", ";\n margin: 0 auto;\n width: 100%;\n }\n"])), function (props) {
|
|
11957
|
+
return props.theme.marginPaddings[3];
|
|
11958
|
+
}, function (props) {
|
|
11959
|
+
return props.theme.rareStepPageSizes.container;
|
|
11960
|
+
});
|
|
11961
|
+
var LogoFigure = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
11962
|
+
var LogoImage = styled__default.img(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n }\n"])));
|
|
11963
|
+
var CurrencyFlagIcon = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n {\n width: 25px;\n height: 15px;\n margin-top: 9px;\n margin-right: 10px;\n }\n"])));
|
|
11964
|
+
var SellToUsLink = styled__default.a(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n {\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n padding-top: 10px;\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n }\n }\n"])), function (props) {
|
|
11965
|
+
return props.theme.rareStepColors.secondary;
|
|
11966
|
+
}, function (props) {
|
|
11967
|
+
return props.theme.rareStepFontWeights.bold;
|
|
11968
|
+
}, function (props) {
|
|
11969
|
+
return props.theme.rareStepFontSize.h5;
|
|
11970
|
+
}, function (props) {
|
|
11971
|
+
return props.theme.rareStepColors.secondary;
|
|
11972
|
+
});
|
|
11973
|
+
var HeaderIconsContainer = styled__default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n {\n display: flex;\n align-items: center;\n }\n"])));
|
|
11974
|
+
var HeaderIcon = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n margin-left: ", ";\n cursor: pointer;\n }\n"])), function (props) {
|
|
11975
|
+
return props.theme.marginPaddings[3];
|
|
11976
|
+
});
|
|
11977
|
+
var NavigationContainer = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: space-between;\n background-color: ", ";\n padding-top: ", ";\n }\n"])), function (props) {
|
|
11978
|
+
return props.theme.rareStepColors.primary;
|
|
11979
|
+
}, function (props) {
|
|
11980
|
+
return props.theme.marginPaddings[1];
|
|
11981
|
+
});
|
|
11982
|
+
var NavigationLink = styled__default.a(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-wrap: no-wrap;\n align-items: center;\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n padding-top: 2px;\n padding-bottom: ", ";\n cursor: pointer;\n border-bottom: 2px solid ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n border-bottom: 2px solid ", ";\n }\n }\n"])), function (props) {
|
|
11983
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
11984
|
+
}, function (props) {
|
|
11985
|
+
return props.theme.rareStepFontSize.h5;
|
|
11986
|
+
}, function (props) {
|
|
11987
|
+
return props.theme.marginPaddings[5];
|
|
11988
|
+
}, function (props) {
|
|
11989
|
+
return props.theme.marginPaddings[1];
|
|
11990
|
+
}, function (props) {
|
|
11991
|
+
return props.theme.rareStepColors.primary;
|
|
11992
|
+
}, function (props) {
|
|
11993
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
11994
|
+
}, function (props) {
|
|
11995
|
+
return props.theme.rareStepColors.secondary;
|
|
11996
|
+
});
|
|
11997
|
+
var NavigationLinks = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
|
|
11998
|
+
var Dropdown = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n padding: ", " 0;\n border-top: 1px solid ", ";\n font-size: ", ";\n position: absolute;\n width: 100%;\n }\n"])), function (props) {
|
|
11999
|
+
return props.theme.rareStepColors.primary;
|
|
12000
|
+
}, function (props) {
|
|
12001
|
+
return props.theme.marginPaddings[4];
|
|
12002
|
+
}, function (props) {
|
|
12003
|
+
return props.theme.rareStepColors.ntrl40;
|
|
12004
|
+
}, function (props) {
|
|
12005
|
+
return props.theme.rareStepFontSize.h5;
|
|
12006
|
+
});
|
|
12007
|
+
var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
|
|
12008
|
+
var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
|
|
12009
|
+
return props.theme.marginPaddings[3];
|
|
12010
|
+
}, function (props) {
|
|
12011
|
+
return props.theme.rareStepColors.ntrl40;
|
|
12012
|
+
}, function (props) {
|
|
12013
|
+
return props.theme.rareStepColors.ntrl40;
|
|
12014
|
+
});
|
|
12015
|
+
var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
|
|
12016
|
+
var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
|
|
12017
|
+
return props.theme.marginPaddings[5];
|
|
12018
|
+
});
|
|
12019
|
+
var DropdownImage = styled__default.img(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n {\n width: 90%;\n height: 100%;\n object-fit: cover;\n margin-left: auto;\n }\n"])));
|
|
12020
|
+
var DropdownLink = styled__default.a(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n {\n color: ", ";\n padding-bottom: ", ";\n cursor: pointer;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
|
|
12021
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12022
|
+
}, function (props) {
|
|
12023
|
+
return props.theme.marginPaddings[0];
|
|
12024
|
+
}, function (props) {
|
|
12025
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12026
|
+
});
|
|
12027
|
+
var DropdownBrandLinkContainer = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n {\n display: flex;\n\n &:hover {\n cursor: pointer;\n\n hr {\n display: block;\n }\n\n a {\n font-weight: ", ";\n }\n }\n }\n"])), function (props) {
|
|
12028
|
+
return props.theme.rareStepFontWeights.bold;
|
|
12029
|
+
});
|
|
12030
|
+
var DropdownBrandLinkHR = styled__default.hr(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n {\n display: none;\n width: 20px;\n margin: 10px 10px 0 0;\n color: ", ";\n height: 1px;\n border: 1px solid ", ";\n }\n"])), function (props) {
|
|
12031
|
+
return props.theme.rareStepColors.secondary;
|
|
12032
|
+
}, function (props) {
|
|
12033
|
+
return props.theme.rareStepColors.secondary;
|
|
12034
|
+
});
|
|
12035
|
+
var DropdownBrandLink = styled__default.a(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n {\n color: ", ";\n padding-bottom: 0.5rem;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n font-weight: ", ";\n }\n }\n"])), function (props) {
|
|
12036
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12037
|
+
}, function (props) {
|
|
12038
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12039
|
+
}, function (props) {
|
|
12040
|
+
return props.theme.rareStepFontWeights.bold;
|
|
12041
|
+
});
|
|
12042
|
+
var DropdownNavigatorIcon = styled__default.img(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n {\n width: 15px;\n height: 12px;\n margin-left: ", ";\n }\n"])), function (props) {
|
|
12043
|
+
return props.theme.marginPaddings[0];
|
|
12044
|
+
});
|
|
12045
|
+
var SellToUsHR = styled__default.hr(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n {\n width: 80px;\n margin-top: 20px;\n color: ", ";\n border: 1px solid ", ";\n margin-right: 10px;\n }\n"])), function (props) {
|
|
12046
|
+
return props.theme.rareStepColors.secondary;
|
|
12047
|
+
}, function (props) {
|
|
12048
|
+
return props.theme.rareStepColors.secondary;
|
|
12049
|
+
});
|
|
12050
|
+
var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", "\n ", ";\n background-color: ", ";\n align-items: center;\n border-top: 1px solid ", ";\n }\n"])), function (props) {
|
|
12051
|
+
return props.theme.marginPaddings[1];
|
|
12052
|
+
}, function (props) {
|
|
12053
|
+
return props.theme.marginPaddings[3];
|
|
12054
|
+
}, function (props) {
|
|
12055
|
+
return props.theme.rareStepColors.primary;
|
|
12056
|
+
}, function (props) {
|
|
12057
|
+
return props.theme.rareStepColors.ntrl40;
|
|
12058
|
+
});
|
|
12059
|
+
var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 50%;\n font-size: ", ";\n padding-bottom: ", ";\n background-color: ", ";\n color: ", ";\n border: none;\n margin-left: ", ";\n\n &:active,\n &:focus,\n &:focus-visible {\n outline: none;\n border: none;\n }\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (props) {
|
|
12060
|
+
return props.theme.rareStepFontSize.footerTitle;
|
|
12061
|
+
}, function (props) {
|
|
12062
|
+
return props.theme.marginPaddings[0];
|
|
12063
|
+
}, function (props) {
|
|
12064
|
+
return props.theme.rareStepColors.primary;
|
|
12065
|
+
}, function (props) {
|
|
12066
|
+
return props.theme.rareStepColors.ntrl40;
|
|
12067
|
+
}, function (props) {
|
|
12068
|
+
return props.theme.marginPaddings[3];
|
|
12069
|
+
}, function (props) {
|
|
12070
|
+
return props.theme.rareStepColors.ntrl40;
|
|
12071
|
+
});
|
|
12072
|
+
var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-bottom: 7px;\n }\n"])));
|
|
12073
|
+
var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n }\n"])));
|
|
12074
|
+
|
|
12075
|
+
var DropdownSearch = function DropdownSearch(_ref) {
|
|
12076
|
+
var close_icon_url = _ref.close_icon_url,
|
|
12077
|
+
navigation_search_icon_url = _ref.navigation_search_icon_url,
|
|
12078
|
+
wordpress_site_url = _ref.wordpress_site_url,
|
|
12079
|
+
toggleSearch = _ref.toggleSearch;
|
|
12080
|
+
var searchInputRef = React.useRef(null);
|
|
12081
|
+
|
|
12082
|
+
var handleOnSearch = function handleOnSearch() {
|
|
12083
|
+
window.location.replace("".concat(wordpress_site_url, "?post_type=product&s=").concat(searchInputRef.current.value));
|
|
12084
|
+
};
|
|
12085
|
+
|
|
12086
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
12087
|
+
if (e.key === 'Enter') {
|
|
12088
|
+
handleOnSearch();
|
|
12089
|
+
}
|
|
12090
|
+
};
|
|
12091
|
+
|
|
12092
|
+
return /*#__PURE__*/React__default.createElement(SearchContainer, null, /*#__PURE__*/React__default.createElement(SearchIcon, {
|
|
12093
|
+
src: navigation_search_icon_url,
|
|
12094
|
+
onClick: handleOnSearch
|
|
12095
|
+
}), /*#__PURE__*/React__default.createElement(SearchInput, {
|
|
12096
|
+
ref: searchInputRef,
|
|
12097
|
+
placeholder: "Search...",
|
|
12098
|
+
onKeyDown: handleKeyDown
|
|
12099
|
+
}), /*#__PURE__*/React__default.createElement(CloseIcon, {
|
|
12100
|
+
src: close_icon_url,
|
|
12101
|
+
onClick: toggleSearch
|
|
12102
|
+
}));
|
|
12103
|
+
};
|
|
12104
|
+
|
|
12105
|
+
var HeaderDropdown = function HeaderDropdown(_ref) {
|
|
12106
|
+
var _header_dropdown_prod;
|
|
12107
|
+
|
|
12108
|
+
var header_dropdown_product_object = _ref.header_dropdown_product_object,
|
|
12109
|
+
handleShowDropdown = _ref.handleShowDropdown,
|
|
12110
|
+
handleHideDropdown = _ref.handleHideDropdown;
|
|
12111
|
+
|
|
12112
|
+
var _useState = React.useState([]),
|
|
12113
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
12114
|
+
currentModels = _useState2[0],
|
|
12115
|
+
setCurrentModels = _useState2[1];
|
|
12116
|
+
|
|
12117
|
+
var _useState3 = React.useState(null),
|
|
12118
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
12119
|
+
currentBrand = _useState4[0],
|
|
12120
|
+
setCurrentBrand = _useState4[1];
|
|
12121
|
+
|
|
12122
|
+
var handleBrandHover = function handleBrandHover(brand) {
|
|
12123
|
+
setCurrentBrand(brand);
|
|
12124
|
+
setCurrentModels(brand.models);
|
|
12125
|
+
};
|
|
12126
|
+
|
|
12127
|
+
return /*#__PURE__*/React__default.createElement(Dropdown, {
|
|
12128
|
+
onMouseOver: handleShowDropdown,
|
|
12129
|
+
onMouseOut: handleHideDropdown
|
|
12130
|
+
}, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, header_dropdown_product_object === null || header_dropdown_product_object === void 0 ? void 0 : (_header_dropdown_prod = header_dropdown_product_object.brands) === null || _header_dropdown_prod === void 0 ? void 0 : _header_dropdown_prod.map(function (brand, index) {
|
|
12131
|
+
return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
|
|
12132
|
+
key: index,
|
|
12133
|
+
onMouseOver: function onMouseOver() {
|
|
12134
|
+
return handleBrandHover(brand);
|
|
12135
|
+
}
|
|
12136
|
+
}, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, null, brand.brand_name));
|
|
12137
|
+
})), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
|
|
12138
|
+
return /*#__PURE__*/React__default.createElement(DropdownModelsList, null, /*#__PURE__*/React__default.createElement(DropdownLink, {
|
|
12139
|
+
key: index
|
|
12140
|
+
}, model.model_name));
|
|
12141
|
+
})), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url) && /*#__PURE__*/React__default.createElement(DropdownImage, {
|
|
12142
|
+
src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url
|
|
12143
|
+
}))));
|
|
12144
|
+
};
|
|
12145
|
+
|
|
12146
|
+
var RareStepHeader = function RareStepHeader(_ref) {
|
|
12147
|
+
var header_logo_img_url = _ref.header_logo_img_url,
|
|
12148
|
+
search_icon_url = _ref.search_icon_url,
|
|
12149
|
+
cart_icon_url = _ref.cart_icon_url,
|
|
12150
|
+
user_icon_url = _ref.user_icon_url,
|
|
12151
|
+
interest_icon_url = _ref.interest_icon_url,
|
|
12152
|
+
dropdown_closed_icon_url = _ref.dropdown_closed_icon_url,
|
|
12153
|
+
dropdown_open_icon_url = _ref.dropdown_open_icon_url,
|
|
12154
|
+
currency_flag_icon_url = _ref.currency_flag_icon_url,
|
|
12155
|
+
close_icon_url = _ref.close_icon_url,
|
|
12156
|
+
navigation_search_icon_url = _ref.navigation_search_icon_url,
|
|
12157
|
+
wordpress_site_url = _ref.wordpress_site_url,
|
|
12158
|
+
header_dropdown_product_object = _ref.header_dropdown_product_object;
|
|
12159
|
+
|
|
12160
|
+
var _useState = React.useState(false),
|
|
12161
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
12162
|
+
showDropdown = _useState2[0],
|
|
12163
|
+
setShowDropdown = _useState2[1];
|
|
12164
|
+
|
|
12165
|
+
var timeoutIdRef = React.useRef(null);
|
|
12166
|
+
|
|
12167
|
+
var _useState3 = React.useState(false),
|
|
12168
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
12169
|
+
showSearch = _useState4[0],
|
|
12170
|
+
setShowSearch = _useState4[1];
|
|
12171
|
+
|
|
12172
|
+
var toggleSearch = function toggleSearch() {
|
|
12173
|
+
setShowSearch(!showSearch);
|
|
12174
|
+
};
|
|
12175
|
+
|
|
12176
|
+
var handleShowDropdown = function handleShowDropdown() {
|
|
12177
|
+
clearTimeout(timeoutIdRef.current);
|
|
12178
|
+
setShowDropdown(true);
|
|
12179
|
+
};
|
|
12180
|
+
|
|
12181
|
+
var handleHideDropdown = function handleHideDropdown() {
|
|
12182
|
+
timeoutIdRef.current = setTimeout(function () {
|
|
12183
|
+
setShowDropdown(false);
|
|
12184
|
+
}, 500);
|
|
12185
|
+
};
|
|
12186
|
+
|
|
12187
|
+
return /*#__PURE__*/React__default.createElement(HeaderWrapper, null, /*#__PURE__*/React__default.createElement(HeaderContainer, null, /*#__PURE__*/React__default.createElement(LogoFigure, null, /*#__PURE__*/React__default.createElement(LogoImage, {
|
|
12188
|
+
src: header_logo_img_url
|
|
12189
|
+
})), /*#__PURE__*/React__default.createElement(HeaderIconsContainer, null, /*#__PURE__*/React__default.createElement(SellToUsHR, null), /*#__PURE__*/React__default.createElement(SellToUsLink, null, "Sell to us"), /*#__PURE__*/React__default.createElement(HeaderIcon, {
|
|
12190
|
+
src: search_icon_url,
|
|
12191
|
+
onClick: toggleSearch
|
|
12192
|
+
}), /*#__PURE__*/React__default.createElement(HeaderIcon, {
|
|
12193
|
+
src: interest_icon_url
|
|
12194
|
+
}), /*#__PURE__*/React__default.createElement(HeaderIcon, {
|
|
12195
|
+
src: user_icon_url
|
|
12196
|
+
}), /*#__PURE__*/React__default.createElement(HeaderIcon, {
|
|
12197
|
+
src: cart_icon_url
|
|
12198
|
+
}))), /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, /*#__PURE__*/React__default.createElement(NavigationLink, null, "New Arrivals"), /*#__PURE__*/React__default.createElement(NavigationLink, {
|
|
12199
|
+
onMouseOver: handleShowDropdown,
|
|
12200
|
+
onMouseOut: handleHideDropdown
|
|
12201
|
+
}, header_dropdown_product_object.product_type, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
|
|
12202
|
+
src: dropdown_closed_icon_url
|
|
12203
|
+
}) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
|
|
12204
|
+
src: dropdown_open_icon_url
|
|
12205
|
+
})), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Create Your Interests"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Rare Step Finder")), /*#__PURE__*/React__default.createElement(NavigationLinks, null, /*#__PURE__*/React__default.createElement(NavigationLink, null, "Our Story"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Blog"), /*#__PURE__*/React__default.createElement(NavigationLink, null, "Contact Us"), /*#__PURE__*/React__default.createElement(CurrencyFlagIcon, {
|
|
12206
|
+
src: currency_flag_icon_url
|
|
12207
|
+
}), /*#__PURE__*/React__default.createElement(NavigationLink, null, "South African (ZAR, R)")))), showSearch && /*#__PURE__*/React__default.createElement(DropdownSearch, {
|
|
12208
|
+
close_icon_url: close_icon_url,
|
|
12209
|
+
navigation_search_icon_url: navigation_search_icon_url,
|
|
12210
|
+
wordpress_site_url: wordpress_site_url,
|
|
12211
|
+
toggleSearch: toggleSearch
|
|
12212
|
+
}), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
|
|
12213
|
+
header_dropdown_product_object: header_dropdown_product_object,
|
|
12214
|
+
handleShowDropdown: handleShowDropdown,
|
|
12215
|
+
handleHideDropdown: handleHideDropdown
|
|
12216
|
+
}));
|
|
12217
|
+
};
|
|
12218
|
+
|
|
12219
|
+
var index$3 = themed(RareStepHeader);
|
|
12220
|
+
|
|
12221
|
+
var _templateObject$P, _templateObject2$b, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1;
|
|
12222
|
+
var FooterWrapper = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n font-weight: ", ";\n padding-top: ", ";\n font-size: ", ";\n }\n"])), function (props) {
|
|
12223
|
+
return props.theme.rareStepColors.ntrlMax;
|
|
12224
|
+
}, function (props) {
|
|
12225
|
+
return props.theme.rareStepFontWeights.bold;
|
|
12226
|
+
}, function (props) {
|
|
12227
|
+
return props.theme.marginPaddings[4];
|
|
12228
|
+
}, function (props) {
|
|
12229
|
+
return props.theme.rareStepFontSize.h5;
|
|
12230
|
+
});
|
|
12231
|
+
var PageContainer$1 = styled__default.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n {\n max-width: ", ";\n margin: 0 auto;\n width: 100%;\n padding: 0 5%;\n display: flex;\n justify-content: space-between;\n }\n"])), function (props) {
|
|
12232
|
+
return props.theme.rareStepPageSizes.container;
|
|
12233
|
+
});
|
|
12234
|
+
var FooterLinksWrapper = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-basis: 70%;\n padding-bottom: ", ";\n }\n"])), function (props) {
|
|
12235
|
+
return props.theme.marginPaddings[4];
|
|
12236
|
+
});
|
|
12237
|
+
var FooterLinksContainer = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n flex: 1;\n padding-right: ", ";\n }\n"])), function (props) {
|
|
12238
|
+
return props.theme.marginPaddings[4];
|
|
12239
|
+
});
|
|
12240
|
+
var FooterTitleLink = styled__default.a(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n {\n text-transform: uppercase;\n color: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n font-weight: ", ";\n font-size: ", ";\n text-decoration: none;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
|
|
12241
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12242
|
+
}, function (props) {
|
|
12243
|
+
return props.theme.marginPaddings[1];
|
|
12244
|
+
}, function (props) {
|
|
12245
|
+
return props.theme.rareStepFontWeights.bold;
|
|
12246
|
+
}, function (props) {
|
|
12247
|
+
return props.theme.rareStepFontSize.footerTitle;
|
|
12248
|
+
}, function (props) {
|
|
12249
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12250
|
+
});
|
|
12251
|
+
var FooterLink = styled__default.a(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n {\n color: ", ";\n cursor: pointer;\n margin-bottom: ", ";\n font-weight: ", ";\n text-decoration: none;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
|
|
12252
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12253
|
+
}, function (props) {
|
|
12254
|
+
return props.theme.space[2];
|
|
12255
|
+
}, function (props) {
|
|
12256
|
+
return props.theme.rareStepFontWeights.normal;
|
|
12257
|
+
}, function (props) {
|
|
12258
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12259
|
+
});
|
|
12260
|
+
var FooterImage = styled__default.img(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n {\n width: 100%;\n height: 100%;\n max-height: 300px;\n object-fit: cover;\n }\n"])));
|
|
12261
|
+
var FooterImageWrapper = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n {\n flex-basis: 30%;\n padding-bottom: ", ";\n }\n"])), function (props) {
|
|
12262
|
+
return props.theme.marginPaddings[4];
|
|
12263
|
+
});
|
|
12264
|
+
var FooterLogo = styled__default.img(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n }\n"])), function (props) {
|
|
12265
|
+
return props.theme.marginPaddings[5];
|
|
12266
|
+
});
|
|
12267
|
+
var SocialIconWrapper = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
|
|
12268
|
+
var SocialIcon = styled__default.img(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n margin-right: ", ";\n }\n"])), function (props) {
|
|
12269
|
+
return props.theme.marginPaddings[0];
|
|
12270
|
+
});
|
|
12271
|
+
var FooterCopyrightContainer = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n border-top: 1px solid ", ";\n }\n"])), function (props) {
|
|
12272
|
+
return props.theme.marginPaddings[1];
|
|
12273
|
+
}, function (props) {
|
|
12274
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12275
|
+
});
|
|
12276
|
+
var FooterCopyrightText = styled__default.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n {\n color: ", ";\n font-weight: ", ";\n }\n"])), function (props) {
|
|
12277
|
+
return props.theme.rareStepColors.ntrlMin;
|
|
12278
|
+
}, function (props) {
|
|
12279
|
+
return props.theme.rareStepFontWeights.normal;
|
|
12280
|
+
});
|
|
12281
|
+
var FooterPayments = styled__default.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n"])));
|
|
12282
|
+
var FooterPaymentImage = styled__default.img(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n width: 100px;\n height: 30px;\n }\n"])));
|
|
12283
|
+
|
|
12284
|
+
var FooterCopyright = function FooterCopyright(_ref) {
|
|
12285
|
+
var payment_image = _ref.payment_image;
|
|
12286
|
+
return /*#__PURE__*/React__default.createElement(FooterCopyrightContainer, null, /*#__PURE__*/React__default.createElement(PageContainer$1, null, /*#__PURE__*/React__default.createElement(FooterCopyrightText, null, "\xA9".concat(new Date().getFullYear(), " \u2022 Rare Step \u2022 Website Developed by B Online")), /*#__PURE__*/React__default.createElement(FooterPayments, null, /*#__PURE__*/React__default.createElement(FooterPaymentImage, {
|
|
12287
|
+
src: payment_image
|
|
12288
|
+
}))));
|
|
12289
|
+
};
|
|
12290
|
+
|
|
12291
|
+
var RareStepFooter = function RareStepFooter(_ref) {
|
|
12292
|
+
var footer_image_url = _ref.footer_image_url,
|
|
12293
|
+
footer_logo_image_url = _ref.footer_logo_image_url,
|
|
12294
|
+
facebook_url = _ref.facebook_url,
|
|
12295
|
+
facebook_icon_url = _ref.facebook_icon_url,
|
|
12296
|
+
instagram_url = _ref.instagram_url,
|
|
12297
|
+
instagram_image_url = _ref.instagram_image_url,
|
|
12298
|
+
payment_image = _ref.payment_image;
|
|
12299
|
+
return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(PageContainer$1, null, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, null, /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
|
|
12300
|
+
href: "/contact-us"
|
|
12301
|
+
}, "Contact"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12302
|
+
href: "/contact-us"
|
|
12303
|
+
}, "Contact Us"), /*#__PURE__*/React__default.createElement(FooterLink, null), /*#__PURE__*/React__default.createElement(FooterLink, null, "000 000 0000"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12304
|
+
href: "mailto:myorder@rarestep.co.za"
|
|
12305
|
+
}, "myorder@rarestep.co.za"), /*#__PURE__*/React__default.createElement(FooterLogo, {
|
|
12306
|
+
src: footer_logo_image_url
|
|
12307
|
+
}), /*#__PURE__*/React__default.createElement(FooterTitleLink, null, "Connect"), /*#__PURE__*/React__default.createElement(SocialIconWrapper, null, /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12308
|
+
href: facebook_url
|
|
12309
|
+
}, /*#__PURE__*/React__default.createElement(SocialIcon, {
|
|
12310
|
+
src: facebook_icon_url
|
|
12311
|
+
})), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12312
|
+
href: instagram_url
|
|
12313
|
+
}, /*#__PURE__*/React__default.createElement(SocialIcon, {
|
|
12314
|
+
src: instagram_image_url
|
|
12315
|
+
})))), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
|
|
12316
|
+
href: "/buy-sell"
|
|
12317
|
+
}, "Buy & Sell"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12318
|
+
href: "/product-category/brands"
|
|
12319
|
+
}, "New Arrival"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12320
|
+
href: "/product-category/sneakers/brands/"
|
|
12321
|
+
}, "Sneakers"), /*#__PURE__*/React__default.createElement(FooterLink, null, "Create Your Interest"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12322
|
+
href: "/sell-to-us"
|
|
12323
|
+
}, "Sell To Us")), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
|
|
12324
|
+
href: "/about"
|
|
12325
|
+
}, "Company"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12326
|
+
href: "/about"
|
|
12327
|
+
}, "Our Story"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12328
|
+
href: "/blog"
|
|
12329
|
+
}, "Sneakers")), /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
|
|
12330
|
+
href: "/faq"
|
|
12331
|
+
}, "Help"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12332
|
+
href: "/faq"
|
|
12333
|
+
}, "FAQs"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12334
|
+
href: "/shipping"
|
|
12335
|
+
}, "Shipping & Returns"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12336
|
+
href: "/terms-conditions"
|
|
12337
|
+
}, "Terms & Conditions"), /*#__PURE__*/React__default.createElement(FooterLink, {
|
|
12338
|
+
href: "/privacy"
|
|
12339
|
+
}, "Privacy Policy"))), /*#__PURE__*/React__default.createElement(FooterImageWrapper, null, /*#__PURE__*/React__default.createElement(FooterImage, {
|
|
12340
|
+
src: footer_image_url
|
|
12341
|
+
}))), /*#__PURE__*/React__default.createElement(FooterCopyright, {
|
|
12342
|
+
payment_image: payment_image
|
|
12343
|
+
}));
|
|
12344
|
+
};
|
|
12345
|
+
|
|
12346
|
+
var index$4 = themed(RareStepFooter);
|
|
12347
|
+
|
|
11971
12348
|
exports.Accordion = index;
|
|
11972
12349
|
exports.Checkbox = LuxityCheckbox;
|
|
11973
12350
|
exports.CheckboxFormWrapper = FormWrapper;
|
|
@@ -11985,6 +12362,8 @@
|
|
|
11985
12362
|
exports.PrimaryButton = PrimaryButton$1;
|
|
11986
12363
|
exports.RadioButtons = RadioButtons$1;
|
|
11987
12364
|
exports.RadioButtonsFormWrapper = FormWrapper$1;
|
|
12365
|
+
exports.RareStepFooter = index$4;
|
|
12366
|
+
exports.RareStepHeader = index$3;
|
|
11988
12367
|
exports.ReactSelectWrapper = ReactSelectWrapper;
|
|
11989
12368
|
exports.SecondaryButton = SecondaryButton$1;
|
|
11990
12369
|
exports.ShoeSizeSelector = ShoeSizeSelector;
|