oa-componentbook 0.18.150 → 0.18.151
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/build/components/oa-component-timeline/CustomTimeline.js +19 -7
- package/build/components/oa-component-timeline/styles.js +2 -2
- package/build/widgets/oa-widget-membershipcard/styles.js +1 -1
- package/build/widgets/oa-widget-reimbursement-breakup/ReimbursementBreakupWidget.js +3 -1
- package/build/widgets/oa-widget-reimbursement-breakup/styles.js +1 -1
- package/build/widgets/oa-widget-servicecard/styles.js +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _antd = require("antd");
|
|
12
12
|
var _styles = require("./styles");
|
|
13
|
+
var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
|
|
13
14
|
const _excluded = ["stepsData", "currentStep"];
|
|
14
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
16
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -25,16 +26,27 @@ function CustomTimeline(_ref) {
|
|
|
25
26
|
let {
|
|
26
27
|
description
|
|
27
28
|
} = _ref2;
|
|
28
|
-
return (description === null || description === void 0 ? void 0 : description.length) > 0 ? /*#__PURE__*/_react.default.createElement(_antd.Popover,
|
|
29
|
-
content: description
|
|
30
|
-
}, dot) : dot;
|
|
29
|
+
return (description === null || description === void 0 ? void 0 : description.length) > 0 ? /*#__PURE__*/_react.default.createElement(_antd.Popover, null, dot) : dot;
|
|
31
30
|
};
|
|
32
|
-
|
|
31
|
+
const hasExactly3Items = (stepsData === null || stepsData === void 0 ? void 0 : stepsData.length) === 3;
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
|
|
33
|
+
theme: {
|
|
34
|
+
token: {
|
|
35
|
+
colorError: _ColorVariablesMap.default['--color-negative'],
|
|
36
|
+
colorSplit: _ColorVariablesMap.default['--color-disabled-button'],
|
|
37
|
+
colorPrimary: _ColorVariablesMap.default['--color-positive'],
|
|
38
|
+
colorPrimaryBorder: _ColorVariablesMap.default['--color-positive'],
|
|
39
|
+
finishIconBorderColor: _ColorVariablesMap.default['--color-positive'],
|
|
40
|
+
colorTextDisabled: _ColorVariablesMap.default['--color-disabled-button'],
|
|
41
|
+
colorTextDescription: _ColorVariablesMap.default['--color-disabled-button']
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement(_styles.StyleTimeline, null, /*#__PURE__*/_react.default.createElement(_styles.CustomSteps, _extends({
|
|
33
45
|
current: currentStep,
|
|
34
|
-
|
|
46
|
+
labelPlacement: "vertical",
|
|
35
47
|
items: stepsData,
|
|
36
|
-
|
|
37
|
-
}, props)));
|
|
48
|
+
className: hasExactly3Items ? 'horizontalOnly' : ''
|
|
49
|
+
}, props))));
|
|
38
50
|
}
|
|
39
51
|
CustomTimeline.propTypes = {
|
|
40
52
|
stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
@@ -10,6 +10,6 @@ var _templateObject, _templateObject2;
|
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
12
|
var _default = exports.default = {};
|
|
13
|
-
const StyleTimeline = exports.StyleTimeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-steps .ant-steps-item-
|
|
14
|
-
const CustomSteps = exports.CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
13
|
+
const StyleTimeline = exports.StyleTimeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-steps-item-finish .ant-steps-item-icon{\n background-color: var(--color-positive);\n border-color: var(--color-positive);\n }\n .ant-steps .ant-steps-item-error .ant-steps-item-icon {\n background-color: #fff;\n }\n .ant-steps .ant-steps-item-finish .ant-steps-item-icon >.ant-steps-icon{\n color: #fff;\n font-size: 16px;\n }\n .ant-steps-item-process .ant-steps-item-icon{\n background-color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .ant-steps-item-wait .ant-steps-item-icon{\n background-color: transparent;\n border-color: var(--color-disabled-button);\n \n }\n .ant-steps-item-process .ant-steps-icon{\n display: block;\n width: 16px;\n height: 16px;\n vertical-align: middle;\n border: var(--color-positive) 1px solid;\n border-radius: 50%;\n }\n .ant-steps-item-wait .ant-steps-icon{\n visibility: hidden;\n\n }\n @media only screen and (max-width: 574px) {\n .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail::after {\n width: 100%; \n height: 1px;\n }\n .ant-steps.horizontalOnly {\n display: flex;\n flex-direction: row;\n }\n .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail{\n \n top: 12px; \n inset-inline-start: 15px;\n width: 100%;\n height: 1px; \n padding: 0;\n }\n }\n"])));
|
|
14
|
+
const CustomSteps = exports.CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n \n"])));
|
|
15
15
|
CustomSteps.Step = _antd.Steps.Step;
|
|
@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n padding: 0 0 8px;\n}\n.flexGap ul{\n margin: 0;\n padding: 0 0 0 16px;\n list-style-type: disc;\n}\n.flexGap li{\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n.viewStatus button{\n margin: 16px 0 0;\n}\n.flexGap div:last-child{\n padding: 0;\n}\n.primaryInfo svg{\n cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n margin: 0;\n}\n padding: 24px;\n background: var(--color-primary-background);\n border-radius: 12px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 0 24px;\n border: 1px solid var(--color-divider);\n @media only screen and (max-width: 600px) {\n gap: 16px;\n padding: 24px 16px 16px;\n .cardHead p .type-b1-400{\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .primary-info label .type-t2-700{\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n }\n .primaryInfo{\n display: flex;\n padding: 12px 8px;\n justify-content: space-between;\n background: var(--color-primary);\n border-radius: 8px;\n align-items: center;\n cursor: pointer;\n }\n .primaryInfo img{\n width: 24px;\n height: 24px;\n }\n .toolTipInfo .text-container svg {\n font-size: 16px !important;\n }\n .paraWithIcon{\n display: flex;\n gap: 8px;\n align-items: center;\n }\n .toolTipInfo{\n display: flex;\n background: var(--color-background-positive);\n padding: 12px;\n border-radius: 8px;\n flex-direction: column;\n justify-content: space-between;\n }\n .flexChangeBody{\n flex-direction: row;\n align-items: center;\n }\n\n .toolTipInfo .toolTip + div{\n display: flex;\n justify-content: end;\n }\n .error{\n background: var(--color-background-negative);\n }\n .error .toolTip svg{\n color: var(--color-negative);\n }\n .warning{\n background: var(--color-background-warning);\n }\n .warning .toolTip svg{\n color: var(--color-warning);\n }\n .success{\n background: var(--color-background-positive);\n }\n\n .success .toolTip svg{\n color: var(--color-positive);\n }\n .toolTip{\n display: flex;\n gap: 8px;\n }\n .cardHead{\n display: flex;\n justify-content: space-between;\n gap: 24px;\n }\n .imgBg{\n border-radius: 8px;\n background: #DEF1FB;\n min-width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .ant-modal-footer{\n display: none;\n }\n .toolTip svg{\n margin: 0px 0 0;\n }\n .flexChangeBody{\n align-items: center !important;\n flex-direction: row !important;\n gap: 8px !important;\n }\n .flexChangeBody .text-container{\n white-space: nowrap;\n }\n .flexChangeBody .viewStatus button {\n
|
|
11
|
+
const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n padding: 0 0 8px;\n}\n.flexGap ul{\n margin: 0;\n padding: 0 0 0 16px;\n list-style-type: disc;\n}\n.flexGap li{\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n}\n.viewStatus button{\n margin: 16px 0 0;\n}\n.flexGap div:last-child{\n padding: 0;\n}\n.primaryInfo svg{\n cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n margin: 0;\n}\n padding: 24px;\n background: var(--color-primary-background);\n border-radius: 12px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 0 24px;\n border: 1px solid var(--color-divider);\n @media only screen and (max-width: 600px) {\n gap: 16px;\n padding: 24px 16px 16px;\n .cardHead p .type-b1-400{\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .primary-info label .type-t2-700{\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n }\n .primaryInfo{\n display: flex;\n padding: 12px 8px;\n justify-content: space-between;\n background: var(--color-primary);\n border-radius: 8px;\n align-items: center;\n cursor: pointer;\n }\n .primaryInfo img{\n width: 24px;\n height: 24px;\n }\n .toolTipInfo .text-container svg {\n font-size: 16px !important;\n }\n .paraWithIcon{\n display: flex;\n gap: 8px;\n align-items: center;\n }\n .toolTipInfo{\n display: flex;\n background: var(--color-background-positive);\n padding: 12px;\n border-radius: 8px;\n flex-direction: column;\n justify-content: space-between;\n }\n .flexChangeBody{\n flex-direction: row;\n align-items: center;\n }\n\n .toolTipInfo .toolTip + div{\n display: flex;\n justify-content: end;\n }\n .error{\n background: var(--color-background-negative);\n }\n .error .toolTip svg{\n color: var(--color-negative);\n }\n .warning{\n background: var(--color-background-warning);\n }\n .warning .toolTip svg{\n color: var(--color-warning);\n }\n .success{\n background: var(--color-background-positive);\n }\n\n .success .toolTip svg{\n color: var(--color-positive);\n }\n .toolTip{\n display: flex;\n gap: 8px;\n }\n .cardHead{\n display: flex;\n justify-content: space-between;\n gap: 24px;\n }\n .imgBg{\n border-radius: 8px;\n background: #DEF1FB;\n min-width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .ant-modal-footer{\n display: none;\n }\n .toolTip svg{\n margin: 0px 0 0;\n }\n .flexChangeBody{\n align-items: center !important;\n flex-direction: row !important;\n gap: 8px !important;\n }\n .flexChangeBody .text-container{\n white-space: nowrap;\n }\n .flexChangeBody .viewStatus button {\n margin: 0 !important;\n}\n.displayFlex{\n display: flex;\n}\n @media only screen and (max-width: 600px) {\n .type-b1-400{\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .toolTipInfo {\n flex-direction: column;\n gap: 0;\n align-items: unset;\n }\n \n .cardHead .titleHead > span{\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n }\n"])));
|
|
12
12
|
const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 24px;\n@media only screen and (max-width: 600px) {\n gap: 16px;\n}\n"])));
|
|
13
13
|
const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ndisplay: flex;\npadding: 16px 24px;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\njustify-content: end;\n@media only screen and (max-width: 600px) {\n padding: 16px 16px;\n width: calc(100% + 32px);\n margin: 0 0 0 -16px;\n top: 16px;\n\n .text-container .type-t2-700 {\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n}\n.large {\n height: 36px;\n min-width: 100px;\n padding: 10px 16px;\n}\n}\n"])));
|
|
@@ -11,6 +11,7 @@ var _CustomModal = _interopRequireDefault(require("../../components/oa-component
|
|
|
11
11
|
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
12
12
|
var _styles = require("./styles");
|
|
13
13
|
var _utils = require("../../utils");
|
|
14
|
+
var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
|
|
14
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
16
|
function ReimbursementBreakupWidget(props) {
|
|
16
17
|
const {
|
|
@@ -33,9 +34,10 @@ function ReimbursementBreakupWidget(props) {
|
|
|
33
34
|
return '';
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
|
|
37
38
|
buttonConfig: btnConfig,
|
|
38
39
|
open: visible,
|
|
40
|
+
title: "Reimbursement Amount breakup",
|
|
39
41
|
onCancel: closeBreakUpModal,
|
|
40
42
|
onOk: closeBreakUpModal
|
|
41
43
|
}, /*#__PURE__*/_react.default.createElement(_styles.WidgetContainer, null, cardData === null || cardData === void 0 ? void 0 : cardData.map(item => {
|
|
@@ -9,4 +9,4 @@ var _templateObject;
|
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = exports.default = {};
|
|
12
|
-
const WidgetContainer = exports.WidgetContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.oaReimbursFlow {\n background: #fff;\n border-radius: 8px 8px 0px 0px;\n color: #212121;\n padding: 16px 12px;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n display: flex;\n flex-direction: column;\n}\n\n.amoutCalculat {\n color: #0282F0;\n padding: 16px 12px 0;\n border-top: solid 1px rgba(0, 0, 0, 0.08);\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 150%;\n width: calc(100% + 24px);\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 12px 0 0 -12px;\n cursor: pointer;\n justify-content: space-between;\n}\n\n.rmbsProdAmt {\n display: flex;\n flex-direction: column;\n}\n\n.rmbsProdAmt h5 {\n font-style: normal;\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n margin: 0 0 0 -12px;\n border-top: solid 1px rgba(230, 230, 230, 1);\n padding: 24px 0 12px 12px;\n width: calc(100% + 24px);\n}\n\nul.calSecBox {\n display: flex;\n flex-direction: column;\n margin:
|
|
12
|
+
const WidgetContainer = exports.WidgetContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.oaReimbursFlow {\n background: #fff;\n border-radius: 8px 8px 0px 0px;\n color: #212121;\n padding: 16px 12px;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n display: flex;\n flex-direction: column;\n}\n\n.amoutCalculat {\n color: #0282F0;\n padding: 16px 12px 0;\n border-top: solid 1px rgba(0, 0, 0, 0.08);\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 150%;\n width: calc(100% + 24px);\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 12px 0 0 -12px;\n cursor: pointer;\n justify-content: space-between;\n}\n\n.rmbsProdAmt {\n display: flex;\n flex-direction: column;\n}\n\n.rmbsProdAmt h5 {\n font-style: normal;\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n margin: 0 0 0 -12px;\n border-top: solid 1px rgba(230, 230, 230, 1);\n padding: 24px 0 12px 12px;\n width: calc(100% + 24px);\n}\n\nul.calSecBox {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n}\n\nul.calSecBox li {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin: 0 0 16px;\n}\n\n.gridtableFooter {\n border-top: solid 1px var(--color-divider);\n padding: 16px 0 0 0; \n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 22px;\n}\n\n.gridtableFooter aside {\n font-weight: 700;\n}\n.gridtableFooter aside p{\n color: var(--color-positive) !important;\n}\nul.calSecBox li aside {\n width: 85%;\n color: #212121;\n position: relative;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 22px;\n /* 157.143% */\n text-transform: capitalize;\n}\n\nul.calSecBox li aside+aside {\n width: auto;\n font-weight: 700;\n}\n\nul.calSecBox li aside p {\n margin: 0;\n}\n\n.infoIconScroll img {\n width: 12px;\n height: 12px;\n margin: 0 0 0 5px;\n}\n\n.rmbsProdAmt ul.listofProd {\n display: flex;\n flex-direction: column;\n border-radius: 4px 4px 0px 0px;\n border: 1px solid #F6F6F6;\n overflow: hidden;\n border-top: none !important;\n border-bottom: none !important;\n background: #FFF;\n margin: 0;\n}\n\n.rmbsProdAmt ul.listofProd li {\n border-bottom: solid 1px #E6E6E6;\n padding: 12px 12px 14px 12px;\n display: flex;\n flex-direction: row;\n}\n\n.nonGridTableHeader {\n background: #F6F6F6;\n border-bottom: none;\n}\n\n.rmbsProdAmt ul.listofProd li aside {\n color: #212121;\n width: 120px;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n white-space: normal;\n}\n\n.nonGridTableHeader aside {\n white-space: nowrap;\n font-size: 10px;\n color: rgba(117, 117, 117, 1) !important;\n font-style: normal;\n font-weight: 500;\n line-height: 150%;\n /* 15px */\n text-transform: uppercase;\n}\n"])));
|
|
@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n padding: 0 0 8px;\n}\n.viewStatus button{\n padding: 16px 0 0;\n}\n.flexGap div:last-child{\n padding: 0;\n}\n.primaryInfo svg{\n cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n margin: 0;\n}\n padding: 24px;\n background: var(--color-primary-background);\n border-radius: 12px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 0 24px;\n border: 1px solid var(--color-divider);\n @media only screen and (max-width: 600px) {\n .type-t1-500 {\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n gap: 16px;\n padding: 24px 16px 16px;\n .cardHead p .type-b1-400{\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .primary-info label .type-t2-700{\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n }\n .primaryInfo{\n display: flex;\n padding: 12px 8px;\n justify-content: space-between;\n background: var(--color-primary);\n border-radius: 8px;\n align-items: center;\n cursor: pointer;\n }\n .primaryInfo img{\n width: 24px;\n height: 24px;\n }\n .toolTipInfo .text-container svg {\n font-size: 16px !important;\n }\n .paraWithIcon{\n display: flex;\n gap: 8px;\n align-items: center;\n }\n .toolTipInfo{\n display: flex;\n background: var(--color-background-positive);\n padding: 12px;\n border-radius: 8px;\n flex-direction: column;\n justify-content: space-between;\n }\n .flexChangeBody{\n flex-direction: row;\n align-items: center;\n }\n\n .toolTipInfo .toolTip + div{\n display: flex;\n justify-content: end;\n }\n .error{\n background: var(--color-background-negative);\n }\n .error .toolTip svg{\n color: var(--color-negative);\n }\n .warning{\n background: var(--color-background-warning);\n }\n .warning .toolTip svg{\n color: var(--color-warning);\n }\n .success{\n background: var(--color-background-positive);\n }\n\n .success .toolTip svg{\n color: var(--color-positive);\n }\n .toolTip{\n display: flex;\n gap: 8px;\n }\n .cardHead{\n display: flex;\n justify-content: space-between;\n gap: 24px;\n }\n .imgBg{\n border-radius: 8px;\n background: #DEF1FB;\n min-width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .ant-modal-footer{\n display: none;\n }\n .toolTip svg{\n margin: 0px 0 0;\n }\n .flexChangeBody{\n align-items: center !important;\n flex-direction: row !important;\n gap: 8px !important;\n }\n .flexChangeBody .text-container{\n white-space: nowrap;\n }\n .flexChangeBody .viewStatus button {\n
|
|
11
|
+
const MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexGap div{\n padding: 0 0 8px;\n}\n.viewStatus button{\n padding: 16px 0 0;\n}\n.flexGap div:last-child{\n padding: 0;\n}\n.primaryInfo svg{\n cursor: pointer;\n}\np,h1, h2, h3, h4, h5, h6{\n margin: 0;\n}\n padding: 24px;\n background: var(--color-primary-background);\n border-radius: 12px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 0 24px;\n border: 1px solid var(--color-divider);\n @media only screen and (max-width: 600px) {\n .type-t1-500 {\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n gap: 16px;\n padding: 24px 16px 16px;\n .cardHead p .type-b1-400{\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .primary-info label .type-t2-700{\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n }\n .primaryInfo{\n display: flex;\n padding: 12px 8px;\n justify-content: space-between;\n background: var(--color-primary);\n border-radius: 8px;\n align-items: center;\n cursor: pointer;\n }\n .primaryInfo img{\n width: 24px;\n height: 24px;\n }\n .toolTipInfo .text-container svg {\n font-size: 16px !important;\n }\n .paraWithIcon{\n display: flex;\n gap: 8px;\n align-items: center;\n }\n .toolTipInfo{\n display: flex;\n background: var(--color-background-positive);\n padding: 12px;\n border-radius: 8px;\n flex-direction: column;\n justify-content: space-between;\n }\n .flexChangeBody{\n flex-direction: row;\n align-items: center;\n }\n\n .toolTipInfo .toolTip + div{\n display: flex;\n justify-content: end;\n }\n .error{\n background: var(--color-background-negative);\n }\n .error .toolTip svg{\n color: var(--color-negative);\n }\n .warning{\n background: var(--color-background-warning);\n }\n .warning .toolTip svg{\n color: var(--color-warning);\n }\n .success{\n background: var(--color-background-positive);\n }\n\n .success .toolTip svg{\n color: var(--color-positive);\n }\n .toolTip{\n display: flex;\n gap: 8px;\n }\n .cardHead{\n display: flex;\n justify-content: space-between;\n gap: 24px;\n }\n .imgBg{\n border-radius: 8px;\n background: #DEF1FB;\n min-width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .ant-modal-footer{\n display: none;\n }\n .toolTip svg{\n margin: 0px 0 0;\n }\n .flexChangeBody{\n align-items: center !important;\n flex-direction: row !important;\n gap: 8px !important;\n }\n .flexChangeBody .text-container{\n white-space: nowrap;\n }\n .flexChangeBody .viewStatus button {\n margin: 0 !important;\n}\n.displayFlex{\n display: flex;\n}\n @media only screen and (max-width: 600px) {\n .type-b1-400{\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .toolTipInfo {\n flex-direction: column;\n gap: 0;\n align-items: unset;\n }\n \n .cardHead .titleHead > span{\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n }\n"])));
|
|
12
12
|
const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 24px;\n@media only screen and (max-width: 600px) {\n gap: 16px;\n}\n"])));
|
|
13
13
|
const CardFooter = exports.CardFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.mobileIcon{\n display: none;\n}\ndisplay: flex;\npadding: 16px 24px;\ngap: 24px;\nborder-top: 1px solid var(--color-divider);\nwidth: calc(100% + 48px);\nmargin: 0 0 0 -24px;\nposition: relative;\ntop: 24px;\njustify-content: end;\n@media only screen and (max-width: 600px) {\n .fullWidth{\n width: 100%;\n }\n .mobileIcon{\n min-width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--color-primary);\n border-radius: 50%;\n color: var(--color-primary-background);\n }\n .mobileIcon a{\n display: flex;\n }\n padding: 16px 16px;\n width: calc(100% + 32px);\n margin: 0 0 0 -16px;\n top: 16px;\n align-items:center;\ndiv span {\n display: block;\n}\ndiv span > .type-t2-700{\n padding: 4px 0 0;\n}\n .text-container .type-t2-700 {\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n}\n.large {\n height: 36px;\n min-width: 100px;\n padding: 10px 16px;\n}\n}\n"])));
|