@digi-frontend/dgate-api-documentation 1.0.8 → 1.0.10

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.
Files changed (32) hide show
  1. package/dist/node_modules/digitinary-ui/dist/index.js +1 -1
  2. package/dist/node_modules/digitinary-ui/dist/index.js.map +1 -1
  3. package/dist/src/components/InfoForm/InfoForm.js.map +1 -1
  4. package/dist/src/components/JsonInput/JsonInput.js +1 -1
  5. package/dist/src/components/JsonInput/JsonInput.js.map +1 -1
  6. package/dist/src/components/LivePreview/LivePreview.js +1 -1
  7. package/dist/src/components/LivePreview/LivePreview.js.map +1 -1
  8. package/dist/src/components/MethodAccordion/MethodAccordion.js +1 -1
  9. package/dist/src/components/MethodAccordion/MethodAccordion.js.map +1 -1
  10. package/dist/src/components/table/table.js +1 -1
  11. package/dist/src/components/table/table.js.map +1 -1
  12. package/dist/src/constants/index.js.map +1 -1
  13. package/dist/src/helpers/layout.helper.js +1 -1
  14. package/dist/src/helpers/layout.helper.js.map +1 -1
  15. package/dist/src/layout/layout.js +1 -1
  16. package/dist/src/layout/layout.js.map +1 -1
  17. package/dist/src/layout/layout.module.css.js +1 -1
  18. package/dist/styles.css +772 -742
  19. package/dist/types/components/JsonInput/JsonInput.d.ts +2 -1
  20. package/dist/types/components/MethodAccordion/MethodAccordion.d.ts +1 -1
  21. package/package.json +2 -2
  22. package/src/components/InfoForm/InfoForm.tsx +1 -0
  23. package/src/components/JsonInput/JsonInput.tsx +34 -26
  24. package/src/components/JsonInput/style.module.scss +14 -4
  25. package/src/components/LivePreview/LivePreview.tsx +11 -17
  26. package/src/components/MethodAccordion/MethodAccordion.module.scss +54 -23
  27. package/src/components/MethodAccordion/MethodAccordion.tsx +8 -4
  28. package/src/components/table/table.tsx +27 -16
  29. package/src/constants/index.ts +4 -4
  30. package/src/helpers/layout.helper.ts +13 -1
  31. package/src/layout/layout.module.css +1 -1
  32. package/src/layout/layout.tsx +1 -2
package/dist/styles.css CHANGED
@@ -1,784 +1,724 @@
1
- .apiInfoForm {
1
+ .methodAccordion {
2
+ border: none !important;
3
+ box-shadow: none !important;
4
+ margin-bottom: 0 !important;
5
+ }
6
+ .methodAccordion :global(.accordion-header) {
7
+ padding: 0 !important;
8
+ margin: 1.25rem 1.875rem 0 1.875rem !important;
9
+ height: 2.625rem;
10
+ border: none !important;
11
+ background-color: transparent !important;
12
+ }
13
+ .methodAccordion :global(.iconContainer .dropdownIcon) {
14
+ display: none !important;
15
+ }
16
+ .methodAccordion :global(.accordion-details.expanded) {
17
+ border: none !important;
18
+ padding: 0 !important;
19
+ }
20
+ .methodAccordion .methodSummaryContainer {
21
+ display: flex;
22
+ align-items: center;
23
+ gap: 0.9375rem;
24
+ margin-bottom: 1.25rem;
25
+ }
26
+ .methodAccordion .methodSummaryContainer .methodSummary {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 0.3125rem;
30
+ background-color: #f8f9fb;
31
+ width: 100%;
32
+ padding: 0.3125rem;
33
+ border-radius: 0.3125rem;
34
+ font-size: 0.875rem;
35
+ }
36
+ .methodAccordion .methodSummaryContainer .methodSummary .methodLabel {
2
37
  display: grid;
3
- padding: 1.25rem 1.875rem;
38
+ place-content: center;
39
+ width: 5rem;
40
+ height: 2rem;
41
+ color: white;
42
+ border-radius: 0.1875rem;
43
+ text-transform: capitalize;
44
+ }
45
+ .methodAccordion .methodSummaryContainer .methodSummary .methodPath {
46
+ display: block;
47
+ line-height: 1.25rem !important;
48
+ }
49
+ .methodAccordion .methodSummaryContainer .methodExpandArrowContainer {
50
+ display: grid;
51
+ place-content: center;
52
+ width: 2.25rem;
53
+ aspect-ratio: 1/1;
54
+ border-radius: 100%;
55
+ background-color: #f8f9fb;
56
+ margin-left: auto;
57
+ }
58
+ .methodAccordion .methodSummaryContainer .methodExpandArrowContainer.expanded svg {
59
+ rotate: 180deg;
60
+ }
61
+ .methodAccordion .methodSummaryContainer .methodExpandArrowContainer svg {
62
+ transition: rotate 0.3s ease-in-out;
63
+ }
64
+ .methodAccordion .methodAccordionContent {
65
+ display: flex;
66
+ flex-direction: column;
4
67
  gap: 1.25rem;
68
+ padding-inline: 1.875rem;
5
69
  }
6
- .apiInfoForm .paramsTable .paramDescContainer {
70
+ .methodAccordion .methodAccordionContent .methodDesc {
71
+ margin-top: 1.25rem;
72
+ }
73
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer {
7
74
  display: flex;
8
75
  }
9
- .apiInfoForm .paramsTable .paramDescContainer .paramDescContainer_separator {
76
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer .paramDescContainer_separator {
10
77
  height: inherit;
11
78
  width: 1px;
12
79
  background-color: #d8dae5;
13
80
  }
14
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn) svg path {
81
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn) svg path {
15
82
  stroke-width: 0.1;
16
83
  }
17
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
84
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
18
85
  padding: 0;
19
86
  margin-right: 1.25rem;
20
87
  }
21
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
88
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
22
89
  display: flex;
23
90
  align-items: center;
24
91
  padding: 0;
25
92
  color: #12131a;
26
93
  }
27
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
94
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
28
95
  margin-block: auto;
29
96
  }
30
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
97
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
31
98
  fill: #12131a;
32
99
  }
33
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
100
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
34
101
  padding: 0;
35
102
  }
36
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
103
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
37
104
  margin-block: auto;
38
105
  }
39
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
106
+ .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
40
107
  width: 1.125rem;
41
108
  }
42
- .apiInfoForm .paramsTable .editDescTooltipContent {
109
+ .methodAccordion .methodAccordionContent .paramsTable .editDescTooltipContent {
43
110
  display: flex;
44
111
  flex-direction: column;
45
112
  gap: 0.625rem;
46
113
  padding-bottom: 0.625rem;
47
114
  }
48
- .apiInfoForm .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
115
+ .methodAccordion .methodAccordionContent .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
49
116
  margin-inline: 0.625rem;
50
117
  }
51
- .apiInfoForm .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
118
+ .methodAccordion .methodAccordionContent .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
52
119
  font-weight: 600;
53
120
  font-size: 0.875rem;
54
121
  line-height: 1.25rem;
55
122
  padding: 0.75rem 1.25rem;
56
123
  border-bottom: 1px solid #d8dae5;
57
124
  }
58
- .apiInfoForm .paramsTable :global(.requiredParam) :global(.headContainer)::after {
125
+ .methodAccordion .methodAccordionContent .paramsTable :global(.requiredParam) :global(.headContainer)::after {
59
126
  content: "*";
60
127
  color: red;
61
128
  transform: translateX(0.125rem);
62
129
  }
63
- .apiInfoForm .apiDocRow {
64
- display: grid;
65
- grid-template-columns: 1fr 1fr;
66
- gap: 1.25rem;
67
- }
68
- .apiInfoForm .apiInfoForm_tagsChips {
69
- margin-top: -1.25rem;
130
+ .methodAccordion .methodAccordionContent .requestAccordion,
131
+ .methodAccordion .methodAccordionContent .responseAccordion {
132
+ border: 1px solid #babdcc;
133
+ border-radius: 0.3125rem !important;
134
+ box-shadow: none !important;
135
+ margin-bottom: 0 !important;
136
+ cursor: default !important;
70
137
  }
71
- .apiInfoForm .editDescTooltipContent {
138
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-header),
139
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-header) {
72
140
  display: flex;
73
- flex-direction: column;
74
- gap: 0.625rem;
75
- padding-bottom: 0.625rem;
76
- }
77
- .apiInfoForm .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
78
- margin-inline: 0.625rem;
141
+ align-items: center;
142
+ justify-content: space-between;
143
+ margin: 0 !important;
144
+ padding: 0 !important;
145
+ height: 4.0625rem !important;
146
+ border-radius: 0.3125rem !important;
147
+ background-color: white !important;
79
148
  }
