px-react-ui-components 1.1.7 → 1.1.9

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,48 +1,48 @@
1
1
  .container {
2
- display: block;
3
- /* width: 100%; */
4
- width: auto;
5
- font-size: 15px;
2
+ display: block;
3
+ /* width: 100%; */
4
+ width: auto;
5
+ font-size: 15px;
6
6
  }
7
7
 
8
8
  .container small {
9
- padding-left: 5px;
10
- font-size: 11px;
9
+ padding-left: 5px;
10
+ font-size: 11px;
11
11
  }
12
12
 
13
13
  .inputblock {
14
- display: block;
15
- position: relative;
16
- /* width: 100%; */
17
- width: auto;
18
- background-color: #fff;
19
- border: 1px solid #e5e7eb;
20
- padding-right: 8px;
21
- padding-left: 15px;
22
- border-radius: 8px;
14
+ display: block;
15
+ position: relative;
16
+ /* width: 100%; */
17
+ width: auto;
18
+ background-color: #fff;
19
+ border: 1px solid #e5e7eb;
20
+ padding-right: 8px;
21
+ padding-left: 15px;
22
+ border-radius: 8px;
23
23
  }
24
24
 
25
- .inputblockdisabled{
26
- background-color: #f8fafd;
27
- border-color: #e5e7eb;
25
+ .inputblockdisabled {
26
+ background-color: #f8fafd;
27
+ border-color: #e5e7eb;
28
28
  }
29
29
 
30
30
  .disabledInput {
31
- width: 100%;
32
- min-height: 40px;
33
- display: flex;
34
- align-items: center;
35
- padding: 8px;
36
- overflow: auto;
37
- scrollbar-width: thin;
31
+ width: 100%;
32
+ min-height: 40px;
33
+ display: flex;
34
+ align-items: center;
35
+ padding: 8px;
36
+ overflow: auto;
37
+ scrollbar-width: thin;
38
38
  }
39
39
 
40
40
  .caretdown {
41
- position: absolute;
42
- right: 10px;
43
- top: 50%;
44
- transform: translateY(-50%);
45
- font-size: 15px;
41
+ position: absolute;
42
+ right: 10px;
43
+ top: 50%;
44
+ transform: translateY(-50%);
45
+ font-size: 15px;
46
46
  }
47
47
 
48
48
  .fileinput,
@@ -50,25 +50,33 @@
50
50
  .inputblock select,
51
51
  .inputblock textarea,
52
52
  .inputblock input {
53
- display: block;
54
- width: 100%;
55
- min-height: 41px;
56
- background: rgba(243, 242, 247, 0.1);
57
- border: none;
58
- padding: 10px 0px;
59
- color: #0a0b0f;
60
- font-weight: normal;
61
- font-size: 14px;
62
- outline: none;
63
- z-index: 9;
53
+ display: block;
54
+ width: 100%;
55
+ min-height: 41px;
56
+ background: transparent !important;
57
+ border: none;
58
+ padding: 10px 0px;
59
+ color: #0a0b0f;
60
+ font-weight: normal;
61
+ font-size: 14px;
62
+ outline: none;
63
+ z-index: 9;
64
64
  }
65
65
 
66
66
  .inputblock:focus-within {
67
- background-color: #ecf8ff;
67
+ background-color: #ecf8ff;
68
68
  }
69
69
 
70
70
  .inputblock select {
71
- padding: 10px 0px 11px 0;
71
+ padding: 10px 0px 11px 0;
72
+
73
+ -webkit-appearance: none; /* Chrome, Opera, Safari */
74
+ -moz-appearance: none; /* Firefox */
75
+ appearance: none;
76
+
77
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 0.590088L6 5.17009L10.59 0.590088L12 2.00009L6 8.00009L0 2.00009L1.41 0.590088Z' fill='%2373889D'/%3E%3C/svg%3E") !important;
78
+ background-repeat: no-repeat !important;
79
+ background-position: right 10px center !important;
72
80
  }
73
81
 
74
82
  .fileinput::placeholder,
@@ -76,8 +84,8 @@
76
84
  .inputblock select::placeholder,
77
85
  .inputblock textarea::placeholder,
78
86
  .inputblock input::placeholder {
79
- color: #73889d;
80
- opacity: 0.8;
87
+ color: #73889d;
88
+ opacity: 0.8;
81
89
  }
82
90
 
83
91
  .fileinput:-internal-autofill-selected,
@@ -85,336 +93,335 @@
85
93
  .inputblock select:-internal-autofill-selected,
86
94
  .inputblock textarea:-internal-autofill-selected,
87
95
  .inputblock input:-internal-autofill-selected {
88
- background-color: rgba(243, 242, 247, 0.1) !important;
96
+ background-color: rgba(243, 242, 247, 0.1) !important;
89
97
  }
90
98
 
91
99
  .inputblock input[type="color"] {
92
- height: 45px;
93
- padding: 5px 0;
100
+ height: 45px;
101
+ padding: 5px 0;
94
102
  }
95
103
 
96
104
  .inputblock textarea {
97
- line-height: unset;
105
+ line-height: unset;
98
106
  }
99
107
 
100
108
  .placeholder {
101
- position: absolute;
102
- top: 50%;
103
- transform: translateY(-50%);
104
- color: #75899e;
105
- opacity: 0.8;
106
- z-index: 0;
107
- pointer-events: none;
108
- font-weight: 300;
109
- font-size: 14px;
109
+ position: absolute;
110
+ top: 50%;
111
+ transform: translateY(-50%);
112
+ color: #75899e;
113
+ opacity: 0.8;
114
+ z-index: 0;
115
+ pointer-events: none;
116
+ font-weight: 300;
117
+ font-size: 14px;
110
118
  }
111
119
 
112
120
  .inputblock input.filterInput {
113
- position: absolute;
114
- display: none;
115
- left: 10px;
116
- top: 0px;
117
- width: calc(100% - 75px) !important;
118
- padding-left: 5px !important;
119
- z-index: 2 !important;
120
- background-color: #f3f2f7 !important;
121
+ position: absolute;
122
+ display: none;
123
+ left: 10px;
124
+ top: 0px;
125
+ width: calc(100% - 75px) !important;
126
+ padding-left: 5px !important;
127
+ z-index: 2 !important;
128
+ background-color: #f3f2f7 !important;
121
129
  }
122
130
 
123
131
  .inputblockicon input.filterInput {
124
- left: 40px;
132
+ left: 40px;
125
133
  }
126
134
 
127
135
  .filterInputSelected {
128
- display: block;
129
- width: 100%;
130
- height: 41px;
131
- padding: 10px 0;
132
- font-size: 14px;
133
- font-weight: 300;
136
+ display: block;
137
+ width: 100%;
138
+ height: 41px;
139
+ padding: 10px 0;
140
+ font-size: 14px;
141
+ font-weight: 300;
134
142
  }
135
143
 
136
144
  .filterInputSelectedSelected {
137
- position: relative;
138
- padding-left: 30px;
145
+ position: relative;
146
+ padding-left: 30px;
139
147
  }
140
148
 
141
149
  .filterInputSelectedContainer {
142
- display: flex;
143
- align-items: center;
144
- justify-content: space-between;
145
- padding-left: 10px;
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: space-between;
153
+ padding-left: 10px;
146
154
  }
147
155
 
148
156
  .filterInputSelectedContainerSelected {
149
- position: relative;
157
+ position: relative;
150
158
  }
151
159
 
152
160
  .filterInputSelectedX {
153
- position: absolute;
154
- right: 35px;
155
- top: 50%;
156
- transform: translateY(-50%);
157
- font-size: 15px;
158
- cursor: pointer;
159
- font-family: monospace;
160
- border-radius: 50%;
161
- width: 18px;
162
- height: 18px;
163
- background: #e4e4e4;
164
- text-align: center;
165
- padding: 0px;
166
- line-height: 15px;
167
- color: #000000;
161
+ position: absolute;
162
+ right: 35px;
163
+ top: 50%;
164
+ transform: translateY(-50%);
165
+ font-size: 15px;
166
+ cursor: pointer;
167
+ font-family: monospace;
168
+ border-radius: 50%;
169
+ width: 18px;
170
+ height: 18px;
171
+ background: #e4e4e4;
172
+ text-align: center;
173
+ padding: 0px;
174
+ line-height: 15px;
175
+ color: #000000;
168
176
  }
169
177
 
170
178
  .filterInputSelectedX:hover {
171
- background: #f0cdcd;
172
- color: #a34444;
179
+ background: #f0cdcd;
180
+ color: #a34444;
173
181
  }
174
182
 
175
183
  .filterInputList {
176
- display: none;
177
- position: absolute;
178
- left: 5px;
179
- top: 41px;
180
- max-height: 300px;
181
- width: calc(100% - 10px);
182
- z-index: 99;
183
- background-color: #fff;
184
- padding: 0;
185
- border-radius: 8px;
186
- overflow: auto;
187
- scrollbar-width: thin;
188
- box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
189
- font-size: 13px;
190
- font-weight: 300;
184
+ display: none;
185
+ position: absolute;
186
+ left: 5px;
187
+ top: 41px;
188
+ max-height: 300px;
189
+ width: calc(100% - 10px);
190
+ z-index: 99;
191
+ background-color: #fff;
192
+ padding: 0;
193
+ border-radius: 8px;
194
+ overflow: auto;
195
+ scrollbar-width: thin;
196
+ box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
197
+ font-size: 13px;
198
+ font-weight: 300;
191
199
  }
192
200
 
193
201
  .filterInputList.opened {
194
- display: block;
202
+ display: block;
195
203
  }
196
204
 
197
205
  .filterInputList li {
198
- cursor: default;
199
- padding: 6px 15px;
200
- display: flex;
201
- flex-direction: column;
202
- gap: 0px;
206
+ cursor: default;
207
+ padding: 6px 15px;
208
+ display: flex;
209
+ flex-direction: column;
210
+ gap: 0px;
203
211
  }
204
212
 
205
213
  .filterInputList .subtextli {
206
- padding: 4px 15px;
214
+ padding: 4px 15px;
207
215
  }
208
216
  .filterInputList li .subtext {
209
- font-size: 11px;
210
- font-style: italic;
211
- color: #73889d;
212
- opacity: 0.8;
213
- font-weight: 300;
217
+ font-size: 11px;
218
+ font-style: italic;
219
+ color: #73889d;
220
+ opacity: 0.8;
221
+ font-weight: 300;
214
222
  }
215
223
 
216
224
  .filterInputList li:hover {
217
- background-color: #1c61c9;
218
- color: #fff;
225
+ background-color: #1c61c9;
226
+ color: #fff;
219
227
  }
220
228
 
221
229
  .filterInputList li:hover .subtext,
222
230
  .filterInputList li:hover i,
223
231
  .filterInputList li:hover span,
224
232
  .filterInputList li:hover small {
225
- color: #fff !important;
233
+ color: #fff !important;
226
234
  }
227
235
 
228
236
  .inputblockicon {
229
- padding-left: 40px;
237
+ padding-left: 40px;
230
238
  }
231
239
 
232
240
  .inputblockicon .eye,
233
241
  .inputblockicon .icon {
234
- position: absolute;
235
- left: 5px;
236
- top: 50%;
237
- width: 30px;
238
- transform: translateY(-50%);
239
- color: #73889d;
240
- padding: 0px;
241
- font-size: 22px;
242
- display: flex;
243
- align-items: center;
244
- justify-content: center;
242
+ position: absolute;
243
+ left: 5px;
244
+ top: 50%;
245
+ width: 30px;
246
+ transform: translateY(-50%);
247
+ color: #73889d;
248
+ padding: 0px;
249
+ font-size: 22px;
250
+ display: flex;
251
+ align-items: center;
252
+ justify-content: center;
245
253
  }
246
254
 
247
255
  .inputblockicon .icontextarea {
248
- top: 13px;
249
- transform: unset;
256
+ top: 13px;
257
+ transform: unset;
250
258
  }
251
259
 
252
260
  .inputblockicon .icon {
253
- z-index: 0;
254
- pointer-events: none;
261
+ z-index: 0;
262
+ pointer-events: none;
255
263
  }
256
264
 
257
265
  .inputblockicon .eye {
258
- left: unset;
259
- right: 10px;
260
- background: unset;
261
- border: none;
266
+ left: unset;
267
+ right: 10px;
268
+ background: unset;
269
+ border: none;
262
270
  }
263
271
 
264
272
  .inputblockicon .eye:hover {
265
- color: #a3a7ac;
273
+ color: #a3a7ac;
266
274
  }
267
275
 
268
276
  .inputblockicon .placeholder {
269
- left: 45px;
277
+ left: 45px;
270
278
  }
271
279
 
272
- .error .inputblock{
273
- border-color: #ff0000 !important;
280
+ .error .inputblock {
281
+ border-color: #ff0000 !important;
274
282
  }
275
283
 
276
284
  .fileinput {
277
- position: relative;
278
- display: flex;
279
- flex-direction: row;
280
- align-items: center;
281
- justify-content: space-between;
282
- gap: 5px;
283
- width: 100%;
284
- padding: 0px;
285
+ position: relative;
286
+ display: flex;
287
+ flex-direction: row;
288
+ align-items: center;
289
+ justify-content: space-between;
290
+ gap: 5px;
291
+ width: 100%;
292
+ padding: 0px;
285
293
  }
286
294
 
287
295
  .fileImagePreview {
288
- position: absolute;
289
- height: 35px;
290
- width: 35px;
291
- object-fit: cover;
292
- border-radius: 5px;
293
- left: -40px;
294
- top: 50%;
295
- transform: translateY(-50%);
296
- padding: 2px;
297
- background: #f3f3f3;
296
+ position: absolute;
297
+ height: 35px;
298
+ width: 35px;
299
+ object-fit: cover;
300
+ border-radius: 5px;
301
+ left: -40px;
302
+ top: 50%;
303
+ transform: translateY(-50%);
304
+ padding: 2px;
305
+ background: #f3f3f3;
298
306
  }
299
307
 
300
308
  .fileImagePreview:hover {
301
- height: 180px;
302
- width: 180px;
303
- z-index: 9999;
304
- padding: 8px;
305
- cursor: pointer;
306
- -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
307
- -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
308
- box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.35);
309
+ height: 180px;
310
+ width: 180px;
311
+ z-index: 9999;
312
+ padding: 8px;
313
+ cursor: pointer;
314
+ -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
315
+ -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
316
+ box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
309
317
  }
310
318
 
311
319
  .filename {
312
- display: block;
313
- position: relative;
314
- width: calc(100% - 110px);
315
- color: #b9bbbd;
316
- padding: 0 0 0 5px;
320
+ display: block;
321
+ position: relative;
322
+ width: calc(100% - 110px);
323
+ color: #b9bbbd;
324
+ padding: 0 0 0 5px;
317
325
  }
318
326
 
319
327
  .filename small {
320
- position: absolute;
321
- right: 0px;
322
- top: 0px;
323
- height: 100%;
324
- font-weight: normal;
325
- background: #cdcdcd;
326
- padding: 5px;
327
- border-radius: 8px;
328
- line-height: 1;
328
+ position: absolute;
329
+ right: 0px;
330
+ top: 0px;
331
+ height: 100%;
332
+ font-weight: normal;
333
+ background: #cdcdcd;
334
+ padding: 5px;
335
+ border-radius: 8px;
336
+ line-height: 1;
329
337
  }
330
338
 
331
339
  .filename.selected {
332
- color: #000;
340
+ color: #000;
333
341
  }
334
342
 
335
343
  .filebutton {
336
- margin-left: auto;
337
- /* position: absolute;
344
+ margin-left: auto;
345
+ /* position: absolute;
338
346
  right: -2px;
339
347
  top: 5px; */
340
- min-width: 80px;
341
- /* height: calc(100% - 10px); */
342
- padding: 8px;
343
- border: none;
344
- background: #d0d6de;
345
- color: #464255;
346
- border-radius: 8px;
347
- flex-shrink: 0;
348
-
348
+ min-width: 80px;
349
+ /* height: calc(100% - 10px); */
350
+ padding: 8px;
351
+ border: none;
352
+ background: #d0d6de;
353
+ color: #464255;
354
+ border-radius: 8px;
355
+ flex-shrink: 0;
349
356
  }
350
357
 
351
358
  .filebutton:hover {
352
- background: #c7ced6;
359
+ background: #c7ced6;
353
360
  }
354
361
 
355
362
  .filebuttonremove {
356
- width: 20px;
357
- height: 20px;
358
- background: #c7ced6;
359
- color: #fff;
360
- border: none;
361
- padding: 0px;
362
- border-radius: 50%;
363
- font-size: 12px;
364
- cursor: pointer;
365
- margin-left: auto;
366
- flex-shrink: 0;
367
-
368
- /* position: absolute; */
369
- /* right: 10px;
363
+ width: 20px;
364
+ height: 20px;
365
+ background: #c7ced6;
366
+ color: #fff;
367
+ border: none;
368
+ padding: 0px;
369
+ border-radius: 50%;
370
+ font-size: 12px;
371
+ cursor: pointer;
372
+ margin-left: auto;
373
+ flex-shrink: 0;
374
+
375
+ /* position: absolute; */
376
+ /* right: 10px;
370
377
  top: 50%;
371
378
  transform: translateY(-50%); */
372
379
  }
373
380
 
374
381
  .description {
375
- display: block;
376
- width: 100%;
377
- font-size: 10px;
378
- padding-top: 2px;
379
- color: #737a83;
382
+ display: block;
383
+ width: 100%;
384
+ font-size: 10px;
385
+ padding-top: 2px;
386
+ color: #737a83;
380
387
  }
381
388
 
382
389
  @media screen and (max-width: 768px) {
383
- .container {
384
- font-size: 14px;
385
- }
390
+ .container {
391
+ font-size: 14px;
392
+ }
386
393
 
387
- .inputblock {
388
- padding-right: 6px;
389
- }
394
+ .inputblock {
395
+ padding-right: 6px;
396
+ }
390
397
 
391
- .filebutton {
392
- min-width: 70px;
393
- padding: 6px;
394
- }
398
+ .filebutton {
399
+ min-width: 70px;
400
+ padding: 6px;
401
+ }
395
402
 
396
- .inputblockicon .icon,
397
- .inputblockicon .eye {
398
- font-size: 22px;
399
- }
403
+ .inputblockicon .icon,
404
+ .inputblockicon .eye {
405
+ font-size: 22px;
406
+ }
400
407
  }
401
408
 
402
409
  @media screen and (max-width: 480px) {
403
- .container {
404
- font-size: 11px;
405
- }
406
-
407
- .inputblock {
408
- padding-right: 4px;
409
- }
410
-
411
- .filebutton {
412
- min-width: 60px;
413
- padding: 4px;
414
- }
415
-
416
- .inputblockicon .icon,
417
- .inputblockicon .eye {
418
- font-size: 20px;
419
- }
410
+ .container {
411
+ font-size: 11px;
412
+ }
413
+
414
+ .inputblock {
415
+ padding-right: 4px;
416
+ }
417
+
418
+ .filebutton {
419
+ min-width: 60px;
420
+ padding: 4px;
421
+ }
422
+
423
+ .inputblockicon .icon,
424
+ .inputblockicon .eye {
425
+ font-size: 20px;
426
+ }
420
427
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "px-react-ui-components",
3
- "version": "1.1.7",
3
+ "version": "1.1.9",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "type": "commonjs",