@salesgenterp/ui-components 0.4.69 → 0.4.70
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/dist/index.js +34 -27
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +34 -27
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -208,14 +208,16 @@ var CartDrawer = function CartDrawer(_ref) {
|
|
|
208
208
|
}, "continue to checkout"))));
|
|
209
209
|
};
|
|
210
210
|
|
|
211
|
-
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8;
|
|
211
|
+
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9;
|
|
212
212
|
var CartPageSection = styled.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n font-family: 'karla-fonts';\n border-radius: 28px;\n"])), function (props) {
|
|
213
213
|
return props.bg;
|
|
214
214
|
}, function (props) {
|
|
215
215
|
return props.bg || '#FAE8E5';
|
|
216
216
|
});
|
|
217
|
-
var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n width:
|
|
218
|
-
return props.maxWidth || '
|
|
217
|
+
var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n border-radius: 28px 28px 28px 14px;\n padding: 2em 2em;\n padding-bottom: 3em;\n border-radius: 28px;\n opacity: ", ";\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 16px;\n border: 2px solid;\n border-color: #fae8e5;\n /* border-color: ", "; */\n }\n /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n }\n @media only screen and (max-width: 1340px) {\n flex-direction: column;\n align-items: center;\n padding: 0.5em;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n padding: 0 0.4em;\n }\n }\n"])), function (props) {
|
|
218
|
+
return props.maxWidth || '1620px';
|
|
219
|
+
}, function (props) {
|
|
220
|
+
return "min(" + (props.maxWidth || '1620px') + ",100%)";
|
|
219
221
|
}, function (props) {
|
|
220
222
|
return props.loading ? '0.7' : 1;
|
|
221
223
|
}, function (props) {
|
|
@@ -230,11 +232,12 @@ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _
|
|
|
230
232
|
var CardsBox = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* min-height: 1000px; */\n position: relative;\n max-width: 860px;\n margin-right: auto;\n padding: 1em 2em;\n display: ", ";\n grid-template-columns: 1fr 1fr;\n flex-direction: column;\n align-items: flex-start;\n grid-gap: 1em;\n justify-content: flex-start;\n align-items: center;\n border-radius: 20px;\n @media only screen and (max-width: 960px) {\n display: flex;\n }\n @media only screen and (max-width: 640px) {\n padding: 1em 0.2em;\n }\n"])), function (props) {
|
|
231
233
|
return props.retail ? 'grid' : 'flex';
|
|
232
234
|
});
|
|
233
|
-
var
|
|
234
|
-
var
|
|
235
|
+
var CartHeading = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* margin-bottom: 2em; */\n margin-left: 1em;\n\n h1 {\n font-weight: 600;\n font-size: 2.0375em;\n text-transform: capitalize;\n color: inherit;\n /* margin-bottom: 1em; */\n }\n p {\n font-size: 1em;\n color: black;\n }\n"])));
|
|
236
|
+
var Loader = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
|
|
237
|
+
var CartTableCell = styled(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n && {\n padding-bottom: 1em !important;\n border: none !important;\n font-size: 0.75rem;\n background: ", ";\n font-family: 'karla-fonts';\n }\n span {\n font-size: 0.75rem;\n }\n"])), function (props) {
|
|
235
238
|
return "" + props.bg;
|
|
236
239
|
});
|
|
237
|
-
var CartTableContainer = styled(material.TableContainer)(
|
|
240
|
+
var CartTableContainer = styled(material.TableContainer)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n min-height: 400px;\n padding-right: 1.5em;\n\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n background: ", ";\n border-radius: 16px;\n width: 100%;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n border: 3px solid;\n border-color: #fae8e5;\n }\n @media screen and (max-width: 750px) {\n padding: 0;\n }\n"])), function (props) {
|
|
238
241
|
return props.retail ? '12px' : '10px';
|
|
239
242
|
}, function (props) {
|
|
240
243
|
return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
|
|
@@ -243,12 +246,12 @@ var CartTableContainer = styled(material.TableContainer)(_templateObject6$1 || (
|
|
|
243
246
|
}, function (props) {
|
|
244
247
|
return props.color || '#ef9687';
|
|
245
248
|
});
|
|
246
|
-
var CartButtonsRow = styled.div(
|
|
249
|
+
var CartButtonsRow = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-right: 2em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
|
|
247
250
|
return props.bg || 'rgba(253, 0, 21, 1)';
|
|
248
251
|
}, function (props) {
|
|
249
252
|
return props.color || 'white';
|
|
250
253
|
});
|
|
251
|
-
var CartPageBox = styled.div(
|
|
254
|
+
var CartPageBox = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n width: 1000px;\n max-width: 100%;\n margin-right: 2em;\n min-height: 30rem;\n position: relative;\n @media only screen and (max-width: 740px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
|
|
252
255
|
|
|
253
256
|
function createCommonjsModule(fn, module) {
|
|
254
257
|
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
@@ -1351,18 +1354,18 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1351
1354
|
|
|
1352
1355
|
var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
|
|
1353
1356
|
var ProductImage = styled.img(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 58px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
|
|
1354
|
-
var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0.5rem 0;\n line-height: 1.
|
|
1357
|
+
var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0.5rem 0;\n line-height: 1.3em;\n max-height: ", ";\n height: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
1355
1358
|
return props.size || '1rem';
|
|
1356
1359
|
}, function (props) {
|
|
1357
|
-
return props.maxHeight ? props.maxHeight + "em" : '3.
|
|
1360
|
+
return props.maxHeight ? props.maxHeight + "em" : '3.25em';
|
|
1358
1361
|
}, function (props) {
|
|
1359
1362
|
return props.maxHeight ? props.maxHeight + "em" : '3.45em';
|
|
1360
1363
|
});
|
|
1361
|
-
var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: ", ";\n font-weight: bold;\n color: #323232;\n }\n .borderLeft {\n height: 100%;\n width: 0;\n background: #fd0015;\n transition: 0.2s;\n width: 0px;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n display: none;\n border-bottom-left-radius: 10px;\n }\n &:hover {\n background: white !important;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n /* opacity: 1;\n box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n z-index: 2;\n /* border-radius: 20px; */\n .borderLeft {\n width: 13px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 640px) {\n .CartnoPaddingSm {\n padding: 0 !important;\n }\n .price {\n font-size: 0.8em;\n }\n margin: 0.5em 0;\n .cartCheckBox {\n .css-i4bv87-MuiSvgIcon-root {\n font-size: 10px !important;\n }\n }\n }\n"])), function (props) {
|
|
1364
|
+
var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: ", ";\n font-weight: bold;\n color: #323232;\n /* font-size: 1.15em; */\n }\n .borderLeft {\n height: 100%;\n width: 0;\n background: #fd0015;\n transition: 0.2s;\n width: 0px;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n display: none;\n border-bottom-left-radius: 10px;\n }\n &:hover {\n background: white !important;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n /* opacity: 1;\n box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n z-index: 2;\n /* border-radius: 20px; */\n .borderLeft {\n width: 13px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 640px) {\n .CartnoPaddingSm {\n padding: 0 !important;\n }\n .price {\n font-size: 0.8em;\n }\n margin: 0.5em 0;\n .cartCheckBox {\n .css-i4bv87-MuiSvgIcon-root {\n font-size: 10px !important;\n }\n }\n }\n"])), function (props) {
|
|
1362
1365
|
return props.size || '1.19rem';
|
|
1363
1366
|
});
|
|
1364
|
-
var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n border: none !important;\n"])));
|
|
1365
|
-
var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height:
|
|
1367
|
+
var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n }\n"])));
|
|
1368
|
+
var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: 1.7em;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n div {\n /* width:30px; */\n min-height: 100%;\n aspect-ratio: 1.15/1;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n color: white;\n background-color: #323232;\n cursor: pointer;\n }\n .price {\n background: transparent;\n cursor: auto;\n background: #ffffff;\n border: 1px solid #ebebeb;\n p {\n color: #5e5c5c;\n font-size: 0.685em;\n font-weight: 500;\n }\n }\n .add {\n background-color: #ebebeb;\n color: #323232;\n }\n"])));
|
|
1366
1369
|
var DeleteBtn = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n display: grid;\n place-items: center;\n cursor: pointer;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n background: #eef1f4;\n color: #393f48;\n font-size: 0.75em;\n transition: 0.4s;\n &:hover {\n background: red;\n color: white;\n }\n"])));
|
|
1367
1370
|
|
|
1368
1371
|
var CardRow = function CardRow(_ref) {
|
|
@@ -1415,7 +1418,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1415
1418
|
scope: "row",
|
|
1416
1419
|
padding: "none"
|
|
1417
1420
|
}, /*#__PURE__*/React__default.createElement(ProductName, {
|
|
1418
|
-
maxHeight: styles.name && (styles === null || styles === void 0 ? void 0 : (_styles$name = styles.name) === null || _styles$name === void 0 ? void 0 : _styles$name.lines) * 1.
|
|
1421
|
+
maxHeight: styles.name && (styles === null || styles === void 0 ? void 0 : (_styles$name = styles.name) === null || _styles$name === void 0 ? void 0 : _styles$name.lines) * 1.5,
|
|
1419
1422
|
size: styles === null || styles === void 0 ? void 0 : (_styles$name2 = styles.name) === null || _styles$name2 === void 0 ? void 0 : _styles$name2.size
|
|
1420
1423
|
}, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
|
|
1421
1424
|
className: "outOfStock"
|
|
@@ -1455,12 +1458,16 @@ var CardRow = function CardRow(_ref) {
|
|
|
1455
1458
|
if (loading) return;
|
|
1456
1459
|
handleRemoveProduct(row);
|
|
1457
1460
|
}
|
|
1458
|
-
}, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose,
|
|
1461
|
+
}, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, {
|
|
1462
|
+
style: {
|
|
1463
|
+
fontSize: 'inherit'
|
|
1464
|
+
}
|
|
1465
|
+
}))));
|
|
1459
1466
|
};
|
|
1460
1467
|
|
|
1461
1468
|
var headCells = [{
|
|
1462
1469
|
id: 'image',
|
|
1463
|
-
numeric:
|
|
1470
|
+
numeric: true,
|
|
1464
1471
|
disablePadding: true,
|
|
1465
1472
|
label: 'product',
|
|
1466
1473
|
filter: false
|
|
@@ -1485,7 +1492,7 @@ var headCells = [{
|
|
|
1485
1492
|
filter: true
|
|
1486
1493
|
}, {
|
|
1487
1494
|
id: 'subtotal',
|
|
1488
|
-
numeric:
|
|
1495
|
+
numeric: false,
|
|
1489
1496
|
disablePadding: false,
|
|
1490
1497
|
label: 'subtotal',
|
|
1491
1498
|
filter: true
|
|
@@ -1659,9 +1666,9 @@ function EnhancedTable(_ref) {
|
|
|
1659
1666
|
loading: true
|
|
1660
1667
|
})), /*#__PURE__*/React.createElement(Box, {
|
|
1661
1668
|
sx: {
|
|
1662
|
-
width: '100%'
|
|
1663
|
-
|
|
1664
|
-
|
|
1669
|
+
width: '100%'
|
|
1670
|
+
},
|
|
1671
|
+
paddingBottom: "2em"
|
|
1665
1672
|
}, /*#__PURE__*/React.createElement(CartTableContainer, {
|
|
1666
1673
|
bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
|
|
1667
1674
|
color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.background
|
|
@@ -1790,8 +1797,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
|
|
|
1790
1797
|
};
|
|
1791
1798
|
|
|
1792
1799
|
var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
|
|
1793
|
-
var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width:
|
|
1794
|
-
return props.maxWidth || '
|
|
1800
|
+
var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: 26.375em;\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 28px;\n padding: 2em 1em;\n align-items: center;\n margin-top: 3em;\n p {\n font-size: 0.89em;\n font-weight: 300;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ", ";\n font-weight: 300;\n cursor: pointer;\n }\n"])), function (props) {
|
|
1801
|
+
return props.maxWidth || '26.375em';
|
|
1795
1802
|
}, function (props) {
|
|
1796
1803
|
return props.background || '#667080';
|
|
1797
1804
|
}, function (props) {
|
|
@@ -1807,7 +1814,7 @@ var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _tag
|
|
|
1807
1814
|
var CartSummaryHr = styled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n border: none;\n width: 100%;\n height: 1px;\n background-color: ", ";\n margin: 1em 0;\n"])), function (props) {
|
|
1808
1815
|
return props.color || 'rgba(255, 255, 255, 0.5)';
|
|
1809
1816
|
});
|
|
1810
|
-
var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n\n input {\n width: 10.81rem;\n height: 2.44rem;\n padding: 0.2rem 0.8rem;\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: ", ";\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 7.75rem;\n height: 2.44rem;\n background: ", ";\n border-radius: ", ";\n display: grid;\n color: ", ";\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n cursor: pointer;\n font-size: 0.75em;\n transition: 0.3s;\n &:hover {\n letter-spacing: 1px;\n }\n }\n"])), function (props) {
|
|
1817
|
+
var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n\n input {\n width: 10.81rem;\n height: 2.44rem;\n padding: 0.2rem 0.8rem;\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: ", ";\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 7.75rem;\n height: 2.44rem;\n background: ", ";\n border-radius: ", ";\n display: grid;\n color: ", ";\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n font-family: 'karla-fonts';\n cursor: pointer;\n font-size: 0.75em;\n transition: 0.3s;\n &:hover {\n letter-spacing: 1px;\n }\n }\n"])), function (props) {
|
|
1811
1818
|
return props.paddingBottom ? '2em' : '0';
|
|
1812
1819
|
}, function (props) {
|
|
1813
1820
|
return props.retail ? '1.19rem' : '0';
|
|
@@ -1826,7 +1833,7 @@ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4
|
|
|
1826
1833
|
}, function (props) {
|
|
1827
1834
|
return props.Btncolor || 'inherit';
|
|
1828
1835
|
});
|
|
1829
|
-
var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 700;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.75em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: ", ";\n padding: 0;\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 2em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
|
|
1836
|
+
var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 700;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.75em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: ", ";\n padding: 0;\n font-family: 'karla-fonts';\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 2em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
|
|
1830
1837
|
return props.background || '#393f48';
|
|
1831
1838
|
}, function (props) {
|
|
1832
1839
|
return props.color || 'inherit';
|
|
@@ -1940,7 +1947,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1940
1947
|
return /*#__PURE__*/React__default.createElement(CartPageSection, {
|
|
1941
1948
|
bg: styles.bg,
|
|
1942
1949
|
retail: retail
|
|
1943
|
-
}, /*#__PURE__*/React__default.createElement(CartPageContainer, {
|
|
1950
|
+
}, /*#__PURE__*/React__default.createElement(CartHeading, null, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have 4 items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
|
|
1944
1951
|
retail: retail,
|
|
1945
1952
|
loading: loading
|
|
1946
1953
|
}, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
|
|
@@ -2026,7 +2033,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2026
2033
|
}, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
|
|
2027
2034
|
};
|
|
2028
2035
|
|
|
2029
|
-
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
2036
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9$1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
2030
2037
|
var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.43em;\n max-width: 57.43em;\n background: white;\n padding: 1em 2em;\n background: #ffffff;\n border-radius: 20px;\n margin-left: 2em;\n margin-top: -2em;\n margin-bottom: 1em;\n @media screen and (max-width: 1305px) {\n width: 80vw;\n min-width: 0;\n }\n @media screen and (max-width: 768px) {\n width: 96%;\n margin-left: 1em;\n padding: 0.8em;\n }\n @media screen and (max-width: 540px) {\n width: 94%;\n margin-left: 1.2em;\n }\n"])));
|
|
2031
2038
|
var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\n p {\n font-size: 0.75em;\n }\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 0.95em;\n span {\n font-weight: 600;\n cursor: pointer;\n font-size: 0.94rem;\n }\n .red {\n color: red;\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])));
|
|
2032
2039
|
var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n font-family: 'karla-fonts';\n color: #323232;\n /* padding: ", "; */\n margin-bottom: ", ";\n margin-top: ", ";\n margin-left: ", ";\n /* color: grey; */\n border-bottom: 1px solid #fff0ec;\n background: #ffffff;\n border-radius: 20px;\n max-width: 919px;\n\n min-height: 4.35em;\n max-height: 4.35em;\n padding: ", ";\n h5 {\n font-size: 16px;\n font-weight: 600;\n text-transform: capitalize;\n margin-left: 0.6em;\n }\n .icon {\n font-size: 1.3em;\n margin-right: 8px;\n }\n .dropIcon {\n font-size: 1.4em;\n cursor: pointer;\n transform: rotate(-90deg);\n transition: 0.3s;\n color: rgba(50, 50, 50, 0.75);\n cursor: ", ";\n }\n .red {\n font-weight: 600;\n color: #fd0015;\n font-size: inherit;\n }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 0.5em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n }\n"])), function (props) {
|
|
@@ -2065,7 +2072,7 @@ var ButtonRowContainer = styled.div(_templateObject8$1 || (_templateObject8$1 =
|
|
|
2065
2072
|
}, function (props) {
|
|
2066
2073
|
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
2067
2074
|
});
|
|
2068
|
-
var CheckBoxRow = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 700;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
|
|
2075
|
+
var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 700;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
|
|
2069
2076
|
return props.padding;
|
|
2070
2077
|
}, function (props) {
|
|
2071
2078
|
return props.marginLeft;
|