@salesgenterp/ui-components 0.4.24 → 0.4.26
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.css +80 -0
- package/dist/index.js +11 -12
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +11 -12
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'karla-fonts';
|
|
3
|
+
src: url(../../../font/Karla/Karla-Light.ttf) format('truetype');
|
|
4
|
+
font-weight: 300;
|
|
5
|
+
}
|
|
6
|
+
@font-face {
|
|
7
|
+
font-family: 'karla-fonts';
|
|
8
|
+
src: url(../../../font/Karla/Karla-Regular.ttf) format('truetype');
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
}
|
|
11
|
+
@font-face {
|
|
12
|
+
font-family: 'karla-fonts';
|
|
13
|
+
src: url(../../../font/Karla/Karla-Medium.ttf) format('truetype');
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
}
|
|
16
|
+
@font-face {
|
|
17
|
+
font-family: 'karla-fonts';
|
|
18
|
+
src: url(../../../font/Karla/Karla-SemiBold.ttf) format('truetype');
|
|
19
|
+
font-weight: 600;
|
|
20
|
+
}
|
|
21
|
+
@font-face {
|
|
22
|
+
font-family: 'karla-fonts';
|
|
23
|
+
src: url(../../../font/Karla/Karla-Bold.ttf) format('truetype');
|
|
24
|
+
font-weight: 700;
|
|
25
|
+
}
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: 'karla-fonts';
|
|
28
|
+
src: url(../../../font/Karla/Karla-ExtraBold.ttf) format('truetype');
|
|
29
|
+
font-weight: 700;
|
|
30
|
+
}
|
|
31
|
+
/* /////remove arrows from number input */
|
|
32
|
+
/* Chrome, Safari, Edge, Opera */
|
|
33
|
+
input::-webkit-outer-spin-button,
|
|
34
|
+
input::-webkit-inner-spin-button {
|
|
35
|
+
-webkit-appearance: none;
|
|
36
|
+
margin: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Firefox */
|
|
40
|
+
input[type='number'] {
|
|
41
|
+
-moz-appearance: textfield;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* //////mui inputs */
|
|
45
|
+
|
|
46
|
+
._1vD5N ._2Y7wC,
|
|
47
|
+
._1vD5N ._3i-OI {
|
|
48
|
+
border: none !important;
|
|
49
|
+
outline: none !important;
|
|
50
|
+
}
|
|
51
|
+
/* ////checkbox */
|
|
52
|
+
._1vD5N ._7gACP {
|
|
53
|
+
color: black !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* //////select inputs */
|
|
57
|
+
._1vD5N ._1c9BE,
|
|
58
|
+
._1vD5N ._3lPVt {
|
|
59
|
+
color: grey !important;
|
|
60
|
+
font-size: 0.875em;
|
|
61
|
+
}
|
|
62
|
+
._1vD5N ._3HGw2 ._1vD5N ._3MZVJ,
|
|
63
|
+
._1vD5N ._2wB7w,
|
|
64
|
+
._1vD5N ._26InF,
|
|
65
|
+
._1vD5N ._33LCH,
|
|
66
|
+
._1vD5N ._2PPqR {
|
|
67
|
+
background: #fff0ec;
|
|
68
|
+
border-radius: 10px;
|
|
69
|
+
}
|
|
70
|
+
._1vD5N
|
|
71
|
+
._1WybA._-mciM {
|
|
72
|
+
height: 28px;
|
|
73
|
+
}
|
|
74
|
+
/* /////stepper length */
|
|
75
|
+
._1vD5N ._2DiIp {
|
|
76
|
+
min-height: 60px !important;
|
|
77
|
+
}
|
|
78
|
+
._1vD5N ._1r8Up {
|
|
79
|
+
padding: 0 !important;
|
|
80
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -1957,14 +1957,14 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1957
1957
|
};
|
|
1958
1958
|
|
|
1959
1959
|
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5;
|
|
1960
|
-
var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n background-color: ", ";\n margin: 0 auto;\n padding: 3.5em 3.5em 2.5em 4.5em;\n padding-left: min(4.
|
|
1960
|
+
var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n background-color: ", ";\n margin: 0 auto;\n padding: 3.5em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n max-height: 90vh;\n overflow: hidden;\n border-radius: 28px;\n @media only screen and (max-width: 1488px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
|
|
1961
1961
|
return props.maxWidth || '1605px';
|
|
1962
1962
|
}, function (props) {
|
|
1963
1963
|
return props.bg || 'rgba(255, 248, 246, 1)';
|
|
1964
1964
|
});
|
|
1965
1965
|
var Row = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
1966
|
-
var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width:
|
|
1967
|
-
var CheckoutHeader = styled(Row)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n padding: 2em;\n padding-right: 4em;\n max-width: 57.
|
|
1966
|
+
var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 1008px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n margin-right: 2em;\n max-height: 80vh;\n padding-right: 2em;\n overflow-y: auto;\n /* width */\n ::-webkit-scrollbar {\n width: 10px;\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #ef9687;\n border-radius: 16px;\n border: 3px solid rgba(245, 197, 189, 0.5);\n /* border: 3px solid black; */\n }\n @media only screen and (max-width: 1488px) {\n margin-bottom: 3em;\n min-height: max-content;\n max-height: max-content;\n margin-right: 0;\n overflow: visible;\n }\n @media only screen and (max-width: 788px) {\n max-width: 100vw;\n padding-right: 0;\n }\n /* overflow: hidden; */\n"])));
|
|
1967
|
+
var CheckoutHeader = styled(Row)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n padding: 2em;\n padding-right: 4em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 2em;\n .row {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n text-transform: capitalize;\n .icon {\n font-size: 14px;\n font-weight: 400;\n display: grid;\n place-items: center;\n margin-right: 6px;\n color: inherit;\n }\n p {\n font-size: 14px;\n }\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 0.5em;\n .row {\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
|
|
1968
1968
|
var CheckoutStepIcon = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n font-size: 5px;\n display: grid;\n place-items: center;\n margin: auto;\n padding: 0;\n .ic {\n font-size: 12px;\n }\n"])));
|
|
1969
1969
|
|
|
1970
1970
|
var _templateObject$7, _templateObject2$7, _templateObject3$7;
|
|
@@ -2008,9 +2008,9 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2008
2008
|
};
|
|
2009
2009
|
|
|
2010
2010
|
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
2011
|
-
var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.
|
|
2011
|
+
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: calc(100vw - 40px);\n margin-left: 1em;\n padding: 1em;\n }\n"])));
|
|
2012
2012
|
var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 2.5em;\n min-height: max-content;\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 1em;\n span {\n font-weight: 700;\n cursor: pointer;\n }\n .red {\n color: red;\n }\n }\n"])));
|
|
2013
|
-
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 h5 {\n font-size:
|
|
2013
|
+
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 h5 {\n font-size: 16px;\n font-weight: 700;\n text-transform: capitalize;\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 }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 1em;\n font-size: 12px;\n /* padding: 1.5em 2em; */\n }\n"])), function (props) {
|
|
2014
2014
|
return props.single ? '1.8em 2em' : '1em 0';
|
|
2015
2015
|
}, function (props) {
|
|
2016
2016
|
return props.single ? '-1.56em' : '1em';
|
|
@@ -2019,7 +2019,7 @@ var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8
|
|
|
2019
2019
|
}, function (props) {
|
|
2020
2020
|
return props.single ? '1.5em' : '0';
|
|
2021
2021
|
});
|
|
2022
|
-
var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !important;\n height: 28px;\n &::placeholder {\n font-size: 0.875em !important;\n }\n }\n .icon {\n color: black;\n font-size:
|
|
2022
|
+
var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !important;\n height: 28px;\n &::placeholder {\n font-size: 0.875em !important;\n }\n }\n .icon {\n color: black;\n font-size: 1em;\n }\n }\n"])));
|
|
2023
2023
|
var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n padding: ", ";\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 0 1em;\n text-transform: ", ";\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
|
|
2024
2024
|
return props.padding || '.4em 1.6em';
|
|
2025
2025
|
}, function (props) {
|
|
@@ -2035,13 +2035,13 @@ var ButtonRowContainer = styled.div(_templateObject6$5 || (_templateObject6$5 =
|
|
|
2035
2035
|
var CheckBoxRow = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\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: 700;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\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"])), function (props) {
|
|
2036
2036
|
return props.padding;
|
|
2037
2037
|
});
|
|
2038
|
-
var DeliveryCard = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n background: #fd0015;\n color: white;\n height: 34px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 0.5em 1em;\n margin-right: 1em;\n /* padding: 1em 0.
|
|
2038
|
+
var DeliveryCard = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n background: #fd0015;\n color: white;\n height: 34px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 0.5em 1em;\n margin-right: 1em;\n margin-bottom: 1em;\n /* padding: 1em 0.4em; */\n cursor: pointer;\n img {\n width: 38px;\n height: 17px;\n margin-bottom: -5px;\n margin-right: 4px;\n }\n p {\n font-size: 10px;\n }\n .circle {\n width: 10px;\n height: 10px;\n border-radius: 1px solid black;\n background-color: white;\n display: grid;\n place-items: center;\n border-radius: 50%;\n margin-left: auto;\n margin-left: 5px;\n .smallCircle {\n width: 4px;\n height: 4px;\n background: black;\n border-radius: 50%;\n }\n }\n"])));
|
|
2039
2039
|
var CreditCard = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n width: 70px;\n min-height: 48px;\n max-height: 50px;\n background-color: white;\n border: 3px solid rgba(217, 217, 217, 0.1);\n display: grid;\n place-items: center;\n margin: auto;\n cursor: pointer;\n overflow: hidden;\n border-radius: 5px;\n transition: 0.1s;\n &:hover,\n &:focus {\n border: 1px solid black;\n }\n"])));
|
|
2040
|
-
var StyledTableRow = styled(material.TableRow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.
|
|
2040
|
+
var StyledTableRow = styled(material.TableRow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .price {\n font-weight: 700;\n }\n }\n"])), function (props) {
|
|
2041
2041
|
return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
|
|
2042
2042
|
});
|
|
2043
2043
|
var StyledTableCell = styled(material.TableCell)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n && {\n border: none;\n }\n"])));
|
|
2044
|
-
var BottomGrid = styled(material.Grid)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 700;\n text-transform: capitalize;\n margin: 1em 0;\n font-size:
|
|
2044
|
+
var BottomGrid = styled(material.Grid)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 700;\n text-transform: capitalize;\n margin: 1em 0;\n font-size: 1em;\n }\n .icon {\n font-size: 1.6em;\n color: rgba(253, 0, 21, 1);\n }\n textarea {\n width: 100%;\n resize: none;\n background: #fff8f6;\n border: 1px solid rgba(253, 0, 21, 0.5);\n border-radius: 4px;\n margin-bottom: 2em;\n padding: 1em;\n }\n p {\n font-size: 12px;\n .ul {\n text-decoration: underline;\n font-size: inherit;\n }\n }\n .bottom {\n margin-left: 3em;\n font-style: italic;\n span {\n font-weight: 700;\n color: rgba(253, 0, 21, 1);\n\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n"])));
|
|
2045
2045
|
|
|
2046
2046
|
var CheckoutInput = function CheckoutInput(_ref) {
|
|
2047
2047
|
var controlls = _ref.controlls;
|
|
@@ -2354,8 +2354,7 @@ var Step2 = function Step2(_ref) {
|
|
|
2354
2354
|
options = _ref.options,
|
|
2355
2355
|
setShipping = _ref.setShipping,
|
|
2356
2356
|
countries = _ref.countries,
|
|
2357
|
-
setShippingMethod = _ref.setShippingMethod
|
|
2358
|
-
showShipping = _ref.showShipping;
|
|
2357
|
+
setShippingMethod = _ref.setShippingMethod;
|
|
2359
2358
|
|
|
2360
2359
|
var _useForm = reactHookForm.useForm(),
|
|
2361
2360
|
control = _useForm.control,
|
|
@@ -2375,7 +2374,7 @@ var Step2 = function Step2(_ref) {
|
|
|
2375
2374
|
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2376
2375
|
text: 'shipping information',
|
|
2377
2376
|
Icon: Icon
|
|
2378
|
-
}), /*#__PURE__*/React__default.createElement(StepsContent, null,
|
|
2377
|
+
}), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2379
2378
|
container: true,
|
|
2380
2379
|
rowSpacing: 2,
|
|
2381
2380
|
columnSpacing: 2,
|