ecomlab-components-next 0.1.102 → 0.1.103

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.
@@ -1,1524 +1,1454 @@
1
- // @font-face {
2
- // font-family: IBMPlexSans;
3
- // src: url("../../../public/font/IBMPlexSans-Regular.ttf");
4
- // font-weight: 400;
5
- // font-style: normal;
6
- // }
7
-
8
- // @font-face {
9
- // font-family: IBMPlexSans;
10
- // src: url("../../../public/font/IBMPlexSans-Medium.ttf");
11
- // font-weight: 500;
12
- // font-style: normal;
13
- // }
14
-
15
- // @font-face {
16
- // font-family: NunitoSans;
17
- // src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Regular.ttf");
18
- // font-weight: 400;
19
- // font-style: normal;
20
- // }
21
-
22
- // @font-face {
23
- // font-family: NunitoSans;
24
- // src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Light.ttf");
25
- // font-weight: 300;
26
- // font-style: normal;
27
- // }
28
-
29
-
30
- // @font-face {
31
- // font-family: NunitoSans;
32
- // src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Medium.ttf");
33
- // font-weight: 600;
34
- // font-style: normal;
35
- // }
36
-
37
- // @font-face {
38
- // font-family: NunitoSans;
39
- // src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Regular.ttf");
40
- // font-weight: 100;
41
- // font-style: normal;
42
- // }
43
-
44
-
45
1
  .table-ver-3 {
46
- width: calc(100% - 2px);
47
- border-collapse: separate;
48
- border-spacing: 0;
49
- box-sizing: border-box;
50
- background-color: white;
51
- font-size: 10px;
52
- font-weight: 100;
53
- border-radius: 8px;
54
- border-collapse: collapse;
55
- border: none;
56
- overflow-x: auto;
57
- table-layout: initial;
58
- border-collapse: separate;
59
- // overflow: hidden;
2
+ width: calc(100% - 2px);
3
+ border-collapse: separate;
4
+ border-spacing: 0;
5
+ box-sizing: border-box;
6
+ background-color: white;
7
+ font-size: 10px;
8
+ font-weight: 100;
9
+ border-radius: 8px;
10
+ border-collapse: collapse;
11
+ border: none;
12
+ overflow-x: auto;
13
+ table-layout: initial;
14
+ border-collapse: separate;
15
+ position: relative;
16
+ // overflow: hidden;
17
+
18
+ * {
19
+ font-family: NunitoSans;
20
+ }
60
21
 
61
- * {
62
- font-family: NunitoSans;
63
- }
22
+ .text {
23
+ font-size: 11px;
24
+ }
64
25
 
65
- .text {
66
- font-size: 12px;
26
+ // Подсказка
27
+ .col {
28
+ position: relative;
29
+ overflow: visible;
30
+
31
+ .tooltip_black {
32
+ max-width: 200px;
33
+ opacity: 0;
34
+ visibility: hidden;
35
+ background-color: #4a4a4a;
36
+ border-radius: 2px;
37
+ position: absolute;
38
+ top: 90%;
39
+ left: calc(30px);
40
+ z-index: 100;
41
+ width: max-content;
42
+ height: auto;
43
+ padding: 10px;
44
+ border-radius: 4px;
45
+ background: #264820;
46
+ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
47
+ color: #fff;
48
+ font-family: NunitoSans;
49
+ font-size: 11px;
50
+ font-style: normal;
51
+ font-weight: 600;
52
+ line-height: 14px;
67
53
  }
68
54
 
69
- // Подсказка
70
- .col {
71
- position: relative;
72
- overflow: visible;
73
-
74
- .tooltip_black {
75
- max-width: 200px;
76
- opacity: 0;
77
- visibility: hidden;
78
- background-color: #4A4A4A;
79
- border-radius: 2px;
80
- position: absolute;
81
- top: 90%;
82
- left: calc(30px);
83
- z-index: 100;
84
- width: max-content;
85
- height: auto;
86
- padding: 10px;
87
- border-radius: 4px;
88
- background: #264820;
89
- box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
90
- color: #FFF;
91
- font-family: NunitoSans;
92
- font-size: 12px;
93
- font-style: normal;
94
- font-weight: 600;
95
- line-height: 14px;
55
+ &:hover {
56
+ .tooltip_black {
57
+ opacity: 1;
58
+ visibility: visible;
59
+ transition: 0.5s;
60
+ }
61
+ }
62
+ }
96
63
 
97
- }
64
+ .sticky-td,
65
+ .sticky_th {
66
+ position: sticky;
67
+ left: 0;
68
+ z-index: 1;
69
+ border-right: 1px solid #edefed;
70
+ background: #fff;
71
+ }
72
+
73
+ .sticky_th {
74
+ background: #fff;
75
+ position: sticky;
76
+ top: 0;
77
+ left: 0;
78
+ z-index: 1;
79
+ // background-color: white;
80
+ }
98
81
 
99
- &:hover {
100
- .tooltip_black {
101
- opacity: 1;
102
- visibility: visible;
103
- transition: 0.5s;
104
- }
105
- }
82
+ tbody {
83
+ * {
84
+ color: #0b110b;
85
+ font-family: NunitoSans;
86
+ font-size: 11px;
87
+ line-height: 13px;
88
+ font-style: normal;
89
+ font-weight: 400;
90
+ letter-spacing: 0px;
106
91
  }
92
+ }
107
93
 
108
- .sticky-td,
109
- .sticky_th {
110
- position: sticky;
111
- left: 0;
112
- z-index: 2;
113
- border-right: 1px solid #EDEFED;
114
- background: #fff;
94
+ .date-picker {
95
+ border: 1px solid black;
96
+ border-radius: 16px;
97
+ width: 32px;
98
+ height: 32px;
99
+ border-radius: 22px;
100
+ padding: 10px;
101
+ transition-duration: 1000ms;
102
+ cursor: pointer;
103
+ background-repeat: no-repeat;
104
+ font-size: 11px;
105
+ color: transparent;
106
+ border: 1px solid #f0f0f0;
107
+ overflow: hidden;
108
+ background-image: url(https://dl.ecomru.ru/svg-storage/calendar.svg);
109
+ background-color: white;
110
+ background-size: 14px;
111
+ background-position: 50% 50%;
112
+ padding-left: 22px;
113
+ margin-top: 4px;
114
+ margin-bottom: 4px;
115
+
116
+ &:focus {
117
+ width: 225px;
118
+ cursor: pointer;
119
+ padding-left: 30px;
120
+ color: #020617;
121
+ outline: none;
122
+ border: 1px solid #f0f0f0;
123
+ background-position: 10px 50%;
115
124
  }
116
125
 
117
- .sticky_th {
118
- background: #fff;
119
- position: sticky;
120
- top: 0;
121
- left: 0;
122
- z-index: 4;
123
- // background-color: white;
126
+ img {
127
+ display: none;
124
128
  }
129
+ }
125
130
 
126
- tbody {
127
- * {
128
- color: #0B110B;
129
- font-family: NunitoSans;
130
- font-size: 12px;
131
- line-height: 13px;
132
- font-style: normal;
133
- font-weight: 400;
134
- letter-spacing: 0px;
135
- }
136
- }
131
+ & tr,
132
+ td,
133
+ th {
134
+ // padding: 10px 0px;
135
+ font-size: 11px;
136
+ }
137
137
 
138
+ tbody {
139
+ tr {
140
+ font-size: 11px;
138
141
 
139
- .date-picker {
140
- border: 1px solid black;
141
- border-radius: 16px;
142
- width: 32px;
143
- height: 32px;
144
- border-radius: 22px;
145
- padding: 10px;
146
- transition-duration: 1000ms;
147
- cursor: pointer;
148
- background-repeat: no-repeat;
149
- font-size: 12px;
150
- color: transparent;
151
- border: 1px solid #F0F0F0;
152
- overflow: hidden;
153
- background-image: url(https://dl.ecomru.ru/svg-storage/calendar.svg);
154
- background-color: white;
155
- background-size: 14px;
156
- background-position: 50% 50%;
157
- padding-left: 22px;
158
- margin-top: 4px;
159
- margin-bottom: 4px;
160
-
161
- &:focus {
162
- width: 225px;
163
- cursor: pointer;
164
- padding-left: 30px;
165
- color: #020617;
166
- outline: none;
167
- border: 1px solid #F0F0F0;
168
- background-position: 10px 50%;
169
- }
142
+ &:nth-child(even) {
143
+ // background-color: #FAFBFE;
144
+ border: none;
145
+ }
170
146
 
171
- img {
172
- display: none;
147
+ &:hover {
148
+ transition: 0.3s;
149
+ background-color: #f8f9fe;
150
+
151
+ .img-box {
152
+ &::after {
153
+ content: '';
154
+ display: block;
155
+ position: absolute;
156
+ top: 0;
157
+ left: 0;
158
+ right: 0;
159
+ bottom: 0;
160
+ background-color: rgb(237 248 254);
161
+ opacity: 0.5;
162
+ pointer-events: none;
163
+ }
173
164
  }
165
+ }
174
166
  }
167
+ }
175
168
 
176
- & tr,
177
- td,
178
- th {
179
- // padding: 10px 0px;
180
- font-size: 12px;
169
+ td {
170
+ text-align: left;
171
+ }
181
172
 
173
+ th {
174
+ text-align: left;
175
+ font-weight: 100;
176
+ font-size: 11px;
177
+ line-height: 12px;
178
+ font-weight: bold;
179
+ // color: #1A1A1A;
180
+ border-bottom: 1px solid #f1f2fd;
181
+ word-wrap: break-word;
182
+ min-width: 51px;
183
+ // background-color: white;
184
+
185
+ .search_table2,
186
+ .search_table2_active {
187
+ position: relative;
188
+ width: 100%;
189
+ height: 24px;
190
+ border-radius: 4px;
191
+ padding-left: 10px;
192
+ padding-right: 10px;
193
+ cursor: pointer;
194
+ background-repeat: no-repeat;
195
+ // color: transparent;
196
+ border: 1px solid #bdbcdb;
197
+ overflow: hidden;
198
+ background-color: white;
199
+ background-position: 10px 50%;
200
+ color: #11195d;
201
+ white-space: nowrap;
202
+ overflow: hidden;
203
+ text-overflow: ellipsis;
204
+ font-family: Inter;
205
+ font-size: 11px;
206
+ font-style: normal;
207
+ font-weight: 100;
208
+ line-height: 16px;
209
+ background-image: none;
210
+ margin-top: 0;
211
+
212
+ &:hover {
213
+ transition: 0.3s;
214
+ border: 1px solid #6c6aac;
215
+ }
216
+
217
+ &:focus {
218
+ border: 2px solid #1890ff;
219
+ outline: none;
220
+ }
221
+
222
+ &::placeholder {
223
+ color: #d9d9d9;
224
+ font-size: 11px;
225
+ }
182
226
  }
227
+ }
183
228
 
184
- tbody {
185
- tr {
186
- font-size: 12px;
187
-
188
- &:nth-child(even) {
189
- // background-color: #FAFBFE;
190
- border: none;
191
- }
192
-
193
- &:hover {
194
- transition: 0.3s;
195
- background-color: #F8F9FE;
196
-
197
- .img-box {
198
- &::after {
199
- content: '';
200
- display: block;
201
- position: absolute;
202
- top: 0;
203
- left: 0;
204
- right: 0;
205
- bottom: 0;
206
- background-color: rgb(237 248 254);
207
- opacity: 0.5;
208
- pointer-events: none;
209
-
210
- }
211
- }
212
- }
213
- }
214
- }
229
+ thead {
230
+ position: sticky;
231
+ top: 0;
232
+ background-color: white;
233
+ z-index: 2;
234
+ -webkit-backface-visibility: hidden;
235
+ /* Chrome, Safari, Opera */
236
+ backface-visibility: hidden;
237
+ will-change: transform;
238
+ }
239
+
240
+ td {
241
+ padding: 12px 40px 12px 12px;
242
+ position: relative;
243
+ // overflow: hidden;
244
+ width: 100%;
245
+ // max-width: 100px;
246
+ border-bottom: 1px solid #f1f2fd;
215
247
 
216
- td {
217
- text-align: left;
248
+ .link__blue {
249
+ white-space: nowrap;
250
+ text-overflow: ellipsis;
251
+ overflow: hidden;
218
252
  }
253
+ }
219
254
 
220
- th {
221
- text-align: left;
222
- font-weight: 100;
223
- font-size: 12px;
224
- line-height: 12px;
225
- font-weight: bold;
226
- // color: #1A1A1A;
227
- border-bottom: 1px solid #F1F2FD;
228
- word-wrap: break-word;
229
- min-width: 51px;
230
- // background-color: white;
255
+ .col-filters {
256
+ background-color: #fff;
257
+ border-bottom: 1px solid #f1f2fd;
258
+ padding: 4px 0px;
259
+ }
231
260
 
261
+ .tr-col-headers {
262
+ background-color: #fff;
263
+ }
232
264
 
233
- .search_table2,
234
- .search_table2_active {
235
- position: relative;
236
- width: 100%;
237
- height: 24px;
238
- border-radius: 4px;
239
- padding-left: 10px;
240
- padding-right: 10px;
241
- cursor: pointer;
242
- background-repeat: no-repeat;
243
- // color: transparent;
244
- border: 1px solid #BDBCDB;
245
- overflow: hidden;
246
- background-color: white;
247
- background-position: 10px 50%;
248
- color: #11195D;
249
- white-space: nowrap;
250
- overflow: hidden;
251
- text-overflow: ellipsis;
252
- font-family: Inter;
253
- font-size: 12px;
254
- font-style: normal;
255
- font-weight: 100;
256
- line-height: 16px;
257
- background-image: none;
258
- margin-top: 0;
259
-
260
- &:hover {
261
- transition: 0.3s;
262
- border: 1px solid #6C6AAC;
263
- }
264
-
265
- &:focus {
266
- border: 2px solid #1890FF;
267
- outline: none;
268
- }
269
-
270
- &::placeholder {
271
- color: #D9D9D9;
272
- font-size: 12px;
273
- }
274
- }
275
- }
276
-
277
- thead {
278
- position: sticky;
279
- top: 0;
280
- background-color: white;
281
- z-index: 5;
282
- -webkit-backface-visibility: hidden;
283
- /* Chrome, Safari, Opera */
284
- backface-visibility: hidden;
285
- will-change: transform;
286
- }
265
+ .tr-col-filters {
266
+ border-bottom: 1px solid #d9d9d9;
267
+ }
287
268
 
288
- td {
289
- padding: 12px 40px 12px 12px;
290
- position: relative;
291
- // overflow: hidden;
292
- width: 100%;
293
- // max-width: 100px;
294
- border-bottom: 1px solid #F1F2FD;
269
+ .col-th-border {
270
+ padding: 10px 12px;
271
+ height: 100%;
272
+ // padding-right: 0px;
273
+ // margin-right: 8px;
274
+ min-width: 100%;
275
+ resize: horizontal;
276
+ display: flex;
277
+ gap: 8px;
278
+ position: relative;
279
+ flex-shrink: 0;
280
+ flex-grow: 0;
281
+ //background-color: white;
282
+ //border-right: 1px solid #BDBCDB;
283
+ position: relative;
295
284
 
296
- .link__blue {
297
- white-space: nowrap;
298
- text-overflow: ellipsis;
299
- overflow: hidden;
300
- }
285
+ .sort-icon {
286
+ display: inline-block;
287
+ min-width: 13px;
288
+ width: 13px;
289
+ height: 13px;
290
+ margin-right: 8px;
301
291
  }
302
292
 
303
- .col-filters {
304
- background-color: #fff;
305
- border-bottom: 1px solid #F1F2FD;
306
- padding: 4px 0px;
293
+ &::after {
294
+ content: '';
295
+ width: 8px;
296
+ height: 15px;
297
+ background-color: #ededed;
298
+ position: absolute;
299
+ bottom: 0;
300
+ right: 4px;
301
+ z-index: 2;
302
+ clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
307
303
  }
308
304
 
309
- .tr-col-headers {
310
- background-color: #fff;
305
+ &_context {
306
+ &::after {
307
+ display: none;
308
+ }
311
309
  }
312
310
 
313
- .tr-col-filters {
314
- border-bottom: 1px solid #D9D9D9;
311
+ &:hover {
312
+ .sort-icon {
313
+ fill: #6c6aac;
314
+ }
315
315
 
316
+ &::after {
317
+ background-color: #bdbcdb;
318
+ transition: 0.3s;
319
+ }
316
320
  }
317
321
 
318
- .col-th-border {
319
- padding: 10px 12px;
320
- height: 100%;
321
- // padding-right: 0px;
322
- // margin-right: 8px;
323
- min-width: 100%;
324
- resize: horizontal;
325
- display: flex;
326
- gap: 8px;
327
- position: relative;
328
- flex-shrink: 0;
329
- flex-grow: 0;
330
- //background-color: white;
331
- //border-right: 1px solid #BDBCDB;
332
- position: relative;
333
-
334
- .sort-icon {
335
- display: inline-block;
336
- min-width: 13px;
337
- width: 13px;
338
- height: 13px;
339
- margin-right: 8px;
340
- }
341
-
342
- &::after {
343
- content: '';
344
- width: 8px;
345
- height: 15px;
346
- background-color: #ededed;
347
- position: absolute;
348
- bottom: 0;
349
- right: 4px;
350
- z-index: 2;
351
- clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
352
- }
353
-
354
- &_context {
355
- &::after {
356
- display: none;
357
- }
358
- }
359
-
360
-
361
- &:hover {
362
-
363
- .sort-icon {
364
- fill: #6C6AAC;
365
- }
366
-
367
- &::after {
368
- background-color: #BDBCDB;
369
- transition: 0.3s;
370
- }
371
- }
372
-
373
- .text-and-icon {
374
- display: flex;
375
- justify-content: space-between;
376
- width: 100%;
377
- align-items: center;
378
- gap: 5px;
379
- }
380
-
381
- img {
382
- cursor: pointer;
383
- }
384
-
385
- &::-webkit-resizer {
386
- display: none;
387
- }
322
+ .text-and-icon {
323
+ display: flex;
324
+ justify-content: space-between;
325
+ width: 100%;
326
+ align-items: center;
327
+ gap: 5px;
388
328
  }
389
329
 
390
- & thead {
391
- width: 100%;
392
-
393
- & tr {
394
- width: 100%;
395
- text-align: center;
396
- background-color: white;
397
- font-weight: 100;
398
- padding-top: 5px;
399
- padding-bottom: 5px;
400
- }
330
+ img {
331
+ cursor: pointer;
332
+ }
401
333
 
402
- // Заголовок чекбоксов
403
- .th-check {
404
- min-width: 50px;
405
- max-width: 50px;
406
- width: 100;
407
- user-select: none;
408
- text-align: center;
409
- font-size: 16px;
410
- }
334
+ &::-webkit-resizer {
335
+ display: none;
336
+ }
337
+ }
411
338
 
412
- th.DESC,
413
- th.ASC {
414
- display: flex;
415
- align-items: center;
416
-
417
- &::after {
418
- content: '';
419
- width: 9px;
420
- height: 12px;
421
- margin-left: auto;
422
- background-image: url('https://dl.ecomru.ru/svg-storage/arrow-down.svg');
423
- background-repeat: no-repeat;
424
- transform: rotate(0.5turn);
425
- }
426
- }
339
+ & thead {
340
+ width: 100%;
427
341
 
428
- th.DESC {
429
- &::after {
430
- transform: rotate(0.5turn);
431
- }
432
- }
342
+ & tr {
343
+ width: 100%;
344
+ text-align: center;
345
+ background-color: white;
346
+ font-weight: 100;
347
+ padding-top: 5px;
348
+ padding-bottom: 5px;
349
+ }
433
350
 
351
+ // Заголовок чекбоксов
352
+ .th-check {
353
+ min-width: 50px;
354
+ max-width: 50px;
355
+ width: 100;
356
+ user-select: none;
357
+ text-align: center;
358
+ font-size: 15px;
434
359
  }
435
360
 
436
- // Кнопка таблицы
361
+ th.DESC,
362
+ th.ASC {
363
+ display: flex;
364
+ align-items: center;
437
365
 
438
- .btn__edit,
439
- .btn__delete,
440
- .btn__action {
441
- display: inline-block;
442
- background-position: center;
443
- background-size: contain;
366
+ &::after {
367
+ content: '';
368
+ width: 9px;
369
+ height: 12px;
370
+ margin-left: auto;
371
+ background-image: url('https://dl.ecomru.ru/svg-storage/arrow-down.svg');
444
372
  background-repeat: no-repeat;
445
- text-align: center;
446
- width: 20px;
447
- height: 20px;
448
- max-width: 20px;
449
- max-height: 20px;
450
- border: none;
451
- background-color: inherit;
452
- cursor: pointer;
373
+ transform: rotate(0.5turn);
374
+ }
453
375
  }
454
376
 
455
- .btn__delete {
456
- background-image: url('https://dl.ecomru.ru/svg-storage/delete (2).svg');
377
+ th.DESC {
378
+ &::after {
379
+ transform: rotate(0.5turn);
380
+ }
457
381
  }
382
+ }
458
383
 
459
- // Кнопка сброса чекбоксов
460
-
461
- .btn-container {
462
- display: flex;
463
- align-items: center;
464
- justify-content: center;
465
- width: 100%;
466
-
467
- .reset-checkbox-btn {
468
- width: 20px;
469
- height: 20px;
470
- border: none;
471
- background-image: url('./img/close_icon.svg');
472
- background-position: center;
473
- background-repeat: no-repeat;
474
- background-size: 20px;
475
- }
476
- }
384
+ // Кнопка таблицы
477
385
 
478
- // фильтр-бокс для шапки таблицы
386
+ .btn__edit,
387
+ .btn__delete,
388
+ .btn__action {
389
+ display: inline-block;
390
+ background-position: center;
391
+ background-size: contain;
392
+ background-repeat: no-repeat;
393
+ text-align: center;
394
+ width: 20px;
395
+ height: 20px;
396
+ max-width: 20px;
397
+ max-height: 20px;
398
+ border: none;
399
+ background-color: inherit;
400
+ cursor: pointer;
401
+ }
479
402
 
403
+ .btn__delete {
404
+ background-image: url('https://dl.ecomru.ru/svg-storage/delete (2).svg');
405
+ }
480
406
 
407
+ // Кнопка сброса чекбоксов
481
408
 
482
- // ТИПЫ TD
409
+ .btn-container {
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: center;
413
+ width: 100%;
483
414
 
484
- // default
415
+ .reset-checkbox-btn {
416
+ width: 20px;
417
+ height: 20px;
418
+ border: none;
419
+ background-image: url('./img/close_icon.svg');
420
+ background-position: center;
421
+ background-repeat: no-repeat;
422
+ background-size: 20px;
423
+ }
424
+ }
485
425
 
486
- .type-td_text {
487
- text-align: left;
488
- overflow: hidden;
426
+ // фильтр-бокс для шапки таблицы
489
427
 
490
- .text-box {
491
- overflow: hidden;
492
- }
428
+ // ТИПЫ TD
493
429
 
494
- & .text,
495
- .text_grey {
496
- display: -webkit-box;
497
- -webkit-line-clamp: 3; // количество строк
498
- -webkit-box-orient: vertical;
499
- overflow: hidden;
500
- hyphens: auto;
501
- // display: inline-block;
502
- // overflow: hidden;
503
- // text-overflow: ellipsis;
504
- // white-space: nowrap;
505
- font-size: 12px;
506
- // color: #020617;
507
- font-weight: 100;
508
-
509
- &_grey {
510
- font-size: 12px;
511
- color: grey;
512
- }
513
- }
430
+ // default
514
431
 
432
+ .type-td_text {
433
+ text-align: left;
434
+ overflow: hidden;
515
435
 
436
+ .text-box {
437
+ overflow: hidden;
516
438
  }
517
439
 
518
- // string-layers
519
-
520
- .type-td_string-layers {
521
-
522
- &__content {
523
- display: flex;
524
- flex-direction: column;
525
- align-items: self-start;
526
- overflow: hidden;
527
- gap: 4px;
528
-
529
- .grey-box {
530
- display: flex;
531
- min-height: 24px;
532
- align-items: center;
533
- gap: 4px;
534
- border-radius: 128px;
535
- background: #F4F6F4;
536
- padding-left: 8px;
537
- padding-right: 8px;
538
- overflow: hidden;
539
-
540
- img {
541
- width: 12px;
542
- height: auto;
543
- }
544
-
545
- .text_grey {
546
- white-space: nowrap;
547
- overflow: hidden;
548
- text-overflow: ellipsis;
549
- }
550
- }
551
- }
552
-
553
-
440
+ & .text,
441
+ .text_grey {
442
+ display: -webkit-box;
443
+ -webkit-line-clamp: 3; // количество строк
444
+ -webkit-box-orient: vertical;
445
+ overflow: hidden;
446
+ hyphens: auto;
447
+ // display: inline-block;
448
+ // overflow: hidden;
449
+ // text-overflow: ellipsis;
450
+ // white-space: nowrap;
451
+ font-size: 11px;
452
+ // color: #020617;
453
+ font-weight: 100;
454
+
455
+ &_grey {
456
+ font-size: 11px;
457
+ color: grey;
458
+ }
459
+ }
460
+ }
554
461
 
555
- //overflow: hidden;
462
+ // string-layers
556
463
 
557
- .text {
558
- color: #1890FF;
559
- }
464
+ .type-td_string-layers {
465
+ &__content {
466
+ display: flex;
467
+ flex-direction: column;
468
+ align-items: self-start;
469
+ overflow: hidden;
470
+ gap: 4px;
560
471
 
561
- .copy-box {
562
- display: flex;
563
- align-items: center;
564
- gap: 8px;
565
-
566
- .text {
567
- white-space: nowrap;
568
- overflow: hidden;
569
- text-overflow: ellipsis;
570
- }
571
-
572
- .button-copy {
573
- position: relative;
574
- width: 16px;
575
- height: 16px;
576
- }
577
- }
472
+ .grey-box {
473
+ display: flex;
474
+ min-height: 24px;
475
+ align-items: center;
476
+ gap: 4px;
477
+ border-radius: 128px;
478
+ background: #f4f6f4;
479
+ padding-left: 8px;
480
+ padding-right: 8px;
481
+ overflow: hidden;
578
482
 
579
- .text-box {
580
- margin-top: 5px;
581
- display: flex;
582
- flex-direction: column;
583
- gap: 4px;
584
-
585
- & .text,
586
- .text_grey {
587
- white-space: nowrap;
588
- text-overflow: ellipsis;
589
- overflow: hidden;
590
- font-size: 12px;
591
- color: #1890FF;
592
- font-weight: 100;
593
-
594
- &_grey {
595
- font-size: 12px;
596
- //color: #1890FF;
597
- color: grey;
598
- font-weight: 100;
599
- }
600
- }
483
+ img {
484
+ width: 12px;
485
+ height: auto;
601
486
  }
602
487
 
603
- .btn {
604
- width: min-content;
605
- padding-left: 4px;
606
- padding-right: 4px;
607
- height: 18px;
608
- min-width: 50px;
609
- background-color: #F7FDFC;
610
- border: 1px solid #EDF2F8;
611
- border-radius: 4px;
612
- background-image: url('./img/location.svg');
613
- background-repeat: no-repeat;
614
- background-position: center right 4px;
615
- color: #1890FF;
616
- font-size: 12px;
488
+ .text_grey {
489
+ white-space: nowrap;
490
+ overflow: hidden;
491
+ text-overflow: ellipsis;
617
492
  }
493
+ }
618
494
  }
619
495
 
620
- // action-btn
621
-
622
- .type-td_action-btn {
623
- display: flex;
624
- justify-content: flex-start;
625
-
626
- .text_blue {
627
- width: 100%;
628
- display: -webkit-box;
629
- -webkit-line-clamp: 3; // количество строк
630
- -webkit-box-orient: vertical;
631
- text-decoration: none;
632
- overflow: hidden;
633
- hyphens: auto;
634
- color: #0009E8;
635
- }
496
+ //overflow: hidden;
636
497
 
498
+ .text {
499
+ color: #1890ff;
637
500
  }
638
501
 
639
- // image-with-text
502
+ .copy-box {
503
+ display: flex;
504
+ align-items: center;
505
+ gap: 8px;
640
506
 
641
- .type-td_image-with-text {
642
- display: flex;
643
- gap: 8px;
507
+ .text {
508
+ white-space: nowrap;
644
509
  overflow: hidden;
645
- color: #fff;
646
- width: 100%;
510
+ text-overflow: ellipsis;
511
+ }
647
512
 
648
- p {
649
- white-space: nowrap;
650
- text-overflow: ellipsis;
651
- overflow: hidden;
652
- hyphens: auto;
653
- font-weight: 100;
654
- }
513
+ .button-copy {
514
+ position: relative;
515
+ width: 16px;
516
+ height: 16px;
517
+ }
518
+ }
655
519
 
656
- span {
657
- display: -webkit-box;
658
- -webkit-line-clamp: 5; // количество строк
659
- -webkit-box-orient: vertical;
660
- overflow: hidden;
661
- hyphens: auto;
662
- font-weight: 100;
663
- }
520
+ .text-box {
521
+ margin-top: 5px;
522
+ display: flex;
523
+ flex-direction: column;
524
+ gap: 4px;
664
525
 
665
- a {
666
- width: 100%;
667
- display: -webkit-box;
668
- -webkit-line-clamp: 5; // количество строк
669
- -webkit-box-orient: vertical;
670
- overflow: hidden;
671
- hyphens: auto;
672
- color: #0009E8;
673
- }
526
+ & .text,
527
+ .text_grey {
528
+ white-space: nowrap;
529
+ text-overflow: ellipsis;
530
+ overflow: hidden;
531
+ font-size: 11px;
532
+ color: #1890ff;
533
+ font-weight: 100;
674
534
 
675
- img {
676
- width: 24px;
677
- height: 24px;
535
+ &_grey {
536
+ font-size: 11px;
537
+ //color: #1890FF;
538
+ color: grey;
539
+ font-weight: 100;
678
540
  }
541
+ }
679
542
  }
680
543
 
681
- // link
682
-
683
- .type-td_link,
684
- .td-col-text {
685
- text-overflow: ellipsis;
686
- white-space: nowrap;
544
+ .btn {
545
+ width: min-content;
546
+ padding-left: 4px;
547
+ padding-right: 4px;
548
+ height: 18px;
549
+ min-width: 50px;
550
+ background-color: #f7fdfc;
551
+ border: 1px solid #edf2f8;
552
+ border-radius: 4px;
553
+ background-image: url('./img/location.svg');
554
+ background-repeat: no-repeat;
555
+ background-position: center right 4px;
556
+ color: #1890ff;
557
+ font-size: 11px;
558
+ }
559
+ }
687
560
 
688
- .popup-td {
689
- opacity: 0;
690
- visibility: hidden;
691
- display: inline-block;
692
- box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
693
- position: absolute;
694
- background-color: white;
695
- padding: 8px 16px;
696
- border-radius: 16px;
697
- border: 1px solid #D9D9D9;
698
- width: auto;
699
- top: calc(50% - 8px);
700
- left: -16px;
701
- z-index: 100;
702
- opacity: 0;
703
- visibility: hidden;
704
- transition: 0.5;
705
- }
561
+ // action-btn
706
562
 
563
+ .type-td_action-btn {
564
+ display: flex;
565
+ justify-content: flex-start;
707
566
 
567
+ .text_blue {
568
+ width: 100%;
569
+ display: -webkit-box;
570
+ -webkit-line-clamp: 3; // количество строк
571
+ -webkit-box-orient: vertical;
572
+ text-decoration: none;
573
+ overflow: hidden;
574
+ hyphens: auto;
575
+ color: #0009e8;
708
576
  }
577
+ }
709
578
 
710
- // date
579
+ // image-with-text
711
580
 
712
- .date-with-time {
713
- display: flex;
714
- align-items: center;
715
- flex-wrap: nowrap;
716
- gap: 8px;
581
+ .type-td_image-with-text {
582
+ display: flex;
583
+ gap: 8px;
584
+ overflow: hidden;
585
+ color: #fff;
586
+ width: 100%;
717
587
 
718
- span {
719
- white-space: nowrap;
720
- text-overflow: ellipsis;
721
- overflow: hidden;
722
- }
588
+ p {
589
+ white-space: nowrap;
590
+ text-overflow: ellipsis;
591
+ overflow: hidden;
592
+ hyphens: auto;
593
+ font-weight: 100;
723
594
  }
724
595
 
725
- .type-td_date {
726
- color: #00B46C;
727
-
728
- .react-datepicker-wrapper {
729
- .react-datepicker__input-container {
730
- input {
731
- display: flex;
732
- justify-content: center;
733
- border: 1px solid #1890FF;
734
- border-radius: 8px;
735
- padding: 2px 4px;
736
- min-width: 90px;
737
- width: min-content;
738
- max-width: 90px;
739
- text-align: center;
740
-
741
- &:focus {
742
- outline: none;
743
- }
744
- }
745
- }
746
- }
596
+ span {
597
+ display: -webkit-box;
598
+ -webkit-line-clamp: 5; // количество строк
599
+ -webkit-box-orient: vertical;
600
+ overflow: hidden;
601
+ hyphens: auto;
602
+ font-weight: 100;
747
603
  }
748
604
 
749
- // rating
605
+ a {
606
+ width: 100%;
607
+ display: -webkit-box;
608
+ -webkit-line-clamp: 5; // количество строк
609
+ -webkit-box-orient: vertical;
610
+ overflow: hidden;
611
+ hyphens: auto;
612
+ color: #0009e8;
613
+ }
750
614
 
751
- .type-td_rating {
752
- display: flex;
753
- align-items: center;
754
- gap: 6px;
755
- width: 100%;
756
- overflow: hidden;
615
+ img {
616
+ width: 24px;
617
+ height: 24px;
757
618
  }
619
+ }
620
+
621
+ // link
622
+
623
+ .type-td_link,
624
+ .td-col-text {
625
+ text-overflow: ellipsis;
626
+ white-space: nowrap;
627
+
628
+ .popup-td {
629
+ opacity: 0;
630
+ visibility: hidden;
631
+ display: inline-block;
632
+ box-shadow: 0.3em 0.6em 1.3em rgba(0, 0, 0, 0.25);
633
+ position: absolute;
634
+ background-color: white;
635
+ padding: 8px 16px;
636
+ border-radius: 16px;
637
+ border: 1px solid #d9d9d9;
638
+ width: auto;
639
+ top: calc(50% - 8px);
640
+ left: -16px;
641
+ z-index: 100;
642
+ opacity: 0;
643
+ visibility: hidden;
644
+ transition: 0.5;
645
+ }
646
+ }
758
647
 
759
- // currency
648
+ // date
760
649
 
761
- .type-td_currency {
762
- display: flex;
763
- align-items: center;
764
- flex-wrap: nowrap;
765
- gap: 4px;
766
- overflow: hidden;
767
- letter-spacing: 1px;
768
- justify-content: flex-end;
769
-
770
- .val {
771
- display: flex;
772
- align-items: center;
773
- gap: 8px;
774
- overflow: hidden;
775
- text-overflow: ellipsis;
776
- white-space: nowrap;
777
-
778
- span {
779
- font-weight: 600;
780
- font-size: 12px;
781
- color: #A1D9A3;
782
- }
783
- }
650
+ .date-with-time {
651
+ display: flex;
652
+ align-items: center;
653
+ flex-wrap: nowrap;
654
+ gap: 8px;
784
655
 
785
- .curr {
786
- display: flex;
787
- align-items: center;
788
- gap: 8px;
789
- overflow: hidden;
790
- text-overflow: ellipsis;
791
- white-space: nowrap;
792
- font-family: NunitoSans;
793
- font-size: 12px;
794
- font-style: normal;
795
- line-height: 16px;
796
- font-weight: 300;
797
- color: #B4B8B4;
798
-
799
- span {
800
- color: #0B110B;
801
- font-weight: 700;
802
- }
656
+ span {
657
+ white-space: nowrap;
658
+ text-overflow: ellipsis;
659
+ overflow: hidden;
660
+ }
661
+ }
662
+
663
+ .type-td_date {
664
+ color: #00b46c;
665
+
666
+ .react-datepicker-wrapper {
667
+ .react-datepicker__input-container {
668
+ input {
669
+ display: flex;
670
+ justify-content: center;
671
+ border: 1px solid #1890ff;
672
+ border-radius: 8px;
673
+ padding: 2px 4px;
674
+ min-width: 90px;
675
+ width: min-content;
676
+ max-width: 90px;
677
+ text-align: center;
678
+
679
+ &:focus {
680
+ outline: none;
681
+ }
803
682
  }
683
+ }
804
684
  }
685
+ }
805
686
 
806
- // image
687
+ // rating
807
688
 
808
- .type-td_image {
809
- justify-content: center;
810
- width: 100%;
811
- height: 100%;
812
- margin-left: auto;
813
- margin-right: auto;
814
- padding: 12px;
689
+ .type-td_rating {
690
+ display: flex;
691
+ align-items: center;
692
+ gap: 6px;
693
+ width: 100%;
694
+ overflow: hidden;
695
+ }
815
696
 
816
- .img-box {
817
- display: flex;
818
- flex-direction: row;
819
- gap: 5px;
820
- position: relative;
821
- width: 114px;
822
- height: 107px;
823
-
824
- .single-img-container {
825
-
826
- img {
827
- object-fit: contain;
828
- width: 100%;
829
- height: 100%;
830
- }
831
-
832
- .enlarge-photo {
833
- display: block;
834
- justify-content: center;
835
- align-items: center;
836
- opacity: 1;
837
- visibility: visible;
838
- width: 300px;
839
- height: 300px;
840
- position: absolute;
841
- // top: -12px;
842
- left: calc(100% + 20px);
843
- z-index: 10;
844
- transition: 0.3s;
845
- background-color: #ffffff;
846
- padding: 16px;
847
- -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
848
- -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
849
- box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
850
- border-radius: 8px;
851
-
852
- img {
853
- width: 100%;
854
- height: auto;
855
- max-width: calc(300px - 32px);
856
- object-fit: contain;
857
- height: 300px;
858
- max-height: calc(300px - 32px);
859
- }
860
- }
861
- }
862
-
863
- &:hover {
864
- // .enlarge-photo {
865
- // display: flex;
866
- // opacity: 1;
867
- // visibility: visible;
868
- // transition: 0.3s;
869
- // }
870
- }
697
+ // currency
871
698
 
872
- }
699
+ .type-td_currency {
700
+ display: flex;
701
+ align-items: center;
702
+ flex-wrap: nowrap;
703
+ gap: 4px;
704
+ overflow: hidden;
705
+ letter-spacing: 1px;
706
+ justify-content: flex-end;
707
+
708
+ .val {
709
+ display: flex;
710
+ align-items: center;
711
+ gap: 8px;
712
+ overflow: hidden;
713
+ text-overflow: ellipsis;
714
+ white-space: nowrap;
715
+
716
+ span {
717
+ font-weight: 600;
718
+ font-size: 11px;
719
+ color: #a1d9a3;
720
+ }
873
721
  }
874
722
 
875
- // num
876
-
877
- .type-td_num {
878
- text-align: right;
879
- letter-spacing: 1px;
723
+ .curr {
724
+ display: flex;
725
+ align-items: center;
726
+ gap: 8px;
727
+ overflow: hidden;
728
+ text-overflow: ellipsis;
729
+ white-space: nowrap;
730
+ font-family: NunitoSans;
731
+ font-size: 11px;
732
+ font-style: normal;
733
+ line-height: 16px;
734
+ font-weight: 300;
735
+ color: #b4b8b4;
736
+
737
+ span {
738
+ color: #0b110b;
739
+ font-weight: 700;
740
+ }
880
741
  }
742
+ }
881
743
 
882
- // name
744
+ // image
883
745
 
884
- .type-td_name {
885
- display: flex;
886
- align-items: center;
887
- gap: 8px;
746
+ .type-td_image {
747
+ justify-content: center;
748
+ width: 100%;
749
+ height: 100%;
750
+ margin-left: auto;
751
+ margin-right: auto;
752
+ padding: 12px;
888
753
 
889
- .icon-name {
890
- display: flex;
891
- width: 40px;
892
- min-width: 40px;
893
- height: 40px;
894
- justify-content: center;
895
- align-items: center;
896
- border-radius: 50%;
897
- border: 1px solid #FFF;
898
- background: rgba(245, 124, 56, 0.60);
899
- color: #F6F7F6;
900
- text-align: center;
901
- font-family: NunitoSans;
902
- font-size: 12px;
903
- font-style: normal;
904
- font-weight: 700;
905
- line-height: 14px;
754
+ .slider-carousel {
755
+ width: 114px;
756
+ height: 107px;
757
+ }
758
+
759
+ .img-box {
760
+ display: flex;
761
+ flex-direction: row;
762
+ gap: 5px;
763
+ position: relative;
764
+ width: 114px;
765
+ height: 107px;
766
+
767
+ .single-img-container {
768
+ img {
769
+ object-fit: contain;
770
+ width: 100%;
771
+ height: 100%;
906
772
  }
907
773
 
908
- .text_name {
909
- overflow: hidden;
910
- color: #636D65;
911
- font-family: NunitoSans;
912
- font-size: 12px;
913
- font-style: normal;
914
- font-weight: 400;
915
- line-height: 12px;
774
+ .enlarge-photo {
775
+ display: block;
776
+ justify-content: center;
777
+ align-items: center;
778
+ opacity: 1;
779
+ visibility: visible;
780
+ width: 300px;
781
+ height: 300px;
782
+ position: absolute;
783
+ // top: -12px;
784
+ left: calc(100% + 20px);
785
+ z-index: 10;
786
+ transition: 0.3s;
787
+ background-color: #ffffff;
788
+ padding: 16px;
789
+ -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
790
+ -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
791
+ box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
792
+ border-radius: 8px;
793
+
794
+ img {
795
+ width: 100%;
796
+ height: auto;
797
+ max-width: calc(300px - 32px);
798
+ object-fit: contain;
799
+ height: 300px;
800
+ max-height: calc(300px - 32px);
801
+ }
916
802
  }
803
+ }
804
+
805
+ &:hover {
806
+ // .enlarge-photo {
807
+ // display: flex;
808
+ // opacity: 1;
809
+ // visibility: visible;
810
+ // transition: 0.3s;
811
+ // }
812
+ }
917
813
  }
814
+ }
918
815
 
816
+ // num
919
817
 
920
- // copyText
818
+ .type-td_num {
819
+ text-align: right;
820
+ letter-spacing: 1px;
821
+ }
921
822
 
922
- .type-td_copy-text {
923
- display: flex;
924
- text-align: start;
925
- max-width: 100%;
926
- width: 100%;
927
-
928
- .copy-box {
929
- display: flex;
930
- width: 100%;
931
- align-items: center;
932
- gap: 8px;
933
-
934
- .text {
935
- white-space: nowrap;
936
- overflow: hidden;
937
- text-overflow: ellipsis;
938
- }
823
+ // name
939
824
 
825
+ .type-td_name {
826
+ display: flex;
827
+ align-items: center;
828
+ gap: 8px;
829
+
830
+ .icon-name {
831
+ display: flex;
832
+ width: 40px;
833
+ min-width: 40px;
834
+ height: 40px;
835
+ justify-content: center;
836
+ align-items: center;
837
+ border-radius: 50%;
838
+ border: 1px solid #fff;
839
+ background: rgba(245, 124, 56, 0.6);
840
+ color: #f6f7f6;
841
+ text-align: center;
842
+ font-family: NunitoSans;
843
+ font-size: 11px;
844
+ font-style: normal;
845
+ font-weight: 700;
846
+ line-height: 14px;
847
+ }
940
848
 
941
- .button-copy {
942
- position: relative;
943
- width: 16px;
944
- height: 16px;
945
- }
946
- }
849
+ .text_name {
850
+ overflow: hidden;
851
+ color: #636d65;
852
+ font-family: NunitoSans;
853
+ font-size: 11px;
854
+ font-style: normal;
855
+ font-weight: 400;
856
+ line-height: 12px;
857
+ }
858
+ }
947
859
 
948
- .tooltip-box {
949
- position: absolute;
950
- top: calc(50% - 8px);
951
- right: 0;
860
+ // copyText
952
861
 
953
- .tooltip_black {
954
- opacity: 0;
955
- visibility: hidden;
956
- overflow: hidden;
957
- color: white;
958
- position: absolute;
959
- top: 90%;
960
- left: calc(30px);
961
- z-index: 100;
962
- width: max-content;
963
- height: auto;
964
- padding: 10px;
965
- border-radius: 4px;
966
- background: #264820;
967
- box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
968
- color: #FFF;
969
- font-family: NunitoSans;
970
- font-size: 12px;
971
- font-style: normal;
972
- font-weight: 600;
973
- line-height: 14px;
974
- }
975
-
976
- &:hover {
977
- .tooltip_black {
978
- opacity: 1;
979
- visibility: visible;
980
- transition: 0.5s;
981
- }
982
- }
983
- }
862
+ .type-td_copy-text {
863
+ display: flex;
864
+ text-align: start;
865
+ max-width: 100%;
866
+ width: 100%;
984
867
 
868
+ .copy-box {
869
+ display: flex;
870
+ width: 100%;
871
+ align-items: center;
872
+ gap: 8px;
985
873
 
986
- .text-box {
987
- margin-top: 5px;
988
- display: flex;
989
- flex-direction: column;
990
- gap: 4px;
991
-
992
- & .text,
993
- .text_grey {
994
- white-space: nowrap;
995
- text-overflow: ellipsis;
996
- overflow: hidden;
997
- font-size: 12px;
998
- color: #1890FF;
999
- font-weight: 100;
1000
-
1001
- &_grey {
1002
- font-size: 12px;
1003
- //color: #1890FF;
1004
- color: grey;
1005
- font-weight: 100;
1006
- }
1007
- }
1008
- }
874
+ .text {
875
+ white-space: nowrap;
876
+ overflow: hidden;
877
+ text-overflow: ellipsis;
878
+ }
1009
879
 
1010
- .btn {
1011
- width: min-content;
1012
- padding-left: 4px;
1013
- padding-right: 4px;
1014
- height: 18px;
1015
- min-width: 50px;
1016
- background-color: #F7FDFC;
1017
- border: 1px solid #EDF2F8;
1018
- border-radius: 4px;
1019
- background-image: url('./img/location.svg');
1020
- background-repeat: no-repeat;
1021
- background-position: center right 4px;
1022
- color: #1890FF;
1023
- font-size: 12px;
1024
- }
880
+ .button-copy {
881
+ position: relative;
882
+ width: 16px;
883
+ height: 16px;
884
+ }
1025
885
  }
1026
886
 
1027
- //
887
+ .tooltip-box {
888
+ position: absolute;
889
+ top: calc(50% - 8px);
890
+ right: 0;
1028
891
 
1029
- .type-td_status-with-color {
892
+ .tooltip_black {
893
+ opacity: 0;
894
+ visibility: hidden;
895
+ overflow: hidden;
896
+ color: white;
897
+ position: absolute;
898
+ top: 90%;
899
+ left: calc(30px);
900
+ z-index: 100;
901
+ width: max-content;
902
+ height: auto;
903
+ padding: 10px;
904
+ border-radius: 4px;
905
+ background: #264820;
906
+ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
907
+ color: #fff;
908
+ font-family: NunitoSans;
909
+ font-size: 11px;
910
+ font-style: normal;
911
+ font-weight: 600;
912
+ line-height: 14px;
913
+ }
1030
914
 
1031
- .text {
1032
- overflow: hidden;
1033
- text-overflow: ellipsis;
1034
- white-space: nowrap;
915
+ &:hover {
916
+ .tooltip_black {
917
+ opacity: 1;
918
+ visibility: visible;
919
+ transition: 0.5s;
1035
920
  }
921
+ }
1036
922
  }
1037
923
 
1038
- // contextMenu
924
+ .text-box {
925
+ margin-top: 5px;
926
+ display: flex;
927
+ flex-direction: column;
928
+ gap: 4px;
1039
929
 
1040
- .type-td_context-menu {
1041
- border-right: 1px solid #D9D9D9;
1042
- overflow: visible;
930
+ & .text,
931
+ .text_grey {
932
+ white-space: nowrap;
933
+ text-overflow: ellipsis;
934
+ overflow: hidden;
935
+ font-size: 11px;
936
+ color: #1890ff;
937
+ font-weight: 100;
1043
938
 
1044
- .drop-context-menu {
1045
- position: absolute;
1046
- flex-direction: column;
1047
- min-width: 124px;
1048
- top: calc(100% + 4px);
1049
- right: 0px;
1050
- background-color: #FBFBFB;
1051
- border-radius: 8px;
1052
- overflow: hidden;
1053
- border: 1px solid #E0E7F2;
1054
- background: #FFF;
1055
- box-shadow: 0px 4px 4px 0px rgba(30, 41, 59, 0.06);
1056
- z-index: 1;
1057
-
1058
- &__btn {
1059
- display: flex;
1060
- padding: 8px;
1061
- gap: 8px;
1062
- align-items: center;
1063
- justify-content: space-between;
1064
- width: 100%;
1065
- color: #1E293B;
1066
- text-align: left;
1067
- font-family: Inter;
1068
- font-size: 12px;
1069
- font-style: normal;
1070
- font-weight: 100;
1071
- line-height: normal;
1072
- border: none;
1073
- min-height: 32px;
1074
- background-color: inherit;
1075
-
1076
- &:hover {
1077
- transition: 0.3s;
1078
- background-color: #F7FAFD;
1079
- }
1080
- }
1081
-
1082
- .btn-delete {
1083
- display: flex;
1084
- border-top: 1px solid #E0E7F2;
1085
- }
939
+ &_grey {
940
+ font-size: 11px;
941
+ //color: #1890FF;
942
+ color: grey;
943
+ font-weight: 100;
1086
944
  }
945
+ }
1087
946
  }
1088
947
 
1089
-
1090
- .img-table {
1091
- display: inline-block;
1092
- width: 56px;
1093
- height: 56px;
948
+ .btn {
949
+ width: min-content;
950
+ padding-left: 4px;
951
+ padding-right: 4px;
952
+ height: 18px;
953
+ min-width: 50px;
954
+ background-color: #f7fdfc;
955
+ border: 1px solid #edf2f8;
956
+ border-radius: 4px;
957
+ background-image: url('./img/location.svg');
958
+ background-repeat: no-repeat;
959
+ background-position: center right 4px;
960
+ color: #1890ff;
961
+ font-size: 11px;
1094
962
  }
963
+ }
964
+
965
+ //
1095
966
 
1096
- .filter-btn-box {
967
+ .type-td_status-with-color {
968
+ .text {
969
+ overflow: hidden;
970
+ text-overflow: ellipsis;
971
+ white-space: nowrap;
972
+ }
973
+ }
974
+
975
+ // contextMenu
976
+
977
+ .type-td_context-menu {
978
+ border-right: 1px solid #d9d9d9;
979
+ overflow: visible;
980
+
981
+ .drop-context-menu {
982
+ position: fixed;
983
+ flex-direction: column;
984
+ min-width: 124px;
985
+ top: 0px;
986
+ left: 0px;
987
+ background-color: #fbfbfb;
988
+ border-radius: 8px;
989
+ overflow: hidden;
990
+ border: 1px solid #e0e7f2;
991
+ background: #fff;
992
+ box-shadow: 0px 4px 4px 0px rgba(30, 41, 59, 0.06);
993
+ z-index: 100;
994
+
995
+ &__btn {
1097
996
  display: flex;
997
+ padding: 8px;
998
+ gap: 8px;
1098
999
  align-items: center;
1099
1000
  justify-content: space-between;
1100
- height: auto;
1001
+ width: 100%;
1002
+ color: #1e293b;
1003
+ text-align: left;
1004
+ font-family: Inter;
1005
+ font-size: 11px;
1006
+ font-style: normal;
1007
+ font-weight: 100;
1008
+ line-height: normal;
1101
1009
  border: none;
1102
- position: relative;
1103
- padding-left: 12px;
1104
- padding-right: 12px;
1105
- margin-right: -1px;
1106
- //border-right: 1px solid #BDBCDB;
1107
-
1108
- .filter-icon-default,
1109
- .filter-icon-reset {
1110
- width: 17px;
1111
- height: 17px;
1112
- min-width: 17px;
1113
- margin-left: 14px;
1114
- cursor: pointer;
1115
- }
1010
+ min-height: 32px;
1011
+ background-color: inherit;
1116
1012
 
1117
- .filter-icon-default {
1118
- // &:hover {
1119
- // path {
1120
- // stroke: #6C6AAC;
1121
- // }
1122
- // }
1013
+ &:hover {
1014
+ transition: 0.3s;
1015
+ background-color: #f7fafd;
1123
1016
  }
1017
+ }
1124
1018
 
1125
- .btn__filter_blue2 {
1126
- width: 17px;
1127
- height: 17px;
1128
- margin-left: 14px;
1129
- cursor: pointer;
1130
- }
1019
+ .btn-delete {
1020
+ display: flex;
1021
+ border-top: 1px solid #e0e7f2;
1022
+ }
1023
+ }
1024
+ }
1131
1025
 
1132
- .filter-box {
1133
- position: relative;
1134
- background-color: #fff;
1135
- max-width: 100%;
1136
- width: 100%;
1026
+ .img-table {
1027
+ display: inline-block;
1028
+ width: 56px;
1029
+ height: 56px;
1030
+ }
1137
1031
 
1138
- &__btn {
1139
- display: block;
1140
- position: absolute;
1141
- width: 12px;
1142
- height: 12px;
1143
- border-radius: 50%;
1144
- top: calc(50% - 2px);
1145
- right: 5px;
1146
- border: none;
1147
- background-image: url('./img/close_white.svg');
1148
- background-position: center;
1149
- }
1150
- }
1032
+ .filter-btn-box {
1033
+ display: flex;
1034
+ align-items: center;
1035
+ justify-content: space-between;
1036
+ height: auto;
1037
+ border: none;
1038
+ position: relative;
1039
+ padding-left: 12px;
1040
+ padding-right: 12px;
1041
+ margin-right: -1px;
1042
+ //border-right: 1px solid #BDBCDB;
1043
+
1044
+ .filter-icon-default,
1045
+ .filter-icon-reset {
1046
+ width: 17px;
1047
+ height: 17px;
1048
+ min-width: 17px;
1049
+ margin-left: 14px;
1050
+ cursor: pointer;
1051
+ }
1151
1052
 
1152
- .btn__blue {
1153
- white-space: nowrap;
1154
- margin: 8px 10px;
1155
- }
1053
+ .filter-icon-default {
1054
+ // &:hover {
1055
+ // path {
1056
+ // stroke: #6C6AAC;
1057
+ // }
1058
+ // }
1156
1059
  }
1157
1060
 
1158
- .smooth {
1159
- transition: 1s;
1061
+ .btn__filter_blue2 {
1062
+ width: 17px;
1063
+ height: 17px;
1064
+ margin-left: 14px;
1065
+ cursor: pointer;
1160
1066
  }
1161
1067
 
1068
+ .filter-box {
1069
+ position: relative;
1070
+ background-color: #fff;
1071
+ max-width: 100%;
1072
+ width: 100%;
1073
+
1074
+ &__btn {
1075
+ display: block;
1076
+ position: absolute;
1077
+ width: 12px;
1078
+ height: 12px;
1079
+ border-radius: 50%;
1080
+ top: calc(50% - 2px);
1081
+ right: 5px;
1082
+ border: none;
1083
+ background-image: url('./img/close_white.svg');
1084
+ background-position: center;
1085
+ }
1086
+ }
1087
+
1088
+ .btn__blue {
1089
+ white-space: nowrap;
1090
+ margin: 8px 10px;
1091
+ }
1092
+ }
1093
+
1094
+ .smooth {
1095
+ transition: 1s;
1096
+ }
1162
1097
  }
1163
1098
 
1164
1099
  .loader-table {
1165
- position: absolute;
1166
- top: 0;
1167
- left: 0;
1168
- right: 0;
1169
- bottom: 0;
1170
- display: flex;
1171
- justify-content: center;
1172
- align-items: center;
1173
- width: 100%;
1174
- height: 100%;
1175
- border: none;
1100
+ position: absolute;
1101
+ top: 0;
1102
+ left: 0;
1103
+ right: 0;
1104
+ bottom: 0;
1105
+ display: flex;
1106
+ justify-content: center;
1107
+ align-items: center;
1108
+ width: 100%;
1109
+ height: 100%;
1110
+ border: none;
1176
1111
  }
1177
1112
 
1178
1113
  .search_table_active {
1179
- outline: 1px solid #cacaca;
1114
+ outline: 1px solid #cacaca;
1180
1115
  }
1181
1116
 
1182
1117
  .no-data-table {
1183
- width: 100%;
1184
- height: 100%;
1185
- border-radius: 16px;
1118
+ width: 100%;
1119
+ height: 100%;
1120
+ border-radius: 16px;
1121
+ display: flex;
1122
+ align-items: center;
1123
+ justify-content: center;
1124
+ font-size: 20px;
1125
+ color: grey;
1126
+
1127
+ .img_data {
1128
+ width: 160px;
1129
+ height: 160px;
1130
+ }
1131
+
1132
+ &__content {
1186
1133
  display: flex;
1134
+ flex-direction: column;
1135
+ gap: 16px;
1187
1136
  align-items: center;
1188
- justify-content: center;
1189
- font-size: 22px;
1190
- color: grey;
1191
-
1192
- .img_data {
1193
- width: 160px;
1194
- height: 160px;
1137
+ position: relative;
1138
+ min-width: 160px;
1139
+ min-height: 160px;
1140
+
1141
+ .img_glass {
1142
+ position: absolute;
1143
+ bottom: 30px;
1144
+ right: -25%;
1145
+ animation: myOrbit 4s linear;
1146
+ animation-iteration-count: 1;
1147
+ width: 80px;
1148
+ height: 80px;
1195
1149
  }
1196
1150
 
1197
- &__content {
1198
- display: flex;
1199
- flex-direction: column;
1200
- gap: 16px;
1201
- align-items: center;
1202
- position: relative;
1203
- min-width: 160px;
1204
- min-height: 160px;
1205
-
1206
- .img_glass {
1207
- position: absolute;
1208
- bottom: 30px;
1209
- right: -25%;
1210
- animation: myOrbit 4s linear;
1211
- animation-iteration-count: 1;
1212
- width: 80px;
1213
- height: 80px;
1214
- }
1215
-
1216
- @keyframes myOrbit {
1217
- 0% {
1218
- -webkit-transform: rotate(360deg) translateX(30px) rotate(-360deg);
1219
- }
1220
-
1151
+ @keyframes myOrbit {
1152
+ 0% {
1153
+ -webkit-transform: rotate(360deg) translateX(30px) rotate(-360deg);
1154
+ }
1221
1155
 
1222
- // 100% { -webkit-transform:rotate(0deg) translateX(0px) rotate(0deg); }
1223
- 100% {
1224
- -webkit-transform: rotate(-360deg) translateX(0px) rotate(360deg);
1225
- }
1226
- }
1156
+ // 100% { -webkit-transform:rotate(0deg) translateX(0px) rotate(0deg); }
1157
+ 100% {
1158
+ -webkit-transform: rotate(-360deg) translateX(0px) rotate(360deg);
1159
+ }
1227
1160
  }
1161
+ }
1228
1162
 
1229
- .text_blue {
1230
- font-size: 24px;
1231
- color: #014E94;
1232
- max-width: 160px;
1233
- text-align: center;
1234
- text-decoration: none;
1235
- }
1163
+ .text_blue {
1164
+ font-size: 22px;
1165
+ color: #014e94;
1166
+ max-width: 160px;
1167
+ text-align: center;
1168
+ text-decoration: none;
1169
+ }
1236
1170
  }
1237
1171
 
1238
1172
  .popup_td {
1173
+ opacity: 0;
1174
+ visibility: hidden;
1175
+ display: inline-block;
1176
+ box-shadow: 0.3em 0.6em 1.3em rgba(0, 0, 0, 0.25);
1177
+ position: absolute;
1178
+ background-color: white;
1179
+ padding: 8px 16px;
1180
+ border-radius: 16px;
1181
+ border: 1px solid #d9d9d9;
1182
+ width: 100%;
1183
+ max-width: 100%;
1184
+ top: calc(100% - 16px);
1185
+ left: 0;
1186
+ z-index: 100;
1187
+ transition: 0.5;
1188
+ }
1189
+
1190
+ td:hover {
1191
+ .popup_td-hover {
1239
1192
  opacity: 0;
1240
1193
  visibility: hidden;
1241
1194
  display: inline-block;
1242
- box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
1195
+ box-shadow: 0.3em 0.6em 1.3em rgba(0, 0, 0, 0.25);
1243
1196
  position: absolute;
1244
1197
  background-color: white;
1245
1198
  padding: 8px 16px;
1246
1199
  border-radius: 16px;
1247
- border: 1px solid #D9D9D9;
1200
+ border: 1px solid #d9d9d9;
1248
1201
  width: 100%;
1249
1202
  max-width: 100%;
1250
1203
  top: calc(100% - 16px);
1251
1204
  left: 0;
1252
1205
  z-index: 100;
1206
+ opacity: 1;
1207
+ visibility: visible;
1253
1208
  transition: 0.5;
1254
- }
1255
-
1256
- td:hover {
1257
- .popup_td-hover {
1258
- opacity: 0;
1259
- visibility: hidden;
1260
- display: inline-block;
1261
- box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
1262
- position: absolute;
1263
- background-color: white;
1264
- padding: 8px 16px;
1265
- border-radius: 16px;
1266
- border: 1px solid #D9D9D9;
1267
- width: 100%;
1268
- max-width: 100%;
1269
- top: calc(100% - 16px);
1270
- left: 0;
1271
- z-index: 100;
1272
- opacity: 1;
1273
- visibility: visible;
1274
- transition: 0.5;
1275
- }
1209
+ }
1276
1210
  }
1277
1211
 
1278
1212
  .table-loading-box {
1279
- width: 100%;
1280
- display: flex;
1281
- justify-content: center;
1282
- align-items: center;
1283
- margin-left: auto;
1284
- margin-right: auto;
1285
- height: 100%;
1213
+ width: 100%;
1214
+ display: flex;
1215
+ justify-content: center;
1216
+ align-items: center;
1217
+ margin-left: auto;
1218
+ margin-right: auto;
1219
+ height: 100%;
1286
1220
  }
1287
1221
 
1288
1222
  .table-box-component__content {
1289
- background-color: white;
1290
- position: relative;
1291
-
1223
+ background-color: white;
1224
+ position: relative;
1292
1225
  }
1293
1226
 
1294
1227
  .loader-box-tr {
1295
- padding: 8px;
1296
- height: 100%;
1297
- border-top: 1px solid #D9D9D9;
1298
- border-bottom: 1px solid #D9D9D9;
1228
+ padding: 8px;
1229
+ height: 100%;
1230
+ border-top: 1px solid #d9d9d9;
1231
+ border-bottom: 1px solid #d9d9d9;
1299
1232
  }
1300
1233
 
1301
1234
  .td-text-table {
1302
- display: -webkit-box;
1303
- -webkit-line-clamp: 4; // количество строк
1304
- -webkit-box-orient: vertical;
1305
- overflow-x: hidden;
1306
- hyphens: auto;
1307
- color: #020018;
1308
- line-height: 16px;
1309
- letter-spacing: 0.14px;
1310
- font-family: NunitoSans;
1311
- overflow: hidden;
1312
- color: #0B110B;
1313
- font-size: 12px;
1314
- font-style: normal;
1315
- font-weight: 600;
1316
- line-height: 14px;
1317
- letter-spacing: .5px;
1318
- cursor: pointer;
1319
-
1320
- .header-img {
1321
- width: 16px;
1322
- height: auto;
1323
- }
1324
-
1325
- .popup-th {
1326
- opacity: 0;
1327
- visibility: hidden;
1328
- display: inline-block;
1329
- box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
1330
- position: absolute;
1331
- background-color: white;
1332
- padding: 8px 16px;
1333
- border-radius: 16px;
1334
- border: 1px solid #D9D9D9;
1335
- width: auto;
1336
- top: calc(100% + 8px);
1337
- left: -16px;
1338
- z-index: 100;
1339
- transition: 0.5;
1340
- }
1341
-
1235
+ display: -webkit-box;
1236
+ -webkit-line-clamp: 4; // количество строк
1237
+ -webkit-box-orient: vertical;
1238
+ overflow-x: hidden;
1239
+ hyphens: auto;
1240
+ color: #020018;
1241
+ line-height: 16px;
1242
+ letter-spacing: 0.14px;
1243
+ font-family: NunitoSans;
1244
+ overflow: hidden;
1245
+ color: #0b110b;
1246
+ font-size: 11px;
1247
+ font-style: normal;
1248
+ font-weight: 600;
1249
+ line-height: 14px;
1250
+ letter-spacing: 0.5px;
1251
+ cursor: pointer;
1252
+
1253
+ .header-img {
1254
+ width: 16px;
1255
+ height: auto;
1256
+ }
1257
+
1258
+ .popup-th {
1259
+ opacity: 0;
1260
+ visibility: hidden;
1261
+ display: inline-block;
1262
+ box-shadow: 0.3em 0.6em 1.3em rgba(0, 0, 0, 0.25);
1263
+ position: absolute;
1264
+ background-color: white;
1265
+ padding: 8px 16px;
1266
+ border-radius: 16px;
1267
+ border: 1px solid #d9d9d9;
1268
+ width: auto;
1269
+ top: calc(100% + 8px);
1270
+ left: -16px;
1271
+ z-index: 100;
1272
+ transition: 0.5;
1273
+ }
1342
1274
 
1343
- &:hover>.popup-th {
1344
- opacity: 0;
1345
- visibility: hidden;
1346
- display: inline-block;
1347
- box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
1348
- position: absolute;
1349
- background-color: white;
1350
- padding: 8px 16px;
1351
- border-radius: 16px;
1352
- border: 1px solid #D9D9D9;
1353
- width: auto;
1354
- top: calc(100% + 8px);
1355
- left: -16px;
1356
- z-index: 100;
1357
- opacity: 1;
1358
- visibility: visible;
1359
- transition: 0.5;
1360
- }
1275
+ &:hover > .popup-th {
1276
+ opacity: 0;
1277
+ visibility: hidden;
1278
+ display: inline-block;
1279
+ box-shadow: 0.3em 0.6em 1.3em rgba(0, 0, 0, 0.25);
1280
+ position: absolute;
1281
+ background-color: white;
1282
+ padding: 8px 16px;
1283
+ border-radius: 16px;
1284
+ border: 1px solid #d9d9d9;
1285
+ width: auto;
1286
+ top: calc(100% + 8px);
1287
+ left: -16px;
1288
+ z-index: 100;
1289
+ opacity: 1;
1290
+ visibility: visible;
1291
+ transition: 0.5;
1292
+ }
1361
1293
  }
1362
1294
 
1363
1295
  @keyframes showDiv {
1296
+ 0%,
1297
+ 99% {
1298
+ visibility: hidden;
1299
+ overflow: 0;
1300
+ }
1364
1301
 
1365
- 0%,
1366
- 99% {
1367
- visibility: hidden;
1368
- overflow: 0;
1369
- }
1370
-
1371
- 100% {
1372
- visibility: visible;
1373
- opacity: 1;
1374
- }
1302
+ 100% {
1303
+ visibility: visible;
1304
+ opacity: 1;
1305
+ }
1375
1306
  }
1376
1307
 
1377
-
1378
- // date
1308
+ // date
1379
1309
  .date-box-filter-table {
1380
- position: absolute;
1381
- display: none;
1382
- z-index: 5;
1383
- top: calc(100% + 10px);
1384
- left: 0;
1385
-
1386
- display: none;
1387
- width: auto;
1388
- position: absolute;
1310
+ position: absolute;
1311
+ display: none;
1312
+ z-index: 5;
1313
+ top: calc(100% + 10px);
1314
+ left: 0;
1315
+
1316
+ display: none;
1317
+ width: auto;
1318
+ position: absolute;
1319
+ border-radius: 8px;
1320
+ background-color: white;
1321
+ top: calc(100% + 10px);
1322
+ left: 0;
1323
+ -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
1324
+ -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
1325
+ box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
1326
+ z-index: 5;
1327
+ overflow: hidden;
1328
+ cursor: pointer;
1329
+ overflow: hidden;
1330
+ flex-direction: column;
1331
+
1332
+ .react-datepicker {
1333
+ border: none;
1389
1334
  border-radius: 8px;
1390
- background-color: white;
1391
- top: calc(100% + 10px);
1392
- left: 0;
1393
- -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
1394
- -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
1395
- box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
1396
- z-index: 5;
1397
- overflow: hidden;
1398
- cursor: pointer;
1399
- overflow: hidden;
1400
- flex-direction: column;
1335
+ }
1401
1336
 
1402
- .react-datepicker {
1403
- border: none;
1404
- border-radius: 8px;
1405
- }
1406
-
1407
- .btn-group {
1408
- display: flex;
1409
- flex-direction: column;
1410
- gap: 8px;
1411
- align-items: center;
1412
- justify-content: center;
1413
- width: 100%;
1414
- margin-bottom: 8px;
1415
- }
1337
+ .btn-group {
1338
+ display: flex;
1339
+ flex-direction: column;
1340
+ gap: 8px;
1341
+ align-items: center;
1342
+ justify-content: center;
1343
+ width: 100%;
1344
+ margin-bottom: 8px;
1345
+ }
1416
1346
  }
1417
1347
 
1418
1348
  .collect_info_box {
1419
- display: flex;
1420
- gap: 20px;
1349
+ display: flex;
1350
+ gap: 20px;
1351
+ width: 100%;
1352
+ padding: 12px;
1353
+ height: 100%;
1354
+
1355
+ .img-box {
1356
+ min-width: 100px;
1357
+ width: 100px;
1358
+ height: 100px;
1359
+ border-radius: 4px;
1360
+ border: 1px solid #edefed;
1361
+ background: #fff;
1362
+
1363
+ .collect_info_img {
1364
+ object-fit: contain;
1365
+ width: 100%;
1366
+ height: 100%;
1367
+ }
1368
+ }
1369
+
1370
+ .text_info_box {
1371
+ min-width: 100px;
1421
1372
  width: 100%;
1422
- padding: 12px;
1373
+ display: flex;
1374
+ gap: 3px;
1375
+ // justify-content: space-between;
1423
1376
  height: 100%;
1377
+ flex-direction: column;
1424
1378
 
1425
- .img-box {
1426
- min-width: 100px;
1427
- width: 100px;
1428
- height: 100px;
1429
- border-radius: 4px;
1430
- border: 1px solid #EDEFED;
1431
- background: #FFF;
1379
+ .text_info_name {
1380
+ font-family: NunitoSans;
1381
+ overflow: hidden;
1382
+ color: #636d65;
1383
+ font-size: 13px;
1384
+ font-style: normal;
1385
+ font-weight: 500;
1386
+ line-height: 16px;
1387
+ }
1432
1388
 
1433
- .collect_info_img {
1434
- object-fit: contain;
1435
- width: 100%;
1436
- height: 100%;
1437
- }
1389
+ .text_info_desc,
1390
+ .text_info_brand {
1391
+ // white-space: nowrap;
1392
+ text-overflow: ellipsis;
1393
+ overflow: hidden;
1394
+ font-family: NunitoSans;
1395
+ overflow: hidden;
1396
+ color: #636d65;
1397
+ text-overflow: ellipsis;
1398
+ font-size: 10px;
1399
+ font-style: normal;
1400
+ font-weight: 400;
1401
+ line-height: 12px;
1438
1402
  }
1439
1403
 
1440
- .text_info_box {
1441
- min-width: 100px;
1442
- width: 100%;
1404
+ .text_info_sub_desc_box {
1405
+ display: flex;
1406
+ // justify-content: space-between;
1407
+ align-items: flex-end;
1408
+ gap: 10px;
1409
+ flex-wrap: nowrap;
1410
+ width: 100%;
1411
+ margin-top: 4px;
1412
+
1413
+ .text_sum {
1443
1414
  display: flex;
1444
- gap: 3px;
1445
- // justify-content: space-between;
1446
- height: 100%;
1447
- flex-direction: column;
1448
-
1449
- .text_info_name {
1450
- font-family: NunitoSans;
1451
- overflow: hidden;
1452
- color: #636D65;
1453
- font-size: 14px;
1454
- font-style: normal;
1455
- font-weight: 500;
1456
- line-height: 16px;
1457
- }
1415
+ padding: 2px;
1416
+ align-items: flex-end;
1417
+ gap: 4px;
1418
+ border-radius: 4px;
1419
+ background: #f0f2f4;
1420
+ color: #0b110b;
1421
+ font-family: NunitoSans;
1422
+ font-size: 11px;
1423
+ font-style: normal;
1424
+ font-weight: 700;
1425
+ line-height: 12px;
1458
1426
 
1459
- .text_info_desc,
1460
- .text_info_brand {
1461
- // white-space: nowrap;
1462
- text-overflow: ellipsis;
1463
- overflow: hidden;
1464
- font-family: NunitoSans;
1465
- overflow: hidden;
1466
- color: #636D65;
1467
- text-overflow: ellipsis;
1468
- font-size: 10px;
1469
- font-style: normal;
1470
- font-weight: 400;
1471
- line-height: 12px;
1427
+ span {
1428
+ color: #b4b8b4;
1429
+ font-size: 10px;
1430
+ font-weight: 500;
1472
1431
  }
1432
+ }
1473
1433
 
1474
- .text_info_sub_desc_box {
1475
- display: flex;
1476
- // justify-content: space-between;
1477
- align-items: flex-end;
1478
- gap: 10px;
1479
- flex-wrap: nowrap;
1480
- width: 100%;
1481
- margin-top: 4px;
1482
-
1483
- .text_sum {
1484
- display: flex;
1485
- padding: 2px;
1486
- align-items: flex-end;
1487
- gap: 4px;
1488
- border-radius: 4px;
1489
- background: #F0F2F4;
1490
- color: #0B110B;
1491
- font-family: NunitoSans;
1492
- font-size: 12px;
1493
- font-style: normal;
1494
- font-weight: 700;
1495
- line-height: 12px;
1496
-
1497
- span {
1498
- color: #B4B8B4;
1499
- font-size: 10px;
1500
- font-weight: 500;
1501
- }
1502
- }
1503
-
1504
- .text_info_sub_desc {
1505
- color: #B4B8B4;
1506
- font-family: NunitoSans;
1507
- font-size: 12px;
1508
- font-style: normal;
1509
- font-weight: 400;
1510
- line-height: 12px;
1511
-
1512
- span {
1513
- color: #000;
1514
- }
1515
- }
1516
-
1517
- .button-copy {
1518
- position: relative;
1519
- width: 16px;
1520
- height: 16px;
1521
- }
1434
+ .text_info_sub_desc {
1435
+ color: #b4b8b4;
1436
+ font-family: NunitoSans;
1437
+ font-size: 11px;
1438
+ font-style: normal;
1439
+ font-weight: 400;
1440
+ line-height: 12px;
1441
+
1442
+ span {
1443
+ color: #000;
1522
1444
  }
1445
+ }
1446
+
1447
+ .button-copy {
1448
+ position: relative;
1449
+ width: 16px;
1450
+ height: 16px;
1451
+ }
1523
1452
  }
1524
- }
1453
+ }
1454
+ }