@bonlineza/luxity-lib 2.37.6 → 2.37.8
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/CurrencySelect.js +27 -27
- package/GraphQLDropdownSelector.js +8 -8
- package/LuxityDesktopHeader.js +31 -64
- package/LuxityFooter.js +28 -27
- package/LuxityGraphQLDropdownSelector.js +8 -8
- package/LuxityMobileHeader.js +31 -64
- package/LuxitySideNav.js +27 -27
- package/MaterialSelector.js +8 -8
- package/ModelSelector.js +8 -8
- package/Tooltip.js +27 -27
- package/build/bundle.css +1 -1
- package/build/bundle.js +32 -67
- package/package.json +1 -1
package/LuxityMobileHeader.js
CHANGED
|
@@ -455,10 +455,10 @@
|
|
|
455
455
|
var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
456
456
|
var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
457
457
|
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
458
|
-
return styled.css(_templateObject3 || (_templateObject3 = _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
|
|
458
|
+
return styled.css(_templateObject3 || (_templateObject3 = _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);
|
|
459
459
|
};
|
|
460
460
|
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
461
|
-
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props
|
|
461
|
+
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
|
|
462
462
|
};
|
|
463
463
|
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
464
464
|
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);
|
|
@@ -468,10 +468,10 @@
|
|
|
468
468
|
|
|
469
469
|
var getBodyStyle = function getBodyStyle() {
|
|
470
470
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
471
|
-
var _props
|
|
472
|
-
toolTipPosition = _props
|
|
471
|
+
var _props$$toolTipPositi = props.$toolTipPosition,
|
|
472
|
+
$toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
|
|
473
473
|
|
|
474
|
-
switch (toolTipPosition) {
|
|
474
|
+
switch ($toolTipPosition) {
|
|
475
475
|
case 'top':
|
|
476
476
|
return topMiddleBodyStyle;
|
|
477
477
|
|
|
@@ -485,9 +485,9 @@
|
|
|
485
485
|
|
|
486
486
|
var getAfterStyling = function getAfterStyling() {
|
|
487
487
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
488
|
-
var toolTipPosition = props
|
|
488
|
+
var $toolTipPosition = props.$toolTipPosition;
|
|
489
489
|
|
|
490
|
-
switch (toolTipPosition) {
|
|
490
|
+
switch ($toolTipPosition) {
|
|
491
491
|
case 'top':
|
|
492
492
|
return getTopMiddleArrowAfterStyle(props);
|
|
493
493
|
|
|
@@ -500,7 +500,7 @@
|
|
|
500
500
|
};
|
|
501
501
|
|
|
502
502
|
var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _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) {
|
|
503
|
-
return props
|
|
503
|
+
return props.$bodyWidth;
|
|
504
504
|
}, function (props) {
|
|
505
505
|
return props.theme.colors.base || 'black';
|
|
506
506
|
}, function (props) {
|
|
@@ -576,33 +576,33 @@
|
|
|
576
576
|
});
|
|
577
577
|
});
|
|
578
578
|
|
|
579
|
+
/* eslint-disable react/require-default-props */
|
|
580
|
+
|
|
579
581
|
var Tooltip = function Tooltip(_ref) {
|
|
580
|
-
var children = _ref.children,
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
582
|
+
var _ref$children = _ref.children,
|
|
583
|
+
children = _ref$children === void 0 ? null : _ref$children,
|
|
584
|
+
_ref$toolTipText = _ref.toolTipText,
|
|
585
|
+
toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
|
|
586
|
+
_ref$toolTipPosition = _ref.toolTipPosition,
|
|
587
|
+
toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
|
|
588
|
+
_ref$bodyWidth = _ref.bodyWidth,
|
|
589
|
+
bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
|
|
590
|
+
_ref$apexWidth = _ref.apexWidth,
|
|
591
|
+
apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
|
|
592
|
+
_ref$containerClassNa = _ref.containerClassName,
|
|
593
|
+
containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
|
|
594
|
+
_ref$bodyClassName = _ref.bodyClassName,
|
|
595
|
+
bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
|
|
587
596
|
return /*#__PURE__*/React__default.createElement(Container, {
|
|
588
597
|
className: containerClassName
|
|
589
598
|
}, children, /*#__PURE__*/React__default.createElement(Body, {
|
|
590
|
-
toolTipPosition: toolTipPosition,
|
|
591
|
-
bodyWidth: bodyWidth,
|
|
592
|
-
apexWidth: apexWidth,
|
|
599
|
+
$toolTipPosition: toolTipPosition,
|
|
600
|
+
$bodyWidth: bodyWidth,
|
|
601
|
+
$apexWidth: apexWidth,
|
|
593
602
|
className: bodyClassName
|
|
594
603
|
}, toolTipText));
|
|
595
604
|
};
|
|
596
605
|
|
|
597
|
-
Tooltip.defaultProps = {
|
|
598
|
-
children: null,
|
|
599
|
-
toolTipText: '',
|
|
600
|
-
toolTipPosition: 'top',
|
|
601
|
-
bodyWidth: '8em',
|
|
602
|
-
apexWidth: '5px',
|
|
603
|
-
containerClassName: '',
|
|
604
|
-
bodyClassName: ''
|
|
605
|
-
};
|
|
606
606
|
var Tooltip$1 = themed(Tooltip);
|
|
607
607
|
|
|
608
608
|
var CurrencySelect = function CurrencySelect(_ref) {
|
|
@@ -1115,7 +1115,6 @@
|
|
|
1115
1115
|
var useSearch = function useSearch(_ref) {
|
|
1116
1116
|
var endpoint = _ref.endpoint,
|
|
1117
1117
|
onProductIdsReceived = _ref.onProductIdsReceived,
|
|
1118
|
-
onSearchLoading = _ref.onSearchLoading,
|
|
1119
1118
|
currency = _ref.currency,
|
|
1120
1119
|
onSearchPreview = _ref.onSearchPreview;
|
|
1121
1120
|
var currentSearchRequestToken = React.useRef(null);
|
|
@@ -1166,12 +1165,7 @@
|
|
|
1166
1165
|
|
|
1167
1166
|
|
|
1168
1167
|
var newSearchToken = axios.CancelToken.source();
|
|
1169
|
-
currentSearchRequestToken.current = newSearchToken;
|
|
1170
|
-
|
|
1171
|
-
if (typeof onSearchLoading === 'function') {
|
|
1172
|
-
onSearchLoading(true);
|
|
1173
|
-
}
|
|
1174
|
-
|
|
1168
|
+
currentSearchRequestToken.current = newSearchToken;
|
|
1175
1169
|
axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
|
|
1176
1170
|
cancelToken: newSearchToken.token
|
|
1177
1171
|
}).then(function (response) {
|
|
@@ -1193,11 +1187,7 @@
|
|
|
1193
1187
|
});
|
|
1194
1188
|
}
|
|
1195
1189
|
|
|
1196
|
-
currentSearchRequestToken.current = null;
|
|
1197
|
-
|
|
1198
|
-
if (typeof onSearchLoading === 'function') {
|
|
1199
|
-
onSearchLoading(false);
|
|
1200
|
-
}
|
|
1190
|
+
currentSearchRequestToken.current = null;
|
|
1201
1191
|
}
|
|
1202
1192
|
}).catch(function (error) {
|
|
1203
1193
|
if (!axios.isCancel(error)) {
|
|
@@ -1206,14 +1196,10 @@
|
|
|
1206
1196
|
products: [],
|
|
1207
1197
|
luxity_product_ids: []
|
|
1208
1198
|
});
|
|
1209
|
-
currentSearchRequestToken.current = null;
|
|
1210
|
-
|
|
1211
|
-
if (typeof onSearchLoading === 'function') {
|
|
1212
|
-
onSearchLoading(false);
|
|
1213
|
-
}
|
|
1199
|
+
currentSearchRequestToken.current = null;
|
|
1214
1200
|
}
|
|
1215
1201
|
});
|
|
1216
|
-
}, [endpoint, currency, onSearchPreview, onProductIdsReceived
|
|
1202
|
+
}, [endpoint, currency, onSearchPreview, onProductIdsReceived]);
|
|
1217
1203
|
var debouncedSearch = React.useMemo(function () {
|
|
1218
1204
|
return debounce(function (searchQuery, setSearchResults) {
|
|
1219
1205
|
return performSearch(searchQuery, setSearchResults);
|
|
@@ -1318,22 +1304,6 @@
|
|
|
1318
1304
|
}
|
|
1319
1305
|
}, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
|
|
1320
1306
|
};
|
|
1321
|
-
var useSearchUrlQuery = function useSearchUrlQuery(setSearchValue, debouncedSearch) {
|
|
1322
|
-
var hasProcessedUrlQuery = React.useRef(false);
|
|
1323
|
-
React.useEffect(function () {
|
|
1324
|
-
if (hasProcessedUrlQuery.current) return;
|
|
1325
|
-
var urlParams = new URLSearchParams(window.location.search);
|
|
1326
|
-
var queryParam = urlParams.get('q');
|
|
1327
|
-
var isSearchPage = window.location.pathname.includes('/search');
|
|
1328
|
-
|
|
1329
|
-
if (queryParam && queryParam.trim() !== '' && isSearchPage) {
|
|
1330
|
-
hasProcessedUrlQuery.current = true;
|
|
1331
|
-
setSearchValue(queryParam);
|
|
1332
|
-
debouncedSearch(queryParam);
|
|
1333
|
-
}
|
|
1334
|
-
}, [setSearchValue, debouncedSearch]);
|
|
1335
|
-
return hasProcessedUrlQuery;
|
|
1336
|
-
};
|
|
1337
1307
|
|
|
1338
1308
|
var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
|
|
1339
1309
|
var logoSrc = _ref.logoSrc,
|
|
@@ -1369,7 +1339,6 @@
|
|
|
1369
1339
|
onProductSearchResultClick = _ref.onProductSearchResultClick,
|
|
1370
1340
|
onBrandSearchResultClick = _ref.onBrandSearchResultClick,
|
|
1371
1341
|
onProductIdsReceived = _ref.onProductIdsReceived,
|
|
1372
|
-
onSearchLoading = _ref.onSearchLoading,
|
|
1373
1342
|
onLogoutClick = _ref.onLogoutClick,
|
|
1374
1343
|
onInterestClick = _ref.onInterestClick,
|
|
1375
1344
|
onAddressClick = _ref.onAddressClick,
|
|
@@ -1395,7 +1364,6 @@
|
|
|
1395
1364
|
var _useSearch = useSearch({
|
|
1396
1365
|
endpoint: endpoint,
|
|
1397
1366
|
onProductIdsReceived: onProductIdsReceived,
|
|
1398
|
-
onSearchLoading: onSearchLoading,
|
|
1399
1367
|
currency: currency,
|
|
1400
1368
|
onSearchPreview: onSearchPreview
|
|
1401
1369
|
}),
|
|
@@ -1455,7 +1423,6 @@
|
|
|
1455
1423
|
});
|
|
1456
1424
|
var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
|
|
1457
1425
|
var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
|
|
1458
|
-
useSearchUrlQuery(setSearchValue, debouncedSearch);
|
|
1459
1426
|
var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
|
|
1460
1427
|
React.useMemo(function () {
|
|
1461
1428
|
if (!initialSearchData) {
|
package/LuxitySideNav.js
CHANGED
|
@@ -271,10 +271,10 @@
|
|
|
271
271
|
var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
272
272
|
var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
273
273
|
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
274
|
-
return styled.css(_templateObject3 || (_templateObject3 = _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
|
|
274
|
+
return styled.css(_templateObject3 || (_templateObject3 = _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);
|
|
275
275
|
};
|
|
276
276
|
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
277
|
-
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props
|
|
277
|
+
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
|
|
278
278
|
};
|
|
279
279
|
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
280
280
|
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);
|
|
@@ -284,10 +284,10 @@
|
|
|
284
284
|
|
|
285
285
|
var getBodyStyle = function getBodyStyle() {
|
|
286
286
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
287
|
-
var _props
|
|
288
|
-
toolTipPosition = _props
|
|
287
|
+
var _props$$toolTipPositi = props.$toolTipPosition,
|
|
288
|
+
$toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
|
|
289
289
|
|
|
290
|
-
switch (toolTipPosition) {
|
|
290
|
+
switch ($toolTipPosition) {
|
|
291
291
|
case 'top':
|
|
292
292
|
return topMiddleBodyStyle;
|
|
293
293
|
|
|
@@ -301,9 +301,9 @@
|
|
|
301
301
|
|
|
302
302
|
var getAfterStyling = function getAfterStyling() {
|
|
303
303
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
304
|
-
var toolTipPosition = props
|
|
304
|
+
var $toolTipPosition = props.$toolTipPosition;
|
|
305
305
|
|
|
306
|
-
switch (toolTipPosition) {
|
|
306
|
+
switch ($toolTipPosition) {
|
|
307
307
|
case 'top':
|
|
308
308
|
return getTopMiddleArrowAfterStyle(props);
|
|
309
309
|
|
|
@@ -316,7 +316,7 @@
|
|
|
316
316
|
};
|
|
317
317
|
|
|
318
318
|
var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _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) {
|
|
319
|
-
return props
|
|
319
|
+
return props.$bodyWidth;
|
|
320
320
|
}, function (props) {
|
|
321
321
|
return props.theme.colors.base || 'black';
|
|
322
322
|
}, function (props) {
|
|
@@ -392,33 +392,33 @@
|
|
|
392
392
|
});
|
|
393
393
|
});
|
|
394
394
|
|
|
395
|
+
/* eslint-disable react/require-default-props */
|
|
396
|
+
|
|
395
397
|
var Tooltip = function Tooltip(_ref) {
|
|
396
|
-
var children = _ref.children,
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
398
|
+
var _ref$children = _ref.children,
|
|
399
|
+
children = _ref$children === void 0 ? null : _ref$children,
|
|
400
|
+
_ref$toolTipText = _ref.toolTipText,
|
|
401
|
+
toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
|
|
402
|
+
_ref$toolTipPosition = _ref.toolTipPosition,
|
|
403
|
+
toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
|
|
404
|
+
_ref$bodyWidth = _ref.bodyWidth,
|
|
405
|
+
bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
|
|
406
|
+
_ref$apexWidth = _ref.apexWidth,
|
|
407
|
+
apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
|
|
408
|
+
_ref$containerClassNa = _ref.containerClassName,
|
|
409
|
+
containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
|
|
410
|
+
_ref$bodyClassName = _ref.bodyClassName,
|
|
411
|
+
bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
|
|
403
412
|
return /*#__PURE__*/React__default.createElement(Container, {
|
|
404
413
|
className: containerClassName
|
|
405
414
|
}, children, /*#__PURE__*/React__default.createElement(Body, {
|
|
406
|
-
toolTipPosition: toolTipPosition,
|
|
407
|
-
bodyWidth: bodyWidth,
|
|
408
|
-
apexWidth: apexWidth,
|
|
415
|
+
$toolTipPosition: toolTipPosition,
|
|
416
|
+
$bodyWidth: bodyWidth,
|
|
417
|
+
$apexWidth: apexWidth,
|
|
409
418
|
className: bodyClassName
|
|
410
419
|
}, toolTipText));
|
|
411
420
|
};
|
|
412
421
|
|
|
413
|
-
Tooltip.defaultProps = {
|
|
414
|
-
children: null,
|
|
415
|
-
toolTipText: '',
|
|
416
|
-
toolTipPosition: 'top',
|
|
417
|
-
bodyWidth: '8em',
|
|
418
|
-
apexWidth: '5px',
|
|
419
|
-
containerClassName: '',
|
|
420
|
-
bodyClassName: ''
|
|
421
|
-
};
|
|
422
422
|
var Tooltip$1 = themed(Tooltip);
|
|
423
423
|
|
|
424
424
|
var CurrencySelect = function CurrencySelect(_ref) {
|
package/MaterialSelector.js
CHANGED
|
@@ -1313,10 +1313,10 @@
|
|
|
1313
1313
|
var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
1314
1314
|
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"])));
|
|
1315
1315
|
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
1316
|
-
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
|
|
1316
|
+
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);
|
|
1317
1317
|
};
|
|
1318
1318
|
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
1319
|
-
return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props
|
|
1319
|
+
return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
|
|
1320
1320
|
};
|
|
1321
1321
|
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
1322
1322
|
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);
|
|
@@ -1326,10 +1326,10 @@
|
|
|
1326
1326
|
|
|
1327
1327
|
var getBodyStyle = function getBodyStyle() {
|
|
1328
1328
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1329
|
-
var _props
|
|
1330
|
-
toolTipPosition = _props
|
|
1329
|
+
var _props$$toolTipPositi = props.$toolTipPosition,
|
|
1330
|
+
$toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
|
|
1331
1331
|
|
|
1332
|
-
switch (toolTipPosition) {
|
|
1332
|
+
switch ($toolTipPosition) {
|
|
1333
1333
|
case 'top':
|
|
1334
1334
|
return topMiddleBodyStyle;
|
|
1335
1335
|
|
|
@@ -1343,9 +1343,9 @@
|
|
|
1343
1343
|
|
|
1344
1344
|
var getAfterStyling = function getAfterStyling() {
|
|
1345
1345
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1346
|
-
var toolTipPosition = props
|
|
1346
|
+
var $toolTipPosition = props.$toolTipPosition;
|
|
1347
1347
|
|
|
1348
|
-
switch (toolTipPosition) {
|
|
1348
|
+
switch ($toolTipPosition) {
|
|
1349
1349
|
case 'top':
|
|
1350
1350
|
return getTopMiddleArrowAfterStyle(props);
|
|
1351
1351
|
|
|
@@ -1358,7 +1358,7 @@
|
|
|
1358
1358
|
};
|
|
1359
1359
|
|
|
1360
1360
|
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) {
|
|
1361
|
-
return props
|
|
1361
|
+
return props.$bodyWidth;
|
|
1362
1362
|
}, function (props) {
|
|
1363
1363
|
return props.theme.colors.base || 'black';
|
|
1364
1364
|
}, function (props) {
|
package/ModelSelector.js
CHANGED
|
@@ -1313,10 +1313,10 @@
|
|
|
1313
1313
|
var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
1314
1314
|
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"])));
|
|
1315
1315
|
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
1316
|
-
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
|
|
1316
|
+
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);
|
|
1317
1317
|
};
|
|
1318
1318
|
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
1319
|
-
return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props
|
|
1319
|
+
return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
|
|
1320
1320
|
};
|
|
1321
1321
|
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
1322
1322
|
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);
|
|
@@ -1326,10 +1326,10 @@
|
|
|
1326
1326
|
|
|
1327
1327
|
var getBodyStyle = function getBodyStyle() {
|
|
1328
1328
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1329
|
-
var _props
|
|
1330
|
-
toolTipPosition = _props
|
|
1329
|
+
var _props$$toolTipPositi = props.$toolTipPosition,
|
|
1330
|
+
$toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
|
|
1331
1331
|
|
|
1332
|
-
switch (toolTipPosition) {
|
|
1332
|
+
switch ($toolTipPosition) {
|
|
1333
1333
|
case 'top':
|
|
1334
1334
|
return topMiddleBodyStyle;
|
|
1335
1335
|
|
|
@@ -1343,9 +1343,9 @@
|
|
|
1343
1343
|
|
|
1344
1344
|
var getAfterStyling = function getAfterStyling() {
|
|
1345
1345
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1346
|
-
var toolTipPosition = props
|
|
1346
|
+
var $toolTipPosition = props.$toolTipPosition;
|
|
1347
1347
|
|
|
1348
|
-
switch (toolTipPosition) {
|
|
1348
|
+
switch ($toolTipPosition) {
|
|
1349
1349
|
case 'top':
|
|
1350
1350
|
return getTopMiddleArrowAfterStyle(props);
|
|
1351
1351
|
|
|
@@ -1358,7 +1358,7 @@
|
|
|
1358
1358
|
};
|
|
1359
1359
|
|
|
1360
1360
|
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) {
|
|
1361
|
-
return props
|
|
1361
|
+
return props.$bodyWidth;
|
|
1362
1362
|
}, function (props) {
|
|
1363
1363
|
return props.theme.colors.base || 'black';
|
|
1364
1364
|
}, function (props) {
|
package/Tooltip.js
CHANGED
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
43
43
|
var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
44
44
|
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
45
|
-
return styled.css(_templateObject3 || (_templateObject3 = _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
|
|
45
|
+
return styled.css(_templateObject3 || (_templateObject3 = _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);
|
|
46
46
|
};
|
|
47
47
|
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
48
|
-
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props
|
|
48
|
+
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
|
|
49
49
|
};
|
|
50
50
|
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
51
51
|
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);
|
|
@@ -55,10 +55,10 @@
|
|
|
55
55
|
|
|
56
56
|
var getBodyStyle = function getBodyStyle() {
|
|
57
57
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
58
|
-
var _props
|
|
59
|
-
toolTipPosition = _props
|
|
58
|
+
var _props$$toolTipPositi = props.$toolTipPosition,
|
|
59
|
+
$toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
|
|
60
60
|
|
|
61
|
-
switch (toolTipPosition) {
|
|
61
|
+
switch ($toolTipPosition) {
|
|
62
62
|
case 'top':
|
|
63
63
|
return topMiddleBodyStyle;
|
|
64
64
|
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
|
|
73
73
|
var getAfterStyling = function getAfterStyling() {
|
|
74
74
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
75
|
-
var toolTipPosition = props
|
|
75
|
+
var $toolTipPosition = props.$toolTipPosition;
|
|
76
76
|
|
|
77
|
-
switch (toolTipPosition) {
|
|
77
|
+
switch ($toolTipPosition) {
|
|
78
78
|
case 'top':
|
|
79
79
|
return getTopMiddleArrowAfterStyle(props);
|
|
80
80
|
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
};
|
|
88
88
|
|
|
89
89
|
var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _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) {
|
|
90
|
-
return props
|
|
90
|
+
return props.$bodyWidth;
|
|
91
91
|
}, function (props) {
|
|
92
92
|
return props.theme.colors.base || 'black';
|
|
93
93
|
}, function (props) {
|
|
@@ -163,33 +163,33 @@
|
|
|
163
163
|
});
|
|
164
164
|
});
|
|
165
165
|
|
|
166
|
+
/* eslint-disable react/require-default-props */
|
|
167
|
+
|
|
166
168
|
var Tooltip = function Tooltip(_ref) {
|
|
167
|
-
var children = _ref.children,
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
169
|
+
var _ref$children = _ref.children,
|
|
170
|
+
children = _ref$children === void 0 ? null : _ref$children,
|
|
171
|
+
_ref$toolTipText = _ref.toolTipText,
|
|
172
|
+
toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
|
|
173
|
+
_ref$toolTipPosition = _ref.toolTipPosition,
|
|
174
|
+
toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
|
|
175
|
+
_ref$bodyWidth = _ref.bodyWidth,
|
|
176
|
+
bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
|
|
177
|
+
_ref$apexWidth = _ref.apexWidth,
|
|
178
|
+
apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
|
|
179
|
+
_ref$containerClassNa = _ref.containerClassName,
|
|
180
|
+
containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
|
|
181
|
+
_ref$bodyClassName = _ref.bodyClassName,
|
|
182
|
+
bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
|
|
174
183
|
return /*#__PURE__*/React__default.createElement(Container, {
|
|
175
184
|
className: containerClassName
|
|
176
185
|
}, children, /*#__PURE__*/React__default.createElement(Body, {
|
|
177
|
-
toolTipPosition: toolTipPosition,
|
|
178
|
-
bodyWidth: bodyWidth,
|
|
179
|
-
apexWidth: apexWidth,
|
|
186
|
+
$toolTipPosition: toolTipPosition,
|
|
187
|
+
$bodyWidth: bodyWidth,
|
|
188
|
+
$apexWidth: apexWidth,
|
|
180
189
|
className: bodyClassName
|
|
181
190
|
}, toolTipText));
|
|
182
191
|
};
|
|
183
192
|
|
|
184
|
-
Tooltip.defaultProps = {
|
|
185
|
-
children: null,
|
|
186
|
-
toolTipText: '',
|
|
187
|
-
toolTipPosition: 'top',
|
|
188
|
-
bodyWidth: '8em',
|
|
189
|
-
apexWidth: '5px',
|
|
190
|
-
containerClassName: '',
|
|
191
|
-
bodyClassName: ''
|
|
192
|
-
};
|
|
193
193
|
var index = themed(Tooltip);
|
|
194
194
|
|
|
195
195
|
return index;
|
package/build/bundle.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}@media only screen and (max-width:879px){.navbar{padding-top:12px}}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-left:16px;padding-right:16px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;gap:10px;justify-content:flex-start;width:100%}@media only screen and (max-width:879px){.navbar__wrapper .navbar__menu-icon-wrapper{margin-right:10px}.navbar__wrapper .navbar__logo{margin-left:0;margin-right:auto}.navbar__wrapper .navbar__icons-wrapper{align-items:center;display:flex;gap:20px;margin-left:auto}.navbar__wrapper .navbar__icons{align-items:center;display:flex;gap:20px;margin:0}.navbar__wrapper .navbar__icon{margin:0}}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__search-container{width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:20px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:150px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__icon.navbar__cart-icon{margin-right:0}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__loyalty-icon{height:18px;position:absolute;right:-14px;top:-6px;width:18px}.navbar__cart-icon{position:relative}.navbar__cart-count{bottom:50%;font-size:13px;height:20px;left:60%;position:absolute;width:20px}.navbar__account-initials,.navbar__cart-count{align-items:center;background-color:#f2eeeb;border-radius:50%;color:#000;display:flex;justify-content:center}.navbar__account-initials{font-size:11px;font-weight:500;height:24px;text-transform:uppercase;width:24px}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;left:0;right:0;top:100%;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f5f0ea!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
|
|
1
|
+
.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}@media only screen and (max-width:879px){.navbar{padding-top:12px}}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-left:16px;padding-right:16px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;gap:10px;justify-content:flex-start;width:100%}@media only screen and (max-width:879px){.navbar__wrapper .navbar__menu-icon-wrapper{margin-right:10px}.navbar__wrapper .navbar__logo{margin-left:0;margin-right:auto}.navbar__wrapper .navbar__icons-wrapper{align-items:center;display:flex;gap:20px;margin-left:auto}.navbar__wrapper .navbar__icons{align-items:center;display:flex;gap:20px;margin:0}.navbar__wrapper .navbar__icon{margin:0}}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__search-container{width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:20px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:150px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}.navbar__icon.navbar__cart-icon{margin-right:0}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__loyalty-icon{height:18px;position:absolute;right:-14px;top:-6px;width:18px}.navbar__cart-icon{position:relative}.navbar__cart-count{bottom:50%;font-size:13px;height:20px;left:60%;position:absolute;width:20px}.navbar__account-initials,.navbar__cart-count{align-items:center;background-color:#f2eeeb;border-radius:50%;color:#000;display:flex;justify-content:center}.navbar__account-initials{font-size:11px;font-weight:500;height:24px;text-transform:uppercase;width:24px}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;left:0;right:0;top:100%;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f5f0ea!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
|