80
- .apiInfoForm .editDescTooltipContent .editDescTooltipContent_header {
81
- font-weight: 600;
82
- font-size: 0.875rem;
83
- line-height: 1.25rem;
84
- padding: 0.75rem 1.25rem;
85
- border-bottom: 1px solid #d8dae5;
149
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-details.expanded),
150
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-details.expanded) {
151
+ border-top: 1px solid #babdcc !important;
152
+ padding: 1.25rem !important;
153
+ padding: 0 !important;
86
154
  }
87
- .apiInfoForm :global(.requiredParam) :global(.headContainer)::after {
88
- content: "*";
89
- color: red;
90
- transform: translateX(0.125rem);
91
- }:root {
92
- --white: #fff;
93
- --Gray-5: #f1f2f6;
94
- --Gray-10: #ebecf2;
95
- --Gray-20: #d8dae5;
96
- --Gray-30: #babdcc;
97
- --Gray-40: #9a9eb2;
98
- --Gray-50: #828699;
99
- --Gray-60: #696c80;
100
- --Gray-100: #12131a;
101
- --black: #000;
102
- --primary-static: #4d75d8;
103
- --primary-hover: #7c9bea;
104
- --primary-active: #2c4fa4;
105
- --primary-disabled: #9a9eb2;
106
- --secondary-static: #40e0d0;
107
- --secondary-hover: #9efcf2;
108
- --secondary-active: #2fa599;
109
- --error-static: #da3f3f;
110
- --error-hover: #e75d5d;
111
- --error-active: #bb3232;
112
- --success-static: #3aaa35;
113
- --success-hover: #5cda56;
114
- --success-active: #2a8a25;
115
- --info-static: #c6c6c6;
116
- --info-hover: #e4e4e4;
117
- --info-active: #979797;
118
- --warning-static: #faad14;
119
- --warning-hover: #f9be4a;
120
- --warning-active: #db9711;
121
- --action-static: #142452;
122
- --action-hover: #21387d;
123
- --action-active: #000000;
124
- --color-info-primary: #3a6cd1;
125
- --primary-font-color: #142452;
126
- --placeholder-font-color: #babdcc;
127
- --warning-font-color: #ce2828;
128
- --alert-error: #da3f3f;
129
- --alert-light-error: #f4c5c5;
130
- --alert-success: #3aaa35;
131
- --alert-light-success: #c4e5c2;
132
- --alert-info: #8eaaf1;
133
- --alert-light-info: #c4d3f1;
134
- --alert-warning: #faad14;
135
- --alert-light-warning: #fde6b8;
136
- --border-focus: #3a6cd1;
137
- --tooltip-background-color: #202f5b;
138
- --text-color-primary: #142452;
139
- --text-color-secondary: #ffff;
140
- --text-color-neutral: #828699;
141
- --text-color-tertiary: #808080;
142
- --text-color-note: #242424;
143
- --text-color-quaternary: #142452;
144
- --text-color-disabled: #ffff;
145
- --background-color-white-primary: #fff;
146
- --background-color-light-primary: #8eaaf1;
147
- --background-color-white-secondary: #fff;
148
- --background-color-primary-dark: #142452;
149
- --background-color-gray-5: #f1f2f6;
150
- --background-color-gray-30: #ebecf2;
151
- --background-color-tertiary-light: #2c4fa4;
152
- --background-color-gray-10: #f1f2f6;
153
- --background-color-gray-40: #ebecf2;
154
- --background-color-light-blue: #dfe7f8;
155
- --border-color-primary: #babdcc;
156
- --border-color-secondary: #d8dae5;
157
- --border-color-neutral: #ebecf2;
158
- --border-color-tertiary: #ebecf2;
159
- --border-color-gray: #ebecf2;
160
- --border-color-hover: #142452;
161
- --border-color-active: #3a6cd1;
162
- --icon-color-main: #142452;
163
- --icon-color-secondary: #000;
164
- --icon-color-quaternary: #babdcc;
165
- --icon-color-disabled: #9a9eb2;
166
- --link-btn-primary-color: #3a6cd1;
167
- --button-color-static: #4d75d8;
168
- --button-color-hover: #7c9bea;
169
- --button-color-active: #2c4fa4;
170
- --alert-natural: #c4d3f1;
155
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea,
156
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea {
157
+ border-top-right-radius: 0;
158
+ border-top-left-radius: 0;
159
+ height: 10rem;
171
160
  }
172
-
173
- .tableSectionContainer .tableContainer {
174
- max-width: 100%;
175
- overflow-x: overlay;
161
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea),
162
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea) {
163
+ display: flex;
176
164
  }
177
- .tableSectionContainer .tableContainer.tableContainer * {
178
- font-family: "Cairo";
165
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField),
166
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
167
+ height: 100%;
168
+ padding: 1.25rem;
179
169
  }
180
- .tableSectionContainer .tableContainer .table {
170
+ .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary,
171
+ .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary,
172
+ .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary,
173
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary {
181
174
  width: 100%;
182
- border-spacing: 0;
183
- border: none;
184
- border-right: 1px solid var(--border-color-neutral);
185
- border-left: 1px solid var(--border-color-neutral);
186
- }
187
- .tableSectionContainer .tableContainer .table.borderRadiusTop {
188
- border-top-left-radius: 0.625rem;
189
- border-top-right-radius: 0.625rem;
175
+ display: flex;
176
+ justify-content: space-between;
177
+ font-weight: 700;
178
+ font-size: 1.125rem;
179
+ line-height: 1.5rem;
180
+ display: flex;
181
+ align-items: center;
182
+ cursor: default !important;
183
+ margin-inline: 0.625rem 1.25rem;
190
184
  }
191
- .tableSectionContainer .tableContainer .table.borderRadiusBottom {
192
- border-bottom-left-radius: 0.625rem;
193
- border-bottom-right-radius: 0.625rem;
185
+ .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary_title,
186
+ .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary_title,
187
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary_title,
188
+ .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary_title {
189
+ display: flex;
190
+ align-items: center;
191
+ cursor: pointer;
194
192
  }
195
- .tableSectionContainer .tableContainer .table .tableHead {
196
- border: 1px solid var(--Gray-10);
197
- margin: 0rem !important;
198
- background-color: var(--background-color-header);
199
- width: max-content;
200
- min-width: 100%;
201
- color: var(--Gray-50);
202
- font-weight: 400;
193
+ .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary_title svg,
194
+ .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary_title svg,
195
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary_title svg,
196
+ .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary_title svg {
197
+ transition: rotate 0.2s ease-in-out;
203
198
  }
204
- .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell {
205
- border-bottom: 1px solid var(--border-color-neutral);
206
- border-top: 1px solid var(--border-color-neutral);
207
- font-style: normal;
208
- font-size: 0.875rem;
209
- padding: 0.75rem 1.875rem;
210
- text-align: start;
211
- white-space: nowrap;
212
- color: inherit;
213
- font-weight: inherit;
199
+ .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary_title .expanded,
200
+ .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary_title .expanded,
201
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary_title .expanded,
202
+ .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary_title .expanded {
203
+ rotate: 180deg;
214
204
  }
215
- .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell .sortIcon {
216
- padding: 0rem 0.25rem;
217
- height: 1.875rem;
218
- cursor: pointer;
205
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-details) :global(.textArea .inputField),
206
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-details) :global(.textArea .inputField) {
207
+ padding: 0;
208
+ border: none;
219
209
  }
220
- .tableSectionContainer .tableContainer .table .tableHead .headContainer {
210
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-header .iconContainer .dropdownIcon),
211
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-header .iconContainer .dropdownIcon) {
212
+ display: none !important;
213
+ }
214
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.accordion-header),
215
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-header) {
216
+ cursor: default;
217
+ }
218
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary {
221
219
  display: flex;
222
- flex-direction: row;
223
220
  align-items: center;
224
- text-overflow: ellipsis;
225
221
  }
226
- .tableSectionContainer .tableContainer .table .tableBody tr {
227
- background-color: var(--background-color-white-secondary);
228
- overflow: visible !important;
222
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary :global(.multiSelectGroup .optionsList) {
223
+ width: 8rem !important;
224
+ min-width: 8rem !important;
229
225
  }
230
- .tableSectionContainer .tableContainer .table .tableBody tr .tippy-content {
231
- background-color: var(--border-color-hover);
232
- color: var(--text-color-disabled);
233
- border-radius: 5px;
234
- font-size: 14px;
235
- font-weight: 400;
236
- line-height: 20px;
237
- text-align: left;
226
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) {
227
+ width: 8rem;
228
+ margin-left: auto;
238
229
  }
239
- .tableSectionContainer .tableContainer .table .tableBody tr .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
240
- color: var(--border-color-hover);
230
+ .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) :global(.selectDisplay) {
231
+ height: 2.0625rem !important;
232
+ min-height: 2.0625rem !important;
233
+ padding: 0;
234
+ padding-left: 0.625rem;
241
235
  }
