@scaleflex/widget-common 4.8.4 → 4.8.6

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 (125) hide show
  1. package/CHANGELOG.md +8368 -8351
  2. package/LICENSE +0 -0
  3. package/README.md +58 -58
  4. package/package.json +4 -4
  5. package/dist/style.css +0 -1126
  6. package/dist/style.min.css +0 -1
  7. package/lib/ApprovalStatus/ApprovalStatus.styled.js +0 -21
  8. package/lib/ApprovalStatus/index.js +0 -104
  9. package/lib/AssetPreview.js +0 -53
  10. package/lib/AutoSuggest.js +0 -166
  11. package/lib/Avatar/Avatar.styled.js +0 -25
  12. package/lib/Avatar/index.js +0 -83
  13. package/lib/AvatarWithStatus/AvatarWithStatus.styled.js +0 -12
  14. package/lib/AvatarWithStatus/index.js +0 -30
  15. package/lib/BackButton.js +0 -46
  16. package/lib/BackdropOverlay.js +0 -77
  17. package/lib/BadgeButton.js +0 -35
  18. package/lib/BaseButton.js +0 -36
  19. package/lib/Button.js +0 -29
  20. package/lib/Carousel/Carousel.styled.js +0 -19
  21. package/lib/Carousel/index.js +0 -136
  22. package/lib/Checkbox.js +0 -55
  23. package/lib/CloseButton.js +0 -46
  24. package/lib/ColorPicker/ColorPicker.styled.js +0 -29
  25. package/lib/ColorPicker/index.js +0 -117
  26. package/lib/ColorPickerModal/ColorPickerModal.styled.js +0 -17
  27. package/lib/ColorPickerModal/index.js +0 -103
  28. package/lib/DatePicker/MyDatePicker.js +0 -350
  29. package/lib/DatePicker/index.js +0 -1
  30. package/lib/DatePicker/index.scss +0 -254
  31. package/lib/DropFilesWindow.js +0 -45
  32. package/lib/FilterItem/FilterItem.styled.js +0 -42
  33. package/lib/FilterItem/index.js +0 -48
  34. package/lib/FilterPopup/FilterPopup.styled.js +0 -16
  35. package/lib/FilterPopup/index.js +0 -85
  36. package/lib/FormControl.js +0 -25
  37. package/lib/FormGroup.js +0 -18
  38. package/lib/FormHelperText.js +0 -29
  39. package/lib/IconLabeledButton.js +0 -32
  40. package/lib/Image/Image.styled.js +0 -16
  41. package/lib/Image/index.js +0 -95
  42. package/lib/ImagePreview/ImagePreview.styled.js +0 -19
  43. package/lib/ImagePreview/index.js +0 -198
  44. package/lib/InputAndLabel.js +0 -77
  45. package/lib/InputGroupTime.js +0 -6
  46. package/lib/InputLabel.js +0 -18
  47. package/lib/ItemButtonOverlay/ItemButtonOverlay.styled.js +0 -33
  48. package/lib/ItemButtonOverlay/index.js +0 -23
  49. package/lib/ItemHoverTopOptions.js +0 -58
  50. package/lib/LoaderView/LoaderView.styled.js +0 -37
  51. package/lib/LoaderView/index.js +0 -32
  52. package/lib/MetaData/FilterMetadataFields.js +0 -115
  53. package/lib/MetaData/FilterMetadataFields.styled.js +0 -16
  54. package/lib/MetaData/MetaDataField.js +0 -246
  55. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldBooleanType.js +0 -36
  56. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldDateType.js +0 -53
  57. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldMultiSelectType.js +0 -71
  58. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldNumericType.js +0 -45
  59. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldSelectType.js +0 -69
  60. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTagsType.js +0 -143
  61. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTextType.js +0 -42
  62. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTextareaType.js +0 -72
  63. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTypes.styled.js +0 -57
  64. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/AttachmentsAssetsMetadataAccordion.styled.js +0 -95
  65. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/MetadataAttachmentsAction.js +0 -188
  66. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/MetadataAttachmentsFieldType.constants.js +0 -48
  67. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/MetadataAttachmentsInfo.js +0 -93
  68. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/index.js +0 -114
  69. package/lib/MetaData/MetaDataFieldTypes/MetadataFieldUriType.js +0 -71
  70. package/lib/MetaData/MetaDataFieldTypes/MetadataGeoPointField/MetadataGeoPointField.styled.js +0 -8
  71. package/lib/MetaData/MetaDataFieldTypes/MetadataGeoPointField/constants.js +0 -10
  72. package/lib/MetaData/MetaDataFieldTypes/MetadataGeoPointField/index.js +0 -135
  73. package/lib/MetaData/MetaDataFieldTypes/index.js +0 -9
  74. package/lib/MetaData/MetaDataFieldTypes.hooks.js +0 -53
  75. package/lib/OverlayCard/OverlayCard.styled.js +0 -8
  76. package/lib/OverlayCard/index.js +0 -28
  77. package/lib/PoweredBy.js +0 -12
  78. package/lib/Radiobox.js +0 -63
  79. package/lib/RegionalVariantsFilters/RegionalVariantFilters.styled.js +0 -17
  80. package/lib/RegionalVariantsFilters/index.js +0 -160
  81. package/lib/SVGUrlToElement.js +0 -73
  82. package/lib/SearchGroup/SearchGroup.styled.js +0 -93
  83. package/lib/SearchGroup/index.js +0 -293
  84. package/lib/Spinner.js +0 -40
  85. package/lib/SuggestedSelectInput/SuggestedSelectInput.styled.js +0 -57
  86. package/lib/SuggestedSelectInput/index.js +0 -238
  87. package/lib/SuggestedTagsInput/SuggestedTagsInput.js +0 -295
  88. package/lib/SuggestedTagsInput/SuggestedTagsInput.styled.js +0 -83
  89. package/lib/SuggestedTagsInput/SuggestedTagsInput.utils.js +0 -15
  90. package/lib/SuggestedTagsInput/SuggestedTagsInputSkeleton.js +0 -14
  91. package/lib/Tabs.js +0 -62
  92. package/lib/ToggleButton/ToggleButton.styled.js +0 -16
  93. package/lib/ToggleButton/index.js +0 -16
  94. package/lib/Transitions/SlideTransition.js +0 -24
  95. package/lib/Transitions/TransitionWrapper.js +0 -83
  96. package/lib/Transitions/Transitions.styled.js +0 -8
  97. package/lib/Transitions/index.js +0 -2
  98. package/lib/Transitions/transitions.scss +0 -49
  99. package/lib/Typography/Typography.js +0 -47
  100. package/lib/Typography/Typography.mixin.js +0 -46
  101. package/lib/Typography/Typography.styled.js +0 -18
  102. package/lib/Typography/index.js +0 -3
  103. package/lib/Typography/types/index.js +0 -1
  104. package/lib/Typography/types/variant.js +0 -9
  105. package/lib/UploadFileFloatyLabel/UploadFileFloatyLabel.mixin.js +0 -23
  106. package/lib/UploadFileFloatyLabel/UploadFileFloatyLabel.styled.js +0 -24
  107. package/lib/UploadFileFloatyLabel/index.js +0 -12
  108. package/lib/UsersAutocomplete/Tag.js +0 -25
  109. package/lib/UsersAutocomplete/Tag.styled.js +0 -35
  110. package/lib/UsersAutocomplete/UsersAutocomplete.styled.js +0 -94
  111. package/lib/UsersAutocomplete/index.js +0 -303
  112. package/lib/VirtualGrid/VirtualGrid.styled.js +0 -33
  113. package/lib/VirtualGrid/VirtualGrid.utils.js +0 -38
  114. package/lib/VirtualGrid/VirtualGridItem.js +0 -15
  115. package/lib/VirtualGrid/index.js +0 -252
  116. package/lib/VirtualList/VirtualListItem.js +0 -14
  117. package/lib/VirtualList/index.js +0 -105
  118. package/lib/hooks/index.js +0 -4
  119. package/lib/hooks/useDebounce.js +0 -24
  120. package/lib/hooks/useInputWithLocaleNumber.js +0 -115
  121. package/lib/hooks/useIsUnMountedRef.js +0 -12
  122. package/lib/hooks/useKeyboardNavigation.js +0 -60
  123. package/lib/hooks/useUpdateEffect.js +0 -19
  124. package/lib/index.js +0 -36
  125. package/lib/style.scss +0 -1079
