@wavemaker/foundation-css 12.0.0-next.45076 → 12.0.0-next.45080

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,79 +1,74 @@
1
1
  /**--import css variables file--**/
2
- /**
3
- * Do not edit directly, this file was auto-generated.
4
- */
5
2
  @import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
6
3
  :root {
7
- --wm-border-color: var(--wm-color-outline-variant);
8
- --wm-border-color-translucent: rgba(0, 0, 0, 0.175);
9
- --wm-border-width: 1px;
10
- --wm-border-style: solid;
4
+ /**--Colors--**/
11
5
  --wm-color-primary: #65558F;
12
- --wm-color-primary-container: #EADDFF;
13
- --wm-color-primary-fixed: #EADDFF;
14
- --wm-color-primary-fixed-dim: #D0BCFF;
15
- --wm-color-primary-fixed-variant: #4F378B;
16
6
  --wm-color-on-primary: #FFFFFF;
7
+ --wm-color-primary-container: #EADDFF;
17
8
  --wm-color-on-primary-container: #21005D;
18
- --wm-color-on-primary-fixed: #E8DEF8;
19
- --wm-color-on-primary-fixed-dim: #CCC2DC;
20
- --wm-color-on-primary-fixed-variant: #4A4458;
21
9
  --wm-color-secondary: #625B71;
22
- --wm-color-secondary-container: #E8DEF8;
23
- --wm-color-secondary-fixed: #E8DEF8;
24
- --wm-color-secondary-fixed-dim: #CCC2DC;
25
- --wm-color-secondary-fixed-variant: #4A4458;
26
10
  --wm-color-on-secondary: #FFFFFF;
11
+ --wm-color-secondary-container: #E8DEF8;
27
12
  --wm-color-on-secondary-container: #1D192B;
28
- --wm-color-on-secondary-fixed: #1D192B;
29
- --wm-color-on-secondary-fixed-variant: #4A4458;
30
13
  --wm-color-tertiary: #7D5260;
31
- --wm-color-tertiary-container: #FFD8E4;
32
- --wm-color-tertiary-fixed: #FFD8E4;
33
- --wm-color-tertiary-fixed-dim: #EFB8C8;
34
14
  --wm-color-on-tertiary: #FFFFFF;
15
+ --wm-color-tertiary-container: #FFD8E4;
35
16
  --wm-color-on-tertiary-container: #31111D;
36
- --wm-color-on-tertiary-fixed: #31111D;
37
- --wm-color-on-tertiary-fixed-variant: #633B48;
38
17
  --wm-color-success: #0abf00;
39
- --wm-color-success-container: #9fffb2;
40
18
  --wm-color-on-success: #ffffff;
19
+ --wm-color-success-container: #d5ffdd;
41
20
  --wm-color-on-success-container: #1d1d1d;
42
21
  --wm-color-info: #00c8ff;
43
- --wm-color-info-container: #a5eaff;
44
22
  --wm-color-on-info: #232323;
23
+ --wm-color-info-container: #ddf7ff;
45
24
  --wm-color-on-info-container: #191919;
46
25
  --wm-color-warning: #ffae00;
47
- --wm-color-warning-container: #ffe495;
48
26
  --wm-color-on-warning: #2c2c2c;
27
+ --wm-color-warning-container: #fff4d5;
49
28
  --wm-color-on-warning-container: #1b1b1b;
50
29
  --wm-color-error: #B3261E;
51
- --wm-color-error-container: #F9DEDC;
52
30
  --wm-color-on-error: #FFFFFF;
31
+ --wm-color-error-container: #F9DEDC;
53
32
  --wm-color-on-error-container: #410E0B;
54
33
  --wm-color-background: #FEF7FF;
55
34
  --wm-color-on-background: #1D1B20;
56
35
  --wm-color-surface: #FEF7FF;
57
- --wm-color-surface-variant: #E7E0EC;
58
- --wm-color-surface-bright: #FEF7FF;
59
- --wm-color-surface-dim: #DED8E1;
60
- --wm-color-surface-tint: #6750A4;
61
- --wm-color-surface-container: #FFFFFF;
62
- --wm-color-surface-container-low: #F7F2FA;
63
- --wm-color-surface-container-lowest: #FFFFFF;
64
- --wm-color-surface-container-high: #ECE6F0;
65
- --wm-color-surface-container-highest: #E6E0E9;
66
36
  --wm-color-on-surface: #1D1B20;
37
+ --wm-color-surface-variant: #E7E0EC;
67
38
  --wm-color-on-surface-variant: #49454F;
68
39
  --wm-color-inverse-surface: #322F35;
69
40
  --wm-color-inverse-on-surface: #F5EFF7;
70
41
  --wm-color-inverse-primary: #D0BCFF;
42
+ --wm-color-primary-fixed: #EADDFF;
43
+ --wm-color-on-primary-fixed: #21005D;
44
+ --wm-color-primary-fixed-dim: #D0BCFF;
45
+ --wm-color-on-primary-fixed-variant: #4F378B;
46
+ --wm-color-secondary-fixed: #E8DEF8;
47
+ --wm-color-on-secondary-fixed: #1D192B;
48
+ --wm-color-secondary-fixed-dim: #CCC2DC;
49
+ --wm-color-on-secondary-fixed-variant: #4A4458;
50
+ --wm-color-tertiary-fixed: #FFD8E4;
51
+ --wm-color-on-tertiary-fixed: #31111D;
52
+ --wm-color-tertiary-fixed-dim: #EFB8C8;
53
+ --wm-color-on-tertiary-fixed-variant: #633B48;
54
+ --wm-color-surface-tint: #6750A4;
55
+ --wm-color-surface-dim: #DED8E1;
56
+ --wm-color-surface-bright: #FEF7FF;
57
+ --wm-color-surface-container-lowest: #FFFFFF;
58
+ --wm-color-surface-container-low: #F7F2FA;
59
+ --wm-color-surface-container: #F3EDF7;
60
+ --wm-color-surface-container-high: #ECE6F0;
61
+ --wm-color-surface-container-highest: #E6E0E9;
71
62
  --wm-color-outline: #79747E;
72
63
  --wm-color-outline-variant: #CAC4D0;
73
64
  --wm-color-shadow: #000000;
74
65
  --wm-color-scrim: #000000;
75
66
  --wm-color-white: #FFFFFF;
76
67
  --wm-color-black: #000000;
68
+ /**--font--**/
69
+ --wm-font-family-brand: Roboto, var(--wm-font-family-backup);
70
+ --wm-font-family-plain: Roboto, var(--wm-font-family-backup);
71
+ --wm-font-family-backup: Arial, Helvetica, sans-serif;
77
72
  --wm-font-weight-thin: 100;
78
73
  --wm-font-weight-extralight: 200;
79
74
  --wm-font-weight-light: 300;
@@ -83,9 +78,7 @@
83
78
  --wm-font-weight-bold: 700;
84
79
  --wm-font-weight-extrabold: 800;
85
80
  --wm-font-weight-black: 900;
86
- --wm-font-family-brand: Roboto, var(--wm-font-family-backup);
87
- --wm-font-family-plain: Roboto, var(--wm-font-family-backup);
88
- --wm-font-family-backup: Arial, Helvetica, sans-serif;
81
+ /**--border radius--**/
89
82
  --wm-radius-none: 0px;
90
83
  --wm-radius-xxs: 2px;
91
84
  --wm-radius-xs: 4px;
@@ -96,45 +89,36 @@
96
89
  --wm-radius-xxl: 32px;
97
90
  --wm-radius-pill: 1000px;
98
91
  --wm-radius-circle: 50%;
92
+ /*border*/
93
+ --wm-border-width: 1px;
94
+ --wm-border-style: solid;
95
+ --wm-border-color: var(--wm-color-outline-variant);
96
+ --wm-border-color-translucent: rgba(0, 0, 0, 0.175);
97
+ --wm-space-rule: 1rem;
99
98
  --wm-space-0: calc(var(--wm-space-rule) * 0);
100
- /* 0px */
101
- --wm-space-1: calc(var(--wm-space-rule) * 1);
102
- /* 4px */
103
- --wm-space-2: calc(var(--wm-space-rule) * 2);
104
- /* 8px */
105
- --wm-space-3: calc(var(--wm-space-rule) * 3);
106
- /* 12px */
107
- --wm-space-4: calc(var(--wm-space-rule) * 4);
108
- /* 16px */
109
- --wm-space-5: calc(var(--wm-space-rule) * 5);
110
- /* 20px */
111
- --wm-space-6: calc(var(--wm-space-rule) * 6);
112
- /* 24px */
113
- --wm-space-7: calc(var(--wm-space-rule) * 7);
114
- /* 28px */
115
- --wm-space-8: calc(var(--wm-space-rule) * 8);
116
- /* 32px */
117
- --wm-space-9: calc(var(--wm-space-rule) * 9);
118
- /* 36px */
119
- --wm-space-10: calc(var(--wm-space-rule) * 10);
120
- /* 40px */
121
- --wm-space-11: calc(var(--wm-space-rule) * 11);
122
- /* 44px */
123
- --wm-space-12: calc(var(--wm-space-rule) * 12);
124
- /* 48px */
125
- --wm-space-rule: 0.25rem;
126
- /* 4px */
127
- --wm-spacer-0: calc(var(--wm-spacer) * 0);
128
- --wm-spacer-1: calc(var(--wm-spacer) * 0.25);
129
- --wm-spacer-2: calc(var(--wm-spacer) * 0.5);
130
- --wm-spacer-3: calc(var(--wm-spacer) * 1);
131
- --wm-spacer-4: calc(var(--wm-spacer) * 1.6);
132
- --wm-spacer-5: calc(var(--wm-spacer) * 2.5);
133
- --wm-spacer-6: calc(var(--wm-spacer) * 3.5);
134
- --wm-spacer-7: calc(var(--wm-spacer) * 4);
135
- --wm-spacer-8: calc(var(--wm-spacer) * 8);
136
- --wm-spacer-9: calc(var(--wm-spacer) * 11);
99
+ --wm-space-1: calc(var(--wm-space-rule) * 0.25);
100
+ --wm-space-2: calc(var(--wm-space-rule) * 0.5);
101
+ --wm-space-3: calc(var(--wm-space-rule) * 0.75);
102
+ --wm-space-4: calc(var(--wm-space-rule) * 1);
103
+ --wm-space-5: calc(var(--wm-space-rule) * 1.25);
104
+ --wm-space-6: calc(var(--wm-space-rule) * 1.5);
105
+ --wm-space-7: calc(var(--wm-space-rule) * 1.75);
106
+ --wm-space-8: calc(var(--wm-space-rule) * 2);
107
+ --wm-space-9: calc(var(--wm-space-rule) * 2.25);
108
+ --wm-space-10: calc(var(--wm-space-rule) * 2.5);
109
+ --wm-space-11: calc(var(--wm-space-rule) * 2.75);
110
+ --wm-space-12: calc(var(--wm-space-rule) * 3);
137
111
  --wm-spacer: 1rem;
112
+ --wm-spacer-0: calc(var(--wm-spacer)*0);
113
+ --wm-spacer-1: calc(var(--wm-spacer)*0.25);
114
+ --wm-spacer-2: calc(var(--wm-spacer)*0.5);
115
+ --wm-spacer-3: calc(var(--wm-spacer)*1);
116
+ --wm-spacer-4: calc(var(--wm-spacer)*1.6);
117
+ --wm-spacer-5: calc(var(--wm-spacer)*2.5);
118
+ --wm-spacer-6: calc(var(--wm-spacer)*3.5);
119
+ --wm-spacer-7: calc(var(--wm-spacer)*4);
120
+ --wm-spacer-8: calc(var(--wm-spacer)*8);
121
+ --wm-spacer-9: calc(var(--wm-spacer)*11);
138
122
  }
