@quidgest/ui 0.7.22 → 0.8.0
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.
- package/dist/index.d.ts +97 -61
- package/dist/ui.css +75 -68
- package/dist/ui.esm.js +987 -1003
- package/dist/ui.esm.js.map +1 -1
- package/dist/ui.js +5 -4
- package/dist/ui.js.map +1 -1
- package/dist/ui.min.css +1 -1
- package/dist/ui.min.js +99 -111
- package/dist/ui.min.js.map +1 -1
- package/dist/ui.scss +107 -98
- package/package.json +1 -1
package/dist/ui.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Quidgest Framework v0.
|
|
2
|
+
* Quidgest Framework v0.8.0
|
|
3
3
|
* (c) 2023 Quidgest - Consultores de Gestão, SA
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -181,11 +181,13 @@ $font-weight-regular: 400;
|
|
|
181
181
|
$font-weight-italic: 400;
|
|
182
182
|
$font-weight-bold: 700;
|
|
183
183
|
$font-weight-black: 900;
|
|
184
|
-
$border:
|
|
184
|
+
$border: var(--q-theme-neutral-light) !default;
|
|
185
185
|
$outline-width: 2px !default;
|
|
186
186
|
$outline-style: solid !default;
|
|
187
187
|
$outline-color: rgb(var(--q-theme-info-rgb) / 0.5) !default;
|
|
188
188
|
$outline: $outline-width $outline-style $outline-color;
|
|
189
|
+
$scrollbar-thumb: var(--q-theme-neutral-light);
|
|
190
|
+
$scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
|
|
189
191
|
$input-padding-y: 0.26rem !default;
|
|
190
192
|
$input-padding-x: 0.25rem !default;
|
|
191
193
|
*,
|
|
@@ -196,22 +198,25 @@ $input-padding-x: 0.25rem !default;
|
|
|
196
198
|
}
|
|
197
199
|
body {
|
|
198
200
|
font-size: $font-size-base;
|
|
201
|
+
color: var(--q-theme-on-background);
|
|
202
|
+
caret-color: var(--q-theme-on-background);
|
|
199
203
|
|
|
200
204
|
* {
|
|
201
205
|
|
|
202
206
|
&::-webkit-scrollbar {
|
|
203
207
|
width: 7px;
|
|
208
|
+
height: 7px;
|
|
204
209
|
}
|
|
205
210
|
&::-webkit-scrollbar-thumb {
|
|
206
|
-
background-color:
|
|
211
|
+
background-color: $scrollbar-thumb;
|
|
207
212
|
border-radius: $border-radius;
|
|
208
213
|
}
|
|
209
214
|
&::-webkit-scrollbar-track {
|
|
210
|
-
background-color:
|
|
215
|
+
background-color: $scrollbar-track;
|
|
211
216
|
border-radius: $border-radius;
|
|
212
217
|
}
|
|
213
218
|
|
|
214
|
-
scrollbar-color:
|
|
219
|
+
scrollbar-color: $scrollbar-thumb $scrollbar-track;
|
|
215
220
|
scrollbar-width: thin;
|
|
216
221
|
}
|
|
217
222
|
}
|
|
@@ -227,18 +232,16 @@ body {
|
|
|
227
232
|
.fade-leave-active {
|
|
228
233
|
transition: opacity 0.2s;
|
|
229
234
|
}
|
|
230
|
-
$
|
|
231
|
-
$
|
|
232
|
-
$
|
|
233
|
-
$
|
|
234
|
-
$
|
|
235
|
-
$
|
|
236
|
-
$
|
|
237
|
-
$
|
|
238
|
-
$
|
|
239
|
-
$
|
|
240
|
-
$btn-bg-active: var(--q-theme-primary-light);
|
|
241
|
-
$btn-outline: var(--q-theme-primary-light);
|
|
235
|
+
$button-primary: var(--q-theme-primary);
|
|
236
|
+
$button-primary-hover: var(--q-theme-primary-dark);
|
|
237
|
+
$button-primary-shadow: var(--q-theme-primary-dark-rgb);
|
|
238
|
+
$button-text-on-primary: var(--q-theme-background);
|
|
239
|
+
$button-danger: var(--q-theme-danger);
|
|
240
|
+
$button-danger-hover: var(--q-theme-danger-dark);
|
|
241
|
+
$button-danger-shadow: var(--q-theme-danger-dark-rgb);
|
|
242
|
+
$button-text-on-danger: var(--q-theme-background);
|
|
243
|
+
$button-plain-hover: rgb(var(--q-theme-neutral-rgb) / 0.1);
|
|
244
|
+
$button-text-on-plain: var(--q-theme-on-background);
|
|
242
245
|
.q-btn {
|
|
243
246
|
$this: &;
|
|
244
247
|
--box-shadow-tint: 0 0 0;
|
|
@@ -249,12 +252,12 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
249
252
|
padding: 0.4rem;
|
|
250
253
|
border-width: 1px;
|
|
251
254
|
background-color: transparent;
|
|
252
|
-
color: var(--q-theme-on-background);
|
|
253
255
|
user-select: none;
|
|
254
256
|
-webkit-user-select: none;
|
|
255
257
|
-moz-user-select: none;
|
|
256
258
|
border-radius: $border-radius;
|
|
257
|
-
transition-property: color, background-color, border-color, text-decoration-color,
|
|
259
|
+
transition-property: color, background-color, border-color, box-shadow, text-decoration-color,
|
|
260
|
+
fill, stroke;
|
|
258
261
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
259
262
|
transition-duration: 0.15s;
|
|
260
263
|
&:hover:not(:disabled) {
|
|
@@ -265,7 +268,6 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
265
268
|
z-index: 3;
|
|
266
269
|
&:not(:focus-visible) {
|
|
267
270
|
outline: 0;
|
|
268
|
-
box-shadow: none;
|
|
269
271
|
}
|
|
270
272
|
}
|
|
271
273
|
&__content {
|
|
@@ -290,64 +292,65 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
290
292
|
color: currentColor;
|
|
291
293
|
}
|
|
292
294
|
|
|
293
|
-
&--active {
|
|
294
|
-
z-index: 2;
|
|
295
|
-
background-color: $btn-bg-active;
|
|
296
|
-
}
|
|
297
|
-
&:disabled {
|
|
298
|
-
opacity: 0.6;
|
|
299
|
-
}
|
|
300
|
-
&--loading {
|
|
301
|
-
cursor: progress;
|
|
302
|
-
span {
|
|
303
|
-
visibility: hidden;
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
|
|
307
295
|
&--primary {
|
|
308
|
-
--box-shadow-tint:
|
|
309
|
-
background-color: $
|
|
310
|
-
border-color: $
|
|
311
|
-
color: $
|
|
296
|
+
--box-shadow-tint: #{$button-primary-shadow};
|
|
297
|
+
background-color: $button-primary;
|
|
298
|
+
border-color: $button-primary;
|
|
299
|
+
color: $button-text-on-primary;
|
|
312
300
|
&:hover:not(:disabled) {
|
|
313
|
-
background-color: $
|
|
314
|
-
border-color: $
|
|
301
|
+
background-color: $button-primary-hover;
|
|
302
|
+
border-color: $button-primary-hover;
|
|
315
303
|
}
|
|
316
304
|
}
|
|
317
305
|
&--secondary {
|
|
318
|
-
--box-shadow-tint:
|
|
306
|
+
--box-shadow-tint: #{$button-primary-shadow};
|
|
319
307
|
border-color: currentColor;
|
|
320
|
-
color: $
|
|
308
|
+
color: $button-primary;
|
|
321
309
|
&:hover:not(:disabled) {
|
|
322
|
-
background-color: $
|
|
323
|
-
border-color: $
|
|
324
|
-
color: $
|
|
310
|
+
background-color: $button-primary-hover;
|
|
311
|
+
border-color: $button-primary-hover;
|
|
312
|
+
color: $button-text-on-primary;
|
|
325
313
|
}
|
|
326
314
|
}
|
|
327
315
|
&--tertiary {
|
|
328
|
-
--box-shadow-tint:
|
|
316
|
+
--box-shadow-tint: #{$button-primary-shadow};
|
|
329
317
|
background-color: transparent;
|
|
330
318
|
border-color: transparent;
|
|
331
|
-
color: $
|
|
319
|
+
color: $button-primary;
|
|
332
320
|
&:hover:not(:disabled),
|
|
333
321
|
&:focus:not(:disabled) {
|
|
334
|
-
color: $
|
|
322
|
+
color: $button-primary-hover;
|
|
335
323
|
}
|
|
336
324
|
}
|
|
337
325
|
&--danger {
|
|
338
|
-
--
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
color: $btn-color-danger;
|
|
326
|
+
--box-shadow-tint: #{$button-danger-shadow};
|
|
327
|
+
background-color: $button-danger;
|
|
328
|
+
border-color: $button-danger;
|
|
329
|
+
color: $button-text-on-danger;
|
|
343
330
|
&:hover:not(:disabled) {
|
|
344
|
-
background-color: $
|
|
345
|
-
border-color: $
|
|
331
|
+
background-color: $button-danger-hover;
|
|
332
|
+
border-color: $button-danger-hover;
|
|
346
333
|
}
|
|
347
334
|
}
|
|
348
335
|
&--plain {
|
|
336
|
+
color: $button-text-on-plain;
|
|
349
337
|
&:hover:not(:disabled) {
|
|
350
|
-
background-color: $
|
|
338
|
+
background-color: $button-plain-hover;
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
&--active {
|
|
343
|
+
z-index: 2;
|
|
344
|
+
background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
|
|
345
|
+
box-shadow: inset 0 -2px 0 0 currentColor;
|
|
346
|
+
}
|
|
347
|
+
&:disabled {
|
|
348
|
+
opacity: 0.6;
|
|
349
|
+
}
|
|
350
|
+
&--loading {
|
|
351
|
+
cursor: not-allowed;
|
|
352
|
+
span {
|
|
353
|
+
visibility: hidden;
|
|
351
354
|
}
|
|
352
355
|
}
|
|
353
356
|
|
|
@@ -373,10 +376,6 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
373
376
|
&--block {
|
|
374
377
|
display: block;
|
|
375
378
|
width: 100%;
|
|
376
|
-
padding: 0.5rem;
|
|
377
|
-
span {
|
|
378
|
-
gap: 0.5rem;
|
|
379
|
-
}
|
|
380
379
|
& + & {
|
|
381
380
|
margin-top: 0.5rem;
|
|
382
381
|
}
|
|
@@ -388,14 +387,16 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
388
387
|
}
|
|
389
388
|
}
|
|
390
389
|
.q-btn-group {
|
|
390
|
+
--box-shadow-tint: 0 0 0;
|
|
391
391
|
position: relative;
|
|
392
392
|
display: inline-flex;
|
|
393
393
|
border-radius: $border-radius;
|
|
394
394
|
&--elevated {
|
|
395
|
+
--box-shadow-tint: var(--q-theme-primary-rgb);
|
|
395
396
|
box-shadow:
|
|
396
|
-
0 2px 4px -1px
|
|
397
|
-
0 4px 5px 0
|
|
398
|
-
0 1px 10px 0
|
|
397
|
+
0 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
|
|
398
|
+
0 4px 5px 0 rgb(var(--box-shadow-tint) / 0.14),
|
|
399
|
+
0 1px 10px 0 rgb(var(--box-shadow-tint) / 0.12);
|
|
399
400
|
}
|
|
400
401
|
> .q-btn {
|
|
401
402
|
position: relative;
|
|
@@ -416,9 +417,10 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
416
417
|
}
|
|
417
418
|
.q-combobox__clear {
|
|
418
419
|
opacity: 0.5;
|
|
419
|
-
&:hover
|
|
420
|
-
|
|
420
|
+
&:hover,
|
|
421
|
+
&:focus {
|
|
421
422
|
cursor: pointer;
|
|
423
|
+
opacity: 1;
|
|
422
424
|
}
|
|
423
425
|
}
|
|
424
426
|
.q-field {
|
|
@@ -431,7 +433,7 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
431
433
|
display: flex;
|
|
432
434
|
gap: $space-base;
|
|
433
435
|
align-items: center;
|
|
434
|
-
color:
|
|
436
|
+
color: var(--q-theme-neutral-dark);
|
|
435
437
|
line-height: 1.5;
|
|
436
438
|
}
|
|
437
439
|
&__control {
|
|
@@ -445,16 +447,14 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
445
447
|
padding: $input-padding-y $input-padding-x;
|
|
446
448
|
line-height: 1.5;
|
|
447
449
|
transition: color var(--transition-duration) var(--transition-timing-function);
|
|
448
|
-
&:focus-within {
|
|
449
|
-
outline: $outline;
|
|
450
|
-
}
|
|
451
450
|
}
|
|
452
451
|
&__extras {
|
|
453
452
|
display: flex;
|
|
454
453
|
gap: $space-base;
|
|
455
454
|
align-items: center;
|
|
456
|
-
color:
|
|
455
|
+
color: var(--q-theme-neutral);
|
|
457
456
|
margin-top: $space-base;
|
|
457
|
+
font-size: calc(0.9 * $font-size-base);
|
|
458
458
|
}
|
|
459
459
|
&__prepend,
|
|
460
460
|
&__append {
|
|
@@ -474,7 +474,7 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
474
474
|
}
|
|
475
475
|
&--readonly {
|
|
476
476
|
> #{$this}__control {
|
|
477
|
-
background-color:
|
|
477
|
+
background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
|
|
478
478
|
}
|
|
479
479
|
}
|
|
480
480
|
&--disabled {
|
|
@@ -483,6 +483,13 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
483
483
|
opacity: 0.5;
|
|
484
484
|
}
|
|
485
485
|
}
|
|
486
|
+
&:not(#{$this}--disabled) {
|
|
487
|
+
#{$this}__control {
|
|
488
|
+
&:focus-within {
|
|
489
|
+
outline: $outline;
|
|
490
|
+
}
|
|
491
|
+
}
|
|
492
|
+
}
|
|
486
493
|
|
|
487
494
|
@mixin field-size($size, $multiplier: 1) {
|
|
488
495
|
&--#{$size} {
|
|
@@ -512,6 +519,8 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
512
519
|
height: 1em;
|
|
513
520
|
}
|
|
514
521
|
}
|
|
522
|
+
$input-group-addon-color: var(--q-theme-primary);
|
|
523
|
+
$input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
|
|
515
524
|
.q-input-group {
|
|
516
525
|
&__prepend > :first-child {
|
|
517
526
|
border-top-left-radius: $border-radius;
|
|
@@ -531,7 +540,6 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
531
540
|
min-width: 40px;
|
|
532
541
|
height: 100%;
|
|
533
542
|
justify-content: center;
|
|
534
|
-
padding: 0 0.4rem;
|
|
535
543
|
}
|
|
536
544
|
> span {
|
|
537
545
|
display: flex;
|
|
@@ -540,9 +548,10 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
540
548
|
line-height: 1.5;
|
|
541
549
|
font-size: $font-size-base;
|
|
542
550
|
border-width: 1px;
|
|
543
|
-
background-color:
|
|
544
|
-
color:
|
|
551
|
+
background-color: $input-group-addon-background;
|
|
552
|
+
color: $input-group-addon-color;
|
|
545
553
|
white-space: nowrap;
|
|
554
|
+
padding: 0 0.4rem;
|
|
546
555
|
}
|
|
547
556
|
> * + * {
|
|
548
557
|
margin-left: -1px;
|
|
@@ -554,11 +563,12 @@ $btn-outline: var(--q-theme-primary-light);
|
|
|
554
563
|
height: auto;
|
|
555
564
|
border-width: 0;
|
|
556
565
|
padding: 0;
|
|
557
|
-
|
|
558
|
-
outline: none;
|
|
559
|
-
}
|
|
566
|
+
outline: none !important;
|
|
560
567
|
> * {
|
|
561
568
|
border-radius: 0;
|
|
569
|
+
&:focus-within {
|
|
570
|
+
z-index: 2;
|
|
571
|
+
}
|
|
562
572
|
}
|
|
563
573
|
> :first-child {
|
|
564
574
|
border-top-left-radius: $border-radius;
|
|
@@ -631,7 +641,7 @@ $line-color: var(--q-theme-primary);
|
|
|
631
641
|
margin: 0;
|
|
632
642
|
width: inherit;
|
|
633
643
|
&__title {
|
|
634
|
-
color:
|
|
644
|
+
color: var(--q-theme-neutral);
|
|
635
645
|
padding: 5px 6px;
|
|
636
646
|
line-height: 15px;
|
|
637
647
|
width: inherit;
|
|
@@ -664,15 +674,10 @@ $line-color: var(--q-theme-primary);
|
|
|
664
674
|
&:hover,
|
|
665
675
|
&:focus-visible,
|
|
666
676
|
&--highlighted {
|
|
667
|
-
background-color: var(--q-theme-primary-light);
|
|
677
|
+
background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
|
|
668
678
|
}
|
|
669
679
|
&--selected {
|
|
670
|
-
background-color:
|
|
671
|
-
&:hover,
|
|
672
|
-
&:focus-visible,
|
|
673
|
-
&--highlighted {
|
|
674
|
-
background-color: rgb(var(--q-theme-primary-rgb) / 0.39);
|
|
675
|
-
}
|
|
680
|
+
background-color: var(--q-theme-primary-light) !important;
|
|
676
681
|
}
|
|
677
682
|
em {
|
|
678
683
|
font-style: normal;
|
|
@@ -694,8 +699,7 @@ $overlay-arrow-height: 0.5rem;
|
|
|
694
699
|
$this: &;
|
|
695
700
|
--q-overlay-bg: var(--q-theme-background);
|
|
696
701
|
--q-overlay-color: var(--q-theme-on-background);
|
|
697
|
-
|
|
698
|
-
--q-overlay-border-color: #c4c5ca;
|
|
702
|
+
--q-overlay-border-color: var(--q-theme-neutral-light);
|
|
699
703
|
position: absolute;
|
|
700
704
|
z-index: 1070;
|
|
701
705
|
&__underlay {
|
|
@@ -824,7 +828,7 @@ $overlay-arrow-height: 0.5rem;
|
|
|
824
828
|
--q-overlay-border-color: transparent;
|
|
825
829
|
}
|
|
826
830
|
}
|
|
827
|
-
$popover-header-bg: rgb(var(--q-theme-
|
|
831
|
+
$popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
|
|
828
832
|
.q-popover {
|
|
829
833
|
.q-overlay__content {
|
|
830
834
|
z-index: 1070;
|
|
@@ -862,7 +866,8 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
|
|
|
862
866
|
&:not(#{$this}--disabled) {
|
|
863
867
|
#{$this}__clear,
|
|
864
868
|
#{$this}__chevron {
|
|
865
|
-
&:hover
|
|
869
|
+
&:hover,
|
|
870
|
+
&:focus {
|
|
866
871
|
opacity: 1;
|
|
867
872
|
}
|
|
868
873
|
}
|
|
@@ -873,11 +878,11 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
|
|
|
873
878
|
overflow: hidden;
|
|
874
879
|
text-overflow: ellipsis;
|
|
875
880
|
pointer-events: none;
|
|
876
|
-
min-height:
|
|
881
|
+
min-height: 1lh;
|
|
877
882
|
}
|
|
878
883
|
&__placeholder {
|
|
879
884
|
font-style: italic;
|
|
880
|
-
color:
|
|
885
|
+
color: var(--q-theme-neutral);
|
|
881
886
|
}
|
|
882
887
|
&--expanded {
|
|
883
888
|
#{$this}__chevron {
|
|
@@ -900,7 +905,7 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
|
|
|
900
905
|
.q-select__body {
|
|
901
906
|
display: flex;
|
|
902
907
|
flex-direction: column;
|
|
903
|
-
align-items:
|
|
908
|
+
align-items: start;
|
|
904
909
|
gap: $space-base;
|
|
905
910
|
width: 100%;
|
|
906
911
|
padding: $space-base 0;
|
|
@@ -917,6 +922,11 @@ $popover-header-bg: rgb(var(--q-theme-on-background-rgb) / 0.04);
|
|
|
917
922
|
max-height: 240px;
|
|
918
923
|
align-items: start;
|
|
919
924
|
}
|
|
925
|
+
.q-select__loader {
|
|
926
|
+
display: flex;
|
|
927
|
+
justify-content: center;
|
|
928
|
+
width: 100%;
|
|
929
|
+
}
|
|
920
930
|
.q-select__loader,
|
|
921
931
|
.q-select__empty {
|
|
922
932
|
margin: calc(4 * $space-base) 0;
|
|
@@ -986,22 +996,21 @@ $spinner-color: var(--q-theme-primary);
|
|
|
986
996
|
width: 100%;
|
|
987
997
|
line-height: inherit;
|
|
988
998
|
outline: none;
|
|
999
|
+
color: inherit;
|
|
989
1000
|
background-color: transparent;
|
|
990
1001
|
cursor: inherit;
|
|
991
1002
|
padding: 0;
|
|
992
1003
|
&::placeholder {
|
|
993
1004
|
font-style: italic;
|
|
994
|
-
color:
|
|
1005
|
+
color: var(--q-theme-neutral);
|
|
995
1006
|
}
|
|
996
1007
|
&:disabled {
|
|
997
1008
|
user-select: none;
|
|
998
1009
|
}
|
|
999
1010
|
}
|
|
1000
|
-
.q-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
justify-content: flex-end;
|
|
1004
|
-
color: rgb(var(--q-theme-on-background-rgb) / 0.5);
|
|
1011
|
+
.q-theme-provider {
|
|
1012
|
+
color: var(--q-theme-on-background);
|
|
1013
|
+
caret-color: var(--q-theme-on-background);
|
|
1005
1014
|
}
|
|
1006
1015
|
.q-tooltip .q-overlay__content {
|
|
1007
1016
|
padding: 0.5rem;
|