@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.modern.js
CHANGED
|
@@ -205,14 +205,16 @@ var CartDrawer = function CartDrawer(_ref) {
|
|
|
205
205
|
}, "continue to checkout"))));
|
|
206
206
|
};
|
|
207
207
|
|
|
208
|
-
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8;
|
|
208
|
+
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9;
|
|
209
209
|
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) {
|
|
210
210
|
return props.bg;
|
|
211
211
|
}, function (props) {
|
|
212
212
|
return props.bg || '#FAE8E5';
|
|
213
213
|
});
|
|
214
|
-
var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n width:
|
|
215
|
-
return props.maxWidth || '
|
|
214
|
+
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) {
|
|
215
|
+
return props.maxWidth || '1620px';
|
|
216
|
+
}, function (props) {
|
|
217
|
+
return "min(" + (props.maxWidth || '1620px') + ",100%)";
|
|
216
218
|
}, function (props) {
|
|
217
219
|
return props.loading ? '0.7' : 1;
|
|
218
220
|
}, function (props) {
|
|
@@ -227,11 +229,12 @@ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _
|
|
|
227
229
|
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) {
|
|
228
230
|
return props.retail ? 'grid' : 'flex';
|
|
229
231
|
});
|
|
230
|
-
var
|
|
231
|
-
var
|
|
232
|
+
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"])));
|
|
233
|
+
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"])));
|
|
234
|
+
var CartTableCell = styled(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) {
|
|
232
235
|
return "" + props.bg;
|
|
233
236
|
});
|
|
234
|
-
var CartTableContainer = styled(TableContainer)(
|
|
237
|
+
var CartTableContainer = styled(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) {
|
|
235
238
|
return props.retail ? '12px' : '10px';
|
|
236
239
|
}, function (props) {
|
|
237
240
|
return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
|
|
@@ -240,12 +243,12 @@ var CartTableContainer = styled(TableContainer)(_templateObject6$1 || (_template
|
|
|
240
243
|
}, function (props) {
|
|
241
244
|
return props.color || '#ef9687';
|
|
242
245
|
});
|
|
243
|
-
var CartButtonsRow = styled.div(
|
|
246
|
+
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) {
|
|
244
247
|
return props.bg || 'rgba(253, 0, 21, 1)';
|
|
245
248
|
}, function (props) {
|
|
246
249
|
return props.color || 'white';
|
|
247
250
|
});
|
|
248
|
-
var CartPageBox = styled.div(
|
|
251
|
+
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"])));
|
|
249
252
|
|
|
250
253
|
function createCommonjsModule(fn, module) {
|
|
251
254
|
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
@@ -1348,18 +1351,18 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1348
1351
|
|
|
1349
1352
|
var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
|
|
1350
1353
|
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"])));
|
|
1351
|
-
var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0.5rem 0;\n line-height: 1.
|
|
1354
|
+
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) {
|
|
1352
1355
|
return props.size || '1rem';
|
|
1353
1356
|
}, function (props) {
|
|
1354
|
-
return props.maxHeight ? props.maxHeight + "em" : '3.
|
|
1357
|
+
return props.maxHeight ? props.maxHeight + "em" : '3.25em';
|
|
1355
1358
|
}, function (props) {
|
|
1356
1359
|
return props.maxHeight ? props.maxHeight + "em" : '3.45em';
|
|
1357
1360
|
});
|
|
1358
|
-
var CartTableRow = styled(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) {
|
|
1361
|
+
var CartTableRow = styled(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) {
|
|
1359
1362
|
return props.size || '1.19rem';
|
|
1360
1363
|
});
|
|
1361
|
-
var CartTableCell$1 = styled(TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n border: none !important;\n"])));
|
|
1362
|
-
var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height:
|
|
1364
|
+
var CartTableCell$1 = styled(TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n }\n"])));
|
|
1365
|
+
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"])));
|
|
1363
1366
|
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"])));
|
|
1364
1367
|
|
|
1365
1368
|
var CardRow = function CardRow(_ref) {
|
|
@@ -1412,7 +1415,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1412
1415
|
scope: "row",
|
|
1413
1416
|
padding: "none"
|
|
1414
1417
|
}, /*#__PURE__*/React__default.createElement(ProductName, {
|
|
1415
|
-
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.
|
|
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.5,
|
|
1416
1419
|
size: styles === null || styles === void 0 ? void 0 : (_styles$name2 = styles.name) === null || _styles$name2 === void 0 ? void 0 : _styles$name2.size
|
|
1417
1420
|
}, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
|
|
1418
1421
|
className: "outOfStock"
|
|
@@ -1452,12 +1455,16 @@ var CardRow = function CardRow(_ref) {
|
|
|
1452
1455
|
if (loading) return;
|
|
1453
1456
|
handleRemoveProduct(row);
|
|
1454
1457
|
}
|
|
1455
|
-
}, /*#__PURE__*/React__default.createElement(AiOutlineClose,
|
|
1458
|
+
}, /*#__PURE__*/React__default.createElement(AiOutlineClose, {
|
|
1459
|
+
style: {
|
|
1460
|
+
fontSize: 'inherit'
|
|
1461
|
+
}
|
|
1462
|
+
}))));
|
|
1456
1463
|
};
|
|
1457
1464
|
|
|
1458
1465
|
var headCells = [{
|
|
1459
1466
|
id: 'image',
|
|
1460
|
-
numeric:
|
|
1467
|
+
numeric: true,
|
|
1461
1468
|
disablePadding: true,
|
|
1462
1469
|
label: 'product',
|
|
1463
1470
|
filter: false
|
|
@@ -1482,7 +1489,7 @@ var headCells = [{
|
|
|
1482
1489
|
filter: true
|
|
1483
1490
|
}, {
|
|
1484
1491
|
id: 'subtotal',
|
|
1485
|
-
numeric:
|
|
1492
|
+
numeric: false,
|
|
1486
1493
|
disablePadding: false,
|
|
1487
1494
|
label: 'subtotal',
|
|
1488
1495
|
filter: true
|
|
@@ -1656,9 +1663,9 @@ function EnhancedTable(_ref) {
|
|
|
1656
1663
|
loading: true
|
|
1657
1664
|
})), /*#__PURE__*/createElement(Box, {
|
|
1658
1665
|
sx: {
|
|
1659
|
-
width: '100%'
|
|
1660
|
-
|
|
1661
|
-
|
|
1666
|
+
width: '100%'
|
|
1667
|
+
},
|
|
1668
|
+
paddingBottom: "2em"
|
|
1662
1669
|
}, /*#__PURE__*/createElement(CartTableContainer, {
|
|
1663
1670
|
bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
|
|
1664
1671
|
color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.background
|
|
@@ -1787,8 +1794,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
|
|
|
1787
1794
|
};
|
|
1788
1795
|
|
|
1789
1796
|
var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
|
|
1790
|
-
var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width:
|
|
1791
|
-
return props.maxWidth || '
|
|
1797
|
+
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) {
|
|
1798
|
+
return props.maxWidth || '26.375em';
|
|
1792
1799
|
}, function (props) {
|
|
1793
1800
|
return props.background || '#667080';
|
|
1794
1801
|
}, function (props) {
|
|
@@ -1804,7 +1811,7 @@ var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _tag
|
|
|
1804
1811
|
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) {
|
|
1805
1812
|
return props.color || 'rgba(255, 255, 255, 0.5)';
|
|
1806
1813
|
});
|
|
1807
|
-
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) {
|
|
1814
|
+
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) {
|
|
1808
1815
|
return props.paddingBottom ? '2em' : '0';
|
|
1809
1816
|
}, function (props) {
|
|
1810
1817
|
return props.retail ? '1.19rem' : '0';
|
|
@@ -1823,7 +1830,7 @@ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4
|
|
|
1823
1830
|
}, function (props) {
|
|
1824
1831
|
return props.Btncolor || 'inherit';
|
|
1825
1832
|
});
|
|
1826
|
-
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) {
|
|
1833
|
+
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) {
|
|
1827
1834
|
return props.background || '#393f48';
|
|
1828
1835
|
}, function (props) {
|
|
1829
1836
|
return props.color || 'inherit';
|
|
@@ -1937,7 +1944,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1937
1944
|
return /*#__PURE__*/React__default.createElement(CartPageSection, {
|
|
1938
1945
|
bg: styles.bg,
|
|
1939
1946
|
retail: retail
|
|
1940
|
-
}, /*#__PURE__*/React__default.createElement(CartPageContainer, {
|
|
1947
|
+
}, /*#__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, {
|
|
1941
1948
|
retail: retail,
|
|
1942
1949
|
loading: loading
|
|
1943
1950
|
}, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
|
|
@@ -2023,7 +2030,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2023
2030
|
}, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
|
|
2024
2031
|
};
|
|
2025
2032
|
|
|
2026
|
-
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
2033
|
+
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;
|
|
2027
2034
|
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"])));
|
|
2028
2035
|
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"])));
|
|
2029
2036
|
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) {
|
|
@@ -2062,7 +2069,7 @@ var ButtonRowContainer = styled.div(_templateObject8$1 || (_templateObject8$1 =
|
|
|
2062
2069
|
}, function (props) {
|
|
2063
2070
|
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
2064
2071
|
});
|
|
2065
|
-
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) {
|
|
2072
|
+
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) {
|
|
2066
2073
|
return props.padding;
|
|
2067
2074
|
}, function (props) {
|
|
2068
2075
|
return props.marginLeft;
|