242
- .tableSectionContainer .tableContainer .table .tableBody tr.rowSelected {
243
- background-color: var(--background-color-gray-40);
236
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.accordion-header) {
237
+ overflow: visible;
238
+ cursor: default;
244
239
  }
245
- .tableSectionContainer .tableContainer .table .tableBody tr td {
246
- font-weight: 400;
247
- font-size: 0.875rem;
248
- text-align: start;
249
- color: var(--text-color-primary);
250
- border-bottom: 1px solid var(--border-color-gray);
251
- width: max-content;
252
- white-space: nowrap;
253
- height: 3.75rem;
254
- padding: 0.75rem 1.875rem;
255
- overflow: visible !important;
240
+ .methodAccordion .methodAccordionContent .responseAccordion .statusCodeOptionContainer {
241
+ display: grid;
242
+ grid-template-columns: min-content min-content;
243
+ align-items: center;
244
+ gap: 0.625rem;
256
245
  }
257
- .tableSectionContainer .tableContainer .table .tableBody tr td .tableData {
258
- max-width: 100%;
259
- width: fit-content;
260
- white-space: nowrap;
261
- text-overflow: ellipsis;
262
- overflow: visible !important;
246
+ .methodAccordion .methodAccordionContent .responseAccordion .statusCodeOptionContainer .statusCodeOptionCircle {
247
+ width: 0.625rem;
248
+ aspect-ratio: 1/1;
249
+ border-radius: 100%;
263
250
  }
264
- .tableSectionContainer .tableContainer .table .tableBody tr:hover {
265
- background-color: var(--background-color-gray-10);
251
+ .methodAccordion.readOnly .methodAccordionContent {
252
+ padding: 0;
266
253
  }
267
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow {
268
- background-color: var(--background-color-white-secondary);
269
- height: 4.375rem;
254
+ .methodAccordion.readOnly :global(.accordion-header) {
255
+ margin: 1.25rem 0 0 0 !important;
270
256
  }
271
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow:hover {
272
- background-color: var(--background-color-white-secondary);
257
+ .methodAccordion.readOnly :global(.accordion-details) {
258
+ background-color: transparent !important;
273
259
  }
274
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer {
260
+ .methodAccordion.readOnly .methodSummaryContainer .methodSummary {
261
+ background-color: #ebecf2;
262
+ }
263
+ .methodAccordion.readOnly .methodSummaryContainer .methodExpandArrowContainer {
264
+ background-color: #ebecf2;
265
+ }p.apiName {
266
+ font-size: 40px;
267
+ line-height: 30px;
268
+ font-weight: 500;
269
+ }.json-editor-container {
270
+ overflow: hidden;
271
+ border-bottom-right-radius: 0.3125rem;
272
+ border-bottom-left-radius: 0.3125rem;
273
+ }
274
+ .json-editor-container .json-editor-label {
275
+ font-size: 0.875rem;
276
+ font-weight: 600;
277
+ line-height: 1.25rem;
278
+ margin-bottom: 0.3125rem;
279
+ }
280
+ .json-editor-container .json-editor {
281
+ display: flex;
282
+ flex-direction: column;
283
+ background-color: #142452;
275
284
  width: 100%;
276
- height: 100%;
277
- color: var(--text-color-quaternary);
285
+ outline: 1px solid transparent;
286
+ position: relative;
287
+ overflow: hidden;
278
288
  }
279
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer {
289
+ .json-editor-container .json-editor .actions-container {
290
+ width: 100%;
291
+ height: 5rem;
292
+ padding: 1.25rem;
293
+ border-radius: 0 0 0.3125rem 0.3125rem;
294
+ background: #101e47;
280
295
  display: flex;
281
296
  flex-direction: row;
297
+ gap: 1.25rem;
282
298
  align-items: center;
283
- justify-content: center;
284
- width: 100%;
285
- height: 100%;
286
299
  }
287
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer .fallbackText {
300
+ .json-editor-container .json-editor .actions-container .validate {
301
+ color: #fff;
302
+ text-align: center;
303
+ font-size: 1rem;
288
304
  font-style: normal;
289
- font-weight: 400;
290
- font-size: 0.875rem;
305
+ font-weight: 600;
291
306
  line-height: 1.25rem;
307
+ width: 8.75rem;
308
+ padding: 0.625rem 2.25rem;
309
+ background-color: rgba(240, 248, 255, 0);
310
+ border-radius: 0.3125rem;
311
+ border: 0.0625rem solid #4d75d8;
312
+ cursor: pointer;
292
313
  }
293
- .tableSectionContainer .tableContainer .table th,
294
- .tableSectionContainer .tableContainer .table td {
295
- text-align: left;
296
- }
297
- .tableSectionContainer .tableFooterContainer {
298
- display: flex;
299
- width: 100%;
300
- height: auto;
314
+ .json-editor-container .json-editor .actions-container .validate:disabled {
315
+ color: #babdcc;
316
+ border-color: #a2a5b6;
301
317
  }
302
- .tableSectionContainer .ascArrow {
303
- height: 0.8125rem;
304
- margin-bottom: 0.4375rem;
318
+ .json-editor-container .json-editor .actions-container .beautify {
319
+ color: #fff;
320
+ text-align: center;
321
+ font-size: 1rem;
322
+ font-style: normal;
323
+ font-weight: 600;
324
+ line-height: 1.25rem;
325
+ width: 8.75rem;
326
+ padding: 0.625rem 2.25rem;
327
+ background-color: rgba(240, 248, 255, 0);
328
+ border-radius: 0.3125rem;
329
+ border: 1px solid #babdcc;
305
330
  cursor: pointer;
306
331
  }
307
- .tableSectionContainer .descArrow {
308
- height: 0.8125rem;
309
- margin-top: 0.4375rem;
310
- cursor: pointer;
332
+ .json-editor-container .json-editor .actions-container .beautify:disabled {
333
+ color: #a2a5b6;
334
+ border-color: #a2a5b6;
311
335
  }
312
- .tableSectionContainer .defaultSortArrow {
313
- height: 1.25rem;
314
- cursor: pointer;
336
+ .json-editor-container .json-editor textarea {
337
+ width: 100%;
338
+ padding: 1.25rem;
339
+ font-size: 0.875rem;
340
+ font-style: normal;
341
+ font-weight: 400;
342
+ line-height: 1.25rem;
343
+ color: white;
344
+ height: 25rem;
345
+ background-color: #142452;
346
+ border: none;
347
+ resize: none;
315
348
  }
316
- .tableSectionContainer .ascArrow path,
317
- .tableSectionContainer .descArrow path,
318
- .tableSectionContainer .defaultSortArrow path {
319
- fill: var(--Gray-50);
320
- }.methodAccordion {
321
- border: none !important;
322
- box-shadow: none !important;
323
- margin-bottom: 0 !important;
349
+ .json-editor-container .json-editor textarea:focus, .json-editor-container .json-editor textarea:focus-within, .json-editor-container .json-editor textarea:focus-visible .json-editor-container .json-editor textarea:active {
350
+ outline: none;
351
+ border: none;
324
352
  }
325
- .methodAccordion :global(.summary) {
326
- padding: 0 !important;
327
- margin: 1.25rem 1.875rem 0 1.875rem !important;
328
- height: 2.625rem;
353
+ .json-editor-container .json-editor textarea::-webkit-scrollbar {
354
+ width: 0.5rem;
329
355
  }
330
- .methodAccordion :global(.iconContainer .dropdownIcon) {
331
- display: none !important;
356
+ .json-editor-container .json-editor textarea::-webkit-scrollbar-track {
357
+ background-color: #828699;
358
+ border: none;
359
+ border-color: transparent;
360
+ border-top-left-radius: 0;
332
361
  }
333
- .methodAccordion :global(.details.show) {
334
- border: none !important;
335
- padding: 0 !important;
362
+ .json-editor-container .json-editor textarea::-webkit-scrollbar-thumb {
363
+ background-color: #d8dae5;
364
+ border: none;
365
+ border-color: transparent;
366
+ border-radius: 0;
336
367
  }
337
- .methodAccordion .methodSummaryContainer {
338
- display: flex;
339
- align-items: center;
340
- gap: 0.9375rem;
341
- margin-bottom: 1.25rem;
368
+ .json-editor-container .json-editor.invalid {
369
+ outline: 1px solid #ce2828 !important;
342
370
  }
343
- .methodAccordion .methodSummaryContainer .methodSummary {
344
- display: flex;
345
- gap: 0.3125rem;
346
- background-color: #f8f9fb;
347
- width: 100%;
348
- padding: 0.3125rem;
349
- border-radius: 0.3125rem;
371
+ .json-editor-container .error-message {
372
+ color: #ce2828;
373
+ font-size: 0.75rem;
374
+ line-height: 1.25rem;
375
+ margin-top: 0.625rem;
350
376
  }
351
- .methodAccordion .methodSummaryContainer .methodSummary .methodLabel {
377
+ .json-editor-container.disabled .json-editor textarea {
378
+ background-color: white;
379
+ color: #12131a;
380
+ }.apiInfoForm {
352
381
  display: grid;
353
- place-content: center;
354
- width: 5rem;
355
- height: 2rem;
356
- color: white;
357
- border-radius: 0.1875rem;
358
- text-transform: capitalize;
382
+ padding: 1.25rem 1.875rem;
383
+ gap: 1.25rem;
359
384
  }
360
- .methodAccordion .methodSummaryContainer .methodExpandArrowContainer {
361
- display: grid;
362
- place-content: center;
363
- width: 2.25rem;
364
- aspect-ratio: 1/1;
365
- border-radius: 100%;
366
- background-color: #f8f9fb;
367
- margin-left: auto;
368
- }
369
- .methodAccordion .methodSummaryContainer .methodExpandArrowContainer.expanded svg {
370
- rotate: 180deg;
371
- }
372
- .methodAccordion .methodSummaryContainer .methodExpandArrowContainer svg {
373
- transition: rotate 0.3s ease-in-out;
374
- }
375
- .methodAccordion .methodAccordionContent {
376
- display: flex;
377
- flex-direction: column;
378
- gap: 1.25rem;
379
- padding-inline: 1.875rem;
380
- }
381
- .methodAccordion .methodAccordionContent .divTest {
382
- background-color: red;
383
- height: 40px;
384
- width: 15px;
385
- }
386
- .methodAccordion .methodAccordionContent .divTest:focus {
387
- background-color: black;
388
- }
389
- .methodAccordion .methodAccordionContent .methodDesc {
390
- margin-top: 1.25rem;
391
- }
392
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer {
385
+ .apiInfoForm .paramsTable .paramDescContainer {
393
386
  display: flex;
394
387
  }
395
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer .paramDescContainer_separator {
388
+ .apiInfoForm .paramsTable .paramDescContainer .paramDescContainer_separator {
396
389
  height: inherit;
397
390
  width: 1px;
398
391
  background-color: #d8dae5;
399
392
  }
400
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn) svg path {
393
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn) svg path {
401
394
  stroke-width: 0.1;
402
395
  }
403
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
396
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
404
397
  padding: 0;
405
398
  margin-right: 1.25rem;
406
399
  }
407
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
400
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
408
401
  display: flex;
409
402
  align-items: center;
410
403
  padding: 0;
411
404
  color: #12131a;
412
405
  }
413
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
406
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
414
407
  margin-block: auto;
415
408
  }
416
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
409
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
417
410
  fill: #12131a;
418
411
  }
419
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
412
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
420
413
  padding: 0;
421
414
  }
422
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
415
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
423
416
  margin-block: auto;
424
417
  }
425
- .methodAccordion .methodAccordionContent .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
418
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
426
419
  width: 1.125rem;
427
420
  }
428
- .methodAccordion .methodAccordionContent .paramsTable .editDescTooltipContent {
421
+ .apiInfoForm .paramsTable .editDescTooltipContent {
429
422
  display: flex;
430
423
  flex-direction: column;
431
424
  gap: 0.625rem;
432
425
  padding-bottom: 0.625rem;
433
426
  }
434
- .methodAccordion .methodAccordionContent .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
427
+ .apiInfoForm .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
435
428
  margin-inline: 0.625rem;
436
429
  }
437
- .methodAccordion .methodAccordionContent .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
430
+ .apiInfoForm .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
438
431
  font-weight: 600;
439
432
  font-size: 0.875rem;
440
433
  line-height: 1.25rem;
441
434
  padding: 0.75rem 1.25rem;
442
435
  border-bottom: 1px solid #d8dae5;
443
436
  }
444
- .methodAccordion .methodAccordionContent .paramsTable :global(.requiredParam) :global(.headContainer)::after {
437
+ .apiInfoForm .paramsTable :global(.requiredParam) :global(.headContainer)::after {
445
438
  content: "*";
446
439
  color: red;
447
440
  transform: translateX(0.125rem);
448
441
  }
449
- .methodAccordion .methodAccordionContent .requestAccordion,
450
- .methodAccordion .methodAccordionContent .responseAccordion {
451
- border-top: 1px solid #babdcc;
452
- border-radius: 0.3125rem !important;
453
- box-shadow: none !important;
454
- margin-bottom: 0 !important;
455
- cursor: default !important;
456
- }
457
- .methodAccordion .methodAccordionContent .requestAccordion :global(.summary),
458
- .methodAccordion .methodAccordionContent .responseAccordion :global(.summary) {
459
- margin: 0 !important;
460
- padding: 1rem !important;
461
- height: auto !important;
462
- }
463
- .methodAccordion .methodAccordionContent .requestAccordion :global(.details.show),
464
- .methodAccordion .methodAccordionContent .responseAccordion :global(.details.show) {
465
- border-top: 1px solid #babdcc !important;
466
- padding: 1.25rem !important;
467
- padding: 0 !important;
442
+ .apiInfoForm .apiDocRow {
443
+ display: grid;
444
+ grid-template-columns: 1fr 1fr;
445
+ gap: 1.25rem;
468
446
  }
469
- .methodAccordion .methodAccordionContent .requestAccordion :global(.details.show) :global(.jsonField) div textarea,
470
- .methodAccordion .methodAccordionContent .responseAccordion :global(.details.show) :global(.jsonField) div textarea {
471
- border-top-right-radius: 0;
472
- border-top-left-radius: 0;
473
- height: 10rem;
447
+ .apiInfoForm .apiInfoForm_tagsChips {
448
+ margin-top: -1.25rem;
474
449
  }
475
- .methodAccordion .methodAccordionContent .requestAccordion :global(.details.show .textArea .containerTextArea),
476
- .methodAccordion .methodAccordionContent .responseAccordion :global(.details.show .textArea .containerTextArea) {
450
+ .apiInfoForm .editDescTooltipContent {
477
451
  display: flex;
452
+ flex-direction: column;
453
+ gap: 0.625rem;
454
+ padding-bottom: 0.625rem;
478
455
  }
479
- .methodAccordion .methodAccordionContent .requestAccordion :global(.details.show .textArea .containerTextArea .inputField),
480
- .methodAccordion .methodAccordionContent .responseAccordion :global(.details.show .textArea .containerTextArea .inputField) {
481
- height: 100%;
482
- padding: 1.25rem;
456
+ .apiInfoForm .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
457
+ margin-inline: 0.625rem;
483
458
  }
484
- .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary,
485
- .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary,
486
- .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary,
487
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary {
488
- font-weight: 700;
489
- font-size: 1.125rem;
490
- line-height: 1.5rem;
491
- display: flex;
492
- align-items: center;
493
- cursor: default !important;
459
+ .apiInfoForm .editDescTooltipContent .editDescTooltipContent_header {
460
+ font-weight: 600;
461
+ font-size: 0.875rem;
462
+ line-height: 1.25rem;
463
+ padding: 0.75rem 1.25rem;
464
+ border-bottom: 1px solid #d8dae5;
494
465
  }
495
- .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary_title,
496
- .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary_title,
497
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary_title,
498
- .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary_title {
466
+ .apiInfoForm :global(.requiredParam) :global(.headContainer)::after {
467
+ content: "*";
468
+ color: red;
469
+ transform: translateX(0.125rem);
470
+ }.containerTitleDrawer {
471
+ height: 64px;
472
+ min-height: 64px;
499
473
  display: flex;
474
+ flex-direction: row;
475
+ justify-content: space-between;
500
476
  align-items: center;
501
- cursor: pointer;
477
+ background-color: #f1f2f6;
478
+ padding: 0 30px 0 30px;
479
+ width: 100%;
502
480
  }
503
- .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary_title svg,
504
- .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary_title svg,
505
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary_title svg,
506
- .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary_title svg {
507
- transition: rotate 0.2s ease-in-out;
481
+ .containerTitleDrawer span {
482
+ color: #12131a;
483
+ font-weight: 600;
484
+ font-size: 18px;
485
+ line-height: 25px;
486
+ letter-spacing: 0em;
508
487
  }
509
- .methodAccordion .methodAccordionContent .requestAccordion .responseAccordionSummary_title .expanded,
510
- .methodAccordion .methodAccordionContent .requestAccordion .requestAccordionSummary_title .expanded,
511
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary_title .expanded,
512
- .methodAccordion .methodAccordionContent .responseAccordion .requestAccordionSummary_title .expanded {
513
- rotate: 180deg;
488
+ .containerTitleDrawer svg path {
489
+ stroke: #000 !important;
514
490
  }
515
- .methodAccordion .methodAccordionContent .requestAccordion :global(.details) :global(.textArea .inputField),
516
- .methodAccordion .methodAccordionContent .responseAccordion :global(.details) :global(.textArea .inputField) {
517
- padding: 0;
518
- border: none;
491
+ .containerTitleDrawer .closeIcon {
492
+ cursor: pointer;
493
+ }:root {
494
+ --white: #fff;
495
+ --Gray-5: #f1f2f6;
496
+ --Gray-10: #ebecf2;
497
+ --Gray-20: #d8dae5;
498
+ --Gray-30: #babdcc;
499
+ --Gray-40: #9a9eb2;
500
+ --Gray-50: #828699;
501
+ --Gray-60: #696c80;
502
+ --Gray-100: #12131a;
503
+ --black: #000;
504
+ --primary-static: #4d75d8;
505
+ --primary-hover: #7c9bea;
506
+ --primary-active: #2c4fa4;
507
+ --primary-disabled: #9a9eb2;
508
+ --secondary-static: #40e0d0;
509
+ --secondary-hover: #9efcf2;
510
+ --secondary-active: #2fa599;
511
+ --error-static: #da3f3f;
512
+ --error-hover: #e75d5d;
513
+ --error-active: #bb3232;
514
+ --success-static: #3aaa35;
515
+ --success-hover: #5cda56;
516
+ --success-active: #2a8a25;
517
+ --info-static: #c6c6c6;
518
+ --info-hover: #e4e4e4;
519
+ --info-active: #979797;
520
+ --warning-static: #faad14;
521
+ --warning-hover: #f9be4a;
522
+ --warning-active: #db9711;
523
+ --action-static: #142452;
524
+ --action-hover: #21387d;
525
+ --action-active: #000000;
526
+ --color-info-primary: #3a6cd1;
527
+ --primary-font-color: #142452;
528
+ --placeholder-font-color: #babdcc;
529
+ --warning-font-color: #ce2828;
530
+ --alert-error: #da3f3f;
531
+ --alert-light-error: #f4c5c5;
532
+ --alert-success: #3aaa35;
533
+ --alert-light-success: #c4e5c2;
534
+ --alert-info: #8eaaf1;
535
+ --alert-light-info: #c4d3f1;
536
+ --alert-warning: #faad14;
537
+ --alert-light-warning: #fde6b8;
538
+ --border-focus: #3a6cd1;
539
+ --tooltip-background-color: #202f5b;
540
+ --text-color-primary: #142452;
541
+ --text-color-secondary: #ffff;
542
+ --text-color-neutral: #828699;
543
+ --text-color-tertiary: #808080;
544
+ --text-color-note: #242424;
545
+ --text-color-quaternary: #142452;
546
+ --text-color-disabled: #ffff;
547
+ --background-color-white-primary: #fff;
548
+ --background-color-light-primary: #8eaaf1;
549
+ --background-color-white-secondary: #fff;
550
+ --background-color-primary-dark: #142452;
551
+ --background-color-gray-5: #f1f2f6;
552
+ --background-color-gray-30: #ebecf2;
553
+ --background-color-tertiary-light: #2c4fa4;
554
+ --background-color-gray-10: #f1f2f6;
555
+ --background-color-gray-40: #ebecf2;
556
+ --background-color-light-blue: #dfe7f8;
557
+ --border-color-primary: #babdcc;
558
+ --border-color-secondary: #d8dae5;
559
+ --border-color-neutral: #ebecf2;
560
+ --border-color-tertiary: #ebecf2;
561
+ --border-color-gray: #ebecf2;
562
+ --border-color-hover: #142452;
563
+ --border-color-active: #3a6cd1;
564
+ --icon-color-main: #142452;
565
+ --icon-color-secondary: #000;
566
+ --icon-color-quaternary: #babdcc;
567
+ --icon-color-disabled: #9a9eb2;
568
+ --link-btn-primary-color: #3a6cd1;
569
+ --button-color-static: #4d75d8;
570
+ --button-color-hover: #7c9bea;
571
+ --button-color-active: #2c4fa4;
572
+ --alert-natural: #c4d3f1;
519
573
  }
520
- .methodAccordion .methodAccordionContent .requestAccordion :global(.summary .iconContainer .dropdownIcon),
521
- .methodAccordion .methodAccordionContent .responseAccordion :global(.summary .iconContainer .dropdownIcon) {
522
- display: none !important;
574
+
575
+ .tableSectionContainer .tableContainer {
576
+ max-width: 100%;
577
+ overflow-x: overlay;
523
578
  }
524
- .methodAccordion .methodAccordionContent .requestAccordion :global(.summary),
525
- .methodAccordion .methodAccordionContent .responseAccordion :global(.summary) {
526
- cursor: default;
579
+ .tableSectionContainer .tableContainer.tableContainer * {
580
+ font-family: "Cairo";
527
581
  }
528
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary {
529
- display: flex;
530
- align-items: center;
582
+ .tableSectionContainer .tableContainer .table {
583
+ width: 100%;
584
+ border-spacing: 0;
585
+ border: none;
586
+ border-right: 1px solid var(--border-color-neutral);
587
+ border-left: 1px solid var(--border-color-neutral);
531
588
  }
532
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary :global(.multiSelectGroup .optionsList) {
533
- width: 8rem !important;
534
- min-width: 8rem !important;
589
+ .tableSectionContainer .tableContainer .table.borderRadiusTop {
590
+ border-top-left-radius: 0.625rem;
591
+ border-top-right-radius: 0.625rem;
535
592
  }
536
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) {
537
- width: 8rem;
538
- margin-left: auto;
593
+ .tableSectionContainer .tableContainer .table.borderRadiusBottom {
594
+ border-bottom-left-radius: 0.625rem;
595
+ border-bottom-right-radius: 0.625rem;
539
596
  }
540
- .methodAccordion .methodAccordionContent .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) :global(.selectDisplay) {
541
- height: 2.0625rem !important;
542
- min-height: 2.0625rem !important;
543
- padding: 0;
544
- padding-left: 0.625rem;
597
+ .tableSectionContainer .tableContainer .table .tableHead {
598
+ border: 1px solid var(--Gray-10);
599
+ margin: 0rem !important;
600
+ background-color: var(--background-color-header);
601
+ width: max-content;
602
+ min-width: 100%;
603
+ color: var(--Gray-50);
604
+ font-weight: 400;
545
605
  }
546
- .methodAccordion .methodAccordionContent .responseAccordion :global(.summary) {
547
- overflow: visible;
548
- cursor: default;
606
+ .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell {
607
+ border-bottom: 1px solid var(--border-color-neutral);
608
+ border-top: 1px solid var(--border-color-neutral);
609
+ font-style: normal;
610
+ font-size: 0.875rem;
611
+ padding: 0.75rem 1.875rem;
612
+ text-align: start;
613
+ white-space: nowrap;
614
+ color: inherit;
615
+ font-weight: inherit;
549
616
  }
550
- .methodAccordion .methodAccordionContent .responseAccordion .statusCodeOptionContainer {
551
- display: grid;
552
- grid-template-columns: min-content min-content;
553
- align-items: center;
554
- gap: 0.625rem;
617
+ .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell .sortIcon {
618
+ padding: 0rem 0.25rem;
619
+ height: 1.875rem;
620
+ cursor: pointer;
555
621
  }
556
- .methodAccordion .methodAccordionContent .responseAccordion .statusCodeOptionContainer .statusCodeOptionCircle {
557
- width: 0.625rem;
558
- aspect-ratio: 1/1;
559
- border-radius: 100%;
560
- }p.apiName {
561
- font-size: 40px;
562
- line-height: 30px;
563
- font-weight: 500;
564
- }.tooltip-custom-wrapper {
622
+ .tableSectionContainer .tableContainer .table .tableHead .headContainer {
565
623
  display: flex;
624
+ flex-direction: row;
625
+ align-items: center;
626
+ text-overflow: ellipsis;
566
627
  }
567
-
568
- .tippy-box {
569
- background-color: #202f5b;
570
- font-size: 0.875rem;
571
- border-radius: 0.3125rem;
572
- width: max-content;
573
- max-width: 100%;
574
- overflow-wrap: break-word;
575
- word-break: break-word;
576
- position: relative;
577
- border: 1px solid #d8dae5;
578
- }
579
- .tippy-box.function .tippy-content {
580
- background-color: #fff !important;
581
- color: #000 !important;
628
+ .tableSectionContainer .tableContainer .table .tableBody tr {
629
+ background-color: var(--background-color-white-secondary);
630
+ overflow: visible !important;
582
631
  }
583
- .tippy-box[data-placement] > .tippy-arrow:before {
584
- color: #fff !important;
632
+ .tableSectionContainer .tableContainer .table .tableBody tr .tippy-content {
633
+ background-color: var(--border-color-hover);
634
+ color: var(--text-color-disabled);
635
+ border-radius: 5px;
636
+ font-size: 14px;
637
+ font-weight: 400;
638
+ line-height: 20px;
639
+ text-align: left;
585
640
  }
586
- .tippy-box.info .tippy-arrow {
587
- color: #202f5b;
641
+ .tableSectionContainer .tableContainer .table .tableBody tr .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
642
+ color: var(--border-color-hover);
588
643
  }
589
- .tippy-box.success {
590
- border-radius: 1.875rem;
591
- background-color: #3aaa35;
592
- padding-inline: 0.625rem;
644
+ .tableSectionContainer .tableContainer .table .tableBody tr.rowSelected {
645
+ background-color: var(--background-color-gray-40);
593
646
  }
594
- .tippy-box .tippy-content {
595
- text-align: justify;
647
+ .tableSectionContainer .tableContainer .table .tableBody tr td {
648
+ font-weight: 400;
596
649
  font-size: 0.875rem;
597
- line-height: 1.25rem;
598
- padding: 0.625rem;
599
- }
600
- .tippy-box .tippy-arrow {
601
- position: relative;
602
- width: 1rem;
603
- height: 1rem;
604
- }
605
- .tippy-box[data-placement^=top] .tippy-arrow:before {
606
- bottom: -0.4375rem;
607
- border-width: 0.5rem 0.5rem 0 !important;
608
- }
609
- .tippy-box[data-placement^=right] .tippy-arrow:before {
610
- left: -0.4375rem;
611
- border-width: 0.5rem 0.5rem 0.5rem 0 !important;
612
- }
613
- .tippy-box[data-placement^=bottom] .tippy-arrow:before {
614
- top: -0.4375rem;
615
- border-width: 0 0.5rem 0.5rem !important;
616
- }
617
- .tippy-box[data-placement^=left] .tippy-arrow:before {
618
- right: -0.4375rem;
619
- border-width: 0.5rem 0 0.5rem 0.5rem !important;
620
- }
621
- .tippy-box[data-placement^=bottom-start] .tippy-arrow {
622
- transform: translate(0.937rem, 0) !important;
650
+ text-align: start;
651
+ color: var(--text-color-primary);
652
+ border-bottom: 1px solid var(--border-color-gray);
653
+ width: max-content;
654
+ white-space: nowrap;
655
+ height: 3.75rem;
656
+ padding: 0.75rem 1.875rem;
657
+ overflow: visible !important;
623
658
  }
624
- .tippy-box[data-placement^=bottom-end] .tippy-arrow {
625
- margin-left: calc(100% - 1.937rem);
626
- transform: translate(0, 0) !important;
659
+ .tableSectionContainer .tableContainer .table .tableBody tr td .tableData {
660
+ max-width: 100%;
661
+ width: fit-content;
662
+ white-space: nowrap;
663
+ text-overflow: ellipsis;
664
+ overflow: visible !important;
627
665
  }
628
- .tippy-box[data-placement^=top-start] .tippy-arrow {
629
- transform: translate(0.937rem, 0) !important;
666
+ .tableSectionContainer .tableContainer .table .tableBody tr:hover {
667
+ background-color: var(--background-color-gray-10);
630
668
  }
631
- .tippy-box[data-placement^=top-end] .tippy-arrow {
632
- transform: translate(0.937rem, 0) !important;
669
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow {
670
+ background-color: var(--background-color-white-secondary);
671
+ height: 4.375rem;
633
672
  }
634
- .tippy-box.arrow-with-border {
635
- border: 1px solid #d8dae5;
673
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow:hover {
674
+ background-color: var(--background-color-white-secondary);
636
675
  }
637
- .tippy-box.arrow-with-border[data-placement] .tippy-arrow {
638
- top: 1px;
639
- background-color: white;
640
- z-index: 9999;
641
- height: 1px;
676
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer {
677
+ width: 100%;
678
+ height: 100%;
679
+ color: var(--text-color-quaternary);
642
680
  }
643
- .tippy-box.arrow-with-border[data-placement] .tippy-arrow:before {
644
- width: 1rem;
645
- height: 1rem;
646
- background-color: white;
647
- transform: rotate(45deg);
648
- border: none;
649
- border-left: 1px solid #d8dae5 !important;
650
- border-top: 1px solid #d8dae5 !important;
651
- z-index: 20000000000;
652
- top: -0.6rem;
653
- transform-origin: center !important;
654
- }.containerTitleDrawer {
655
- height: 64px;
656
- min-height: 64px;
681
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer {
657
682
  display: flex;
658
683
  flex-direction: row;
659
- justify-content: space-between;
660
684
  align-items: center;
661
- background-color: #f1f2f6;
662
- padding: 0 30px 0 30px;
685
+ justify-content: center;
663
686
  width: 100%;
687
+ height: 100%;
664
688
  }
665
- .containerTitleDrawer span {
666
- color: #12131a;
667
- font-weight: 600;
668
- font-size: 18px;
669
- line-height: 25px;
670
- letter-spacing: 0em;
671
- }
672
- .containerTitleDrawer svg path {
673
- stroke: #000 !important;
689
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer .fallbackText {
690
+ font-style: normal;
691
+ font-weight: 400;
692
+ font-size: 0.875rem;
693
+ line-height: 1.25rem;
674
694
  }
675
- .containerTitleDrawer .closeIcon {
676
- cursor: pointer;
677
- }:root {
678
- --white: #fff;
679
- --Gray-5: #f1f2f6;
680
- --Gray-10: #ebecf2;
681
- --Gray-20: #d8dae5;
682
- --Gray-30: #babdcc;
683
- --Gray-40: #9a9eb2;
684
- --Gray-50: #828699;
685
- --Gray-60: #696c80;
686
- --Gray-100: #12131a;
687
- --black: #000;
688
- --primary-static: #4d75d8;
689
- --primary-hover: #7c9bea;
690
- --primary-active: #2c4fa4;
691
- --primary-disabled: #9a9eb2;
692
- --secondary-static: #40e0d0;
693
- --secondary-hover: #9efcf2;
694
- --secondary-active: #2fa599;
695
- --error-static: #da3f3f;
696
- --error-hover: #e75d5d;
697
- --error-active: #bb3232;
698
- --success-static: #3aaa35;
699
- --success-hover: #5cda56;
700
- --success-active: #2a8a25;
701
- --info-static: #c6c6c6;
702
- --info-hover: #e4e4e4;
703
- --info-active: #979797;
704
- --warning-static: #faad14;
705
- --warning-hover: #f9be4a;
706
- --warning-active: #db9711;
707
- --action-static: #142452;
708
- --action-hover: #21387d;
709
- --action-active: #000000;
710
- --color-info-primary: #3a6cd1;
711
- --primary-font-color: #142452;
712
- --placeholder-font-color: #babdcc;
713
- --warning-font-color: #ce2828;
714
- --alert-error: #da3f3f;
715
- --alert-light-error: #f4c5c5;
716
- --alert-success: #3aaa35;
717
- --alert-light-success: #c4e5c2;
718
- --alert-info: #8eaaf1;
719
- --alert-light-info: #c4d3f1;
720
- --alert-warning: #faad14;
721
- --alert-light-warning: #fde6b8;
722
- --border-focus: #3a6cd1;
723
- --tooltip-background-color: #202f5b;
724
- --text-color-primary: #142452;
725
- --text-color-secondary: #ffff;
726
- --text-color-neutral: #828699;
727
- --text-color-tertiary: #808080;
728
- --text-color-note: #242424;
729
- --text-color-quaternary: #142452;
730
- --text-color-disabled: #ffff;
731
- --background-color-white-primary: #fff;
732
- --background-color-light-primary: #8eaaf1;
733
- --background-color-white-secondary: #fff;
734
- --background-color-primary-dark: #142452;
735
- --background-color-gray-5: #f1f2f6;
736
- --background-color-gray-30: #ebecf2;
737
- --background-color-tertiary-light: #2c4fa4;
738
- --background-color-gray-10: #f1f2f6;
739
- --background-color-gray-40: #ebecf2;
740
- --background-color-light-blue: #dfe7f8;
741
- --border-color-primary: #babdcc;
742
- --border-color-secondary: #d8dae5;
743
- --border-color-neutral: #ebecf2;
744
- --border-color-tertiary: #ebecf2;
745
- --border-color-gray: #ebecf2;
746
- --border-color-hover: #142452;
747
- --border-color-active: #3a6cd1;
748
- --icon-color-main: #142452;
749
- --icon-color-secondary: #000;
750
- --icon-color-quaternary: #babdcc;
751
- --icon-color-disabled: #9a9eb2;
752
- --link-btn-primary-color: #3a6cd1;
753
- --button-color-static: #4d75d8;
754
- --button-color-hover: #7c9bea;
755
- --button-color-active: #2c4fa4;
756
- --alert-natural: #c4d3f1;
695
+ .tableSectionContainer .tableContainer .table th,
696
+ .tableSectionContainer .tableContainer .table td {
697
+ text-align: left;
757
698
  }
758
-
759
- .drawerItemContainer {
699
+ .tableSectionContainer .tableFooterContainer {
760
700
  display: flex;
761
- flex-direction: column;
701
+ width: 100%;
702
+ height: auto;
762
703
  }
763
- .drawerItemContainer .title {
764
- color: #000;
765
- font-weight: 600;
766
- font-size: 24px;
767
- line-height: 35px;
768
- margin-bottom: 3px;
769
- margin-top: 1.5rem;
704
+ .tableSectionContainer .ascArrow {
705
+ height: 0.8125rem;
706
+ margin-bottom: 0.4375rem;
707
+ cursor: pointer;
770
708
  }
771
- .drawerItemContainer .text {
772
- color: #000;
773
- font-weight: 400;
774
- font-size: 24px;
775
- line-height: 25px;
709
+ .tableSectionContainer .descArrow {
710
+ height: 0.8125rem;
711
+ margin-top: 0.4375rem;
712
+ cursor: pointer;
776
713
  }
777
- .drawerItemContainer .color-green {
778
- color: var(--color-success);
714
+ .tableSectionContainer .defaultSortArrow {
715
+ height: 1.25rem;
716
+ cursor: pointer;
779
717
  }
780
- .drawerItemContainer .color-red {
781
- color: var(--color-error);
718
+ .tableSectionContainer .ascArrow path,
719
+ .tableSectionContainer .descArrow path,
720
+ .tableSectionContainer .defaultSortArrow path {
721
+ fill: var(--Gray-50);
782
722
  }.chips-container {
783
723
  width: 100%;
784
724
  }
@@ -850,155 +790,50 @@
850
790
  display: flex;
851
791
  flex-direction: row;
852
792
  flex-wrap: nowrap;
853
- justify-content: center;
854
- align-items: center;
855
- width: auto;
856
- height: 1.25rem;
857
- cursor: pointer;
858
- border: none;
859
- margin-top: 0.625rem;
860
- color: #9a9eb2;
861
- background-color: transparent;
862
- }
863
- .chips-container .show-btn .show-btn-text-container {
864
- flex: 1 1 auto;
865
- }
866
- .chips-container .show-btn .show-btn-text-container .show-btn-text {
867
- font-size: 0.75rem;
868
- text-decoration-line: underline;
869
- }
870
- .chips-container .show-btn .show-btn-icon-container {
871
- display: flex;
872
- justify-content: center;
873
- align-items: center;
874
- height: 1.25rem;
875
- width: 1.25rem;
876
- margin-top: 0.1875rem;
877
- margin-left: 0.125rem;
878
- }
879
- .chips-container .show-btn .show-btn-icon-container .show-btn-icon {
880
- height: 1.25rem;
881
- width: 1.25rem;
882
- }
883
- .chips-container .show-btn .show-btn-icon-container .show-btn-icon path {
884
- fill: #9a9eb2;
885
- }
886
- .chips-container .show-btn:hover {
887
- color: #7c9bea;
888
- }
889
- .chips-container .show-btn:hover .show-btn-icon-container .show-btn-icon path {
890
- fill: #7c9bea;
891
- }
892
- .chips-container .show-btn:active {
893
- color: #2c4fa4;
894
- }
895
- .chips-container .show-btn:active .show-btn-icon-container .show-btn-icon path {
896
- fill: #2c4fa4;
897
- }.json-editor-container .json-editor-label {
898
- font-size: 0.875rem;
899
- font-weight: 600;
900
- line-height: 1.25rem;
901
- margin-bottom: 0.3125rem;
902
- }
903
- .json-editor-container .json-editor {
904
- display: flex;
905
- flex-direction: column;
906
- background-color: #142452;
907
- width: 100%;
908
- border-radius: 0.3125rem;
909
- margin-bottom: -0.5rem;
910
- outline: 1px solid transparent;
911
- position: relative;
912
- }
913
- .json-editor-container .json-editor .actions-container {
914
- width: 100%;
915
- height: 5rem;
916
- padding: 1.25rem;
917
- border-radius: 0 0 0.3125rem 0.3125rem;
918
- background: #101e47;
919
- display: flex;
920
- flex-direction: row;
921
- gap: 1.25rem;
922
- align-items: center;
923
- }
924
- .json-editor-container .json-editor .actions-container .validate {
925
- color: #fff;
926
- text-align: center;
927
- font-size: 1rem;
928
- font-style: normal;
929
- font-weight: 600;
930
- line-height: 1.25rem;
931
- width: 8.75rem;
932
- padding: 0.625rem 2.25rem;
933
- background-color: rgba(240, 248, 255, 0);
934
- border-radius: 0.3125rem;
935
- border: 0.0625rem solid #4d75d8;
936
- cursor: pointer;
937
- }
938
- .json-editor-container .json-editor .actions-container .validate:disabled {
939
- color: #babdcc;
940
- border-color: #a2a5b6;
941
- }
942
- .json-editor-container .json-editor .actions-container .beautify {
943
- color: #fff;
944
- text-align: center;
945
- font-size: 1rem;
946
- font-style: normal;
947
- font-weight: 600;
948
- line-height: 1.25rem;
949
- width: 8.75rem;
950
- padding: 0.625rem 2.25rem;
951
- background-color: rgba(240, 248, 255, 0);
952
- border-radius: 0.3125rem;
953
- border: 1px solid #babdcc;
954
- cursor: pointer;
955
- }
956
- .json-editor-container .json-editor .actions-container .beautify:disabled {
957
- color: #a2a5b6;
958
- border-color: #a2a5b6;
959
- }
960
- .json-editor-container .json-editor textarea {
961
- width: 100%;
962
- padding: 1.25rem;
963
- font-size: 0.875rem;
964
- font-style: normal;
965
- font-weight: 400;
966
- line-height: 1.25rem;
967
- color: white;
968
- height: 25rem;
969
- background-color: #142452;
793
+ justify-content: center;
794
+ align-items: center;
795
+ width: auto;
796
+ height: 1.25rem;
797
+ cursor: pointer;
970
798
  border: none;
971
- resize: none;
972
- border-radius: 0.3125rem;
799
+ margin-top: 0.625rem;
800
+ color: #9a9eb2;
801
+ background-color: transparent;
973
802
  }
974
- .json-editor-container .json-editor textarea:focus, .json-editor-container .json-editor textarea:focus-within, .json-editor-container .json-editor textarea:focus-visible .json-editor-container .json-editor textarea:active {
975
- outline: none;
976
- border: none;
803
+ .chips-container .show-btn .show-btn-text-container {
804
+ flex: 1 1 auto;
977
805
  }
978
- .json-editor-container .json-editor textarea::-webkit-scrollbar {
979
- width: 0.5rem;
806
+ .chips-container .show-btn .show-btn-text-container .show-btn-text {
807
+ font-size: 0.75rem;
808
+ text-decoration-line: underline;
980
809
  }
981
- .json-editor-container .json-editor textarea::-webkit-scrollbar-track {
982
- background-color: #828699;
983
- border: none;
984
- border-color: transparent;
985
- border-top-right-radius: 0.25rem;
986
- border-top-left-radius: 0;
810
+ .chips-container .show-btn .show-btn-icon-container {
811
+ display: flex;
812
+ justify-content: center;
813
+ align-items: center;
814
+ height: 1.25rem;
815
+ width: 1.25rem;
816
+ margin-top: 0.1875rem;
817
+ margin-left: 0.125rem;
987
818
  }
988
- .json-editor-container .json-editor textarea::-webkit-scrollbar-thumb {
989
- background-color: #d8dae5;
990
- border: none;
991
- border-color: transparent;
992
- border-radius: 0;
819
+ .chips-container .show-btn .show-btn-icon-container .show-btn-icon {
820
+ height: 1.25rem;
821
+ width: 1.25rem;
993
822
  }
994
- .json-editor-container .json-editor.invalid {
995
- outline: 1px solid #ce2828 !important;
823
+ .chips-container .show-btn .show-btn-icon-container .show-btn-icon path {
824
+ fill: #9a9eb2;
996
825
  }
997
- .json-editor-container .error-message {
998
- color: #ce2828;
999
- font-size: 0.75rem;
1000
- line-height: 1.25rem;
1001
- margin-top: 0.625rem;
826
+ .chips-container .show-btn:hover {
827
+ color: #7c9bea;
828
+ }
829
+ .chips-container .show-btn:hover .show-btn-icon-container .show-btn-icon path {
830
+ fill: #7c9bea;
831
+ }
832
+ .chips-container .show-btn:active {
833
+ color: #2c4fa4;
834
+ }
835
+ .chips-container .show-btn:active .show-btn-icon-container .show-btn-icon path {
836
+ fill: #2c4fa4;
1002
837
  }#common-dialog.dialog-content-wrapper {
1003
838
  overflow: visible !important;
1004
839
  max-height: 100%;
@@ -1076,4 +911,199 @@
1076
911
  display: flex;
1077
912
  gap: 1.25rem;
1078
913
  margin-top: 1.875rem;
914
+ }:root {
915
+ --white: #fff;
916
+ --Gray-5: #f1f2f6;
917
+ --Gray-10: #ebecf2;
918
+ --Gray-20: #d8dae5;
919
+ --Gray-30: #babdcc;
920
+ --Gray-40: #9a9eb2;
921
+ --Gray-50: #828699;
922
+ --Gray-60: #696c80;
923
+ --Gray-100: #12131a;
924
+ --black: #000;
925
+ --primary-static: #4d75d8;
926
+ --primary-hover: #7c9bea;
927
+ --primary-active: #2c4fa4;
928
+ --primary-disabled: #9a9eb2;
929
+ --secondary-static: #40e0d0;
930
+ --secondary-hover: #9efcf2;
931
+ --secondary-active: #2fa599;
932
+ --error-static: #da3f3f;
933
+ --error-hover: #e75d5d;
934
+ --error-active: #bb3232;
935
+ --success-static: #3aaa35;
936
+ --success-hover: #5cda56;
937
+ --success-active: #2a8a25;
938
+ --info-static: #c6c6c6;
939
+ --info-hover: #e4e4e4;
940
+ --info-active: #979797;
941
+ --warning-static: #faad14;
942
+ --warning-hover: #f9be4a;
943
+ --warning-active: #db9711;
944
+ --action-static: #142452;
945
+ --action-hover: #21387d;
946
+ --action-active: #000000;
947
+ --color-info-primary: #3a6cd1;
948
+ --primary-font-color: #142452;
949
+ --placeholder-font-color: #babdcc;
950
+ --warning-font-color: #ce2828;
951
+ --alert-error: #da3f3f;
952
+ --alert-light-error: #f4c5c5;
953
+ --alert-success: #3aaa35;
954
+ --alert-light-success: #c4e5c2;
955
+ --alert-info: #8eaaf1;
956
+ --alert-light-info: #c4d3f1;
957
+ --alert-warning: #faad14;
958
+ --alert-light-warning: #fde6b8;
959
+ --border-focus: #3a6cd1;
960
+ --tooltip-background-color: #202f5b;
961
+ --text-color-primary: #142452;
962
+ --text-color-secondary: #ffff;
963
+ --text-color-neutral: #828699;
964
+ --text-color-tertiary: #808080;
965
+ --text-color-note: #242424;
966
+ --text-color-quaternary: #142452;
967
+ --text-color-disabled: #ffff;
968
+ --background-color-white-primary: #fff;
969
+ --background-color-light-primary: #8eaaf1;
970
+ --background-color-white-secondary: #fff;
971
+ --background-color-primary-dark: #142452;
972
+ --background-color-gray-5: #f1f2f6;
973
+ --background-color-gray-30: #ebecf2;
974
+ --background-color-tertiary-light: #2c4fa4;
975
+ --background-color-gray-10: #f1f2f6;
976
+ --background-color-gray-40: #ebecf2;
977
+ --background-color-light-blue: #dfe7f8;
978
+ --border-color-primary: #babdcc;
979
+ --border-color-secondary: #d8dae5;
980
+ --border-color-neutral: #ebecf2;
981
+ --border-color-tertiary: #ebecf2;
982
+ --border-color-gray: #ebecf2;
983
+ --border-color-hover: #142452;
984
+ --border-color-active: #3a6cd1;
985
+ --icon-color-main: #142452;
986
+ --icon-color-secondary: #000;
987
+ --icon-color-quaternary: #babdcc;
988
+ --icon-color-disabled: #9a9eb2;
989
+ --link-btn-primary-color: #3a6cd1;
990
+ --button-color-static: #4d75d8;
991
+ --button-color-hover: #7c9bea;
992
+ --button-color-active: #2c4fa4;
993
+ --alert-natural: #c4d3f1;
994
+ }
995
+
996
+ .drawerItemContainer {
997
+ display: flex;
998
+ flex-direction: column;
999
+ }
1000
+ .drawerItemContainer .title {
1001
+ color: #000;
1002
+ font-weight: 600;
1003
+ font-size: 24px;
1004
+ line-height: 35px;
1005
+ margin-bottom: 3px;
1006
+ margin-top: 1.5rem;
1007
+ }
1008
+ .drawerItemContainer .text {
1009
+ color: #000;
1010
+ font-weight: 400;
1011
+ font-size: 24px;
1012
+ line-height: 25px;
1013
+ }
1014
+ .drawerItemContainer .color-green {
1015
+ color: var(--color-success);
1016
+ }
1017
+ .drawerItemContainer .color-red {
1018
+ color: var(--color-error);
1019
+ }.tooltip-custom-wrapper {
1020
+ display: flex;
1021
+ }
1022
+
1023
+ .tippy-box {
1024
+ background-color: #202f5b;
1025
+ font-size: 0.875rem;
1026
+ border-radius: 0.3125rem;
1027
+ width: max-content;
1028
+ max-width: 100%;
1029
+ overflow-wrap: break-word;
1030
+ word-break: break-word;
1031
+ position: relative;
1032
+ border: 1px solid #d8dae5;
1033
+ }
1034
+ .tippy-box.function .tippy-content {
1035
+ background-color: #fff !important;
1036
+ color: #000 !important;
1037
+ }
1038
+ .tippy-box[data-placement] > .tippy-arrow:before {
1039
+ color: #fff !important;
1040
+ }
1041
+ .tippy-box.info .tippy-arrow {
1042
+ color: #202f5b;
1043
+ }
1044
+ .tippy-box.success {
1045
+ border-radius: 1.875rem;
1046
+ background-color: #3aaa35;
1047
+ padding-inline: 0.625rem;
1048
+ }
1049
+ .tippy-box .tippy-content {
1050
+ text-align: justify;
1051
+ font-size: 0.875rem;
1052
+ line-height: 1.25rem;
1053
+ padding: 0.625rem;
1054
+ }
1055
+ .tippy-box .tippy-arrow {
1056
+ position: relative;
1057
+ width: 1rem;
1058
+ height: 1rem;
1059
+ }
1060
+ .tippy-box[data-placement^=top] .tippy-arrow:before {
1061
+ bottom: -0.4375rem;
1062
+ border-width: 0.5rem 0.5rem 0 !important;
1063
+ }
1064
+ .tippy-box[data-placement^=right] .tippy-arrow:before {
1065
+ left: -0.4375rem;
1066
+ border-width: 0.5rem 0.5rem 0.5rem 0 !important;
1067
+ }
1068
+ .tippy-box[data-placement^=bottom] .tippy-arrow:before {
1069
+ top: -0.4375rem;
1070
+ border-width: 0 0.5rem 0.5rem !important;
1071
+ }
1072
+ .tippy-box[data-placement^=left] .tippy-arrow:before {
1073
+ right: -0.4375rem;
1074
+ border-width: 0.5rem 0 0.5rem 0.5rem !important;
1075
+ }
1076
+ .tippy-box[data-placement^=bottom-start] .tippy-arrow {
1077
+ transform: translate(0.937rem, 0) !important;
1078
+ }
1079
+ .tippy-box[data-placement^=bottom-end] .tippy-arrow {
1080
+ margin-left: calc(100% - 1.937rem);
1081
+ transform: translate(0, 0) !important;
1082
+ }
1083
+ .tippy-box[data-placement^=top-start] .tippy-arrow {
1084
+ transform: translate(0.937rem, 0) !important;
1085
+ }
1086
+ .tippy-box[data-placement^=top-end] .tippy-arrow {
1087
+ transform: translate(0.937rem, 0) !important;
1088
+ }
1089
+ .tippy-box.arrow-with-border {
1090
+ border: 1px solid #d8dae5;
1091
+ }
1092
+ .tippy-box.arrow-with-border[data-placement] .tippy-arrow {
1093
+ top: 1px;
1094
+ background-color: white;
1095
+ z-index: 9999;
1096
+ height: 1px;
1097
+ }
1098
+ .tippy-box.arrow-with-border[data-placement] .tippy-arrow:before {
1099
+ width: 1rem;
1100
+ height: 1rem;
1101
+ background-color: white;
1102
+ transform: rotate(45deg);
1103
+ border: none;
1104
+ border-left: 1px solid #d8dae5 !important;
1105
+ border-top: 1px solid #d8dae5 !important;
1106
+ z-index: 20000000000;
1107
+ top: -0.6rem;
1108
+ transform-origin: center !important;
1079
1109
  }