139
123
  /*=========
140
124
  css variables doesn't support by less functions to generate lighten, darken, fade, etc.
@@ -427,59 +411,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
427
411
  --wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
428
412
  --wm-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
429
413
  }
430
- @media (prefers-color-scheme: dark) {
431
- :root {
432
- --wm-color-background: #141218;
433
- --wm-color-error: #f2b8b5;
434
- --wm-color-error-container: #8c1d18;
435
- --wm-color-inverse-on-surface: #322f35;
436
- --wm-color-inverse-primary: #6750a4;
437
- --wm-color-inverse-surface: #e6e0e9;
438
- --wm-color-on-background: #e6e0e9;
439
- --wm-color-on-error: #601410;
440
- --wm-color-on-error-container: #f9dedc;
441
- --wm-color-on-primary: #381e72;
442
- --wm-color-on-primary-container: #eaddff;
443
- --wm-color-on-primary-fixed: #21005d;
444
- --wm-color-on-primary-fixed-variant: #4f378b;
445
- --wm-color-on-secondary: #332d41;
446
- --wm-color-on-secondary-container: #e8def8;
447
- --wm-color-on-secondary-fixed: #1d192b;
448
- --wm-color-on-secondary-fixed-variant: #4a4458;
449
- --wm-color-on-surface: #e6e0e9;
450
- --wm-color-on-surface-variant: #cac4d0;
451
- --wm-color-on-tertiary: #492532;
452
- --wm-color-on-tertiary-container: #ffd8e4;
453
- --wm-color-on-tertiary-fixed: #31111d;
454
- --wm-color-on-tertiary-fixed-variant: #633b48;
455
- --wm-color-outline: #938f99;
456
- --wm-color-outline-variant: #49454f;
457
- --wm-color-primary: #d0bcfe;
458
- --wm-color-primary-container: #4f378b;
459
- --wm-color-primary-fixed: #eaddff;
460
- --wm-color-primary-fixed-dim: #d0bcff;
461
- --wm-color-scrim: #000000;
462
- --wm-color-secondary: #ccc2dc;
463
- --wm-color-secondary-container: #4a4458;
464
- --wm-color-secondary-fixed: #e8def8;
465
- --wm-color-secondary-fixed-dim: #ccc2dc;
466
- --wm-color-shadow: #000000;
467
- --wm-color-surface: #141218;
468
- --wm-color-surface-bright: #3b383e;
469
- --wm-color-surface-container: #211f26;
470
- --wm-color-surface-container-high: #2b2930;
471
- --wm-color-surface-container-highest: #36343b;
472
- --wm-color-surface-container-low: #1d1b20;
473
- --wm-color-surface-container-lowest: #0f0d13;
474
- --wm-color-surface-dim: #141218;
475
- --wm-color-surface-tint: #d0bcff;
476
- --wm-color-surface-variant: #49454f;
477
- --wm-color-tertiary: #efb8c8;
478
- --wm-color-tertiary-container: #633b48;
479
- --wm-color-tertiary-fixed: #ffd8e4;
480
- --wm-color-tertiary-fixed-dim: #efb8c8;
481
- }
482
- }
483
414
  /*=========
484
415
  css variables doesn't support by less functions to generate lighten, darken, fade, etc.
485
416
  We are using color-mix function of css variables.
@@ -829,6 +760,40 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
829
760
  --wm-currency-inputgroup-addon-font-weight: var(--wm-form-control-font-weight);
830
761
  --wm-currency-inputgroup-addon-line-height: var(--wm-form-control-line-height);
831
762
  --wm-currency-inputgroup-addon-letter-spacing: var(--wm-form-control-letter-spacing);
763
+ /* table variables */
764
+ --wm-data-table-border-collapse: unset;
765
+ --wm-data-table-overlay-background: var(--wm-color-white);
766
+ --wm-data-table-overlay-color: var(--wm-color-black);
767
+ --wm-data-table-overlay-opacity: 75%;
768
+ --wm-data-table-border-spacing: unset;
769
+ --wm-data-table-padding: var(--wm-space-2) var(--wm-space-4);
770
+ --wm-data-table-padding-condensed: var(--wm-space-1) var(--wm-space-2);
771
+ --wm-data-table-thead-tr-color: var(--wm-color-on-surface);
772
+ --wm-data-table-thead-tr-background: var(--wm-color-surface);
773
+ --wm-data-table-thead-tr-font-size: var(--wm-h5-font-size);
774
+ --wm-data-table-thead-tr-font-weight: var(--wm-h5-font-weight);
775
+ --wm-data-table-thead-tr-font-family: var(--wm-h5-font-family);
776
+ --wm-data-table-thead-tr-line-height: var(--wm-h5-line-height);
777
+ --wm-data-table-thead-tr-letter-spacing: var(--wm-h5-letter-spacing);
778
+ --wm-data-table-thead-th-padding: var(--wm-data-table-padding);
779
+ --wm-data-table-thead-th-border-width: var(--wm-border-width);
780
+ --wm-data-table-thead-th-border-style: var(--wm-border-style);
781
+ --wm-data-table-thead-th-border-color: var(--wm-border-color);
782
+ /*tale body*/
783
+ --wm-data-table-tbody-tr-background: var(--wm-color-surface-container-lowest);
784
+ --wm-data-table-tbody-tr-background-hover: var(--wm-color-surface-container-low);
785
+ --wm-data-table-tbody-tr-background-active: var(--wm-color-surface-variant);
786
+ --wm-data-table-tbody-tr-font-size: var(--wm-body-large-font-size);
787
+ --wm-data-table-tbody-tr-font-weight: var(--wm-body-large-font-weight);
788
+ --wm-data-table-tbody-tr-font-family: var(--wm-body-large-font-family);
789
+ --wm-data-table-tbody-tr-line-height: var(--wm-body-large-line-height);
790
+ --wm-data-table-tbody-tr-letter-spacing: var(--wm-body-large-letter-spacing);
791
+ --wm-data-table-tbody-tr-color: var(--wm-color-on-surface);
792
+ --wm-data-table-tbody-td-padding: var(--wm-data-table-padding);
793
+ --wm-data-table-tbody-td-border-width: var(--wm-border-width);
794
+ --wm-data-table-tbody-td-border-style: var(--wm-border-style);
795
+ --wm-data-table-tbody-td-border-color: var(--wm-border-color);
796
+ --wm-data-table-tbody-td-border-radius: var(--wm-radius-md);
832
797
  /* datepicker variables */