package/lib/style.scss DELETED
@@ -1,1079 +0,0 @@
1
- // THERE ARE OTHER IMPORTS IN THE END OF THE FILE DEPENDS ON THE OBRDER OF NEEDED STYLES
2
- @import '@scaleflex/widget-core/lib/_variables.scss';
3
- @import '@scaleflex/widget-core/lib/_utils.scss';
4
-
5
-
6
- .filerobot-Explorer-assets-picker-modal {
7
- z-index: $zIndex-modal;
8
- }
9
-
10
- // !!! Deprecated (ui-kit Button should be used instead)
11
- // TODO Remove after Button is changed to ui-kit everywhere
12
- // ==================================================================
13
- // ============================ Buttons =============================
14
- // ==================================================================
15
- .filerobot-common-BaseButton {
16
- font-weight: 500;
17
- padding: 8px 12px;
18
- border-radius: 2px;
19
- display: flex;
20
- align-items: center;
21
- justify-content: center;
22
- cursor: pointer;
23
- border: 0;
24
- outline: none;
25
- position: relative;
26
- user-select: none;
27
- transition: all 100ms ease-in-out;
28
-
29
- span[role='container'] {
30
- z-index: 4;
31
- display: flex;
32
- align-items: center;
33
- }
34
-
35
- @media (max-width: 636px) {
36
- min-width: 32px;
37
- min-height: 28px;
38
- padding: 2px 6px;
39
- }
40
-
41
- span:not([role='container']) {
42
- @media (max-width: 636px) {
43
- display: none;
44
- }
45
- }
46
-
47
- &:before {
48
- content: '';
49
- position: absolute;
50
- width: 0;
51
- height: 100%;
52
- background: $active-transition;
53
- opacity: 0;
54
- border-radius: 15px 2px 15px 5px;
55
- transition: width 0.07s ease-in-out, border-radius 0.15s ease-in-out;
56
- }
57
-
58
- &:not(:disabled):active {
59
- opacity: 1;
60
-
61
- &:before {
62
- opacity: 1;
63
- border-radius: inherit;
64
- width: 100%;
65
- }
66
- }
67
-
68
- &:disabled {
69
- color: $gray-400;
70
- fill: $gray-400;
71
- cursor: not-allowed;
72
- opacity: 0.8;
73
- background: rgba(79, 98, 118, 0.7);
74
-
75
- *,
76
- &:before {
77
- background: none;
78
- fill: currentColor;
79
- color: currentColor;
80
- }
81
- }
82
- }
83
-
84
- .filerobot-common-BaseButton-auto {
85
-
86
- &:not(:disabled){
87
- :hover,
88
- :focus {
89
- background: $hover;
90
-
91
- * {
92
- color: $active;
93
- fill: $active;
94
- }
95
- }
96
- }
97
- }
98
-
99
- .filerobot-common-BaseButton-transparent {
100
- background: transparent;
101
- color: $active;
102
-
103
- &:not(:disabled) {
104
- &:hover,
105
- &:focus {
106
- background: $hover;
107
-
108
- svg * {
109
- color: $active;
110
- fill: $active;
111
- }
112
-
113
- * {
114
- color: $active;
115
- }
116
- }
117
- }
118
- }
119
-
120
- .filerobot-common-BaseButton-primary {
121
- color: $white;
122
- background: $primary;
123
-
124
- &:not(:disabled):hover {
125
- filter: brightness(1.1);
126
- }
127
- }
128
-
129
- .filerobot-common-BaseButton-accent {
130
- color: $white;
131
- background: $accent;
132
-
133
- &:not(:disabled):hover {
134
- filter: brightness(1.1);
135
- }
136
-
137
- &:before {
138
- background: $accent-active;
139
- }
140
- }
141
-
142
- .filerobot-common-BaseButton-secondary {
143
- color: $white;
144
- background: $secondary;
145
-
146
- &:not(:disabled):hover {
147
- filter: brightness(1.1);
148
- }
149
- }
150
-
151
- .filerobot-common-BaseButton-activeSecondary {
152
- color: $active;
153
- background: $active-secondary;
154
- }
155
-
156
- .filerobot-common-BaseButton-small {
157
- font-size: 12px;
158
- padding: 2px 6px;
159
-
160
- &.filerobot-common-LabeledIconButton {
161
- img {
162
- min-height: 12px;
163
- min-width: 12px;
164
- max-height: 12px;
165
- max-width: 12px;
166
- }
167
-
168
- span:not([role='container']) {
169
- margin-left: 4px;
170
- }
171
- }
172
- }
173
-
174
- .filerobot-common-BaseButton-medium {
175
- font-size: 15px;
176
- line-height: 16px;
177
-
178
- &.filerobot-common-LabeledIconButton {
179
- img {
180
- min-height: 12px;
181
- min-width: 12px;
182
- max-height: 12px;
183
- max-width: 12px;
184
- }
185
- }
186
- }
187
-
188
- .filerobot-common-BaseButton-large {
189
- font-size: 17px;
190
- padding: 8px 14px;
191
-
192
- &.filerobot-common-LabeledIconButton {
193
- img {
194
- min-height: 16px;
195
- min-width: 16px;
196
- max-height: 16px;
197
- max-width: 16px;
198
- }
199
- }
200
- }
201
-
202
- .filerobot-common-BaseButton-fullWidth {
203
- font-size: 17px;
204
- width: 100%;
205
-
206
- &.filerobot-common-LabeledIconButton {
207
-
208
- svg,
209
- img {
210
- min-height: 16px;
211
- min-width: 16px;
212
- max-height: 16px;
213
- max-width: 16px;
214
- }
215
-
216
- span:not([role='container']) {
217
- margin-left: 8px;
218
- }
219
- }
220
- }
221
-
222
- .filerobot-common-LabeledIconButton-label {
223
- margin-left: 4px;
224
- }
225
-
226
- .filerobot-common-BadgeButton {
227
- padding: 8px 12px;
228
- margin-right: 4px;
229
-
230
- .filerobot-common-BadgeButton-badgeContent {
231
- border-radius: 50%;
232
- color: $accent;
233
- background: $white;
234
- font-weight: 500;
235
- margin-left: 4px;
236
- font-size: 10px;
237
- width: 14px;
238
- height: 14px;
239
- display: inline-flex;
240
- justify-content: center;
241
- align-items: center;
242
- }
243
-
244
- &-activeSecondary {
245
- .filerobot-common-BadgeButton-badgeContent {
246
- color: $white;
247
- background: $active;
248
- }
249
- }
250
- }
251
-
252
- .filerobot-common-BackCloseButton {
253
- display: flex;
254
- align-items: center;
255
- }
256
-
257
- .filerobot-common-BackCloseButton-button {
258
- padding: 6px;
259
- }
260
-
261
- .filerobot-common-BackCloseButton-buttonMargin {
262
- margin: 0 6px;
263
- }
264
-
265
- .filerobot-common-BackCloseButton-divider {
266
- height: 22px;
267
- }
268
-
269
- // ==================================================================
270
- // ============================= Blocks =============================
271
- // ==================================================================
272
- // packages/@filerobot/common/src/BackdropOverlay.jsx
273
- .filerobot-common-BackdropOverlay {
274
- position: fixed;
275
- left: 0;
276
- top: 0;
277
- bottom: 0;
278
- right: 0;
279
- z-index: $zIndex-highest-1;
280
- }
281
-
282
- // <<
283
-
284
- // !!! Deprecated (ui-kit should be used instead)
285
- // ==================================================================
286
- // ============================= Divider ============================
287
- // ==================================================================
288
- .filerobot-common-verticalDivider {
289
- background: $border;
290
- width: 1px;
291
- }
292
-
293
- // !!! Deprecated (ui-kit should be used instead)
294
- // ==================================================================
295
- // ============================== Radio =============================
296
- // ==================================================================
297
- .filerobot-common-Radio-wrapper {
298
- display: inline-flex;
299
- cursor: pointer;
300
- align-items: center;
301
- padding: 8px 0;
302
-
303
- &:first-child {
304
- padding-top: 0;
305
- }
306
-
307
- &:last-child {
308
- padding-bottom: 0;
309
- }
310
- }
311
-
312
- .filerobot-common-Radio {
313
- display: inline-block;
314
- padding-right: 8px;
315
- }
316
-
317
- .filerobot-common-Radio-label {
318
- font-size: 16px;
319
- line-height: 18px;
320
- color: $darkgrey;
321
- }
322
-
323
- // ==================================================================
324
- // =========================== FormGroup ==========================
325
- // ==================================================================
326
- // packages/@filerobot/common/src/FormGroup.jsx
327
- .filerobot-common-FormGroup {
328
- &:not(:last-child) {
329
- margin-bottom: 16px;
330
- }
331
- }
332
-
333
- // ==================================================================
334
- // =========================== FormControl ==========================
335
- // ==================================================================
336
- // packages/@filerobot/common/src/FormControl.jsx
337
- .filerobot-common-FormControl {
338
- &-inline {
339
- display: flex;
340
- }
341
-
342
- &-with-hint {
343
- margin-bottom: 0;
344
- }
345
-
346
- &-error {
347
- color: $error;
348
-
349
- .filerobot-common-InputLabel,
350
- .filerobot-common-FormHelperText,
351
- .SfxLabel-root,
352
- .SfxFormHint-root {
353
- color: $error;
354
- }
355
-
356
- &:not(:has([data-valid='true'])) {
357
- .SfxInput-root,
358
- .filerobot-common-Textarea,
359
- .filerobot-common-Select,
360
- .filerobot-common-Input,
361
- .SfxInput-root {
362
- color: $error;
363
- border-color: $error;
364
- background: $white;
365
- outline-color: $error;
366
-
367
- &:focus-within,
368
- &:focus,
369
- &:hover {
370
- border: 1px solid $error;
371
- outline: none;
372
- }
373
- }
374
- }
375
- }
376
- }
377
-
378
- // ==================================================================
379
- // =========================== InputLabel ===========================
380
- // ==================================================================
381
- // packages/@filerobot/common/src/InputLabel.jsx
382
- .filerobot-common-InputLabel {
383
- display: flex;
384
- align-items: center;
385
- margin-bottom: 3px;
386
- font-size: 12px;
387
- font-weight: 400;
388
- color: $secondary;
389
- }
390
-
391
- // ==================================================================
392
- // ========================== FormHelperText ========================
393
- // ==================================================================
394
- // packages/@filerobot/common/src/InputLabel.jsx
395
- .filerobot-common-FormHelperText {
396
- margin-top: 3px;
397
- font-size: 10px;
398
- color: $secondary;
399
-
400
- &-medium {
401
- font-size: 14px;
402
- }
403
-
404
- &-no-margin {
405
- margin: 0;
406
- }
407
- }
408
-
409
- // ==================================================================
410
- // =========================== AutoSuggest ==========================
411
- // ==================================================================
412
- // packages/@filerobot/common/src/AutoSuggest.jsx
413
- .filerobot-common-autoSuggest {
414
- position: relative;
415
-
416
- &-list-wrapper {
417
- position: absolute;
418
- z-index: 11111111111111;
419
- }
420
- }
421
-
422
- .suggestions {
423
- &-list {
424
- border: 1px solid #ddd;
425
- border-radius: 2px;
426
- list-style: none;
427
- margin-top: 0;
428
- margin-left: 125px;
429
- padding-left: 0;
430
- font-size: 14px;
431
- background-color: #fff;
432
- max-height: 200px;
433
- overflow-y: scroll;
434
- overflow-x: hidden;
435
-
436
- & li {
437
- padding: 0.5rem;
438
- font-size: 1rem;
439
- }
440
- }
441
-
442
- &-tags {
443
- display: inline-flex;
444
- flex-wrap: wrap;
445
- margin: 0;
446
- padding: 0;
447
- width: 100%;
448
- list-style: none;
449
-
450
- & li {
451
- position: relative;
452
- align-items: center;
453
- margin: 0 8px 8px 0;
454
- padding: 4px 12px;
455
- border-radius: 2px;
456
- border: 1px dashed $active;
457
- background: transparent;
458
- color: $active;
459
- display: flex;
460
- font-family: 'Roboto';
461
- font-size: 14px;
462
- line-height: 16.4px;
463
- font-weight: 400;
464
- list-style: none;
465
- user-select: none;
466
- max-height: 24px;
467
-
468
- &:hover .filerobot-c-icon {
469
- display: block;
470
- }
471
-
472
- .filerobot-c-icon {
473
- display: none;
474
- position: absolute;
475
- top: 3px;
476
- right: 3px;
477
- width: 6px;
478
- height: 6px;
479
- color: $white;
480
- }
481
- }
482
-
483
- & li button {
484
- align-items: center;
485
- appearance: none;
486
- background: transparent;
487
- border: none;
488
- border-radius: 50%;
489
- color: $secondary;
490
- cursor: pointer;
491
- display: inline-flex;
492
- font-size: 12px;
493
- height: 15px;
494
- justify-content: center;
495
- line-height: 0;
496
- margin-left: 8px;
497
- padding: 0;
498
- transform: rotate(45deg);
499
- width: 15px;
500
- }
501
- }
502
- }
503
-
504
- .no-suggestions {
505
- color: #999;
506
- padding: 0.5rem;
507
- }
508
-
509
- .suggestions-title {
510
- display: flex;
511
- align-items: center;
512
- font-size: 12px;
513
- font-weight: 400;
514
- padding: 4px 0;
515
-
516
- svg {
517
- margin-right: 4px;
518
- }
519
- }
520
-
521
- .post-upload-suggestion {
522
- margin-left: 0;
523
- width: 100%;
524
- }
525
-
526
- .suggestion-active,
527
- .suggestions li:hover {
528
- cursor: pointer;
529
- background: $active;
530
- color: $white;
531
- border: 1px solid $active;
532
- }
533
-
534
- .suggestion-loading {
535
- display: flex;
536
- height: 100px;
537
- font-size: 1rem;
538
- justify-content: center;
539
- align-items: center;
540
- }
541
-
542
- // ==================================================================
543
- // =========================== CheckBox =============================
544
- // ==================================================================
545
- // packages/@filerobot/common/src/Checkbox.jsx
546
- .filerobot-common-Checkbox-wrapper {
547
- cursor: pointer;
548
- display: flex;
549
- align-items: center;
550
- }
551
-
552
- .filerobot-common-Checkbox {
553
- display: flex;
554
- align-items: center;
555
- justify-content: center;
556
- min-height: 16px;
557
- max-height: 16px;
558
- min-width: 16px;
559
- max-width: 16px;
560
- margin-right: 12px;
561
- background: $background-primary;
562
- border: 1px solid $border;
563
- border-radius: 1px;
564
- outline: none;
565
- text-align: center;
566
- cursor: pointer;
567
- }
568
-
569
- .filerobot-common-Checkbox-label {
570
- font-size: 12px;
571
- line-height: 14px;
572
- max-width: calc(100% - 16px); // 16px = width of the checbox input
573
- overflow: hidden;
574
- white-space: nowrap;
575
- text-overflow: ellipsis;
576
- }
577
-
578
- // ==================================================================
579
- // =========================== Tabs =============================
580
- // ==================================================================
581
- // packages/@filerobot/common/src/Tabs.jsx
582
- .filerobot-common-Tabs-wrapper {
583
- display: flex;
584
- width: 92%;
585
- padding-left: 12px;
586
- }
587
-
588
- .filerobot-common-Tabs {
589
- display: flex;
590
- border-bottom: 1px solid $border;
591
- border-top: 1px solid $border;
592
- background-color: $background-primary;
593
- align-items: center;
594
-
595
- &-panel {
596
- position: relative;
597
- margin-bottom: -1px;
598
- font-size: 12px;
599
-
600
- &>input[type="radio"] {
601
- position: absolute;
602
- left: -200vw;
603
- }
604
-
605
- .bottom-line {
606
- display: none;
607
- position: absolute;
608
- background: $accent;
609
- bottom: 0;
610
- left: 7px;
611
- right: 7px;
612
- height: 1px;
613
- }
614
-
615
- &>label {
616
- color: $active;
617
- position: relative;
618
- display: flex;
619
- padding: 7px;
620
- border: 1px solid transparent;
621
- border-top-left-radius: .10rem;
622
- border-top-right-radius: .10rem;
623
- cursor: pointer;
624
-
625
- &>svg {
626
- margin-right: 8px;
627
- height: 12px;
628
- width: 12px;
629
-
630
-
631
- }
632
-
633
- }
634
-
635
- &:first-child {
636
- &>label {
637
- padding-left: 0;
638
-
639
- +.bottom-line {
640
- left: 0;
641
- }
642
- }
643
- }
644
-
645
- &>input:checked+label {
646
- color: $accent;
647
- //border-bottom: 1px solid $accent;
648
-
649
-
650
-
651
- +.bottom-line {
652
- display: block;
653
- }
654
- }
655
- }
656
-
657
- .subtabs-wrapper {
658
- padding: 12px 0;
659
- }
660
- }
661
-
662
- // ==================================================================
663
- // =========================== InputAndLabel =============================
664
- // ==================================================================
665
- // packages/@filerobot/common/src/InputAndLabel.jsx
666
- .filerobot-common-inputAndLabel {
667
- margin-bottom: 16px;
668
-
669
- &-form-group {
670
- margin-bottom: 19px;
671
-
672
- }
673
-
674
- &-input-header {
675
- font-size: 14px;
676
- line-height: 16px;
677
- font-weight: 400;
678
- margin-bottom: 3px;
679
- }
680
-
681
- &-header-links-label {
682
- display: flex;
683
- align-items: center;
684
- color: $light-icons-primary;
685
- }
686
-
687
- &-input-text-wrapper {
688
- position: relative;
689
- width: 100%;
690
-
691
- input[type="time"]::-webkit-calendar-picker-indicator {
692
- opacity: 0;
693
- display: block;
694
- width: 20px;
695
- height: 20px;
696
- z-index: 2;
697
- margin-top: 2px;
698
- cursor: pointer;
699
- }
700
-
701
- &-disable-icon {
702
- & input[type="date"]::-webkit-calendar-picker-indicator {
703
- display: none;
704
- }
705
-
706
- }
707
- }
708
-
709
- &-input-icon {
710
- position: absolute;
711
- top: 0;
712
- right: 0;
713
- margin: 6px;
714
- cursor: pointer;
715
- }
716
-
717
- &-input-text {
718
- width: 100%;
719
- font-size: 16px;
720
- line-height: 18px;
721
- padding: 10px 16px;
722
- background-color: $white;
723
- border: 1px solid $border-primary-stateless;
724
- border-radius: 4px;
725
- transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
726
- cursor: auto;
727
- font-family: 'Roboto';
728
- font-weight: 400;
729
-
730
- &:focus {
731
- background-color: $background-secondary !important;
732
- border: 1px solid rgba(104, 121, 235, 1);
733
- outline: none;
734
- }
735
-
736
- &:hover {
737
- background-color: rgba(239, 243, 246, 1);
738
- }
739
- }
740
-
741
-
742
- }
743
-
744
- // ==================================================================
745
- // ============================== Spinner ===========================
746
- // ==================================================================
747
- // packages/@filerobot/common/src/Spinner.jsx
748
- .filerobot-common-Spinner {
749
- display: flex;
750
- align-items: center;
751
- justify-content: center;
752
- margin-right: 6px;
753
-
754
- svg {
755
- -webkit-animation: rotating-spinner 2s linear infinite;
756
- -moz-animation: rotating-spinner 2s linear infinite;
757
- -ms-animation: rotating-spinner 2s linear infinite;
758
- -o-animation: rotating-spinner 2s linear infinite;
759
- animation: rotating-spinner 2s linear infinite;
760
- }
761
- }
762
-
763
- .filerobot-common-Spinner-noMargin {
764
- margin: 0;
765
- }
766
-
767
- .filerobot-common-Spinner-filledCentered {
768
- width: 100%;
769
- height: 100%;
770
- margin: 0;
771
- padding: 8px;
772
- }
773
-
774
- .filerobot-common-Spinner-spinnerContainer {
775
- height: 100%;
776
- width: 100%;
777
- overflow: hidden;
778
- display: flex;
779
- justify-content: center;
780
- align-items: center;
781
- padding: 2px;
782
-
783
- svg {
784
- width: 30px;
785
- height: 30px;
786
- }
787
- }
788
-
789
- @-webkit-keyframes rotating-spinner
790
-
791
- /* Safari and Chrome */
792
- {
793
- from {
794
- -webkit-transform: rotate(0deg);
795
- -o-transform: rotate(0deg);
796
- transform: rotate(0deg);
797
- }
798
-
799
- to {
800
- -webkit-transform: rotate(360deg);
801
- -o-transform: rotate(360deg);
802
- transform: rotate(360deg);
803
- }
804
- }
805
-
806
- @keyframes rotating-spinner {
807
- from {
808
- -ms-transform: rotate(0deg);
809
- -moz-transform: rotate(0deg);
810
- -webkit-transform: rotate(0deg);
811
- -o-transform: rotate(0deg);
812
- transform: rotate(0deg);
813
- }
814
-
815
- to {
816
- -ms-transform: rotate(360deg);
817
- -moz-transform: rotate(360deg);
818
- -webkit-transform: rotate(360deg);
819
- -o-transform: rotate(360deg);
820
- transform: rotate(360deg);
821
- }
822
- }
823
-
824
- // ==================================================================
825
- // ===================== ItemHoverTopOptions ======================
826
- // ==================================================================
827
- // Used in a few places
828
- .filerobot-common-ItemHoverTopOptions {
829
- position: absolute;
830
- top: 4%;
831
- right: 3%;
832
- bottom: 0;
833
- display: flex;
834
- visibility: hidden;
835
- z-index: 3; //top left badge (relevance, similarity) has z-index of 2
836
- width: 100%;
837
- justify-content: flex-end;
838
- padding: 2px 4px 2px 24px; // 24px = the spacing + width of checkbox (in case there is)
839
- align-items: flex-start;
840
- pointer-events: none;
841
- border-radius: inherit;
842
- transition: all 100ms ease-in-out;
843
-
844
- button {
845
- min-width: 12px;
846
- min-height: 16px;
847
- padding: 4px 7px;
848
- height: auto;
849
- pointer-events: auto;
850
- background: rgba(79, 98, 118, 0.7);
851
- width: 24px;
852
- height: 24px;
853
- border-radius: 50%;
854
- margin: 0 2px;
855
- transition: all 100ms ease-in-out;
856
-
857
- svg * {
858
- color: $white;
859
- fill: $white;
860
- }
861
-
862
- &:not(:active, :disabled) {
863
- &:hover {
864
- background: rgba(55, 65, 75, 1);
865
-
866
- svg * {
867
- fill: $border;
868
- color: $border;
869
- }
870
- }
871
- }
872
- }
873
-
874
- *:hover>& {
875
- visibility: visible;
876
- }
877
-
878
- &-disableHover {
879
- display: flex;
880
- visibility: visible;
881
-
882
- &:hover {
883
- background: none;
884
- }
885
- }
886
- }
887
-
888
- .filerobot-common-DropFilesHereHint {
889
- visibility: hidden;
890
- position: absolute;
891
- top: 0;
892
- bottom: 0;
893
- right: 0;
894
- pointer-events: none;
895
- left: 0;
896
- width: 100%;
897
- height: 100%;
898
- z-index: 2000;
899
- text-align: center;
900
- color: $secondary;
901
- font-size: 24px;
902
- line-height: 28px;
903
- background-color: rgba(255, 255, 255, .9);
904
-
905
- &-inner {
906
- display: flex;
907
- flex-direction: column;
908
- align-items: center;
909
- justify-content: center;
910
- position: absolute;
911
- top: 7px;
912
- right: 7px;
913
- bottom: 7px;
914
- left: 7px;
915
- border: 1px dashed $blue;
916
- border-radius: 3px;
917
-
918
- svg {
919
- margin-bottom: 25px;
920
- animation: 2s moving ease infinite;
921
- }
922
-
923
- @keyframes moving {
924
-
925
- 0%,
926
- 100% {
927
- transform: scale(1) translate(0, 0);
928
- }
929
-
930
- 50% {
931
- transform: scale(1.1) translate(0, -10px);
932
- }
933
- }
934
- }
935
-
936
- [data-filerobot-theme="dark"] & {
937
- color: $gray-400;
938
- border-color: $highlight--dark;
939
- background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%2302BAF2' fillRule='nonzero'/%3E%3C/svg%3E");
940
- }
941
- }
942
-
943
- .filerobot-common-DropFilesTarget * {
944
- pointer-events: none;
945
- }
946
-
947
- .filerobot-common-DropFilesHereHint-visible {
948
- visibility: visible;
949
- }
950
-
951
- .filerobot-common-Search {
952
- .filerobot-c-separator {
953
- height: 70%;
954
- margin: 0;
955
- }
956
- }
957
-
958
- .filerobot-common-Search-searchButton {
959
- height: 100%;
960
- padding: 12px;
961
- padding-top: 10px;
962
- cursor: pointer;
963
- }
964
-
965
- .filerobot-common-Search {
966
- display: flex;
967
- position: relative;
968
- height: 40px;
969
- background: $white;
970
- border: 1px solid $border;
971
- border-radius: 4px;
972
- align-items: center;
973
- white-space: nowrap;
974
- }
975
-
976
-
977
- .filerobot-common-Search:focus-within,
978
- .filerobot-common-Search:active {
979
- background-color: rgba(255, 255, 255, 1) !important;
980
-
981
- .filerobot-common-Search-searchInput {
982
- background-color: rgba(255, 255, 255, 1) !important;
983
- }
984
- }
985
-
986
- .filerobot-common-Search-searchInput {
987
- height: fit-content;
988
- flex-grow: 1;
989
- box-sizing: border-box;
990
- display: flex;
991
- align-items: center;
992
- font-size: 14px;
993
- outline: none;
994
- border: none;
995
- min-width: 24px;
996
- width: 100%;
997
- margin: 6px 0px;
998
-
999
- button {
1000
- height: 100%;
1001
- }
1002
-
1003
- .filerobot-common-TopBar-input-fragment {
1004
- display: inherit;
1005
- height: inherit;
1006
- width: inherit;
1007
- }
1008
-
1009
- &:focus {
1010
- outline: none;
1011
- }
1012
-
1013
- [data-filerobot-theme="dark"] & {
1014
- background-color: $gray-900;
1015
- }
1016
-
1017
- [data-filerobot-theme="dark"] & {
1018
- color: $white
1019
- }
1020
-
1021
- &::placeholder {
1022
- font-size: 14px;
1023
- font-style: normal;
1024
- font-weight: 400;
1025
- color: #A9B6C2;
1026
- }
1027
- }
1028
-
1029
- .filerobot-common-Search-searchAndAppendedOptions {
1030
- display: flex;
1031
- align-items: center;
1032
- height: 100%;
1033
- }
1034
-
1035
- .filerobot-common-Search-searchAndFiltersInputs {
1036
- position: relative;
1037
- display: flex;
1038
- align-items: center;
1039
- height: 100%;
1040
- max-height: 100%;
1041
- // width: calc(100% - 62px); // 32px = search button & separator width.
1042
- flex-grow: 1;
1043
- overflow: auto hidden;
1044
- white-space: nowrap;
1045
- -ms-overflow-style: none;
1046
- }
1047
-
1048
- // Powered by label
1049
- // packages/@filerobot/common/src/PoweredBy.jsx
1050
- .filerobot-common-PoweredBy-label {
1051
- border: 1px solid $border;
1052
- border-bottom: 0;
1053
- background-color: $background-primary;
1054
- border-radius: 0;
1055
- color: #778285;
1056
- position: absolute;
1057
- right: 0;
1058
- bottom: 0;
1059
- padding: 4px 14px;
1060
- border-top-left-radius: 40px;
1061
- font-size: 10px;
1062
- user-select: none;
1063
- z-index: $zIndex-1;
1064
- margin-right: -1px;
1065
- }
1066
-
1067
- // !!!!! MUST BE LAST BLOCK IN THE FILE AS IT OVERRIDES SOME OF TOP STYLES !!!!!
1068
- // ==================================================================
1069
- // ===================== Common Public classes ======================
1070
- // ==================================================================
1071
- // used in a few places
1072
- .filerobot-common-secondaryTxt {
1073
- color: $gray-500;
1074
- font-size: 12px;
1075
- line-height: 14px;
1076
- }
1077
-
1078
- @import './Transitions/transitions.scss';
1079
- @import './DatePicker/index.scss';