intelicoreact 0.2.27 → 0.2.30
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/Atomic/FormElements/InputCalendar/InputCalendar.js +19 -13
- package/dist/Atomic/FormElements/RadioInput/RadioInput.js +2 -0
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js +7 -4
- package/dist/Atomic/FormElements/SwitcherRadio/SwitcherRadio.js +35 -24
- package/dist/Atomic/UI/AccordionTable/AccordionTable.js +141 -0
- package/dist/Atomic/UI/AccordionTable/AccordionTable.scss +151 -0
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js +1 -1
- package/dist/Atomic/UI/Status/Status.scss +5 -0
- package/package.json +1 -1
|
@@ -57,10 +57,10 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
57
57
|
setOpenedByOnFocus = _useState4[1];
|
|
58
58
|
|
|
59
59
|
var calendarRef = (0, _react.useRef)(null);
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var momentMinDate = (0, _momentTimezone.default)(
|
|
63
|
-
var momentMaxDate = (0, _momentTimezone.default)(
|
|
60
|
+
var formattedMinDate = (0, _momentTimezone.default)(minDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(minDate, format).format(format) : null;
|
|
61
|
+
var formattedMaxDate = (0, _momentTimezone.default)(maxDate, format).format(format) !== 'Invalid date' ? (0, _momentTimezone.default)(maxDate, format).format(format) : null;
|
|
62
|
+
var momentMinDate = (0, _momentTimezone.default)(formattedMinDate, format).startOf('day');
|
|
63
|
+
var momentMaxDate = (0, _momentTimezone.default)(formattedMaxDate, format).startOf('day');
|
|
64
64
|
(0, _useClickOutside.useClickOutside)(calendarRef, function () {
|
|
65
65
|
return setIsOpened(false);
|
|
66
66
|
});
|
|
@@ -85,7 +85,18 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
85
85
|
|
|
86
86
|
var handleBlur = function handleBlur(e) {
|
|
87
87
|
var value = e.target.value;
|
|
88
|
-
if ((0, _momentTimezone.default)(value, format).format(format) === 'Invalid date') onChange('');else if ((0, _momentTimezone.default)(value, format).startOf('day').isBefore(momentMinDate, 'days')) onChange(
|
|
88
|
+
if ((0, _momentTimezone.default)(value, format).format(format) === 'Invalid date') onChange(formattedMaxDate !== null && formattedMaxDate !== void 0 ? formattedMaxDate : '');else if ((0, _momentTimezone.default)(value, format).startOf('day').isBefore(momentMinDate, 'days')) onChange(formattedMinDate);else if ((0, _momentTimezone.default)(value, format).endOf('day').isAfter(momentMaxDate, 'days')) onChange(formattedMaxDate);else onChange((0, _momentTimezone.default)(value, format).format(format));
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
var onKeyUp = function onKeyUp(e) {
|
|
92
|
+
if (!isOpenedByOnFocus) {
|
|
93
|
+
if (e.key === 'Enter') e.target.blur();
|
|
94
|
+
setIsOpened(false);
|
|
95
|
+
} else if (e.target.value.replace(/[^0-9]/g, "").length === 8) {
|
|
96
|
+
e.target.blur();
|
|
97
|
+
handleBlur(e);
|
|
98
|
+
setIsOpened(false);
|
|
99
|
+
}
|
|
89
100
|
};
|
|
90
101
|
|
|
91
102
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -106,12 +117,7 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
106
117
|
setIsOpened(true);
|
|
107
118
|
},
|
|
108
119
|
onBlur: !isOpened ? handleBlur : function () {},
|
|
109
|
-
onKeyUp:
|
|
110
|
-
if (!isOpenedByOnFocus) {
|
|
111
|
-
if (e.key === 'Enter') e.target.blur();
|
|
112
|
-
setIsOpened(false);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
120
|
+
onKeyUp: onKeyUp
|
|
115
121
|
}), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
116
122
|
date: getCalendarValue(value),
|
|
117
123
|
setDate: function setDate(newDate) {
|
|
@@ -119,8 +125,8 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
119
125
|
},
|
|
120
126
|
params: {
|
|
121
127
|
format: format,
|
|
122
|
-
minDate:
|
|
123
|
-
maxDate:
|
|
128
|
+
minDate: formattedMinDate,
|
|
129
|
+
maxDate: formattedMaxDate,
|
|
124
130
|
momentMinDate: momentMinDate,
|
|
125
131
|
momentMaxDate: momentMaxDate,
|
|
126
132
|
isDontLimitFuture: isDontLimitFuture
|
|
@@ -25,10 +25,12 @@ var RadioInput = function RadioInput(_ref) {
|
|
|
25
25
|
disabled = _ref.disabled,
|
|
26
26
|
className = _ref.className,
|
|
27
27
|
value = _ref.value,
|
|
28
|
+
testId = _ref.testId,
|
|
28
29
|
_ref$onChange = _ref.onChange,
|
|
29
30
|
_onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
|
|
30
31
|
|
|
31
32
|
return /*#__PURE__*/_react.default.createElement("label", {
|
|
33
|
+
"data-testid": testId ? "test-radio-input--".concat(testId) : 'test-radio-input',
|
|
32
34
|
className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled)),
|
|
33
35
|
htmlFor: id
|
|
34
36
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -160,11 +160,15 @@ function RangeSlider(_ref) {
|
|
|
160
160
|
|
|
161
161
|
switch (type) {
|
|
162
162
|
case 'from':
|
|
163
|
-
if (value < min && validate) setFrom(min);else if (value > max - extremumRange && extremumRange > minRange && validate) setFrom(max - extremumRange);
|
|
163
|
+
if (value < min && validate) setFrom(min); // else if (value > max - extremumRange && extremumRange > minRange && validate) setFrom(max - extremumRange);
|
|
164
|
+
// else if (value > to - extremumRange && extremumRange > minRange && validate) setFrom(to - extremumRange);
|
|
165
|
+
else if (value > to - minRange && minRange > extremumRange && validate) setFrom(to - minRange);else setFrom(value);
|
|
164
166
|
break;
|
|
165
167
|
|
|
166
168
|
case 'to':
|
|
167
|
-
if (value > max && validate) setTo(max);else if (value < min + extremumRange && extremumRange > minRange && validate) setTo(min
|
|
169
|
+
if (value > max && validate) setTo(max); // else if (value < min + extremumRange && extremumRange > minRange && validate) setTo(min+ + extremumRange);
|
|
170
|
+
// else if (value < from + extremumRange && extremumRange > minRange && validate) setTo(from + extremumRange);
|
|
171
|
+
else if (value < from + minRange && minRange > extremumRange && validate) setTo(from + minRange);else setTo(value);
|
|
168
172
|
break;
|
|
169
173
|
}
|
|
170
174
|
};
|
|
@@ -337,8 +341,7 @@ function RangeSlider(_ref) {
|
|
|
337
341
|
|
|
338
342
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
339
343
|
className: "range-slider__track__range",
|
|
340
|
-
style: style
|
|
341
|
-
onMouseMove: movingTrigger ? moveTrigger : function () {}
|
|
344
|
+
style: style
|
|
342
345
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
343
346
|
ref: fromTriggerRef,
|
|
344
347
|
className: "range-slider__track__range--trigger",
|
|
@@ -33,6 +33,8 @@ var SwitcherRadio = function SwitcherRadio(_ref) {
|
|
|
33
33
|
className = _ref.className,
|
|
34
34
|
value = _ref.value,
|
|
35
35
|
disabled = _ref.disabled,
|
|
36
|
+
_ref$isHideSwitcher = _ref.isHideSwitcher,
|
|
37
|
+
isHideSwitcher = _ref$isHideSwitcher === void 0 ? false : _ref$isHideSwitcher,
|
|
36
38
|
_ref$onChange = _ref.onChange,
|
|
37
39
|
_onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
38
40
|
_ref$isActive = _ref.isActive,
|
|
@@ -41,30 +43,39 @@ var SwitcherRadio = function SwitcherRadio(_ref) {
|
|
|
41
43
|
setIsActive = _ref$setIsActive === void 0 ? function () {} : _ref$setIsActive;
|
|
42
44
|
|
|
43
45
|
var safelyValue = value || (options === null || options === void 0 ? void 0 : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) || '';
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
46
|
+
|
|
47
|
+
var renderRadioGroup = function renderRadioGroup() {
|
|
48
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
49
|
+
className: (0, _classnames.default)("".concat(RC, "__wrap"), (0, _defineProperty2.default)({}, "switcher-radio_".concat(direction), direction))
|
|
50
|
+
}, options === null || options === void 0 ? void 0 : options.map(function (option) {
|
|
51
|
+
return /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
|
|
52
|
+
key: option.id,
|
|
53
|
+
className: "switcher-radio__radio",
|
|
54
|
+
value: option.value,
|
|
55
|
+
name: option.name,
|
|
56
|
+
checked: safelyValue,
|
|
57
|
+
label: option.label,
|
|
58
|
+
onChange: function onChange(val) {
|
|
59
|
+
return _onChange(val);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}));
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
var renderSwitcher = function renderSwitcher(body) {
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement(_SwitcherHide.default, {
|
|
67
|
+
isActive: isActive,
|
|
68
|
+
label: label,
|
|
69
|
+
hint: hint,
|
|
70
|
+
hintSide: hintSide,
|
|
71
|
+
onChange: setIsActive,
|
|
72
|
+
isLabelBold: isLabelBold,
|
|
73
|
+
className: (0, _classnames.default)(RC, className),
|
|
74
|
+
disabled: disabled
|
|
75
|
+
}, body);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
return !isHideSwitcher ? renderSwitcher(renderRadioGroup()) : renderRadioGroup();
|
|
68
79
|
};
|
|
69
80
|
|
|
70
81
|
var _default = SwitcherRadio;
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
+
|
|
20
|
+
var _reactFeather = require("react-feather");
|
|
21
|
+
|
|
22
|
+
var _MonoAccordion = _interopRequireDefault(require("../MonoAccordion/MonoAccordion"));
|
|
23
|
+
|
|
24
|
+
require("./AccordionTable.scss");
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
31
|
+
|
|
32
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
33
|
+
|
|
34
|
+
var AccordionTable = function AccordionTable(_ref) {
|
|
35
|
+
var className = _ref.className,
|
|
36
|
+
header = _ref.header,
|
|
37
|
+
rows = _ref.rows;
|
|
38
|
+
|
|
39
|
+
var _useState = (0, _react.useState)(rows),
|
|
40
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
41
|
+
accordions = _useState2[0],
|
|
42
|
+
setAccordions = _useState2[1];
|
|
43
|
+
|
|
44
|
+
var handle = {
|
|
45
|
+
accordionChange: function accordionChange(key) {
|
|
46
|
+
var newArr = accordions === null || accordions === void 0 ? void 0 : accordions.map(function (item) {
|
|
47
|
+
if (item.key === key) {
|
|
48
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
49
|
+
isOpen: !item.isOpen
|
|
50
|
+
});
|
|
51
|
+
} else return item;
|
|
52
|
+
});
|
|
53
|
+
setAccordions(newArr);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
var getHeaderItem = function getHeaderItem(key) {
|
|
58
|
+
return header === null || header === void 0 ? void 0 : header.find(function (item) {
|
|
59
|
+
return item.key === key;
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
var renderTd = function renderTd(tr) {
|
|
64
|
+
var _Object$entries;
|
|
65
|
+
|
|
66
|
+
return (_Object$entries = Object.entries(tr)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref2) {
|
|
67
|
+
var _getHeaderItem, _getHeaderItem2;
|
|
68
|
+
|
|
69
|
+
var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
70
|
+
key = _ref3[0],
|
|
71
|
+
value = _ref3[1];
|
|
72
|
+
|
|
73
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
74
|
+
key: key,
|
|
75
|
+
style: {
|
|
76
|
+
flexBasis: "".concat((_getHeaderItem = getHeaderItem(key)) === null || _getHeaderItem === void 0 ? void 0 : _getHeaderItem.width, "%")
|
|
77
|
+
},
|
|
78
|
+
className: (0, _classnames.default)('accordion-table__td', (_getHeaderItem2 = getHeaderItem(key)) === null || _getHeaderItem2 === void 0 ? void 0 : _getHeaderItem2.className)
|
|
79
|
+
}, value);
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
var renderTr = function renderTr(items) {
|
|
84
|
+
return items === null || items === void 0 ? void 0 : items.map(function (item) {
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
86
|
+
key: item.key,
|
|
87
|
+
className: (0, _classnames.default)('accordion-table__tr', item.className)
|
|
88
|
+
}, renderTd(item));
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
var defineAccordionTitle = function defineAccordionTitle(row) {
|
|
93
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
94
|
+
onClick: function onClick() {
|
|
95
|
+
return handle.accordionChange(row.key);
|
|
96
|
+
},
|
|
97
|
+
className: "accordion-table__accordion-label-box"
|
|
98
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
99
|
+
className: "j4"
|
|
100
|
+
}, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
|
|
101
|
+
className: (0, _classnames.default)('accordion-label-box__icon', {
|
|
102
|
+
'accordion-label-box__icon--open': row.isOpen
|
|
103
|
+
})
|
|
104
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
105
|
+
className: "accordion-label-box__label"
|
|
106
|
+
}, row.label)), /*#__PURE__*/_react.default.createElement("div", null, row.titleContent));
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
+
className: (0, _classnames.default)('accordion-table')
|
|
111
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
112
|
+
className: "accordion-table__header"
|
|
113
|
+
}, header === null || header === void 0 ? void 0 : header.map(function (item) {
|
|
114
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
115
|
+
style: {
|
|
116
|
+
flexBasis: "".concat(item.width, "%")
|
|
117
|
+
},
|
|
118
|
+
key: item.key,
|
|
119
|
+
className: (0, _classnames.default)('accordion-table__header-item', item.className)
|
|
120
|
+
}, item.label);
|
|
121
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
122
|
+
className: "accordion-table__body"
|
|
123
|
+
}, accordions === null || accordions === void 0 ? void 0 : accordions.map(function (row) {
|
|
124
|
+
var _row$children;
|
|
125
|
+
|
|
126
|
+
return /*#__PURE__*/_react.default.createElement(_MonoAccordion.default, {
|
|
127
|
+
key: row.key,
|
|
128
|
+
onClick: function onClick() {
|
|
129
|
+
return handle.accordionChange(row.key);
|
|
130
|
+
},
|
|
131
|
+
isOpen: row.isOpen,
|
|
132
|
+
className: (0, _classnames.default)('accordion-table__body-accordion', {
|
|
133
|
+
'accordion-table__body-accordion--closed': !row.isOpen
|
|
134
|
+
}, row.className),
|
|
135
|
+
titleJSX: defineAccordionTitle(row)
|
|
136
|
+
}, (_row$children = row.children) !== null && _row$children !== void 0 ? _row$children : renderTr(row.items));
|
|
137
|
+
})));
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
var _default = AccordionTable;
|
|
141
|
+
exports.default = _default;
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
.accordion-table {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: flex-start;
|
|
5
|
+
justify-content: flex-start;
|
|
6
|
+
overflow-x: auto;
|
|
7
|
+
width: 100%;
|
|
8
|
+
min-width: 700px;
|
|
9
|
+
|
|
10
|
+
&__header {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-wrap: nowrap;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 32px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&__header-item {
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
user-select: none;
|
|
22
|
+
text-transform: uppercase;
|
|
23
|
+
color: #757f8c;
|
|
24
|
+
font-size: 11px;
|
|
25
|
+
font-weight: 500;
|
|
26
|
+
padding: 5px 10px;
|
|
27
|
+
background-color: #ebeff2;
|
|
28
|
+
|
|
29
|
+
&:first-child {
|
|
30
|
+
border-top-left-radius: 8px;
|
|
31
|
+
padding-left: 15px;
|
|
32
|
+
}
|
|
33
|
+
&:last-child {
|
|
34
|
+
border-top-right-radius: 8px;
|
|
35
|
+
padding-right: 15px;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&__body {
|
|
40
|
+
width: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&__body-accordion {
|
|
44
|
+
&:not(:first-child) {
|
|
45
|
+
border-top: 1px solid #ebeff2;
|
|
46
|
+
}
|
|
47
|
+
&:last-child {
|
|
48
|
+
.mono-accordion__container {
|
|
49
|
+
border-bottom-left-radius: 8px;
|
|
50
|
+
border-bottom-right-radius: 8px;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--closed {
|
|
55
|
+
.mono-accordion__head {
|
|
56
|
+
transition: all 0.3s ease-out;
|
|
57
|
+
box-shadow: 0px 5px 8px rgba(255, 255, 255, 0.12)!important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.mono-accordion__container {
|
|
61
|
+
transition: all 0.3s ease-out;
|
|
62
|
+
opacity: 0;
|
|
63
|
+
}
|
|
64
|
+
&:last-child {
|
|
65
|
+
.mono-accordion__head {
|
|
66
|
+
border-bottom-left-radius: 8px;
|
|
67
|
+
border-bottom-right-radius: 8px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&__tr {
|
|
74
|
+
display: flex;
|
|
75
|
+
width: 100%;
|
|
76
|
+
|
|
77
|
+
&:last-child {
|
|
78
|
+
.accordion-table__td {
|
|
79
|
+
border: none;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&__td {
|
|
85
|
+
padding: 15px 0px;
|
|
86
|
+
border-bottom: 1px solid #ebeff2;
|
|
87
|
+
white-space: nowrap;
|
|
88
|
+
font-size: 14px;
|
|
89
|
+
font-weight: 400;
|
|
90
|
+
|
|
91
|
+
&:first-child {
|
|
92
|
+
margin-left: 50px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&:last-child {
|
|
96
|
+
margin-right: 15px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&:not(:first-child):not(:last-child) {
|
|
100
|
+
padding-right: 30px;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&__accordion-label-box {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: space-between;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.accordion-label-box {
|
|
111
|
+
&__label {
|
|
112
|
+
user-select: none;
|
|
113
|
+
}
|
|
114
|
+
&__icon {
|
|
115
|
+
transition: all 0.2s ease-out;
|
|
116
|
+
color: #757f8c;
|
|
117
|
+
margin-right: 5px;
|
|
118
|
+
min-width: 32px;
|
|
119
|
+
max-width: 32px;
|
|
120
|
+
min-height: 16px;
|
|
121
|
+
max-height: 16px;
|
|
122
|
+
|
|
123
|
+
&--open {
|
|
124
|
+
transform: rotate(180deg);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
&__status {
|
|
128
|
+
font-size: 12px;
|
|
129
|
+
font-weight: 400;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.mono-accordion {
|
|
134
|
+
&__head {
|
|
135
|
+
padding: 14.5px;
|
|
136
|
+
box-shadow: 0px 5px 8px rgba(39, 73, 113, 0.12);
|
|
137
|
+
background-color: #ffff;
|
|
138
|
+
position: relative;
|
|
139
|
+
z-index: 2;
|
|
140
|
+
}
|
|
141
|
+
&__container {
|
|
142
|
+
flex-direction: row;
|
|
143
|
+
position: relative;
|
|
144
|
+
background-color: #ffff;
|
|
145
|
+
}
|
|
146
|
+
&__content-wrapper {
|
|
147
|
+
width: 100%;
|
|
148
|
+
padding: 0;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|