833
798
  --wm-datepicker-color: var(--wm-color-on-surface);
834
799
  --wm-datepicker-background: var(--wm-color-surface-container-high);
@@ -965,16 +930,22 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
965
930
  --wm-message-container-loading-background: var(--wm-color-primary);
966
931
  --wm-message-container-loading-color: var(--wm-color-on-primary);
967
932
  --wm-message-container-loading-border-color: var(--wm-color-primary);
933
+ --wm-modal-margin: var(--wm-space-6);
968
934
  --wm-modal-backdrop-opacity: 50%;
969
935
  --wm-modal-backdrop-background: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
970
936
  --wm-modal-backdrop-z-index: 999;
971
937
  --wm-modal-z-index: 1000;
972
938
  --wm-modal-width: 600px;
939
+ --wm-modal-height: auto;
973
940
  --wm-modal-xs-width: 440px;
974
941
  --wm-modal-sm-width: 600px;
975
942
  --wm-modal-md-width: 900px;
976
943
  --wm-modal-lg-width: 1200px;
977
944
  --wm-modal-xl-width: 1536px;
945
+ --wm-modal-full-screen-width: 100%;
946
+ --wm-modal-full-screen-height: 100%;
947
+ --wm-modal-full-screen-margin: var(--wm-space-0);
948
+ --wm-modal-full-screen-radius: var(--wm-radius-none);
978
949
  --wm-modal-background: var(--wm-color-surface-container-high);
979
950
  --wm-modal-radius: var(--wm-radius-lg);
980
951
  --wm-modal-header-padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-4);
@@ -987,6 +958,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
987
958
  --wm-modal-body-padding: var(--wm-space-6) var(--wm-space-6);
988
959
  --wm-modal-footer-padding: var(--wm-space-6) var(--wm-space-6);
989
960
  --wm-modal-footer-gap: var(--wm-space-3);
961
+ --wm-modal-sheet-width: 400px;
962
+ --wm-modal-sheet-radius: var(--wm-radius-none);
963
+ --wm-modal-sheet-margin: var(--wm-space-0);
990
964
  /*--Nav--*/
991
965
  --wm-nav-min-height: var(--wm-nav-item-min-height);
992
966
  --wm-nav-background: var(--wm-color-surface-container-low);
@@ -1294,13 +1268,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1294
1268
  --wm-radiobutton-set-item-gap: var(--wm-space-6);
1295
1269
  /*--Rating--*/
1296
1270
  --wm-rating-gap: var(--wm-space-2);
1297
- --wm-rating-icon-gap: var(--wm-space-0);
1271
+ --wm-rating-icon-gap: var(--wm-space-1);
1298
1272
  --wm-rating-icon-color: var(--wm-color-on-surface);
1299
1273
  --wm-rating-icon-color-active: var(--wm-color-warning);
1300
1274
  --wm-rating-icon-size: var(--wm-icon-size);
1301
1275
  --wm-rating-icon-opacity-inactive: 0.38;
1302
1276
  --wm-rating-icon-opacity-active: 1;
1303
- --wm-rating-icon-opacity-readonly: 0.38;
1277
+ --wm-rating-icon-opacity-readonly: 1;
1304
1278
  /* search variables */
1305
1279
  --wm-search-full-screen-background: var(--wm-color-surface-container);
1306
1280
  --wm-search-back-btn-margin-vertical: var(--wm-space-0);
@@ -1325,6 +1299,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1325
1299
  --wm-search-dropdown-menu-item-focus-state-layer-opacity: var(--wm-opacity-focus);
1326
1300
  --wm-search-dropdown-menu-item-active-state-layer-opacity: var(--wm-opacity-active);
1327
1301
  --wm-search-dropdown-menu-item-img-radius: var(--wm-radius-circle);
1302
+ --wm-search-dropdown-menu-group-item-color: var(--wm-color-on-surface);
1303
+ --wm-search-dropdown-menu-group-item-background: var(--wm-color-surface-container-low);
1304
+ --wm-search-dropdown-menu-group-item-gap: var(--wm-space-2);
1305
+ --wm-search-dropdown-menu-group-item-padding: var(--wm-space-2) var(--wm-space-4);
1306
+ --wm-search-dropdown-menu-group-item-header-font-family: var(--wm-h4-font-family);
1307
+ --wm-search-dropdown-menu-group-item-header-font-size: var(--wm-h4-font-size);
1308
+ --wm-search-dropdown-menu-group-item-header-line-height: var(--wm-h4-line-height);
1309
+ --wm-search-dropdown-menu-group-item-header-font-weight: var(--wm-h4-font-weight);
1310
+ --wm-search-dropdown-menu-group-item-header-letter-spacing: var(--wm-h4-letter-spacing);
1328
1311
  --wm-search-status-background: var(--wm-color-surface-dim);
1329
1312
  --wm-search-status-padding: var(--wm-space-2);
1330
1313
  --wm-spinner-min-height: 6rem;
@@ -11291,96 +11274,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
11291
11274
  padding-left: 2px;
