@vitrosoftware/common-ui-ts 1.1.154 → 1.1.155

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.
@@ -0,0 +1,37 @@
1
+ .vitro-drop-zone {
2
+ width: 100%;
3
+ height: 100%;
4
+ padding: 12px 22px;
5
+ background-color: #fff;
6
+ border: 1px dashed #66B1FF;
7
+ border-radius: 16px;
8
+ justify-content: center;
9
+ cursor: pointer;
10
+ }
11
+
12
+ .vitro-drop-zone > div {
13
+ justify-content: space-between;
14
+ gap: 4px;
15
+ pointer-events: none;
16
+ }
17
+
18
+ .vitro-dropzone-image {
19
+ width: 32px;
20
+ height: 32px;
21
+ flex-shrink: 0;
22
+ background-size: 100%;
23
+ background-repeat: no-repeat;
24
+ background-position: center;
25
+ pointer-events: none;
26
+ background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/uploader/img/upload-blue.svg');
27
+ }
28
+
29
+ .vitro-drop-zone-label {
30
+ color: #66B1FF;
31
+ text-align: center;
32
+ font-size: 14px;
33
+ font-family: 'InterRegular';
34
+ line-height: 130%;
35
+ white-space: normal;
36
+ pointer-events: none;
37
+ }
@@ -0,0 +1,3 @@
1
+ <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16.4997 29.3327V17.3327M16.4997 17.3327L21.1663 21.9993M16.4997 17.3327L11.833 21.9993M27.1663 23.4753C29.1583 22.6953 31.1663 20.918 31.1663 17.3327C31.1663 11.9993 26.7223 10.666 24.4997 10.666C24.4997 7.99935 24.4997 2.66602 16.4997 2.66602C8.49967 2.66602 8.49967 7.99935 8.49967 10.666C6.27701 10.666 1.83301 11.9993 1.83301 17.3327C1.83301 20.918 3.84101 22.6953 5.83301 23.4753" stroke="#66B1FF" stroke-width="1.25635" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -2,12 +2,10 @@
2
2
  border-radius: 4px;
3
3
  height: 80px;
4
4
  width: 142px;
5
- display: flex;
6
5
  justify-content: center;
7
- flex-direction: column;
8
- align-items: center;
9
6
  padding: 8px;
10
7
  position: relative;
8
+ gap: 4px;
11
9
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
12
10
  }
13
11
 
@@ -43,17 +41,19 @@
43
41
  }
44
42
 
45
43
  .vitro-flex {
46
- display: flex;
47
- align-items: center;
48
- grid-gap: 4px;
49
- margin-top: 4px;
44
+ gap: 4px;
50
45
  width: 100%;
51
46
  }
52
47
 
53
48
  .vitro-flex > div {
54
- display: flex;
55
- flex-direction: column;
56
49
  overflow: hidden;
50
+ align-items: flex-start;
51
+ }
52
+
53
+ .vitro-flex > div > span {
54
+ overflow: hidden;
55
+ text-overflow: ellipsis;
56
+ max-width: 100%;
57
57
  }
58
58
 
