@bonlineza/luxity-lib 2.9.2 → 2.10.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/AddInterest.js +125 -72
- package/BrandSelector.js +78 -25
- package/GraphQLMultiSelector.js +69 -16
- package/Interests.js +153 -97
- package/LuxityGraphQLMultiselector.js +74 -21
- package/LuxityLoader.js +75 -0
- package/LuxityPageReady.js +72 -6
- package/NotificationDropDown.js +65 -9
- package/README.md +3 -0
- package/StyleSelector.js +78 -25
- package/build/bundle.js +153 -97
- package/package.json +1 -1
- package/svg/LuxityArrowLeft.js +28 -0
- package/svg/LuxityArrowRight.js +28 -0
package/AddInterest.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/functions'), require('@bonlineza/b-lib/
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/functions', '@bonlineza/b-lib/
|
|
4
|
-
(global = global || self, global.AddInterest = factory(global.React, global.styled, global.function, global.
|
|
5
|
-
}(this, (function (React, styled, functions,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/functions'), require('@bonlineza/b-lib/PageReady'), require('rc-slider'), require('react-notify-toast')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/functions', '@bonlineza/b-lib/PageReady', 'rc-slider', 'react-notify-toast'], factory) :
|
|
4
|
+
(global = global || self, global.AddInterest = factory(global.React, global.styled, global.function, global.PageReady, global.rcSlider, global['react-notify-toast']));
|
|
5
|
+
}(this, (function (React, styled, functions, PageReady, rcSlider, Notifications) { 'use strict';
|
|
6
6
|
|
|
7
7
|
var React__default = 'default' in React ? React['default'] : React;
|
|
8
8
|
var styled__default = 'default' in styled ? styled['default'] : styled;
|
|
9
|
-
EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
|
|
10
9
|
PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
|
|
11
10
|
var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
|
|
12
11
|
|
|
@@ -656,6 +655,57 @@
|
|
|
656
655
|
return message.replace(':error_code', error.status || 'Network Down');
|
|
657
656
|
};
|
|
658
657
|
|
|
658
|
+
var LuxityArrowLeft = (function (props) {
|
|
659
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
660
|
+
version: "1.0",
|
|
661
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
662
|
+
width: props.width || '100%',
|
|
663
|
+
height: props.height || '100%',
|
|
664
|
+
viewBox: "0 0 177.000000 300.000000",
|
|
665
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
666
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
667
|
+
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
668
|
+
fill: "#000000",
|
|
669
|
+
stroke: "none"
|
|
670
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
671
|
+
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"
|
|
672
|
+
})));
|
|
673
|
+
});
|
|
674
|
+
|
|
675
|
+
var LuxityArrowRight = (function (props) {
|
|
676
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
677
|
+
version: "1.0",
|
|
678
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
679
|
+
width: props.width || '100%',
|
|
680
|
+
height: props.height || '100%',
|
|
681
|
+
viewBox: "0 0 177.000000 300.000000",
|
|
682
|
+
preserveAspectRatio: "xMidYMid meet"
|
|
683
|
+
}, /*#__PURE__*/React__default.createElement("g", {
|
|
684
|
+
transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
|
|
685
|
+
fill: "#000000",
|
|
686
|
+
stroke: "none"
|
|
687
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
688
|
+
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"
|
|
689
|
+
})));
|
|
690
|
+
});
|
|
691
|
+
|
|
692
|
+
var _templateObject$6, _templateObject2$2, _templateObject3;
|
|
693
|
+
var LoaderContainer = styled__default.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin: 20px auto;\n"])));
|
|
694
|
+
var LeftImageContainer = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _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"])));
|
|
695
|
+
var RightImageContainer = styled__default.div(_templateObject3 || (_templateObject3 = _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"])));
|
|
696
|
+
|
|
697
|
+
function LuxityLoader(_ref) {
|
|
698
|
+
var width = _ref.width,
|
|
699
|
+
height = _ref.height;
|
|
700
|
+
return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
|
|
701
|
+
width: width,
|
|
702
|
+
height: height
|
|
703
|
+
})), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
|
|
704
|
+
width: width,
|
|
705
|
+
height: height
|
|
706
|
+
})));
|
|
707
|
+
}
|
|
708
|
+
|
|
659
709
|
var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
|
|
660
710
|
data: null
|
|
661
711
|
});
|
|
@@ -731,7 +781,10 @@
|
|
|
731
781
|
customErrorMessage: customErrorMessage,
|
|
732
782
|
customErrorHandler: customErrorHandler,
|
|
733
783
|
renderCustomLoader: function renderCustomLoader() {
|
|
734
|
-
return /*#__PURE__*/React__default.createElement(
|
|
784
|
+
return /*#__PURE__*/React__default.createElement(LuxityLoader, {
|
|
785
|
+
height: "40px",
|
|
786
|
+
width: "95%"
|
|
787
|
+
});
|
|
735
788
|
},
|
|
736
789
|
errorMessageInterpreter: interpretErrorMessage
|
|
737
790
|
}, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
|
|
@@ -760,8 +813,8 @@
|
|
|
760
813
|
|
|
761
814
|
var _excluded$1 = ["children"];
|
|
762
815
|
|
|
763
|
-
var _templateObject$
|
|
764
|
-
var Button$1 = styled__default.button(_templateObject$
|
|
816
|
+
var _templateObject$7;
|
|
817
|
+
var Button$1 = styled__default.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n ", ";\n background-color: transparent;\n color: ", ";\n &:hover {\n color: ", ";\n }\n &:disabled {\n ", ";\n color: ", ";\n }\n"])), baseButtonStyle, function (props) {
|
|
765
818
|
return props.theme.colors.base;
|
|
766
819
|
}, function (props) {
|
|
767
820
|
return props.theme.colors.primary;
|
|
@@ -783,8 +836,8 @@
|
|
|
783
836
|
|
|
784
837
|
var _excluded$2 = ["children"];
|
|
785
838
|
|
|
786
|
-
var _templateObject$
|
|
787
|
-
var Button$2 = styled__default(TextButton$1)(_templateObject$
|
|
839
|
+
var _templateObject$8;
|
|
840
|
+
var Button$2 = styled__default(TextButton$1)(_templateObject$8 || (_templateObject$8 = _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) {
|
|
788
841
|
return props.theme.colors.ntrlMin;
|
|
789
842
|
}, function (props) {
|
|
790
843
|
return props.theme.colors.primary;
|
|
@@ -807,15 +860,15 @@
|
|
|
807
860
|
|
|
808
861
|
var InvertedTextButton$1 = themed(InvertedTextButton);
|
|
809
862
|
|
|
810
|
-
var _templateObject$
|
|
863
|
+
var _templateObject$9, _templateObject2$3;
|
|
811
864
|
var ALL_ITEM = {
|
|
812
865
|
id: 'ALL',
|
|
813
866
|
name: 'ALL'
|
|
814
867
|
};
|
|
815
868
|
var multiSelectorItemMaxHeight = '3rem';
|
|
816
869
|
var multiSelectorItemAnimationDuration = '300ms';
|
|
817
|
-
var multiselectorItemFadeIn = styled.keyframes(_templateObject$
|
|
818
|
-
var StyledMultiselector = styled__default.div(_templateObject2$
|
|
870
|
+
var multiselectorItemFadeIn = styled.keyframes(_templateObject$9 || (_templateObject$9 = _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);
|
|
871
|
+
var StyledMultiselector = styled__default.div(_templateObject2$3 || (_templateObject2$3 = _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) {
|
|
819
872
|
return props.theme.marginPaddings[2];
|
|
820
873
|
}, function (props) {
|
|
821
874
|
return props.theme.colors.ntrlMin;
|
|
@@ -1052,11 +1105,11 @@
|
|
|
1052
1105
|
}));
|
|
1053
1106
|
});
|
|
1054
1107
|
|
|
1055
|
-
var _templateObject$
|
|
1056
|
-
var Title = styled__default.h1(_templateObject$
|
|
1108
|
+
var _templateObject$a, _templateObject2$4;
|
|
1109
|
+
var Title = 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) {
|
|
1057
1110
|
return props.theme.fontSizes[2];
|
|
1058
1111
|
});
|
|
1059
|
-
var InterestsSubheadingContainer = styled__default.div(_templateObject2$
|
|
1112
|
+
var InterestsSubheadingContainer = styled__default.div(_templateObject2$4 || (_templateObject2$4 = _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) {
|
|
1060
1113
|
return props.theme.marginPaddings[1];
|
|
1061
1114
|
}, function (props) {
|
|
1062
1115
|
return props.theme.colors.primary;
|
|
@@ -1075,7 +1128,7 @@
|
|
|
1075
1128
|
}, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
|
|
1076
1129
|
};
|
|
1077
1130
|
|
|
1078
|
-
var _templateObject$
|
|
1131
|
+
var _templateObject$b;
|
|
1079
1132
|
|
|
1080
1133
|
var Title$1 = function Title(_ref) {
|
|
1081
1134
|
var baseClass = _ref.baseClass,
|
|
@@ -1096,7 +1149,7 @@
|
|
|
1096
1149
|
})));
|
|
1097
1150
|
};
|
|
1098
1151
|
|
|
1099
|
-
var StyledTitle = styled__default(Title$1)(_templateObject$
|
|
1152
|
+
var StyledTitle = styled__default(Title$1)(_templateObject$b || (_templateObject$b = _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) {
|
|
1100
1153
|
return props.theme.marginPaddings[2];
|
|
1101
1154
|
}, function (props) {
|
|
1102
1155
|
return props.theme.fontSizes[2];
|
|
@@ -1238,8 +1291,8 @@
|
|
|
1238
1291
|
|
|
1239
1292
|
var _excluded$3 = ["children"];
|
|
1240
1293
|
|
|
1241
|
-
var _templateObject$
|
|
1242
|
-
var Button$3 = styled__default.button(_templateObject$
|
|
1294
|
+
var _templateObject$c;
|
|
1295
|
+
var Button$3 = styled__default.button(_templateObject$c || (_templateObject$c = _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) {
|
|
1243
1296
|
return props.theme.colors.primary;
|
|
1244
1297
|
}, function (props) {
|
|
1245
1298
|
return props.theme.colors.ntrlMin;
|
|
@@ -1258,8 +1311,8 @@
|
|
|
1258
1311
|
|
|
1259
1312
|
var PrimaryButton$1 = themed(PrimaryButton);
|
|
1260
1313
|
|
|
1261
|
-
var _templateObject$
|
|
1262
|
-
var BaseButton = styled__default.button(_templateObject$
|
|
1314
|
+
var _templateObject$d;
|
|
1315
|
+
var BaseButton = styled__default.button(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n color: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n"])), function (props) {
|
|
1263
1316
|
return props.theme.colors.base;
|
|
1264
1317
|
}, function (props) {
|
|
1265
1318
|
return props.theme.colors.borderColor;
|
|
@@ -2115,12 +2168,12 @@
|
|
|
2115
2168
|
/* ::<number | string, string, string> */
|
|
2116
2169
|
(transparentize);
|
|
2117
2170
|
|
|
2118
|
-
var _templateObject$
|
|
2119
|
-
var baseSliderStyles = styled.css(_templateObject$
|
|
2171
|
+
var _templateObject$e;
|
|
2172
|
+
var baseSliderStyles = styled.css(_templateObject$e || (_templateObject$e = _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"])));
|
|
2120
2173
|
|
|
2121
|
-
var _templateObject$
|
|
2174
|
+
var _templateObject$f, _templateObject2$5, _templateObject3$1, _templateObject4;
|
|
2122
2175
|
var handleDimension = '14px';
|
|
2123
|
-
var SliderContainer = styled__default.div(_templateObject$
|
|
2176
|
+
var SliderContainer = styled__default.div(_templateObject$f || (_templateObject$f = _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) {
|
|
2124
2177
|
return props.theme.colors.primary;
|
|
2125
2178
|
}, function (props) {
|
|
2126
2179
|
return props.theme.colors.primary;
|
|
@@ -2139,22 +2192,22 @@
|
|
|
2139
2192
|
var getSliderMarkStyle = function getSliderMarkStyle(_ref) {
|
|
2140
2193
|
var showMarks = _ref.showMarks,
|
|
2141
2194
|
primary = _ref.theme.colors.primary;
|
|
2142
|
-
var visiblityStyle = showMarks ? styled.css(_templateObject2$
|
|
2195
|
+
var visiblityStyle = showMarks ? styled.css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral([""]))) : styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n .rc-slider-mark-text,\n .rc-slider-dot {\n visibility: hidden;\n }\n "])));
|
|
2143
2196
|
return styled.css(_templateObject4 || (_templateObject4 = _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);
|
|
2144
2197
|
};
|
|
2145
2198
|
|
|
2146
|
-
var _templateObject$f;
|
|
2147
|
-
var ToolTipWrapper = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n position: absolute;\n right: auto;\n top: 20px;\n transform: translateX(-50%);\n width: 100px;\n text-align: center;\n"])));
|
|
2148
|
-
|
|
2149
2199
|
var _templateObject$g;
|
|
2150
|
-
var
|
|
2200
|
+
var ToolTipWrapper = styled__default.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n position: absolute;\n right: auto;\n top: 20px;\n transform: translateX(-50%);\n width: 100px;\n text-align: center;\n"])));
|
|
2201
|
+
|
|
2202
|
+
var _templateObject$h;
|
|
2203
|
+
var Footer = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-end;\n"])));
|
|
2151
2204
|
|
|
2152
2205
|
var _excluded$4 = ["dragging", "value", "offset", "index"],
|
|
2153
2206
|
_excluded2 = ["renderTitleSection", "marks", "defaultMinValue", "defaultMaxValue", "min", "max", "toolTipComponent", "renderFooterSection", "onChange", "children", "identifier", "showMarks"];
|
|
2154
2207
|
|
|
2155
|
-
var _templateObject$
|
|
2208
|
+
var _templateObject$i;
|
|
2156
2209
|
var debounceBuilder$1 = functions.debounced(100);
|
|
2157
|
-
var ChildrenWrapper = styled__default.div(_templateObject$
|
|
2210
|
+
var ChildrenWrapper = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), function (props) {
|
|
2158
2211
|
return props.theme.marginPaddings[3];
|
|
2159
2212
|
});
|
|
2160
2213
|
|
|
@@ -2378,46 +2431,46 @@
|
|
|
2378
2431
|
shoeSizes: []
|
|
2379
2432
|
};
|
|
2380
2433
|
|
|
2381
|
-
var _templateObject$i;
|
|
2382
|
-
var RadioButtonsContainer = styled__default.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
2383
|
-
|
|
2384
2434
|
var _templateObject$j;
|
|
2385
|
-
var
|
|
2435
|
+
var RadioButtonsContainer = styled__default.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
2436
|
+
|
|
2437
|
+
var _templateObject$k;
|
|
2438
|
+
var ButtonListWrapper = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n display: flex;\n flex-grow: 1;\n flex-wrap: ", ";\n"])), function (_ref) {
|
|
2386
2439
|
var noWrap = _ref.noWrap;
|
|
2387
2440
|
return noWrap ? 'nowrap' : 'wrap';
|
|
2388
2441
|
});
|
|
2389
2442
|
|
|
2390
|
-
var _templateObject$
|
|
2391
|
-
var Title$3 = styled__default.div(_templateObject$
|
|
2443
|
+
var _templateObject$l;
|
|
2444
|
+
var Title$3 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n flex-basis: 40%;\n"])), function (props) {
|
|
2392
2445
|
return props.theme.colors.base;
|
|
2393
2446
|
});
|
|
2394
2447
|
|
|
2395
|
-
var _templateObject$
|
|
2396
|
-
var RadioButtonLabel = styled__default.label(_templateObject$
|
|
2448
|
+
var _templateObject$m;
|
|
2449
|
+
var RadioButtonLabel = styled__default.label(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n display: flex;\n margin-bottom: ", ";\n margin-right: ", ";\n"])), function (props) {
|
|
2397
2450
|
return props.theme.marginPaddings[0];
|
|
2398
2451
|
}, function (props) {
|
|
2399
2452
|
return props.theme.marginPaddings[0];
|
|
2400
2453
|
});
|
|
2401
2454
|
|
|
2402
|
-
var _templateObject$
|
|
2403
|
-
var RadioButtonCircle = styled__default.div(_templateObject$
|
|
2455
|
+
var _templateObject$n;
|
|
2456
|
+
var RadioButtonCircle = styled__default.div(_templateObject$n || (_templateObject$n = _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) {
|
|
2404
2457
|
return props.theme.colors.base;
|
|
2405
2458
|
});
|
|
2406
2459
|
|
|
2407
|
-
var _templateObject$n;
|
|
2408
|
-
var RadioButtonCircleInner = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n height: 8px;\n width: 8px;\n border-radius: 50%;\n margin: auto;\n"])));
|
|
2409
|
-
|
|
2410
2460
|
var _templateObject$o;
|
|
2411
|
-
var
|
|
2412
|
-
return props.theme.colors.base;
|
|
2413
|
-
});
|
|
2461
|
+
var RadioButtonCircleInner = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n height: 8px;\n width: 8px;\n border-radius: 50%;\n margin: auto;\n"])));
|
|
2414
2462
|
|
|
2415
2463
|
var _templateObject$p;
|
|
2416
|
-
var
|
|
2464
|
+
var RadioButtonInput = styled__default.input(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n display: none;\n :checked ~ ", " {\n ", " {\n background-color: ", ";\n }\n }\n"])), RadioButtonCircle, RadioButtonCircleInner, function (props) {
|
|
2465
|
+
return props.theme.colors.base;
|
|
2466
|
+
});
|
|
2417
2467
|
|
|
2418
2468
|
var _templateObject$q;
|
|
2469
|
+
var RadioButtonText = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
2470
|
+
|
|
2471
|
+
var _templateObject$r;
|
|
2419
2472
|
var inputMarginRight = '0.2em';
|
|
2420
|
-
var CheckboxLabel = styled__default.label(_templateObject$
|
|
2473
|
+
var CheckboxLabel = styled__default.label(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n\n span {\n :before {\n content: '\\2713';\n position: absolute;\n display: none;\n color: white;\n left: 0.4em;\n top: 0.1em;\n font-size: ", ";\n text-align: center;\n }\n }\n\n input {\n font-size: ", ";\n background-color: ", ";\n appearance: none;\n outline: none;\n height: 1em;\n width: 1em;\n margin-right: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n transition-duration: 0.3s;\n cursor: pointer;\n\n &:checked {\n background-color: ", ";\n }\n\n &:checked + span:before {\n display: block;\n }\n }\n"], ["\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n\n span {\n :before {\n content: '\\\\2713';\n position: absolute;\n display: none;\n color: white;\n left: 0.4em;\n top: 0.1em;\n font-size: ", ";\n text-align: center;\n }\n }\n\n input {\n font-size: ", ";\n background-color: ", ";\n appearance: none;\n outline: none;\n height: 1em;\n width: 1em;\n margin-right: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n transition-duration: 0.3s;\n cursor: pointer;\n\n &:checked {\n background-color: ", ";\n }\n\n &:checked + span:before {\n display: block;\n }\n }\n"])), function (props) {
|
|
2421
2474
|
var _props$theme;
|
|
2422
2475
|
|
|
2423
2476
|
return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.fontSizes.length ? props.theme.fontSizes[4] : '1em';
|
|
@@ -2504,12 +2557,12 @@
|
|
|
2504
2557
|
}
|
|
2505
2558
|
};
|
|
2506
2559
|
|
|
2507
|
-
var _templateObject$
|
|
2508
|
-
var TitleWrapper = styled__default.div(_templateObject$
|
|
2560
|
+
var _templateObject$s, _templateObject2$6;
|
|
2561
|
+
var TitleWrapper = styled__default.div(_templateObject$s || (_templateObject$s = _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) {
|
|
2509
2562
|
return props.theme.marginPaddings[4];
|
|
2510
2563
|
});
|
|
2511
2564
|
var onShoeSizeTypeChangeTimeout = 300;
|
|
2512
|
-
var ShoeSizeFadeContainer = styled__default.div(_templateObject2$
|
|
2565
|
+
var ShoeSizeFadeContainer = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _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) {
|
|
2513
2566
|
return props.childVisible ? 1 : 0;
|
|
2514
2567
|
}, onShoeSizeTypeChangeTimeout, function (props) {
|
|
2515
2568
|
return props.childVisible ? 1 : 0;
|
|
@@ -3249,8 +3302,8 @@
|
|
|
3249
3302
|
|
|
3250
3303
|
var _excluded$6 = ["children"];
|
|
3251
3304
|
|
|
3252
|
-
var _templateObject$
|
|
3253
|
-
var Button$4 = styled__default.button(_templateObject$
|
|
3305
|
+
var _templateObject$t;
|
|
3306
|
+
var Button$4 = styled__default.button(_templateObject$t || (_templateObject$t = _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) {
|
|
3254
3307
|
return props.theme.colors.ntrlMin;
|
|
3255
3308
|
}, function (props) {
|
|
3256
3309
|
return props.theme.colors.primary;
|
|
@@ -3273,8 +3326,8 @@
|
|
|
3273
3326
|
|
|
3274
3327
|
var SecondaryButton$1 = themed(SecondaryButton);
|
|
3275
3328
|
|
|
3276
|
-
var _templateObject$
|
|
3277
|
-
var CurrencyInputWrapper = styled__default.div(_templateObject$
|
|
3329
|
+
var _templateObject$u;
|
|
3330
|
+
var CurrencyInputWrapper = styled__default.div(_templateObject$u || (_templateObject$u = _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) {
|
|
3278
3331
|
return props.theme.colors.primary;
|
|
3279
3332
|
});
|
|
3280
3333
|
|
|
@@ -3404,8 +3457,8 @@
|
|
|
3404
3457
|
Notifications.notify.show(message, 'error', defaultNotifyTime);
|
|
3405
3458
|
};
|
|
3406
3459
|
|
|
3407
|
-
var _templateObject$
|
|
3408
|
-
var SelectionWrapper = styled__default.div(_templateObject$
|
|
3460
|
+
var _templateObject$v;
|
|
3461
|
+
var SelectionWrapper = styled__default.div(_templateObject$v || (_templateObject$v = _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) {
|
|
3409
3462
|
return props.theme.marginPaddings[2];
|
|
3410
3463
|
}, function (props) {
|
|
3411
3464
|
return props.theme.marginPaddings[2];
|
|
@@ -3421,14 +3474,14 @@
|
|
|
3421
3474
|
|
|
3422
3475
|
var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
|
|
3423
3476
|
|
|
3424
|
-
var _templateObject$
|
|
3425
|
-
var Content = styled__default.div(_templateObject$
|
|
3477
|
+
var _templateObject$w, _templateObject2$7, _templateObject3$2;
|
|
3478
|
+
var Content = styled__default.div(_templateObject$w || (_templateObject$w = _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) {
|
|
3426
3479
|
return props.theme.colors.primary;
|
|
3427
3480
|
}, function (props) {
|
|
3428
3481
|
return props.theme.marginPaddings[0];
|
|
3429
3482
|
});
|
|
3430
|
-
var InputText = styled__default.div(_templateObject2$
|
|
3431
|
-
var StyledLabel = styled__default.label(_templateObject3$
|
|
3483
|
+
var InputText = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n transition: 200ms ease-in;\n margin-left: auto;\n margin-right: auto;\n"])));
|
|
3484
|
+
var StyledLabel = styled__default.label(_templateObject3$2 || (_templateObject3$2 = _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) {
|
|
3432
3485
|
return props.theme.colors.primary;
|
|
3433
3486
|
}, Content, function (props) {
|
|
3434
3487
|
return props.theme.colors.primary;
|
|
@@ -3587,33 +3640,33 @@
|
|
|
3587
3640
|
}));
|
|
3588
3641
|
});
|
|
3589
3642
|
|
|
3590
|
-
var _templateObject$w;
|
|
3591
|
-
var SvgWrapper$1 = styled__default.span(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n padding: 1rem;\n display: flex;\n svg {\n width: 23px;\n height: auto;\n }\n"])));
|
|
3592
|
-
|
|
3593
3643
|
var _templateObject$x;
|
|
3594
|
-
var
|
|
3644
|
+
var SvgWrapper$1 = styled__default.span(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n padding: 1rem;\n display: flex;\n svg {\n width: 23px;\n height: auto;\n }\n"])));
|
|
3645
|
+
|
|
3646
|
+
var _templateObject$y;
|
|
3647
|
+
var IconWrapper = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n height: auto;\n margin-bottom: 1rem;\n margin-left: 1rem;\n display: flex;\n align-items: center;\n height: auto;\n\n :hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n #svg-trash {\n width: 15px;\n height: 100%;\n }\n"])), function (props) {
|
|
3595
3648
|
return props.theme.colors.borderColor;
|
|
3596
3649
|
}, function (props) {
|
|
3597
3650
|
return props.theme.colors.borderColor;
|
|
3598
3651
|
});
|
|
3599
3652
|
|
|
3600
|
-
var _templateObject$
|
|
3653
|
+
var _templateObject$z, _templateObject2$8, _templateObject3$3, _templateObject4$1, _templateObject5;
|
|
3601
3654
|
var UNISEX = genders.UNISEX;
|
|
3602
|
-
var AddInterestContainer = styled__default.div(_templateObject$
|
|
3655
|
+
var AddInterestContainer = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n border: 1px solid ", ";\n padding: ", ";\n"])), function (props) {
|
|
3603
3656
|
return props.theme.marginPaddings[6];
|
|
3604
3657
|
}, function (props) {
|
|
3605
3658
|
return props.theme.colors.borderColor;
|
|
3606
3659
|
}, function (props) {
|
|
3607
3660
|
return props.theme.marginPaddings[6];
|
|
3608
3661
|
});
|
|
3609
|
-
var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$
|
|
3662
|
+
var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _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) {
|
|
3610
3663
|
return props.theme.marginPaddings[6];
|
|
3611
3664
|
}, media.xs, function (props) {
|
|
3612
3665
|
return props.theme.marginPaddings[0];
|
|
3613
3666
|
}, function (props) {
|
|
3614
3667
|
return props.theme.marginPaddings[1];
|
|
3615
3668
|
});
|
|
3616
|
-
var CatSelectorParagraph = styled__default.div(_templateObject3$
|
|
3669
|
+
var CatSelectorParagraph = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n margin-bottom: ", ";\n"])), function (props) {
|
|
3617
3670
|
return props.theme.colors.darkerGray;
|
|
3618
3671
|
}, function (props) {
|
|
3619
3672
|
return props.theme.marginPaddings[2];
|