11292
11275
  display: inline-block;
11293
11276
  }
11294
- .wm-app .app-slider {
11295
- width: auto;
11296
- position: relative;
11297
- }
11298
- .wm-app .app-slider .app-slider-value {
11299
- display: inline-block;
11300
- text-align: center;
11301
- }
11302
- .wm-app .app-slider .range-input,
11303
- .wm-app .app-slider output {
11304
- display: inline-block;
11305
- }
11306
- .wm-app .app-slider input[type="range"],
11307
- .wm-app .app-slider input[type="range"]::-webkit-slider-runnable-track,
11308
- .wm-app .app-slider input[type="range"]::-webkit-slider-thumb {
11309
- -webkit-appearance: none;
11310
- }
11311
- .wm-app .app-slider input[type="range"] {
11312
- color: #5b89db;
11313
- border: 0 solid transparent;
11314
- background-color: transparent;
11315
- border-width: 0 1em;
11316
- padding: 0;
11317
- width: 100%;
11318
- height: 2.5em;
11319
- opacity: 0.65;
11320
- cursor: pointer;
11321
- }
11322
- .wm-app .app-slider input[type="range"]:focus {
11323
- outline: 0;
11324
- opacity: 0.99;
11325
- }
11326
- .wm-app .app-slider input[type="range"]::-webkit-slider-runnable-track {
11327
- position: relative;
11328
- height: 1.25em;
11329
- background: linear-gradient(#d5cebc, #d5cebc) no-repeat;
11330
- background-size: 100% 0.2em;
11331
- }
11332
- .wm-app .app-slider input[type="range"]::-webkit-slider-thumb {
11333
- position: relative;
11334
- margin-top: -0.6em;
11335
- border-radius: 50%;
11336
- background: currentColor;
11337
- width: 1.25em;
11338
- height: 1.25em;
11339
- }
11340
- .wm-app .app-slider input[type="range"]::-moz-range-track {
11341
- height: 1.25em;
11342
- background: linear-gradient(#d5cebc, #d5cebc) no-repeat;
11343
- background-size: 100% 0.2em;
11344
- }
11345
- .wm-app .app-slider input[type="range"]::-moz-range-progress {
11346
- height: 1.25em;
11347
- box-shadow: inset 0 0.2em currentColor;
11348
- }
11349
- .wm-app .app-slider input[type="range"]::-moz-range-thumb {
11350
- border: none;
11351
- border-radius: 50%;
11352
- background: currentColor;
11353
- transform: translateY(-0.58em);
11354
- width: 1.25em;
11355
- height: 1.25em;
11356
- }
11357
- .wm-app .app-slider input[type="range"]::-ms-track {
11358
- margin-left: 0.625em;
11359
- border: none;
11360
- height: 1.25em;
11361
- background: linear-gradient(#d5cebc, #d5cebc) no-repeat;
11362
- background-size: 100% 0.2em;
11363
- color: transparent;
11364
- }
11365
- .wm-app .app-slider input[type="range"]::-ms-fill-lower {
11366
- height: 1.25em;
11367
- box-shadow: inset 0 0.2em currentColor;
11368
- background: linear-gradient(transparent 0.125em, transparent 0.125em) no-repeat;
11369
- }
11370
- .wm-app .app-slider input[type="range"]::-ms-thumb {
11371
- border: none;
11372
- border-radius: 50%;
11373
- background: currentColor;
11374
- width: 1.25em;
11375
- height: 1.25em;
11376
- transform: translate(1px, -0.58em);
11377
- }
11378
- .wm-app .app-slider input[type="range"]::-ms-tooltip {
11379
- display: none;
11380
- }
11381
- .wm-app .app-label {
11382
- position: relative;
11383
- }
11384
11277
  .wm-app .app-textbox[type="number"].step-hidden {
11385
11278
  -moz-appearance: textfield;
11386
11279
  }
@@ -11389,11 +11282,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
11389
11282
  -webkit-appearance: none;
11390
11283
  margin: 0;
11391
11284
  }
11392
- .wm-app [widget="checkbox"][required="required"]:not([displayname]) .app-checkbox label.required:after {
11393
- content: "*";
11394
- color: red;
11395
- margin-left: 2px;
11396
- }
11397
11285
  .wm-app .order-by li button {
11398
11286
  padding: 0;
11399
11287
  }
@@ -14344,6 +14232,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14344
14232
  background: var(--wm-panel-background);
14345
14233
  border-radius: var(--wm-panel-radius);
14346
14234
  box-shadow: var(--wm-panel-shadow);
14235
+ --wm-grid-layout-column-padding: var(--wm-space-0);
14347
14236
  }
14348
14237
  .wm-app .app-panel > .panel-heading,
14349
14238
  .wm-app .panel > .panel-heading {
@@ -15076,12 +14965,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15076
14965
  margin-left: 2px;
15077
14966
  }
15078
14967
  .wm-app .form-control {
14968
+ width: 100%;
14969
+ height: var(--wm-form-control-height);
15079
14970
  color: var(--wm-form-control-color);
15080
14971
  background: var(--wm-form-control-background);
15081
14972
  border: var(--wm-form-control-border-width) var(--wm-form-control-border-style) var(--wm-form-control-border-color);
15082
14973
  border-radius: var(--wm-form-control-radius);
15083
- height: var(--wm-form-control-height);
15084
- width: 100%;
15085
14974
  padding: var(--wm-form-control-padding);
15086
14975
  font-family: var(--wm-form-control-font-family);
15087
14976
  font-size: var(--wm-form-control-font-size);
@@ -15131,6 +15020,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15131
15020
  align-items: center;
15132
15021
  justify-content: center;
15133
15022
  gap: var(--wm-space-1);
15023
+ padding: 0;
15024
+ border: none;
15025
+ width: auto;
15026
+ background: none;
15134
15027
  }
15135
15028
  .wm-app .input-group:not(.app-currency) .input-group-btn .btn,
15136
15029
  .wm-app .input-group:not(.app-currency) .input-group-addon .btn,
@@ -15167,7 +15060,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15167
15060
  .wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) button + .btn {
15168
15061
  margin: 0;
15169
15062
  }
15063
+ .wm-app .input-group:not(.app-currency) .input-group .form-control:first-child,
15064
+ .wm-app .input-group:not(.app-currency) .input-group-addon:first-child,
15065
+ .wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .btn,
15066
+ .wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .btn-group > .btn,
15067
+ .wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .dropdown-toggle,
15068
+ .wm-app .input-group:not(.app-currency) .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
15069
+ .wm-app .input-group:not(.app-currency) .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
15170
15070
  .wm-app .input-group:not(.app-currency) .form-control {
15071
+ border-radius: var(--wm-form-control-radius);
15171
15072
  padding-right: calc(var(--wm-input-group-btn-width) + var(--wm-form-control-padding));
15172
15073
  }