59
59
  .vitro-image {
@@ -0,0 +1,117 @@
1
+ .vitro-file-list-dropdown {
2
+ background: #ffffff;
3
+ max-width: 100%;
4
+ width: 241px;
5
+ border-radius: 4px;
6
+ }
7
+
8
+ .vitro-file-list-dropdown-item {
9
+ display: flex;
10
+ align-items: center;
11
+ width: 100%;
12
+ }
13
+
14
+ .vitro-file-list-dropdown-item:hover {
15
+ background: #F4F8FE;
16
+ }
17
+
18
+ .vitro-file-list-dropdown-image {
19
+ padding: 8px 10px 8px 12px;
20
+ min-width: 46px;
21
+ min-height: 40px;
22
+ }
23
+
24
+ .vitro-file-list-dropdown-image img {
25
+ width: 24px;
26
+ height: 24px;
27
+ flex: 0 0 46px;
28
+ }
29
+
30
+ .vitro-file-list-dropdown-item-text {
31
+ flex: 1;
32
+ padding: 6px 12px 6px 0;
33
+ overflow-wrap: break-word !important;
34
+ width: calc(100% - 46px);
35
+ }
36
+
37
+ .vitro-file-list-dropdown-item-text a {
38
+ line-height: 1.35 !important;
39
+ cursor: pointer !important;
40
+ display: inline-block;
41
+ width: 100%;
42
+ }
43
+
44
+ .vitro-file-list-dropdown-item-text a:hover {
45
+ text-decoration: underline !important;
46
+ }
47
+
48
+ :global(.vitro-file-list) {
49
+ width: auto;
50
+ margin-top: 6px;
51
+ margin-right: -40px;
52
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
53
+ border-radius: 4px;
54
+ z-index: 100;
55
+ }
56
+
57
+ :global(.vitro-file-list)::before {
58
+ content: '';
59
+ display: block;
60
+ height: 21px;
61
+ width: 32px;
62
+ overflow: hidden;
63
+ background-position: center 0;
64
+ background-size: 44px 42px;
65
+ background-repeat: no-repeat;
66
+ position: absolute;
67
+ right: 14px;
68
+ top: -21px;
69
+ background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dropdown-button/img/dropdown-menu-arrow.svg');
70
+ }
71
+
72
+ :global(.vitro-file-list-main) {
73
+ background: #F7F9FC;
74
+ border-radius: 4px;
75
+ padding: 1px 8px 1px 10px;
76
+ text-overflow: ellipsis;
77
+ overflow: hidden;
78
+ height: 24px;
79
+ box-sizing: border-box !important;
80
+ }
81
+
82
+ :global(.vitro-file-list-main-item) img {
83
+ width: 22px;
84
+ height: 22px;
85
+ margin-right: 8px;
86
+ text-align: center;
87
+ }
88
+
89
+ :global(.vitro-file-list-main-item) {
90
+ margin-left: 8px;
91
+ line-height: 22px;
92
+ }
93
+
94
+ :global(.vitro-file-list-main) :global(.vitro-file-list-main-item):first-child {
95
+ margin-left: 0 !important;
96
+ }
97
+
98
+ :global(.vitro-file-list-button-count) {
99
+ padding: 4px 0 4px 0;
100
+ text-align: center;
101
+ background: #F7F9FC !important;
102
+ border-radius: 4px !important;
103
+ width: 24px;
104
+ }
105
+
106
+ :global(.vitro-file-list-main-cell) {
107
+ padding-right: 4px !important;
108
+ cursor: pointer;
109
+ }
110
+ :global(.vitro-file-list-main-cell-single) {
111
+ padding-right: 0 !important;
112
+ cursor: pointer;
113
+ }
114
+
115
+ :global(.TWClassHoveredCellReadOnly.vitro-file-list-main-cell-single) :global(.vitro-file-list-main) {
116
+ overflow: visible;
117
+ }
@@ -0,0 +1 @@
1
+ <svg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'><g filter='url(#filter0_dd_778_105705)'><path d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/></g><defs><filter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset dy='4'/><feGaussianBlur stdDeviation='7'/><feComposite in2='hardAlpha' operator='out'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset/><feGaussianBlur stdDeviation='2'/><feComposite in2='hardAlpha' operator='out'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/><feBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/><feBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/></filter></defs></svg>
@@ -0,0 +1,107 @@
1
+ .vitro-file-picker {
2
+ gap: 12px;
3
+ }
4
+
5
+ .vitro-label {
6
+ background: #F7F9FC;
7
+ height: 40px;
8
+ padding: 4px 8px;
9
+ display: flex;
10
+ max-width: unset;
11
+ width: 100%;
12
+ align-items: center;
13
+ gap: 2px;
14
+ }
15
+
16
+ .vitro-scrollbar {
17
+ max-height: 428px;
18
+ }
19
+
20
+ .vitro-scrollbar:global(.ps--active-y) {
21
+ padding-right: 12px;
22
+ }
23
+
24
+ .vitro-scrollbar-content {
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 12px;
28
+ }
29
+
30
+ .vitro-drop-zone,
31
+ .vitro-drop-zone-active {
32
+ width: 100%;
33
+ }
34
+
35
+ .vitro-drop-zone {
36
+ height: 32px;
37
+ border-radius: 4px;
38
+ padding: 4px 8px !important;
39
+ align-items: baseline;
40
+ }
41
+
42
+ .vitro-drop-zone > div {
43
+ flex-direction: row;
44
+ max-width: 100%;
45
+ gap: 8px;
46
+ }
47
+
48
+ .vitro-drop-zone > div > div {
49
+ white-space: nowrap;
50
+ text-overflow: ellipsis;
51
+ overflow: hidden;
52
+ }
53
+
54
+ .vitro-drop-zone > div > div:first-child {
55
+ width: 24px;
56
+ height: 24px;
57
+ }
58
+
59
+ .vitro-drop-zone-active {
60
+ box-shadow: 0 0 4px 0 rgba(19, 43, 74, 0.18);
61
+ }
62
+
63
+ .vitro-drop-zone-active > div {
64
+ max-width: 193px;
65
+ }
66
+
67
+ .vitro-display-none {
68
+ display: none;
69
+ }
70
+
71
+ .vitro-file {
72
+ height: 32px;
73
+ width: 100%;
74
+ box-shadow: none;
75
+ flex-direction: row;
76
+ }
77
+
78
+ .vitro-file-content {
79
+ gap: 8px;
80
+ overflow: hidden;
81
+ }
82
+
83
+ .vitro-file-content span {
84
+ font-size: 14px;
85
+ overflow: hidden;
86
+ max-width: 100%;
87
+ text-overflow: ellipsis;
88
+ }
89
+
90
+ .vireo-buttons-container {
91
+ margin-left: auto;
92
+ gap: 8px;
93
+ }
94
+
95
+ .vitro-download-button,
96
+ .vitro-delete-button {
97
+ width: 24px;
98
+ height: 24px;
99
+ }
100
+
101
+ .vitro-download-button {
102
+ background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/file-picker/img/download.svg');
103
+ }
104
+
105
+ .vitro-delete-button {
106
+ background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/file-picker/img/cancel-red.svg');
107
+ }
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781" stroke="#D13438" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 11L12 15L16 11" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M12 15L12 3" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M19 16V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V16" stroke="#222D44" stroke-linecap="round"/>
5
+ </svg>
@@ -302,50 +302,12 @@
302
302
  position: relative;
303
303
  }
304
304
 
305
- .vitro-drop-zone {
306
- width: 100%;
307
- height: 100%;
308
- padding: 12px 22px !important;
309
- background-color: #fff !important;
310
- border: 1px dashed #66B1FF !important;
311
- border-radius: 16px;
312
- display: flex;
313
- flex-direction: column;
314
- align-items: center;
315
- justify-content: center;
316
- }
317
-
318
305
  .vitro-uploader:global(.vitro-dropzone-active) .vitro-drop-zone {
319
306
  background-color: #F3F8FF !important;
320
307
  }
321
308
 
322
309
  .vitro-uploader .vitro-drop-zone > div {
323
310
  max-width: 193px;
324
- display: flex;
325
- flex-direction: column;
326
- align-items: center;
327
- justify-content: space-between;
328
- pointer-events: none;
329
- }
330
-
331
- .vitro-dropzone-image {
332
- width: 32px;
333
- height: 32px;
334
- background-repeat: no-repeat;
335
- background-position: center;
336
- margin-bottom: 4px;
337
- pointer-events: none;
338
- background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/uploader/img/upload-blue.svg');
339
- }
340
-
341
- .vitro-drop-zone-text {
342
- color: #66B1FF;
343
- text-align: center;
344
- font-size: 14px;
345
- font-family: 'InterRegular';
346
- line-height: 130%;
347
- white-space: normal;
348
- pointer-events: none;
349
311
  }
350
312
 
351
313
  .vitro-progress-bar {