15173
15074
  .wm-app .input-group:not(.app-currency).app-datetime .form-control {
@@ -15221,6 +15122,155 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15221
15122
  .wm-app .app-currency.input-group .form-control.app-currency-input {
15222
15123
  padding-left: var(--wm-currency-inputgroup-addon-width);
15223
15124
  }
15125
+ .wm-app .app-grid > .panel-heading .panel-title {
15126
+ width: 100%;
15127
+ display: flex;
15128
+ align-items: center;
15129
+ justify-content: space-between;
15130
+ }
15131
+ .wm-app .app-grid > .panel-heading .panel-title .pull-left:has(.app-icon) {
15132
+ place-self: flex-start;
15133
+ }
15134
+ .wm-app .app-grid > .panel-heading .panel-title .panel-actions.app-datagrid-actions {
15135
+ width: 100%;
15136
+ flex: 1;
15137
+ justify-content: flex-end;
15138
+ margin: 0;
15139
+ }
15140
+ .wm-app .app-grid > .app-datagrid {
15141
+ --wm-form-control-height: 40px;
15142
+ --wm-form-control-padding: var(--wm-space-2);
15143
+ }
15144
+ .wm-app .app-grid > .app-datagrid > .form-search {
15145
+ display: flex;
15146
+ padding: 0 var(--wm-panel-content-padding);
15147
+ margin-bottom: var(--wm-panel-content-padding);
15148
+ }
15149
+ .wm-app .app-grid > .app-datagrid > .form-search .form-group {
15150
+ margin-right: -1px;
15151
+ }
15152
+ .wm-app .app-grid > .app-datagrid > .form-search .form-control.app-textbox {
15153
+ border-top-right-radius: 0;
15154
+ border-bottom-right-radius: 0;
15155
+ }
15156
+ .wm-app .app-grid > .app-datagrid > .form-search .form-control.app-select {
15157
+ border-top-left-radius: 0;
15158
+ border-bottom-left-radius: 0;
15159
+ }
15160
+ .wm-app .app-grid > .app-datagrid .table-container {
15161
+ position: relative;
15162
+ overflow: hidden;
15163
+ width: 100%;
15164
+ }
15165
+ .wm-app .app-grid > .app-datagrid .table-container.table-responsive {
15166
+ overflow-x: auto;
15167
+ }
15168
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner {
15169
+ height: 100%;
15170
+ width: 100%;
15171
+ overflow: auto;
15172
+ }
15173
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table {
15174
+ width: 100%;
15175
+ display: table;
15176
+ table-layout: fixed;
15177
+ border-collapse: var(--wm-data-table-border-collapse);
15178
+ border-spacing: var(--wm-data-table-border-spacing);
15179
+ }
15180
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr {
15181
+ font-family: var(--wm-data-table-thead-tr-font-family);
15182
+ font-weight: var(--wm-data-table-thead-tr-font-weight);
15183
+ font-size: var(--wm-data-table-thead-tr-font-size);
15184
+ line-height: var(--wm-data-table-thead-tr-line-height);
15185
+ letter-spacing: var(--wm-data-table-thead-tr-letter-spacing);
15186
+ color: var(--wm-data-table-thead-tr-color);
15187
+ background: var(--wm-data-table-thead-tr-background);
15188
+ }
15189
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th {
15190
+ border-bottom: var(--wm-data-table-thead-th-border-width) var(--wm-data-table-thead-th-border-style) var(--wm-data-table-thead-th-border-color);
15191
+ padding: var(--wm-data-table-thead-th-padding);
15192
+ overflow: hidden;
15193
+ }
15194
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th:has(input) span.header-data {
15195
+ display: none;
15196
+ }
15197
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container {
15198
+ display: inline-flex;
15199
+ align-items: center;
15200
+ justify-content: center;
15201
+ margin-left: 4px;
15202
+ }
15203
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon {
15204
+ position: relative;
15205
+ display: inline-flex;
15206
+ flex-direction: column;
15207
+ align-items: center;
15208
+ justify-content: center;
15209
+ gap: 2px;
15210
+ }
15211
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon:before,
15212
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon:after {
15213
+ content: "";
15214
+ display: inline-flex;
15215
+ opacity: 0.5;
15216
+ align-items: center;
15217
+ justify-content: center;
15218
+ height: 6px;
15219
+ width: 10px;
15220
+ }
15221
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th > .input-group .input-group-btn {
15222
+ right: calc(var(--wm-input-group-btn-width) + var(--wm-btn-icon-md-margin));
15223
+ }
15224
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead.thead-sticky {
15225
+ z-index: 1;
15226
+ position: sticky;
15227
+ top: 0;
15228
+ }
15229
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr {
15230
+ font-family: var(--wm-data-table-tbody-tr-font-family);
15231
+ font-weight: var(--wm-data-table-tbody-tr-font-weight);
15232
+ font-size: var(--wm-data-table-tbody-tr-font-size);
15233
+ letter-spacing: var(--wm-data-table-tbody-tr-letter-spacing);
15234
+ line-height: var(--wm-data-table-tbody-tr-line-height);
15235
+ color: var(--wm-data-table-tbody-tr-color);
15236
+ background: var(--wm-table-tr-hover-background);
15237
+ }
15238
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr td {
15239
+ border-bottom: var(--wm-data-table-tbody-td-border-width) var(--wm-data-table-tbody-td-border-style) var(--wm-data-table-tbody-td-border-color);
15240
+ padding: var(--wm-data-table-tbody-td-padding);
15241
+ overflow: hidden;
15242
+ }
15243
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr:hover {
15244
+ background: var(--wm-table-tr-hover-background);
15245
+ }
15246
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr.active {
15247
+ background: var(--wm-table-tr-active-background);
15248
+ }
15249
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr:last-child td {
15250
+ border: none;
15251
+ }
15252
+ .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table.table-condensed {
15253
+ --wm-data-table-thead-th-padding: var(--wm-data-table-padding-condensed);
15254
+ --wm-data-table-tbody-td-padding: var(--wm-data-table-padding-condensed);
15255
+ }
15256
+ .wm-app .app-grid > .app-datagrid .table-container .overlay {
15257
+ width: 100%;
15258
+ height: 100%;
15259
+ display: flex;
15260
+ justify-content: center;
15261
+ align-items: center;
15262
+ position: absolute;
15263
+ inset: 0;
15264
+ z-index: 1;
15265
+ background: color-mix(in srgb, var(--wm-data-table-overlay-background), transparent calc(100% - var(--wm-data-table-overlay-opacity)));
15266
+ color: var(--wm-data-table-overlay-color);
15267
+ }
15268
+ .wm-app .app-grid > .app-datagrid .table-container .overlay .status {
15269
+ display: inline-flex;
15270
+ justify-content: center;
15271
+ align-items: center;
15272
+ gap: var(--wm-space-1);
15273
+ }
15224
15274
  .wm-app bs-datepicker-container {
15225
15275
  z-index: 1060;
15226
15276
  margin: var(--wm-space-3) var(--wm-space-0);
@@ -15390,18 +15440,18 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15390
15440
  position: relative;
15391
15441
  display: inline-flex;
15392
15442
  }
15393
- .wm-app .dropdown.app-menu .btn > .anchor-caption,
15394
- .wm-app .dropdown.app-menu a > .anchor-caption,
15395
- .wm-app .dropdown.app-menu .btn > .btn-caption,
15396
- .wm-app .dropdown.app-menu a > .btn-caption {
15443
+ .wm-app .dropdown .btn > .anchor-caption,
15444
+ .wm-app .dropdown a > .anchor-caption,
15445
+ .wm-app .dropdown .btn > .btn-caption,
15446
+ .wm-app .dropdown a > .btn-caption {
15397
15447
  width: 100%;
15398
15448
  white-space: nowrap;
15399
15449
  overflow: hidden;
15400
15450
  text-overflow: ellipsis;
15401
15451
  text-align: left;
15402
15452
  }
15403
- .wm-app .dropdown.app-menu .btn .caret,
15404
- .wm-app .dropdown.app-menu a .caret {
15453
+ .wm-app .dropdown .btn .caret,
15454
+ .wm-app .dropdown a .caret {
15405
15455
  margin: 0;
15406
15456
  display: inline-flex;
15407
15457
  justify-content: center;
@@ -15413,17 +15463,17 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15413
15463
  font-size: var(--wm-dropdown-menu-caret-size);
15414
15464
  transform: rotate(180deg);
15415
15465
  }
15416
- .wm-app .dropdown.app-menu .btn:has(> .caret),
15417
- .wm-app .dropdown.app-menu a:has(> .caret) {
15466
+ .wm-app .dropdown .btn:has(> .caret),
15467
+ .wm-app .dropdown a:has(> .caret) {
15418
15468
  padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2) !important;
15419
15469
  }
15420
- .wm-app .dropdown.app-menu:not(.open) > .btn .caret {
15470
+ .wm-app .dropdown:not(.open) > .btn .caret {
15421
15471
  transform: rotate(0deg);
15422
15472
  }
15423
- .wm-app .dropdown.app-menu:not(.open) > .dropdown-menu {
15473
+ .wm-app .dropdown:not(.open) > .dropdown-menu {
15424
15474
  display: none;
15425
15475
  }
15426
- .wm-app .dropdown.app-menu .dropdown-menu {
15476
+ .wm-app .dropdown .dropdown-menu {
15427
15477
  display: flex;
15428
15478
  flex-direction: column;
15429
15479
  width: var(--wm-dropdown-menu-width);
@@ -15436,7 +15486,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15436
15486
  left: 0;
15437
15487
  z-index: 1000;
15438
15488
  }
15439
- .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a {
15489
+ .wm-app .dropdown .dropdown-menu .app-menu-item a,
15490
+ .wm-app .dropdown .dropdown-menu li a {
15440
15491
  display: flex;
15441
15492
  align-items: center;
15442
15493
  justify-content: flex-start;
@@ -15450,7 +15501,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15450
15501
  letter-spacing: var(--wm-dropdown-menu-item-letter-spacing);
15451
15502
  color: var(--wm-dropdown-menu-item-color);
15452
15503
  }
15453
- .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:before {
15504
+ .wm-app .dropdown .dropdown-menu .app-menu-item a:before,
15505
+ .wm-app .dropdown .dropdown-menu li a:before {
15454
15506
  content: "";
15455
15507
  position: absolute;
15456
15508
  inset: 0;
@@ -15460,77 +15512,81 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15460
15512
  background: var(--wm-dropdown-menu-item-state-layer-color);
15461
15513
  border-radius: inherit;
15462
15514
  }
15463
- .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a .anchor-caption {
15515
+ .wm-app .dropdown .dropdown-menu .app-menu-item a .anchor-caption,
15516
+ .wm-app .dropdown .dropdown-menu li a .anchor-caption {
15464
15517
  overflow: hidden;
15465
15518
  white-space: nowrap;
15466
15519
  text-overflow: ellipsis;
15467
15520
  }
15468
- .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:hover:before {
15521
+ .wm-app .dropdown .dropdown-menu .app-menu-item a:hover:before,
15522
+ .wm-app .dropdown .dropdown-menu li a:hover:before {
15469
15523
  opacity: var(--wm-dropdown-menu-item-state-layer-opacity-hover);
15470
15524
  }
15471
- .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:focus:before {
15525
+ .wm-app .dropdown .dropdown-menu .app-menu-item a:focus:before,
15526
+ .wm-app .dropdown .dropdown-menu li a:focus:before {
15472
15527
  opacity: var(--wm-dropdown-menu-item-state-layer-opacity-focus);
15473
15528
  }
15474
- .wm-app .dropdown.app-menu .dropdown-menu .app-menu-item a:active:before {
15529
+ .wm-app .dropdown .dropdown-menu .app-menu-item a:active:before,
15530
+ .wm-app .dropdown .dropdown-menu li a:active:before {
15475
15531
  opacity: var(--wm-dropdown-menu-item-state-layer-opacity-active);
15476
15532
  }
15477
- .wm-app .dropdown.app-menu .dropdown-menu.horizontal {
15533
+ .wm-app .dropdown .dropdown-menu.horizontal {
15478
15534
  width: auto;
15479
15535
  flex-direction: row;
15480
15536
  padding: var(--wm-dropdown-menu-horizontal-padding);
15481
15537
  }
15482
- .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-menu {
15538
+ .wm-app .dropdown .dropdown-menu.horizontal .dropdown-menu {
15483
15539
  width: auto;
15484
15540
  flex-direction: row;
15485
15541
  padding: var(--wm-dropdown-menu-horizontal-padding);
15486
15542
  }
15487
- .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-menu.pull-right {
15543
+ .wm-app .dropdown .dropdown-menu.horizontal .dropdown-menu.pull-right {
15488
15544
  flex-direction: row-reverse;
15489
15545
  }
15490
- .wm-app .dropdown.app-menu .dropdown-menu.horizontal.pull-right {
15546
+ .wm-app .dropdown .dropdown-menu.horizontal.pull-right {
15491
15547
  flex-direction: row-reverse;
15492
15548
  }
15493
- .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu {
15549
+ .wm-app .dropdown .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu {
15494
15550
  top: 100%;
15495
15551
  left: auto;
15496
15552
  }
15497
- .wm-app .dropdown.app-menu .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu.pull-right {
15553
+ .wm-app .dropdown .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu.pull-right {
15498
15554
  left: auto;
15499
15555
  right: 0;
15500
15556
  }
15501
- .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu {
15557
+ .wm-app .dropdown .dropdown-menu .dropdown-submenu {
15502
15558
  position: relative;
15503
15559
  }
15504
- .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > a {
15560
+ .wm-app .dropdown .dropdown-menu .dropdown-submenu > a {
15505
15561
  padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2);
15506
15562
  }
15507
- .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > a .caret {
15563
+ .wm-app .dropdown .dropdown-menu .dropdown-submenu > a .caret {
15508
15564
  transform: rotate(0deg);
15509
15565
  }
15510
- .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > .dropdown-menu {
15566
+ .wm-app .dropdown .dropdown-menu .dropdown-submenu > .dropdown-menu {
15511
15567
  display: none;
15512
15568
  top: 0;
15513
15569
  left: 100%;
15514
15570
  }
15515
- .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > .dropdown-menu.pull-right {
15571
+ .wm-app .dropdown .dropdown-menu .dropdown-submenu > .dropdown-menu.pull-right {
15516
15572
  left: auto;
15517
15573
  right: 100%;
15518
15574
  }
15519
- .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
15575
+ .wm-app .dropdown .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
15520
15576
  display: flex;
15521
15577
  }
15522
- .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu:hover > a .caret {
15578
+ .wm-app .dropdown .dropdown-menu .dropdown-submenu:hover > a .caret {
15523
15579
  transform: rotate(180deg);
15524
15580
  }
15525
- .wm-app .dropdown.app-menu .dropdown-menu.pull-right {
15581
+ .wm-app .dropdown .dropdown-menu.pull-right {
15526
15582
  left: auto;
15527
15583
  right: 0;
15528
15584
  }
15529
- .wm-app .dropdown.app-menu .dropdown-menu.dropinline-menu .dropdown-menu {
15585
+ .wm-app .dropdown .dropdown-menu.dropinline-menu .dropdown-menu {
15530
15586
  position: relative;
15531
15587
  inset: auto;
15532
15588
  }
15533
- .wm-app .dropdown.app-menu .dropdown-menu.dropinline-menu .dropdown-submenu > .dropdown-menu {
15589
+ .wm-app .dropdown .dropdown-menu.dropinline-menu .dropdown-submenu > .dropdown-menu {
15534
15590
  position: relative;
15535
15591
  inset: auto;
15536
15592
  background: none;
@@ -15538,26 +15594,26 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15538
15594
  padding: var(--wm-dropdown-menu-vertical-inline-submenu-padding);
15539
15595
  width: 100%;
15540
15596
  }
15541
- .wm-app .dropdown.app-menu .dropdown-menu.dropinline-menu.horizontal .dropdown-submenu > .dropdown-menu {
15597
+ .wm-app .dropdown .dropdown-menu.dropinline-menu.horizontal .dropdown-submenu > .dropdown-menu {
15542
15598
  padding: var(--wm-dropdown-menu-horizontal-inline-submenu-padding);
15543
15599
  }
15544
- .wm-app .dropdown.app-menu.dropup > .dropdown-menu {
15600
+ .wm-app .dropdown.dropup > .dropdown-menu {
15545
15601
  bottom: 100%;
15546
15602
  top: auto;
15547
15603
  margin-bottom: 2px;
15548
15604
  }
15549
- .wm-app .dropdown.app-menu.dropup > .dropdown-menu .dropdown-submenu > .dropdown-menu {
15605
+ .wm-app .dropdown.dropup > .dropdown-menu .dropdown-submenu > .dropdown-menu {
15550
15606
  top: auto;
15551
15607
  bottom: 0;
15552
15608
  }
15553
- .wm-app .dropdown.app-menu.dropup > .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu {
15609
+ .wm-app .dropdown.dropup > .dropdown-menu.horizontal .dropdown-submenu > .dropdown-menu {
15554
15610
  top: auto;
15555
15611
  bottom: 100%;
15556
15612
  }
15557
- .wm-app .dropdown.app-menu[menuposition="inline"] {
15613
+ .wm-app .dropdown[menuposition="inline"] {
15558
15614
  flex-direction: column;
15559
15615
  }
15560
- .wm-app .dropdown.app-menu[menuposition="inline"] > .dropdown-toggle {
15616
+ .wm-app .dropdown[menuposition="inline"] > .dropdown-toggle {
15561
15617
  align-self: flex-start;
15562
15618
  }
15563
15619
  .wm-app .wm-app .app-fileupload {
@@ -16097,35 +16153,36 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16097
16153
  display: flex !important;
16098
16154
  }
16099
16155
  .wm-app .modal-dialog {
16100
- display: flex;
16101
- justify-content: center;
16102
- align-items: center;
16103
16156
  position: fixed;
16104
16157
  inset: 0;
16105
16158
  width: 100%;
16106
16159
  height: 100%;
16160
+ display: flex;
16161
+ justify-content: center;
16162
+ align-items: center;
16107
16163
  background: var(--wm-modal-backdrop-background);
16108
- padding: var(--wm-space-6);
16164
+ padding: var(--wm-modal-margin);
16109
16165
  margin: var(--wm-space-0);
16110
16166
  }
16111
- .wm-app .modal-content {
16167
+ .wm-app .modal-dialog .modal-content {
16112
16168
  display: flex;
16113
16169
  flex-direction: column;
16114
16170
  width: var(--wm-modal-width);
16171
+ height: var(--wm-modal-height);
16115
16172
  max-width: 100%;
16116
16173
  max-height: 100%;
16117
16174
  background: var(--wm-modal-background);
16118
16175
  border-radius: var(--wm-modal-radius);
16119
16176
  }
16120
- .wm-app .modal-content .modal-header {
16177
+ .wm-app .modal-dialog .modal-content .modal-header {
16121
16178
  padding: var(--wm-modal-header-padding);
16122
16179
  }
16123
- .wm-app .modal-content .modal-header .app-dialog-close {
16180
+ .wm-app .modal-dialog .modal-content .modal-header .app-dialog-close {
16124
16181
  position: absolute;
16125
16182
  right: 0;
16126
16183
  top: 0;
16127
16184
  }
16128
- .wm-app .modal-content .modal-header .modal-title {
16185
+ .wm-app .modal-dialog .modal-content .modal-header .modal-title {
16129
16186
  width: 100%;
16130
16187
  display: flex;
16131
16188
  align-items: center;
@@ -16133,36 +16190,82 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16133
16190
  gap: var(--wm-modal-title-gap);
16134
16191
  word-break: break-word;
16135
16192
  }
16136
- .wm-app .modal-content .modal-header .modal-title:has(>.app-icon) {
16193
+ .wm-app .modal-dialog .modal-content .modal-header .modal-title:has(>.app-icon) {
16137
16194
  flex-direction: column;
16138
16195
  --wm-modal-title-gap: var(--wm-space-4);
16139
16196
  }
16140
- .wm-app .modal-content .modal-header + .modal-body {
16197
+ .wm-app .modal-dialog .modal-content .modal-header + .modal-body {
16141
16198
  padding-top: var(--wm-space-0);
16142
16199
  }
16143
- .wm-app .modal-content .modal-body {
16200
+ .wm-app .modal-dialog .modal-content .modal-body {
16144
16201
  height: 100%;
16145
16202
  overflow: auto;
16146
16203
  padding: var(--wm-modal-body-padding);
16147
16204
  }
16148
- .wm-app .modal-content .modal-body > .app-grid-layout {
16205
+ .wm-app .modal-dialog .modal-content .modal-body > .app-grid-layout {
16149
16206
  padding: 0;
16150
16207
  margin: 0 calc(var(--wm-grid-layout-column-padding) * -1);
16151
16208
  width: calc(100% + calc(var(--wm-grid-layout-column-padding) * 2));
16152
16209
  }
16153
- .wm-app .modal-content .modal-body:has( + .modal-footer:not([hidden])) {
16210
+ .wm-app .modal-dialog .modal-content .modal-body:has( + .modal-footer:not([hidden])) {
16154
16211
  padding-bottom: var(--wm-space-0);
16155
16212
  }
16156
- .wm-app .modal-content .modal-footer {
16213
+ .wm-app .modal-dialog .modal-content .modal-footer {
16157
16214
  padding: var(--wm-modal-footer-padding);
16158
16215
  display: flex;
16159
16216
  flex-direction: row;
16160
16217
  justify-content: flex-end;
16161
16218
  gap: var(--wm-modal-footer-gap);
16162
16219
  }
16163
- .wm-app .modal-content .modal-footer .btn {
16220
+ .wm-app .modal-dialog .modal-content .modal-footer .btn {
16164
16221
  margin: 0;
16165
16222
  }
16223
+ .wm-app .modal-dialog:not(.modal-sheet).modal-xs {
16224
+ --wm-modal-width: var(--wm-modal-xs-width);
16225
+ }
16226
+ .wm-app .modal-dialog:not(.modal-sheet).modal-sm {
16227
+ --wm-modal-width: var(--wm-modal-sm-width);
16228
+ }
16229
+ .wm-app .modal-dialog:not(.modal-sheet).modal-md {
16230
+ --wm-modal-width: var(--wm-modal-md-width);
16231
+ }
16232
+ .wm-app .modal-dialog:not(.modal-sheet).modal-lg {
16233
+ --wm-modal-width: var(--wm-modal-lg-width);
16234
+ }
16235
+ .wm-app .modal-dialog:not(.modal-sheet).modal-xl {
16236
+ --wm-modal-width: var(--wm-modal-xl-width);
16237
+ }
16238
+ .wm-app .modal-dialog:not(.modal-sheet).modal-full-screen {
16239
+ --wm-modal-width: var(--wm-modal-full-screen-width);
16240
+ --wm-modal-height: var(--wm-modal-full-screen-height);
16241
+ --wm-modal-radius: var(--wm-modal-full-screen-radius);
16242
+ --wm-modal-margin: var(--wm-modal-full-screen-margin);
16243
+ }
16244
+ .wm-app .modal-dialog.modal-sheet {
16245
+ --wm-modal-width: var(--wm-modal-sheet-width);
16246
+ --wm-modal-radius: var(--wm-modal-sheet-radius);
16247
+ --wm-modal-margin: var(--wm-modal-sheet-margin);
16248
+ }
16249
+ .wm-app .modal-dialog.modal-sheet.sheet-position-top {
16250
+ align-items: flex-start;
16251
+ --wm-modal-width: var(--wm-modal-full-screen-width);
16252
+ }
16253
+ .wm-app .modal-dialog.modal-sheet.sheet-position-right {
16254
+ justify-content: flex-end;
16255
+ }
16256
+ .wm-app .modal-dialog.modal-sheet.sheet-position-right .modal-content {
16257
+ height: var(--wm-modal-full-screen-height);
16258
+ }
16259
+ .wm-app .modal-dialog.modal-sheet.sheet-position-bottom {
16260
+ align-items: flex-end;
16261
+ --wm-modal-width: var(--wm-modal-full-screen-width);
16262
+ }
16263
+ .wm-app .modal-dialog.modal-sheet.sheet-position-left {
16264
+ justify-content: flex-start;
16265
+ }
16266
+ .wm-app .modal-dialog.modal-sheet.sheet-position-left .modal-content {
16267
+ height: var(--wm-modal-full-screen-height);
16268
+ }
16166
16269
  .wm-app .app-navbar {
16167
16270
  position: relative;
16168
16271
  border: none;
@@ -17359,63 +17462,28 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17359
17462
  width: var(--wm-rating-icon-size);
17360
17463
  height: var(--wm-rating-icon-size);
17361
17464
  opacity: var(--wm-rating-icon-opacity-inactive);
17362
- transition: all 0.05s ease-in-out;
17465
+ transform: scale(1);
17466
+ transition: transform 0.1s ease-in-out;
17363
17467
  cursor: pointer;
17364
17468
  }
17365
- .wm-app .app-ratings .ratings-wrapper .rating-style label:before {
17366
- content: "\f4c1";
17367
- font-family: wavicon;
17368
- display: inline-flex;
17369
- align-items: center;
17370
- justify-content: center;
17371
- font-size: inherit;
17372
- height: 100%;
17373
- width: 100%;
17374
- }
17375
17469
  .wm-app .app-ratings .ratings-wrapper .rating-style label:hover,
17376
17470
  .wm-app .app-ratings .ratings-wrapper .rating-style label:hover ~ label,
17377
17471
  .wm-app .app-ratings .ratings-wrapper .rating-style label.active {
17378
17472
  opacity: var(--wm-rating-icon-opacity-active);
17379
17473
  color: var(--wm-rating-icon-color-active);
17380
17474
  }
17381
- .wm-app .app-ratings .ratings-wrapper .rating-style label:hover:before,
17382
- .wm-app .app-ratings .ratings-wrapper .rating-style label:hover ~ label:before,
17383
- .wm-app .app-ratings .ratings-wrapper .rating-style label.active:before {
17384
- content: "\f4c3";
17385
- }
17386
17475
  .wm-app .app-ratings .ratings-wrapper .rating-style label:hover {
17387
17476
  transform: scale(1.2);
17388
17477
  }
17389
- .wm-app .app-ratings .ratings-container {
17390
- font-size: var(--wm-rating-icon-size);
17391
- overflow: hidden;
17392
- }
17393
- .wm-app .app-ratings .ratings-container:before {
17394
- content: "\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1";
17395
- font-family: wavicon;
17396
- top: 0;
17397
- left: 0;
17398
- white-space: nowrap;
17399
- overflow: hidden;
17400
- opacity: var(--wm-rating-icon-opacity-inactive);
17401
- }
17402
- .wm-app .app-ratings .ratings-container .ratings.active {
17403
- color: var(--wm-rating-icon-color-active);
17404
- position: absolute;
17405
- top: 0;
17406
- overflow: hidden;
17478
+ .wm-app .app-ratings .ratings-wrapper .rating-style.disabled {
17479
+ cursor: default;
17480
+ opacity: var(--wm-rating-icon-opacity-readonly);
17407
17481
  }
17408
- .wm-app .app-ratings .ratings-container .ratings.active:before {
17409
- content: "\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3";
17410
- font-family: wavicon;
17411
- top: 0;
17412
- left: 0;
17413
- white-space: nowrap;
17414
- overflow: hidden;
17415
- opacity: var(--wm-rating-icon-opacity-active);
17482
+ .wm-app .app-ratings .ratings-wrapper .rating-style.disabled label {
17483
+ pointer-events: none;
17416
17484
  }
17417
- .wm-app .app-ratings[readonly="true"] {
17418
- opacity: var(--wm-rating-icon-opacity-readonly);
17485
+ .wm-app .app-ratings .ratings-wrapper .rating-style.disabled label:hover {
17486
+ transform: scale(1);
17419
17487
  }
17420
17488
  .wm-app .app-search.input-group .form-control {
17421
17489
  padding-left: calc(var(--wm-input-group-btn-width) + var(--wm-form-control-padding));
@@ -17440,6 +17508,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17440
17508
  right: auto;
17441
17509
  left: var(--wm-btn-icon-md-margin);
17442
17510
  }
17511
+ .wm-app .app-search.input-group .form-control-feedback.clear-btn.show-btn {
17512
+ display: inline-flex;
17513
+ }
17443
17514
  .wm-app .app-search.input-group .input-group-addon {
17444
17515
  right: auto;
17445
17516
  left: var(--wm-btn-icon-md-margin);
@@ -17465,10 +17536,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17465
17536
  height: calc(100dvh - var(--wm-form-control-height)) !important;
17466
17537
  --wm-search-dropdown-menu-height: 100%;
17467
17538
  }
17468
- .wm-app .app-search.input-group[showclear="true"] .form-control-feedback.clear-btn {
17469
- display: inline-flex;
17470
- }
17471
- .wm-app .app-search.input-group[showclear="false"] .form-control {
17539
+ .wm-app .app-search.input-group:has(.clear-btn:not(.show-btn)) .form-control {
17472
17540
  padding-right: var(--wm-form-control-padding);
17473
17541
  }
17474
17542
  .wm-app typeahead-container.dropdown {
@@ -17501,6 +17569,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17501
17569
  letter-spacing: var(--wm-search-dropdown-menu-item-letter-spacing);
17502
17570
  }
17503
17571
  .wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a img {
17572
+ aspect-ratio: 1/1;
17504
17573
  border-radius: var(--wm-search-dropdown-menu-item-img-radius);
17505
17574
  }
17506
17575
  .wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:before {
@@ -17522,6 +17591,21 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17522
17591
  .wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:active:before {
17523
17592
  opacity: var(--wm-search-dropdown-menu-item-active-state-layer-opacity);
17524
17593
  }
17594
+ .wm-app typeahead-container.dropdown .dropdown-menu.app-search li.list-group-header {
17595
+ display: flex;
17596
+ gap: var(--wm-search-dropdown-menu-group-item-gap);
17597
+ }
17598
+ .wm-app typeahead-container.dropdown .dropdown-menu.app-search li.list-group-header .group-title {
17599
+ width: 100%;
17600
+ color: var(--wm-search-dropdown-menu-group-item-color);
17601
+ background: var(--wm-search-dropdown-menu-group-item-background);
17602
+ padding: var(--wm-search-dropdown-menu-group-item-padding);
17603
+ font-family: var(--wm-search-dropdown-menu-group-item-header-font-family);
17604
+ font-weight: var(--wm-search-dropdown-menu-group-item-header-font-weight);
17605
+ font-size: var(--wm-search-dropdown-menu-group-item-header-font-size);
17606
+ line-height: var(--wm-search-dropdown-menu-group-item-header-line-height);
17607
+ letter-spacing: var(--wm-search-dropdown-menu-group-item-header-letter-spacing);
17608
+ }
17525
17609
  .wm-app typeahead-container.dropdown .dropdown-menu.app-search .status {
17526
17610
  display: flex;
17527
17611
  align-items: center;
@@ -22793,6 +22877,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
22793
22877
  .wm-app .pointer *:not([disabled]) {
22794
22878
  cursor: pointer;
22795
22879
  }
22880
+ .wm-app .disabled,
22881
+ .wm-app [disabled] {
22882
+ cursor: not-allowed;
22883
+ }
22796
22884
  .wm-app .label-primary {
22797
22885
  background: var(--wm-color-primary-focus);
22798
22886
  color: var(--wm-color-primary);