@wavemaker/foundation-css 12.0.0-next.45021 → 12.0.0-next.45028

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. foundation-css/foundation/fonts/icons/fontawesome/fontawesome-webfont.eot +0 -0
  2. foundation-css/foundation/fonts/icons/fontawesome/fontawesome-webfont.svg +678 -678
  3. foundation-css/foundation/fonts/icons/fontawesome/fontawesome-webfont.ttf +0 -0
  4. foundation-css/foundation/fonts/icons/fontawesome/fontawesome-webfont.woff +0 -0
  5. foundation-css/foundation/fonts/icons/wavicon/wavicon.eot +0 -0
  6. foundation-css/foundation/fonts/icons/wavicon/wavicon.svg +1084 -1084
  7. foundation-css/foundation/fonts/icons/wavicon/wavicon.ttf +0 -0
  8. foundation-css/foundation/fonts/icons/wavicon/wavicon.woff +0 -0
  9. foundation-css/foundation/fonts/icons/wm-streamline-light/wm-streamline-light-icon.eot +0 -0
  10. foundation-css/foundation/fonts/icons/wm-streamline-light/wm-streamline-light-icon.svg +152 -152
  11. foundation-css/foundation/fonts/icons/wm-streamline-light/wm-streamline-light-icon.ttf +0 -0
  12. foundation-css/foundation/fonts/icons/wm-streamline-light/wm-streamline-light-icon.woff +0 -0
  13. foundation-css/foundation/fonts/icons/wm-streamline-regular/wm-streamline-regular-icon.eot +0 -0
  14. foundation-css/foundation/fonts/icons/wm-streamline-regular/wm-streamline-regular-icon.svg +141 -141
  15. foundation-css/foundation/fonts/icons/wm-streamline-regular/wm-streamline-regular-icon.ttf +0 -0
  16. foundation-css/foundation/fonts/icons/wm-streamline-regular/wm-streamline-regular-icon.woff +0 -0
  17. foundation-css/foundation/foundation.css +726 -713
  18. foundation-css/foundation/foundation.min.css +1 -1
  19. foundation-css/package.json +7 -4
@@ -1,74 +1,79 @@
1
1
  /**--import css variables file--**/
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
2
5
  @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");
3
6
  :root {
4
- /**--Colors--**/
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;
5
11
  --wm-color-primary: #65558F;
6
- --wm-color-on-primary: #FFFFFF;
7
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
+ --wm-color-on-primary: #FFFFFF;
8
17
  --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;
9
21
  --wm-color-secondary: #625B71;
10
- --wm-color-on-secondary: #FFFFFF;
11
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
+ --wm-color-on-secondary: #FFFFFF;
12
27
  --wm-color-on-secondary-container: #1D192B;
28
+ --wm-color-on-secondary-fixed: #1D192B;
29
+ --wm-color-on-secondary-fixed-variant: #4A4458;
13
30
  --wm-color-tertiary: #7D5260;
14
- --wm-color-on-tertiary: #FFFFFF;
15
31
  --wm-color-tertiary-container: #FFD8E4;
32
+ --wm-color-tertiary-fixed: #FFD8E4;
33
+ --wm-color-tertiary-fixed-dim: #EFB8C8;
34
+ --wm-color-on-tertiary: #FFFFFF;
16
35
  --wm-color-on-tertiary-container: #31111D;
36
+ --wm-color-on-tertiary-fixed: #31111D;
37
+ --wm-color-on-tertiary-fixed-variant: #633B48;
17
38
  --wm-color-success: #0abf00;
18
- --wm-color-on-success: #ffffff;
19
39
  --wm-color-success-container: #9fffb2;
40
+ --wm-color-on-success: #ffffff;
20
41
  --wm-color-on-success-container: #1d1d1d;
21
42
  --wm-color-info: #00c8ff;
22
- --wm-color-on-info: #232323;
23
43
  --wm-color-info-container: #a5eaff;
44
+ --wm-color-on-info: #232323;
24
45
  --wm-color-on-info-container: #191919;
25
46
  --wm-color-warning: #ffae00;
26
- --wm-color-on-warning: #2c2c2c;
27
47
  --wm-color-warning-container: #ffe495;
48
+ --wm-color-on-warning: #2c2c2c;
28
49
  --wm-color-on-warning-container: #1b1b1b;
29
50
  --wm-color-error: #B3261E;
30
- --wm-color-on-error: #FFFFFF;
31
51
  --wm-color-error-container: #F9DEDC;
52
+ --wm-color-on-error: #FFFFFF;
32
53
  --wm-color-on-error-container: #410E0B;
33
54
  --wm-color-background: #FEF7FF;
34
55
  --wm-color-on-background: #1D1B20;
35
56
  --wm-color-surface: #FEF7FF;
36
- --wm-color-on-surface: #1D1B20;
37
57
  --wm-color-surface-variant: #E7E0EC;
38
- --wm-color-on-surface-variant: #49454F;
39
- --wm-color-inverse-surface: #322F35;
40
- --wm-color-inverse-on-surface: #F5EFF7;
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
58
  --wm-color-surface-bright: #FEF7FF;
57
- --wm-color-surface-container-lowest: #FFFFFF;
59
+ --wm-color-surface-dim: #DED8E1;
60
+ --wm-color-surface-tint: #6750A4;
61
+ --wm-color-surface-container: #FFFFFF;
58
62
  --wm-color-surface-container-low: #F7F2FA;
59
- --wm-color-surface-container: #F3EDF7;
63
+ --wm-color-surface-container-lowest: #FFFFFF;
60
64
  --wm-color-surface-container-high: #ECE6F0;
61
65
  --wm-color-surface-container-highest: #E6E0E9;
66
+ --wm-color-on-surface: #1D1B20;
67
+ --wm-color-on-surface-variant: #49454F;
68
+ --wm-color-inverse-surface: #322F35;
69
+ --wm-color-inverse-on-surface: #F5EFF7;
70
+ --wm-color-inverse-primary: #D0BCFF;
62
71
  --wm-color-outline: #79747E;
63
72
  --wm-color-outline-variant: #CAC4D0;
64
73
  --wm-color-shadow: #000000;
65
74
  --wm-color-scrim: #000000;
66
75
  --wm-color-white: #FFFFFF;
67
76
  --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;
72
77
  --wm-font-weight-thin: 100;
73
78
  --wm-font-weight-extralight: 200;
74
79
  --wm-font-weight-light: 300;
@@ -78,7 +83,9 @@
78
83
  --wm-font-weight-bold: 700;
79
84
  --wm-font-weight-extrabold: 800;
80
85
  --wm-font-weight-black: 900;
81
- /**--border radius--**/
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;
82
89
  --wm-radius-none: 0px;
83
90
  --wm-radius-xxs: 2px;
84
91
  --wm-radius-xs: 4px;
@@ -89,36 +96,45 @@
89
96
  --wm-radius-xxl: 32px;
90
97
  --wm-radius-pill: 1000px;
91
98
  --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-rule-space: 0.25rem;
98
- --wm-space-0: calc(var(--wm-rule-space) * 0);
99
- --wm-space-1: calc(var(--wm-rule-space) * 1);
100
- --wm-space-2: calc(var(--wm-rule-space) * 2);
101
- --wm-space-3: calc(var(--wm-rule-space) * 3);
102
- --wm-space-4: calc(var(--wm-rule-space) * 4);
103
- --wm-space-5: calc(var(--wm-rule-space) * 5);
104
- --wm-space-6: calc(var(--wm-rule-space) * 6);
105
- --wm-space-7: calc(var(--wm-rule-space) * 7);
106
- --wm-space-8: calc(var(--wm-rule-space) * 8);
107
- --wm-space-9: calc(var(--wm-rule-space) * 9);
108
- --wm-space-10: calc(var(--wm-rule-space) * 10);
109
- --wm-space-11: calc(var(--wm-rule-space) * 11);
110
- --wm-space-12: calc(var(--wm-rule-space) * 12);
99
+ --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);
111
137
  --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);
122
138
  }
123
139
  /*=========
124
140
  css variables doesn't support by less functions to generate lighten, darken, fade, etc.
@@ -315,87 +331,97 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
315
331
  --wm-color-scrim-hover: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-hover)));
316
332
  --wm-color-scrim-focus: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-focus)));
317
333
  --wm-color-scrim-active: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-opacity-active)));
334
+ --wm-color-white-hover: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-hover)));
335
+ --wm-color-white-focus: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-focus)));
336
+ --wm-color-white-active: color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-active)));
337
+ --wm-color-black-hover: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-hover)));
338
+ --wm-color-black-focus: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-focus)));
339
+ --wm-color-black-active: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-active)));
318
340
  /*--font--*/
319
341
  --wm-display-large-font-family: var(--wm-font-family-brand);
320
342
  --wm-display-large-font-weight: var(--wm-font-weight-regular);
321
343
  --wm-display-large-font-size: 57px;
322
344
  --wm-display-large-line-height: 64px;
323
- --wm-display-large-letter-spacing: -0.25;
345
+ --wm-display-large-letter-spacing: -0.25px;
324
346
  --wm-display-medium-font-family: var(--wm-font-family-brand);
325
347
  --wm-display-medium-font-weight: var(--wm-font-weight-regular);
326
348
  --wm-display-medium-font-size: 45px;
327
349
  --wm-display-medium-line-height: 52px;
328
- --wm-display-medium-letter-spacing: 0;
350
+ --wm-display-medium-letter-spacing: 0px;
329
351
  --wm-display-small-font-family: var(--wm-font-family-brand);
330
352
  --wm-display-small-font-weight: var(--wm-font-weight-regular);
331
353
  --wm-display-small-font-size: 36px;
332
354
  --wm-display-small-line-height: 44px;
333
- --wm-display-small-letter-spacing: 0;
355
+ --wm-display-small-letter-spacing: 0px;
334
356
  --wm-h1-font-family: var(--wm-font-family-brand);
335
357
  --wm-h1-font-weight: var(--wm-font-weight-regular);
336
358
  --wm-h1-font-size: 32px;
337
359
  --wm-h1-line-height: 40px;
338
- --wm-h1-letter-spacing: 0;
360
+ --wm-h1-letter-spacing: 0px;
339
361
  --wm-h2-font-family: var(--wm-font-family-brand);
340
362
  --wm-h2-font-weight: var(--wm-font-weight-regular);
341
363
  --wm-h2-font-size: 28px;
342
364
  --wm-h2-line-height: 36px;
343
- --wm-h2-letter-spacing: 0;
365
+ --wm-h2-letter-spacing: 0px;
344
366
  --wm-h3-font-family: var(--wm-font-family-brand);
345
367
  --wm-h3-font-weight: var(--wm-font-weight-regular);
346
368
  --wm-h3-font-size: 24px;
347
369
  --wm-h3-line-height: 32px;
348
- --wm-h3-letter-spacing: 0;
370
+ --wm-h3-letter-spacing: 0px;
349
371
  --wm-h4-font-family: var(--wm-font-family-brand);
350
372
  --wm-h4-font-weight: var(--wm-font-weight-regular);
351
373
  --wm-h4-font-size: 22px;
352
374
  --wm-h4-line-height: 28px;
353
- --wm-h4-letter-spacing: 0;
375
+ --wm-h4-letter-spacing: 0px;
354
376
  --wm-h5-font-family: var(--wm-font-family-brand);
355
377
  --wm-h5-font-weight: var(--wm-font-weight-medium);
356
378
  --wm-h5-font-size: 16px;
357
379
  --wm-h5-line-height: 24px;
358
- --wm-h5-letter-spacing: 0.15;
380
+ --wm-h5-letter-spacing: 0.15px;
359
381
  --wm-h6-font-family: var(--wm-font-family-brand);
360
382
  --wm-h6-font-weight: var(--wm-font-weight-medium);
361
383
  --wm-h6-font-size: 14px;
362
384
  --wm-h6-line-height: 20px;
363
- --wm-h6-letter-spacing: 0.1;
385
+ --wm-h6-letter-spacing: 0.1px;
364
386
  --wm-label-large-font-family: var(--wm-font-family-brand);
365
387
  --wm-label-large-font-weight: var(--wm-font-weight-medium);
366
388
  --wm-label-large-font-size: 14px;
367
389
  --wm-label-large-line-height: 20px;
368
- --wm-label-large-letter-spacing: 0.1;
390
+ --wm-label-large-letter-spacing: 0.1px;
369
391
  --wm-label-medium-font-family: var(--wm-font-family-brand);
370
392
  --wm-label-medium-font-weight: var(--wm-font-weight-medium);
371
393
  --wm-label-medium-font-size: 12px;
372
394
  --wm-label-medium-line-height: 16px;
373
- --wm-label-medium-letter-spacing: 0.5;
395
+ --wm-label-medium-letter-spacing: 0.5px;
374
396
  --wm-label-small-font-family: var(--wm-font-family-brand);
375
397
  --wm-label-small-font-weight: var(--wm-font-weight-medium);
376
398
  --wm-label-small-font-size: 11px;
377
399
  --wm-label-small-line-height: 16px;
378
- --wm-label-small-letter-spacing: 0.5;
400
+ --wm-label-small-letter-spacing: 0.5px;
379
401
  --wm-body-large-font-family: var(--wm-font-family-brand);
380
402
  --wm-body-large-font-weight: var(--wm-font-weight-regular);
381
403
  --wm-body-large-font-size: 16px;
382
404
  --wm-body-large-line-height: 24px;
383
- --wm-body-large-letter-spacing: 0.5;
405
+ --wm-body-large-letter-spacing: 0.5px;
384
406
  --wm-body-medium-font-family: var(--wm-font-family-brand);
385
407
  --wm-body-medium-font-weight: var(--wm-font-weight-regular);
386
408
  --wm-body-medium-font-size: 14px;
387
409
  --wm-body-medium-line-height: 20px;
388
- --wm-body-medium-letter-spacing: 0.25;
410
+ --wm-body-medium-letter-spacing: 0.25px;
389
411
  --wm-body-small-font-family: var(--wm-font-family-brand);
390
412
  --wm-body-small-font-weight: var(--wm-font-weight-regular);
391
413
  --wm-body-small-font-size: 12px;
392
414
  --wm-body-small-line-height: 16px;
393
- --wm-body-small-letter-spacing: 0.4;
394
- --wm-icon-size-xs: 12px;
395
- --wm-icon-size-sm: 20px;
396
- --wm-icon-size-md: 24px;
397
- --wm-icon-size-lg: 32px;
398
- --wm-icon-size-xl: 40px;
415
+ --wm-body-small-letter-spacing: 0.4px;
416
+ --wm-icon-size: 1.5rem;
417
+ --wm-icon-size-xs: calc(var(--wm-icon-size) * 0.5);
418
+ --wm-icon-size-sm: calc(var(--wm-icon-size) * 0.75);
419
+ --wm-icon-size-md: calc(var(--wm-icon-size) * 1);
420
+ --wm-icon-size-lg: calc(var(--wm-icon-size) * 1.25);
421
+ --wm-icon-size-2x: calc(var(--wm-icon-size) * 1.5);
422
+ --wm-icon-size-3x: calc(var(--wm-icon-size) * 1.75);
423
+ --wm-icon-size-4x: calc(var(--wm-icon-size) * 2);
424
+ --wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
399
425
  --wm-box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.1);
400
426
  --wm-box-shadow-sm: 0 0.125rem 0.25rem rgba(29, 58, 83, 0.15);
401
427
  --wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
@@ -410,8 +436,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
410
436
  // ex: ~"color-mix(in srgb, color1 50%, color2 30%)" instead of color-mix(in srgb, color1 50%, color2 30%) //
411
437
  =========*/
412
438
  :root {
439
+ /*--shadows(elevations)--*/
440
+ --wm-elevation-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
441
+ --wm-elevation-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
442
+ --wm-elevation-shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
443
+ --wm-elevation-shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30);
444
+ --wm-elevation-shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
413
445
  /*headings*/
414
- --wm-heading-color: var(--wm-color-on-surface);
446
+ --wm-headings-color: var(--wm-color-on-surface);
415
447
  /*page content*/
416
448
  --wm-page-content-padding: 0;
417
449
  --wm-page-content-background: var(--wm-color-surface-container-lowest);
@@ -480,10 +512,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
480
512
  --wm-btn-padding: var(--wm-space-2) var(--wm-space-6);
481
513
  --wm-btn-min-width: auto;
482
514
  --wm-btn-height: 40px;
515
+ --wm-btn-gap: var(--wm-space-2);
483
516
  --wm-btn-shadow: none;
484
517
  --wm-btn-state-layer-color: transparent;
485
518
  --wm-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
486
519
  --wm-btn-pressed-state-layer-opacity: var(--wm-opacity-active);
520
+ --wm-btn-elevated: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
521
+ --wm-btn-elevated-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, .15);
522
+ --wm-btn-elevated-focus: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
523
+ --wm-btn-elevated-active: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
487
524
  --wm-btn-default-background: var(--wm-btn-background);
488
525
  --wm-btn-default-color: var(--wm-btn-color);
489
526
  --wm-btn-default-border-color: var(--wm-btn-border-color);
@@ -549,6 +586,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
549
586
  --wm-btn-xs-padding: var(--wm-space-1) var(--wm-space-4);
550
587
  --wm-btn-xs-min-width: auto;
551
588
  --wm-btn-xs-height: 32px;
589
+ --wm-btn-xs-gap: var(--wm-space-1);
552
590
  --wm-btn-sm-font-size: var(--wm-label-medium-font-size);
553
591
  --wm-btn-sm-font-family: var(--wm-label-medium-font-family);
554
592
  --wm-btn-sm-font-weight: var(--wm-label-medium-font-weight);
@@ -558,6 +596,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
558
596
  --wm-btn-sm-padding: var(--wm-space-1) var(--wm-space-4);
559
597
  --wm-btn-sm-min-width: auto;
560
598
  --wm-btn-sm-height: 36px;
599
+ --wm-btn-sm-gap: var(--wm-space-1);
561
600
  --wm-btn-lg-font-size: var(--wm-body-large-font-size);
562
601
  --wm-btn-lg-font-family: var(--wm-body-large-font-family);
563
602
  --wm-btn-lg-font-weight: var(--wm-body-large-font-weight);
@@ -567,11 +606,99 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
567
606
  --wm-btn-lg-padding: var(--wm-space-2) var(--wm-space-8);
568
607
  --wm-btn-lg-min-width: auto;
569
608
  --wm-btn-lg-height: 44px;
570
- --wm-btn-contrast-light: #ffffff;
571
- --wm-btn-contrast-dark: rgba(0, 0, 0, 0.87);
572
- --wm-btn-elevated: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
573
- --wm-btn-elevated-hover: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
574
- --wm-btn-elevated-active: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
609
+ --wm-btn-lg-gap: var(--wm-space-2);
610
+ /*--Anchor--*/
611
+ --wm-anchor-font-size: var(--wm-body-medium-font-size);
612
+ --wm-anchor-font-family: var(--wm-body-medium-font-family);
613
+ --wm-anchor-font-weight: var(--wm-body-medium-font-weight);
614
+ --wm-anchor-line-height: var(--wm-body-medium-line-height);
615
+ --wm-anchor-letter-spacing: var(--wm-body-medium-letter-spacing);
616
+ --wm-anchor-text-transform: none;
617
+ --wm-anchor-text-decoration: none;
618
+ --wm-anchor-color: var(--wm-color-primary);
619
+ --wm-anchor-color-hover: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-hover));
620
+ --wm-anchor-color-focus: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-focus));
621
+ --wm-anchor-color-active: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-active));
622
+ --wm-anchor-gap: var(--wm-space-2);
623
+ /*--Icon--*/
624
+ --wm-icon-gap: var(--wm-space-1);
625
+ /*--Grid Layout--*/
626
+ --wm-grid-layout-column-padding: var(--wm-space-2);
627
+ /*--Picture--*/
628
+ --wm-picture-radius-rounded: var(--wm-radius-xs);
629
+ --wm-picture-radius-circle: var(--wm-radius-circle);
630
+ --wm-picture-radius-thumbnail: var(--wm-radius-xs);
631
+ --wm-picture-thumbnail-padding: var(--wm-space-1);
632
+ --wm-picture-thumbnail-border-color: var(--wm-border-color);
633
+ --wm-picture-thumbnail-border-style: var(--wm-border-style);
634
+ --wm-picture-thumbnail-border-width: var(--wm-border-width);
635
+ --wm-picture-thumbnail-background: var(--wm-color-surface-container-low);
636
+ /*--Progress Bar--*/
637
+ --wm-progress-bar-background-inactive: var(--wm-color-surface-bright);
638
+ --wm-progress-bar-background-active: var(--wm-color-surface-tint);
639
+ --wm-progress-bar-radius: var(--wm-radius-lg);
640
+ --wm-progress-bar-height: var(--wm-space-2);
641
+ --wm-progress-bar-width: var(--wm-space-2);
642
+ --wm-progress-bar-striped: linear-gradient(45deg, var(--wm-color-white-active) 25%, transparent 25%, transparent 50%, var(--wm-color-white-active) 50%, var(--wm-color-white-active) 75%, transparent 75%, transparent);
643
+ --wm-progress-bar-striped-size: var(--wm-space-10) var(--wm-space-10);
644
+ --wm-progress-bar-margin: var(--wm-space-2) var(--wm-space-0);
645
+ --wm-progress-bar-stop-indicator-radius: var(--wm-radius-circle);
646
+ --wm-progress-bar-stop-indicator-height: var(--wm-space-2);
647
+ --wm-progress-bar-stop-indicator-width: var(--wm-space-2);
648
+ --wm-progress-bar-stop-indicator-background: var(--wm-color-surface-tint);
649
+ --wm-progress-bar-success-background-active: var(--wm-color-success);
650
+ --wm-progress-bar-success-stop-indicator-background: var(--wm-color-success);
651
+ --wm-progress-bar-success-background-inactive: var(--wm-color-success-hover);
652
+ --wm-progress-bar-info-background-active: var(--wm-color-info);
653
+ --wm-progress-bar-info-stop-indicator-background: var(--wm-color-info);
654
+ --wm-progress-bar-info-background-inactive: var(--wm-color-info-hover);
655
+ --wm-progress-bar-warning-background-active: var(--wm-color-warning);
656
+ --wm-progress-bar-warning-stop-indicator-background: var(--wm-color-warning);
657
+ --wm-progress-bar-warning-background-inactive: var(--wm-color-warning-hover);
658
+ --wm-progress-bar-danger-background-active: var(--wm-color-error);
659
+ --wm-progress-bar-danger-stop-indicator-background: var(--wm-color-error);
660
+ --wm-progress-bar-danger-background-inactive: var(--wm-color-error-hover);
661
+ /*--Container--*/
662
+ --wm-container-outlined-border-color: var(--wm-color-outline-variant);
663
+ --wm-container-outlined-border-width: var(--wm-border-width);
664
+ --wm-container-outlined-border-style: var(--wm-border-style);
665
+ --wm-container-elevation-border-radius: var(--wm-radius-sm);
666
+ --wm-container-elevation-shadow: var(--wm-elevation-shadow-1);
667
+ /*--Message--*/
668
+ --wm-message-container-shadow: var(--wm-elevation-shadow-3);
669
+ --wm-message-container-border-radius: var(--wm-radius-xs);
670
+ --wm-message-container-border-width: var(--wm-border-width);
671
+ --wm-message-container-border-style: var(--wm-border-style);
672
+ --wm-message-container-padding: 14px var(--wm-space-4);
673
+ --wm-message-container-gap: var(--wm-space-3);
674
+ --wm-message-font-family: var(--wm-label-large-font-family);
675
+ --wm-message-font-weight: var(--wm-label-large-font-weight);
676
+ --wm-message-font-size: var(--wm-label-large-font-size);
677
+ --wm-message-line-height: var(--wm-label-large-line-height);
678
+ --wm-message-letter-spacing: var(--wm-label-large-letter-spacing);
679
+ --wm-message-container-background: var(--wm-color-primary);
680
+ --wm-message-container-color: var(--wm-color-on-primary);
681
+ --wm-message-container-border-color: var(--wm-color-primary);
682
+ /* Success message */
683
+ --wm-message-container-success-background: var(--wm-color-success);
684
+ --wm-message-container-success-color: var(--wm-color-on-success);
685
+ --wm-message-container-success-border-color: var(--wm-color-success);
686
+ /* info message */
687
+ --wm-message-container-info-background: var(--wm-color-info);
688
+ --wm-message-container-info-color: var(--wm-color-on-info);
689
+ --wm-message-container-info-border-color: var(--wm-color-info);
690
+ /* Warning message */
691
+ --wm-message-container-warning-background: var(--wm-color-warning);
692
+ --wm-message-container-warning-color: var(--wm-color-on-warning);
693
+ --wm-message-container-warning-border-color: var(--wm-color-warning);
694
+ /* Error message */
695
+ --wm-message-container-danger-background: var(--wm-color-error);
696
+ --wm-message-container-danger-color: var(--wm-color-on-error);
697
+ --wm-message-container-danger-border-color: var(--wm-color-error);
698
+ /* loading message */
699
+ --wm-message-container-loading-background: var(--wm-color-primary);
700
+ --wm-message-container-loading-color: var(--wm-color-on-primary);
701
+ --wm-message-container-loading-border-color: var(--wm-color-primary);
575
702
  /**--Page Layout--**/
576
703
  /*--app header--*/
577
704
  --wm-header-bg-color: var(--wm-color-secondary);
@@ -660,9 +787,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
660
787
  font-size: 100%;
661
788
  }
662
789
  .wm-app {
790
+ font-family: var(--wm-body-medium-font-family);
663
791
  font-size: var(--wm-body-medium-font-size);
664
792
  font-weight: var(--wm-body-medium-font-weight);
665
- font-family: var(--wm-body-medium-font-family);
793
+ line-height: var(--wm-body-medium-line-height);
794
+ letter-spacing: var(--wm-body-medium-letter-spacing);
666
795
  background: var(--wm-color-surface-container-lowest);
667
796
  color: var(--wm-color-on-background);
668
797
  text-transform: none;
@@ -4191,23 +4320,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
4191
4320
  -webkit-font-smoothing: antialiased;
4192
4321
  -moz-osx-font-smoothing: grayscale;
4193
4322
  }
4194
- .wm-app .fa-lg {
4195
- font-size: 1.33333333em;
4196
- line-height: 0.75em;
4197
- vertical-align: -15%;
4198
- }
4199
- .wm-app .fa-2x {
4200
- font-size: 2em;
4201
- }
4202
- .wm-app .fa-3x {
4203
- font-size: 3em;
4204
- }
4205
- .wm-app .fa-4x {
4206
- font-size: 4em;
4207
- }
4208
- .wm-app .fa-5x {
4209
- font-size: 5em;
4210
- }
4211
4323
  .wm-app .fa-fw {
4212
4324
  width: 1.28571429em;
4213
4325
  }
@@ -8884,8 +8996,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8884
8996
  .wm-app .note-dropdown {
8885
8997
  position: relative;
8886
8998
  }
8887
- .wm-app .note-editor .note-editing-area p,
8888
- .wm-app p {
8999
+ .wm-app .note-editor .note-editing-area p {
8889
9000
  margin: 0 0 10px;
8890
9001
  }
8891
9002
  .wm-app [class*=" note-icon-"]:before,
@@ -10061,11 +10172,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
10061
10172
  .wm-app .note-handle .note-control-selection > div {
10062
10173
  position: absolute;
10063
10174
  }
10064
- .wm-app .app-icon,
10065
- .wm-app .app-icon-wrapper {
10066
- position: relative;
10067
- display: inline-block;
10068
- }
10069
10175
  .wm-app .note-handle .note-control-selection .note-control-selection-bg {
10070
10176
  width: 100%;
10071
10177
  height: 100%;
@@ -10181,30 +10287,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
10181
10287
  .wm-app .ng-hide {
10182
10288
  display: none !important;
10183
10289
  }
10184
- .wm-app .app-icon {
10185
- padding-right: 0.2em;
10186
- }
10187
- .wm-app .app-icon-wrapper {
10188
- white-space: nowrap;
10189
- max-width: 100%;
10190
- overflow: hidden;
10191
- }
10192
- .wm-app .app-icon-wrapper[icon-position="right"] {
10193
- direction: rtl;
10194
- }
10195
- .wm-app .app-icon-wrapper[icon-position="right"] .app-label {
10196
- direction: ltr;
10197
- }
10198
- .wm-app .app-icon-wrapper .app-icon {
10199
- vertical-align: middle;
10200
- }
10201
- .wm-app .app-icon-wrapper .app-label {
10202
- vertical-align: middle;
10203
- margin: 0;
10204
- text-overflow: ellipsis;
10205
- max-width: 92%;
10206
- overflow: hidden;
10207
- }
10208
10290
  .wm-app .app-partial-info {
10209
10291
  text-align: center;
10210
10292
  }
@@ -11332,14 +11414,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
11332
11414
  .wm-app .app-search.dropdown-menu .list-group-header h4 .header-action i {
11333
11415
  padding: 0 10px;
11334
11416
  }
11335
- .wm-app .app-anchor,
11336
- .wm-app .app-checkbox,
11337
- .wm-app .app-checkboxset,
11338
- .wm-app .app-currency,
11339
- .wm-app .app-html-container,
11340
- .wm-app .app-radio,
11341
- .wm-app .app-radioset,
11342
- .wm-app .app-textarea,
11343
11417
  .wm-app .app-timeinput {
11344
11418
  position: relative;
11345
11419
  max-width: 100%;
@@ -11547,36 +11621,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
11547
11621
  height: 30px;
11548
11622
  padding-right: 5px;
11549
11623
  }
11550
- .wm-app .app-button-group .app-button.btn-default.focus,
11551
- .wm-app .app-button-group .app-button.btn-default.selected,
11552
- .wm-app .app-button-group .app-button.btn-default:focus {
11553
- background-color: #e6e6e6;
11554
- }
11555
- .wm-app .app-button-group .app-button.btn-primary.focus,
11556
- .wm-app .app-button-group .app-button.btn-primary.selected,
11557
- .wm-app .app-button-group .app-button.btn-primary:focus {
11558
- background-color: #116aff;
11559
- }
11560
- .wm-app .app-button-group .app-button.btn-success.focus,
11561
- .wm-app .app-button-group .app-button.btn-success.selected,
11562
- .wm-app .app-button-group .app-button.btn-success:focus {
11563
- background-color: #3d8b40;
11564
- }
11565
- .wm-app .app-button-group .app-button.btn-info.focus,
11566
- .wm-app .app-button-group .app-button.btn-info.selected,
11567
- .wm-app .app-button-group .app-button.btn-info:focus {
11568
- background-color: #0286c2;
11569
- }
11570
- .wm-app .app-button-group .app-button.btn-warning.focus,
11571
- .wm-app .app-button-group .app-button.btn-warning.selected,
11572
- .wm-app .app-button-group .app-button.btn-warning:focus {
11573
- background-color: #cc8f00;
11574
- }
11575
- .wm-app .app-button-group .app-button.btn-danger.focus,
11576
- .wm-app .app-button-group .app-button.btn-danger.selected,
11577
- .wm-app .app-button-group .app-button.btn-danger:focus {
11578
- background-color: #ea1c0d;
11579
- }
11580
11624
  .wm-app .app-switch {
11581
11625
  position: relative;
11582
11626
  display: inline-block;
@@ -11772,205 +11816,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
11772
11816
  height: 0;
11773
11817
  min-height: 35px;
11774
11818
  }
11775
- .wm-app .app-calendar .well.well-sm .bs-datepicker-body thead tr th:first-child,
11776
- .wm-app .app-calendar .well.well-sm tr:nth-child(2) th:first-child,
11777
- .wm-app .app-date .bs-datepicker-body thead tr th:first-child,
11778
- .wm-app .app-date tr:nth-child(2) th:first-child {
11779
- padding-left: 20px;
11780
- }
11781
- .wm-app .app-calendar .well.well-sm .bs-datepicker-body thead tr th:last-child,
11782
- .wm-app .app-calendar .well.well-sm tr:nth-child(2) th:last-child,
11783
- .wm-app .app-date .bs-datepicker-body thead tr th:last-child,
11784
- .wm-app .app-date tr:nth-child(2) th:last-child {
11785
- padding-right: 20px;
11786
- }
11787
- .wm-app .app-calendar .well.well-sm tr td:first-child,
11788
- .wm-app .app-date tr td:first-child {
11789
- padding-left: 10px;
11790
- }
11791
- .wm-app .app-calendar .well.well-sm tr td:last-child,
11792
- .wm-app .app-date tr td:last-child {
11793
- padding-right: 10px;
11794
- }
11795
- .wm-app bs-datepicker-container,
11796
- .wm-app bs-daterangepicker-container {
11797
- z-index: 1080;
11798
- }
11799
- .wm-app .bs-datepicker button:active,
11800
- .wm-app .bs-datepicker button:focus,
11801
- .wm-app .bs-datepicker button:hover,
11802
- .wm-app .bs-datepicker input:active,
11803
- .wm-app .bs-datepicker input:focus,
11804
- .wm-app .bs-datepicker input:hover {
11805
- outline: 0;
11806
- }
11807
- .wm-app .bs-datepicker .is-other-month {
11808
- color: rgba(0, 0, 0, 0.25);
11809
- }
11810
- .wm-app .bs-datepicker-head bs-datepicker-navigation-view {
11811
- height: 50px;
11812
- overflow: hidden;
11813
- display: block;
11814
- border-radius: 0;
11815
- text-align: center;
11816
- }
11817
- .wm-app .bs-datepicker-head button {
11818
- border: 0;
11819
- background: 0 0;
11820
- height: 100%;
11821
- padding: 10px;
11822
- }
11823
- .wm-app .bs-datepicker-head button:hover {
11824
- background-color: rgba(0, 0, 0, 0.1);
11825
- }
11826
- .wm-app .bs-datepicker-head .next,
11827
- .wm-app .bs-datepicker-head .previous {
11828
- padding: 0 25px;
11829
- vertical-align: middle;
11830
- }
11831
- .wm-app .bs-datepicker-head .next span,
11832
- .wm-app .bs-datepicker-head .previous span {
11833
- font-size: 25px;
11834
- }
11835
- .wm-app .bs-datepicker-head .next {
11836
- float: right;
11837
- }
11838
- .wm-app .bs-datepicker-head .previous {
11839
- float: left;
11840
- }
11841
- .wm-app .bs-datepicker-head .current {
11842
- padding: 0 5px;
11843
- height: inherit;
11844
- vertical-align: middle;
11845
- }
11846
- .wm-app .bs-datepicker-body {
11847
- background-color: #fff;
11848
- padding: 0 5px;
11849
- border-radius: 0 0 3px 3px;
11850
- min-height: 220px;
11851
- min-width: 230px;
11852
- border: 1px solid #e9edf0;
11853
- }
11854
- .wm-app .bs-datepicker-body table td span:before,
11855
- .wm-app .bs-datepicker-body table td:before {
11856
- content: "";
11857
- display: block;
11858
- top: 6px;
11859
- bottom: 6px;
11860
- left: -2px;
11861
- right: -2px;
11862
- box-sizing: content-box;
11863
- background: 0 0;
11864
- }
11865
- .wm-app .bs-datepicker-body .days.weeks {
11866
- position: relative;
11867
- z-index: 1;
11868
- }
11869
- .wm-app .bs-datepicker-body table {
11870
- width: 100%;
11871
- border-collapse: separate;
11872
- border-spacing: 0;
11873
- }
11874
- .wm-app .bs-datepicker-body table th {
11875
- padding: 8px;
11876
- }
11877
- .wm-app .bs-datepicker-body table td {
11878
- color: #54708b;
11879
- text-align: center;
11880
- position: relative;
11881
- padding: 0;
11882
- }
11883
- .wm-app .bs-datepicker-body table td:before {
11884
- position: absolute;
11885
- z-index: -1;
11886
- }
11887
- .wm-app .bs-datepicker-body table td span {
11888
- display: block;
11889
- margin: 0 auto;
11890
- font-size: 13px;
11891
- position: relative;
11892
- z-index: 1;
11893
- -moz-user-select: none;
11894
- -webkit-user-select: none;
11895
- -ms-user-select: none;
11896
- }
11897
- .wm-app .bs-datepicker-body table td span:before {
11898
- position: absolute;
11899
- z-index: -1;
11900
- }
11901
- .wm-app .bs-datepicker-body table td span.selected,
11902
- .wm-app .bs-datepicker-body table td span.selected span {
11903
- color: #fff;
11904
- }
11905
- .wm-app .bs-datepicker-body table td span:focus {
11906
- background-color: #bbb;
11907
- color: #333;
11908
- }
11909
- .wm-app .bs-datepicker-body table td span.disabled {
11910
- color: #ccc;
11911
- cursor: not-allowed;
11912
- }
11913
- .wm-app .bs-datepicker-body table td span.disabled:focus {
11914
- color: #fff;
11915
- }
11916
- .wm-app .bs-datepicker-body table td span.is-active-other-month,
11917
- .wm-app .bs-datepicker-body table td span.is-highlighted {
11918
- cursor: pointer;
11919
- }
11920
- .wm-app .bs-datepicker-body table:not(.weeks) tr td:first-child:before {
11921
- border-radius: 3px 0 0 3px;
11922
- }
11923
- .wm-app .bs-datepicker-body table.days span {
11924
- width: 32px;
11925
- height: 32px;
11926
- line-height: 32px;
11927
- border-radius: 50%;
11928
- }
11929
- .wm-app .bs-datepicker-body table.months td {
11930
- height: 52px;
11931
- }
11932
- .wm-app .bs-datepicker-body table.months td span {
11933
- padding: 6px;
11934
- }
11935
- .wm-app .bs-datepicker-body table.years td span {
11936
- width: 46px;
11937
- height: 46px;
11938
- line-height: 45px;
11939
- margin: 0 auto;
11940
- }
11941
- .wm-app .bs-datepicker-body table.years tr:not(:last-child) td span {
11942
- margin-bottom: 8px;
11943
- }
11944
- .wm-app .app-date .bs-datepicker-head {
11945
- background-color: #1d96f4;
11946
- color: #fff;
11947
- }
11948
- .wm-app .app-date .bs-datepicker-body table td.disabled span,
11949
- .wm-app .app-date .bs-datepicker-body table td.week span {
11950
- cursor: initial;
11951
- }
11952
- .wm-app .app-date .bs-datepicker-body table td.disabled span:focus,
11953
- .wm-app .app-date .bs-datepicker-body table td.disabled span:hover,
11954
- .wm-app .app-date .bs-datepicker-body table td.week span:focus,
11955
- .wm-app .app-date .bs-datepicker-body table td.week span:hover {
11956
- background-color: transparent;
11957
- color: inherit;
11958
- cursor: initial;
11959
- }
11960
- .wm-app .app-date .bs-datepicker-body table td span.selected,
11961
- .wm-app .app-date .bs-datepicker-body table td span[class*="select-"]::after,
11962
- .wm-app .app-date .bs-datepicker-body table td.selected span,
11963
- .wm-app .app-date .bs-datepicker-body table td[class*="select-"] span::after {
11964
- background-color: #1d96f4;
11965
- }
11966
- .wm-app .bs-datepicker-btns button:active,
11967
- .wm-app .bs-datepicker-btns button:focus,
11968
- .wm-app .bs-datepicker-btns button:hover,
11969
- .wm-app .bs-datepicker-predefined-btns button:active,
11970
- .wm-app .bs-datepicker-predefined-btns button:focus,
11971
- .wm-app .bs-datepicker-predefined-btns button:hover {
11972
- outline: 0;
11973
- }
11974
11819
  .wm-app .app-required-input {
11975
11820
  color: red;
11976
11821
  }
@@ -12467,10 +12312,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
12467
12312
  left: 0;
12468
12313
  width: 100%;
12469
12314
  }
12470
- .wm-app .app-iframe,
12471
- .wm-app .app-message {
12472
- position: relative;
12473
- }
12474
12315
  .wm-app .app-livelist:not(.On-Demand):not(.Scroll).None .loading-data-msg {
12475
12316
  bottom: 0;
12476
12317
  }
@@ -12494,103 +12335,42 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
12494
12335
  .wm-app .app-livelist.On-Demand .panel-footer {
12495
12336
  padding: 0;
12496
12337
  }
12497
- .wm-app .app-iframe iframe {
12498
- width: 100%;
12499
- height: 100%;
12338
+ .wm-app .app-prefab {
12339
+ min-height: 1em;
12340
+ position: relative;
12500
12341
  }
12501
- .wm-app .app-message.alert {
12502
- word-break: break-word;
12342
+ .wm-app .app-prefab .app-view {
12343
+ z-index: 1000;
12503
12344
  }
12504
- .wm-app .app-message.alert div {
12505
- padding: 0 5px;
12506
- box-sizing: border-box;
12507
- vertical-align: top;
12508
- display: inline-block;
12345
+ .wm-app .app-prefab .app-page .app-content {
12346
+ background-color: transparent;
12509
12347
  }
12510
- .wm-app .app-message.alert div:nth-child(1),
12511
- .wm-app .app-message.alert div:nth-child(3) {
12512
- width: 20px;
12348
+ .wm-app .app-prefab-run {
12349
+ height: 100%;
12350
+ min-height: 500px;
12513
12351
  }
12514
- .wm-app .app-message.alert div:nth-child(2) {
12515
- ignore: a;
12516
- width: calc(100% - 60px);
12352
+ .wm-app .app-datanavigator {
12353
+ position: relative;
12354
+ overflow-y: auto;
12517
12355
  }
12518
- .wm-app .app-message .icon {
12519
- display: inline-block;
12520
- font-size: 11px;
12521
- margin-right: 5px;
12356
+ .wm-app .app-datanavigator .pagination,
12357
+ .wm-app .app-datanavigator ul.pager,
12358
+ .wm-app .app-datanavigator ul.pagination {
12359
+ margin: 0;
12522
12360
  }
12523
- .wm-app .app-message span {
12524
- vertical-align: text-top;
12361
+ .wm-app .app-datanavigator .pagination > li.pagecount > a,
12362
+ .wm-app .app-datanavigator ul.pager > li.pagecount > a,
12363
+ .wm-app .app-datanavigator ul.pagination > li.pagecount > a {
12364
+ width: 4em;
12365
+ padding-left: 0;
12366
+ padding-right: 0;
12367
+ height: 100%;
12525
12368
  }
12526
- .wm-app .app-message .close {
12527
- position: absolute;
12528
- top: 1px;
12529
- right: 4px;
12530
- }
12531
- .wm-app .app-picture {
12532
- display: inline-block;
12533
- text-align: center;
12534
- vertical-align: middle;
12535
- position: relative;
12536
- cursor: default;
12537
- width: auto;
12538
- height: auto;
12539
- }
12540
- .wm-app .app-video {
12541
- position: relative;
12542
- height: 150px;
12543
- width: 300px;
12544
- display: inline-block;
12545
- }
12546
- .wm-app .app-video > video {
12547
- height: 100%;
12548
- width: 100%;
12549
- }
12550
- .wm-app .app-audio {
12551
- position: relative;
12552
- display: inline-block;
12553
- width: 300px;
12554
- }
12555
- .wm-app .app-audio > audio {
12556
- width: 100%;
12557
- }
12558
- .wm-app .app-prefab {
12559
- min-height: 1em;
12560
- position: relative;
12561
- }
12562
- .wm-app .app-prefab .app-view {
12563
- z-index: 1000;
12564
- }
12565
- .wm-app .app-prefab .app-page .app-content {
12566
- background-color: transparent;
12567
- }
12568
- .wm-app .app-prefab-run {
12569
- height: 100%;
12570
- min-height: 500px;
12571
- }
12572
- .wm-app .app-datanavigator {
12573
- position: relative;
12574
- overflow-y: auto;
12575
- }
12576
- .wm-app .app-datanavigator .pagination,
12577
- .wm-app .app-datanavigator ul.pager,
12578
- .wm-app .app-datanavigator ul.pagination {
12579
- margin: 0;
12580
- }
12581
- .wm-app .app-datanavigator .pagination > li.pagecount > a,
12582
- .wm-app .app-datanavigator ul.pager > li.pagecount > a,
12583
- .wm-app .app-datanavigator ul.pagination > li.pagecount > a {
12584
- width: 4em;
12585
- padding-left: 0;
12586
- padding-right: 0;
12587
- height: 100%;
12588
- }
12589
- .wm-app .app-datanavigator .pagination > li.pagecount > a.ng-invalid,
12590
- .wm-app .app-datanavigator ul.pager > li.pagecount > a.ng-invalid,
12591
- .wm-app .app-datanavigator ul.pagination > li.pagecount > a.ng-invalid {
12592
- margin-right: 1px;
12593
- border-color: red;
12369
+ .wm-app .app-datanavigator .pagination > li.pagecount > a.ng-invalid,
12370
+ .wm-app .app-datanavigator ul.pager > li.pagecount > a.ng-invalid,
12371
+ .wm-app .app-datanavigator ul.pagination > li.pagecount > a.ng-invalid {
12372
+ margin-right: 1px;
12373
+ border-color: red;
12594
12374
  }
12595
12375
  .wm-app .app-datanavigator .pagination > li.pagecount > a .form-control,
12596
12376
  .wm-app .app-datanavigator ul.pager > li.pagecount > a .form-control,
@@ -13337,13 +13117,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13337
13117
  .wm-app .app-accordion .app-accordion-panel > .panel-heading > .panel-actions .label {
13338
13118
  margin-right: 0.25em;
13339
13119
  }
13340
- .wm-app .app-elevated-container {
13341
- box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
13342
- border-radius: 8px;
13343
- }
13344
- .wm-app .app-outlined-container {
13345
- border: 2px solid #ccc;
13346
- }
13347
13120
  .wm-app .app-tabs {
13348
13121
  position: relative;
13349
13122
  width: 100%;
@@ -13903,59 +13676,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13903
13676
  .wm-app .app-panel .panel-heading .panel-actions .panel-action i {
13904
13677
  font-style: normal;
13905
13678
  }
13906
- .wm-app .app-progress .progress-bar .app-progress-label[data-caption-placement="hidden"] {
13907
- display: none;
13908
- }
13909
- .wm-app .app-progress .progress-bar .app-progress-label {
13910
- height: 100%;
13911
- display: inline-block;
13912
- vertical-align: middle;
13913
- }
13914
- .wm-app .app-progress .progress-bar .app-progress-label::before {
13915
- content: "";
13916
- height: 100%;
13917
- display: inline-block;
13918
- vertical-align: middle;
13919
- }
13920
- .wm-app .app-progress.circle.progress {
13921
- width: 100%;
13922
- background-color: transparent;
13923
- box-shadow: none;
13924
- }
13925
- .wm-app .app-progress.circle.progress > svg path:first-of-type {
13926
- stroke: #ddd;
13927
- }
13928
- .wm-app .app-progress.circle.progress > svg path:last-of-type {
13929
- stroke: #4489ff;
13930
- stroke-linecap: round;
13931
- }
13932
- .wm-app .app-progress.circle.progress .progress-text {
13933
- font-family: Helvetica, sans-serif;
13934
- font-size: 1.5rem;
13935
- color: #464646;
13936
- }
13937
- .wm-app .app-progress.circle.progress .progress-text.show-percent:after {
13938
- content: " %";
13939
- font-size: 0.7em;
13940
- }
13941
- .wm-app .app-progress.circle.progress circle-progress > svg circle:last-of-type {
13942
- stroke: #ddd;
13943
- }
13944
- .wm-app .app-progress.circle.progress circle-progress > svg path:first-of-type {
13945
- stroke: #4489ff;
13946
- }
13947
- .wm-app .app-progress.circle.progress.progress-circle-success svg path:last-of-type {
13948
- stroke: #4caf50;
13949
- }
13950
- .wm-app .app-progress.circle.progress.progress-circle-warning svg path:last-of-type {
13951
- stroke: #ffb300;
13952
- }
13953
- .wm-app .app-progress.circle.progress.progress-circle-info svg path:last-of-type {
13954
- stroke: #03a9f4;
13955
- }
13956
- .wm-app .app-progress.circle.progress.progress-circle-danger svg path:last-of-type {
13957
- stroke: #f44336;
13958
- }
13959
13679
  .wm-app .app-global-progress-bar.modal {
13960
13680
  background: rgba(0, 0, 0, 0.5);
13961
13681
  display: table;
@@ -13997,14 +13717,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13997
13717
  z-index: 1060 !important;
13998
13718
  display: initial !important;
13999
13719
  }
14000
- .wm-app .bs-datepicker-buttons,
14001
- .wm-app .btn-today-wrapper {
14002
- display: flex;
14003
- flex-flow: row wrap;
14004
- flex-grow: 1;
14005
- padding: 2px;
14006
- background-color: #fff;
14007
- }
14008
13720
  .wm-app .app-datetime .form-group input {
14009
13721
  min-width: 45px;
14010
13722
  }
@@ -16760,9 +16472,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16760
16472
  width: 100%;
16761
16473
  height: 100%;
16762
16474
  }
16763
- .wm-app .app-container {
16764
- position: relative;
16765
- }
16766
16475
  .wm-app > app-root {
16767
16476
  width: inherit;
16768
16477
  }
@@ -17005,15 +16714,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17005
16714
  padding: 0.5rem 1.25rem;
17006
16715
  border-top: 1px solid rgba(0, 0, 0, 0.1);
17007
16716
  }
17008
- .wm-app .app-card.card .app-card-footer .btn-group {
17009
- box-shadow: none;
17010
- }
17011
- .wm-app .app-card.card .app-card-footer .btn-group .btn {
17012
- color: inherit;
17013
- }
17014
- .wm-app .app-card.card .app-card-footer .btn-group .btn:hover {
17015
- color: initial;
17016
- }
17017
16717
  .wm-app .app-card.card .card-title {
17018
16718
  margin-bottom: 0.75rem;
17019
16719
  font-size: 1.2em;
@@ -17150,10 +16850,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17150
16850
  .wm-app.wm-mobile-app:not(.domcontent) {
17151
16851
  overflow: hidden;
17152
16852
  }
17153
- .wm-app .app-footer .app-grid-layout .app-grid-row .app-grid-column,
17154
- .wm-app .app-header .app-grid-layout .app-grid-row .app-grid-column {
17155
- overflow: inherit;
17156
- }
17157
16853
  .wm-app #wm-app-content,
17158
16854
  .wm-app .app-included-page,
17159
16855
  .wm-app .app-page,
@@ -17356,26 +17052,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17356
17052
  padding: 10px 15px;
17357
17053
  border: none;
17358
17054
  }
17359
- .wm-app .app-grid-layout {
17360
- width: 100%;
17361
- position: relative;
17362
- empty-cells: show;
17363
- }
17364
- .wm-app .app-grid-layout.standard .app-grid-column {
17365
- padding: 0 1em;
17366
- }
17367
- .wm-app .app-grid-row {
17368
- width: 100%;
17369
- position: relative;
17370
- }
17371
- .wm-app .app-grid-column {
17372
- padding: 0;
17373
- position: relative;
17374
- vertical-align: top;
17375
- height: 100%;
17376
- overflow: inherit;
17377
- border-width: 0;
17378
- }
17379
17055
  .wm-app .on-demand-datagrid {
17380
17056
  border-top: 1px solid #f2f3f3 !important;
17381
17057
  }
@@ -17576,9 +17252,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17576
17252
  float: right;
17577
17253
  }
17578
17254
  .wm-app .app-composite-widget.caption-right .app-checkboxset .app-checkbox,
17579
- .wm-app .app-composite-widget.caption-right .app-radioset .app-radio,
17580
- .wm-app .app-page-content .btn-group .btn,
17581
- .wm-app .app-page-content .btn-group-vertical .btn {
17255
+ .wm-app .app-composite-widget.caption-right .app-radioset .app-radio {
17582
17256
  float: none;
17583
17257
  }
17584
17258
  .wm-app .app-composite-widget.caption-right .app-checkboxset .app-checkbox label,
@@ -17957,10 +17631,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17957
17631
  .wm-app .app-page-content.login {
17958
17632
  padding: 0;
17959
17633
  }
17960
- .wm-app .app-page-content .btn-group,
17961
- .wm-app .app-page-content .btn-group-vertical {
17962
- margin: 0;
17963
- }
17964
17634
  .wm-app .rtl .app-grid-layout .app-grid-row .app-grid-column,
17965
17635
  .wm-app .rtl .app-top-nav [class^="col-"],
17966
17636
  .wm-app .rtl .form-group .control-label,
@@ -18117,27 +17787,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18117
17787
  .wm-app .radio + .list-group-item.radio {
18118
17788
  margin-top: 0;
18119
17789
  }
18120
- .wm-app .p {
18121
- width: 100%;
18122
- word-wrap: break-word;
18123
- }
18124
- .wm-app p.app-label {
18125
- display: inline-block;
18126
- margin-bottom: 5px;
18127
- max-width: 100%;
18128
- }
18129
- .wm-app p.p.app-label {
18130
- display: block;
18131
- width: 100%;
18132
- }
18133
- .wm-app .h1,
18134
- .wm-app .h2,
18135
- .wm-app .h3,
18136
- .wm-app .h4,
18137
- .wm-app .h5,
18138
- .wm-app .h6 {
18139
- word-wrap: break-word;
18140
- }
18141
17790
  .wm-app .inline {
18142
17791
  display: inline;
18143
17792
  }
@@ -18313,99 +17962,49 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18313
17962
  left: 0;
18314
17963
  right: auto;
18315
17964
  }
18316
- .wm-app label,
18317
- .wm-app .app-label {
18318
- margin: 0;
18319
- }
18320
- .wm-app p {
18321
- margin: 0;
18322
- }
18323
- .wm-app h1,
18324
- .wm-app .h1,
18325
- .wm-app h2,
18326
- .wm-app .h2,
18327
- .wm-app h3,
18328
- .wm-app .h3,
18329
- .wm-app h4,
18330
- .wm-app .h4,
18331
- .wm-app h5,
18332
- .wm-app .h5,
18333
- .wm-app h6,
18334
- .wm-app .h6 {
18335
- margin: 0;
18336
- padding: 0;
18337
- color: var(--wm-heading-color);
18338
- }
18339
- .wm-app .h1,
18340
- .wm-app h1 {
18341
- font-family: var(--wm-h1-font-family);
18342
- font-size: var(--wm-h1-font-size);
18343
- font-weight: var(--wm-h1-font-weight);
18344
- line-height: var(--wm-h1-line-height);
18345
- letter-spacing: var(--wm-h1-letter-spacing);
18346
- }
18347
- .wm-app .h2,
18348
- .wm-app h2 {
18349
- font-family: var(--wm-h2-font-family);
18350
- font-size: var(--wm-h2-font-size);
18351
- font-weight: var(--wm-h2-font-weight);
18352
- line-height: var(--wm-h2-line-height);
18353
- letter-spacing: var(--wm-h2-letter-spacing);
17965
+ .wm-app a,
17966
+ .wm-app .app-anchor {
17967
+ position: relative;
17968
+ font-size: var(--wm-anchor-font-size);
17969
+ font-family: var(--wm-anchor-font-family);
17970
+ font-weight: var(--wm-anchor-font-weight);
17971
+ line-height: var(--wm-anchor-line-height);
17972
+ letter-spacing: var(--wm-anchor-letter-spacing);
17973
+ text-transform: var(--wm-anchor-text-transform);
17974
+ text-decoration: var(--wm-anchor-text-decoration);
17975
+ color: var(--wm-anchor-color);
17976
+ display: inline-flex;
17977
+ align-items: center;
17978
+ justify-content: center;
17979
+ gap: var(--wm-anchor-gap);
17980
+ cursor: pointer;
18354
17981
  }
18355
- .wm-app .h3,
18356
- .wm-app h3 {
18357
- font-family: var(--wm-h3-font-family);
18358
- font-size: var(--wm-h3-font-size);
18359
- font-weight: var(--wm-h3-font-weight);
18360
- line-height: var(--wm-h3-line-height);
18361
- letter-spacing: var(--wm-h3-letter-spacing);
17982
+ .wm-app a:hover,
17983
+ .wm-app .app-anchor:hover {
17984
+ color: var(--wm-anchor-color-hover);
18362
17985
  }
18363
- .wm-app .h4,
18364
- .wm-app h4 {
18365
- font-family: var(--wm-h4-font-family);
18366
- font-size: var(--wm-h4-font-size);
18367
- font-weight: var(--wm-h4-font-weight);
18368
- line-height: var(--wm-h4-line-height);
18369
- letter-spacing: var(--wm-h4-letter-spacing);
17986
+ .wm-app a:focus,
17987
+ .wm-app .app-anchor:focus {
17988
+ color: var(--wm-anchor-color-focus);
18370
17989
  }
18371
- .wm-app .h5,
18372
- .wm-app h5 {
18373
- font-family: var(--wm-h5-font-family);
18374
- font-size: var(--wm-h5-font-size);
18375
- font-weight: var(--wm-h5-font-weight);
18376
- line-height: var(--wm-h5-line-height);
18377
- letter-spacing: var(--wm-h5-letter-spacing);
17990
+ .wm-app a:active,
17991
+ .wm-app .app-anchor:active {
17992
+ color: var(--wm-anchor-color-active);
18378
17993
  }
18379
- .wm-app .h6,
18380
- .wm-app h6 {
18381
- font-family: var(--wm-h6-font-family);
18382
- font-size: var(--wm-h6-font-size);
18383
- font-weight: var(--wm-h6-font-weight);
18384
- line-height: var(--wm-h6-line-height);
18385
- letter-spacing: var(--wm-h6-letter-spacing);
17994
+ .wm-app a .anchor-caption:empty,
17995
+ .wm-app .app-anchor .anchor-caption:empty {
17996
+ display: none;
18386
17997
  }
18387
- .wm-app .app-icon,
18388
- .wm-app .app-icon-wrapper {
17998
+ .wm-app .app-audio {
18389
17999
  position: relative;
18390
- display: inline-flex;
18391
- justify-content: center;
18392
- align-items: center;
18393
- }
18394
- .wm-app a {
18395
- color: var(--link-color);
18396
- text-decoration: none;
18397
- }
18398
- .wm-app a.text-muted.app-anchor {
18399
- color: var(--wm-text-muted-color);
18000
+ display: inline-block;
18001
+ width: 300px;
18400
18002
  }
18401
- .wm-app a.text-muted.app-anchor:hover,
18402
- .wm-app a.text-muted.app-anchor:focus {
18403
- color: color-mix(in srgb, var(--link-color), #000000 3%);
18003
+ .wm-app .app-audio > audio {
18004
+ width: 100%;
18404
18005
  }
18405
- .wm-app a:hover,
18406
- .wm-app a:focus {
18407
- color: color-mix(in srgb, var(--link-color), #000000 3%);
18408
- text-decoration: none;
18006
+ .wm-app audio {
18007
+ display: inline-block;
18409
18008
  }
18410
18009
  .wm-app .btn {
18411
18010
  font-size: var(--wm-btn-font-size);
@@ -18425,7 +18024,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18425
18024
  display: inline-flex;
18426
18025
  align-items: center;
18427
18026
  justify-content: center;
18428
- gap: var(--wm-space-2);
18027
+ gap: var(--wm-btn-gap);
18429
18028
  cursor: pointer;
18430
18029
  }
18431
18030
  .wm-app .btn + .btn {
@@ -18462,6 +18061,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18462
18061
  --wm-btn-padding: var(--wm-btn-xs-padding);
18463
18062
  --wm-btn-min-width: var(--wm-btn-xs-min-width);
18464
18063
  --wm-btn-height: var(--wm-btn-xs-height);
18064
+ --wm-btn-gap: var(--wm-btn-xs-gap);
18465
18065
  }
18466
18066
  .wm-app .btn-sm {
18467
18067
  --wm-btn-font-size: var(--wm-btn-sm-font-size);
@@ -18473,6 +18073,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18473
18073
  --wm-btn-padding: var(--wm-btn-sm-padding);
18474
18074
  --wm-btn-min-width: var(--wm-btn-sm-min-width);
18475
18075
  --wm-btn-height: var(--wm-btn-sm-height);
18076
+ --wm-btn-gap: var(--wm-btn-sm-gap);
18476
18077
  }
18477
18078
  .wm-app .btn-lg {
18478
18079
  --wm-btn-font-size: var(--wm-btn-lg-font-size);
@@ -18484,6 +18085,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18484
18085
  --wm-btn-padding: var(--wm-btn-lg-padding);
18485
18086
  --wm-btn-min-width: var(--wm-btn-lg-min-width);
18486
18087
  --wm-btn-height: var(--wm-btn-lg-height);
18088
+ --wm-btn-gap: var(--wm-btn-lg-gap);
18487
18089
  }
18488
18090
  .wm-app .btn-block {
18489
18091
  width: 100%;
@@ -18614,14 +18216,26 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18614
18216
  --wm-btn-border-color: var(--wm-btn-danger-outlined-border-color);
18615
18217
  --wm-btn-state-layer-color: var(--wm-btn-danger-outlined-state-layer-color);
18616
18218
  }
18617
- .wm-app .btn.btn-text {
18219
+ .wm-app .btn-text {
18618
18220
  background: none !important;
18619
18221
  border: none !important;
18620
18222
  --wm-btn-state-layer-color: var(--wm-btn-background);
18621
18223
  }
18622
- .wm-app .btn.btn-text .btn-caption {
18224
+ .wm-app .btn-text .btn-caption {
18623
18225
  color: var(--wm-btn-background);
18624
18226
  }
18227
+ .wm-app .btn-elevated {
18228
+ box-shadow: var(--wm-btn-elevated);
18229
+ }
18230
+ .wm-app .btn-elevated:hover {
18231
+ box-shadow: var(--wm-btn-elevated-hover);
18232
+ }
18233
+ .wm-app .btn-elevated:focus {
18234
+ box-shadow: var(--wm-btn-elevated-focus);
18235
+ }
18236
+ .wm-app .btn-elevated:active {
18237
+ box-shadow: var(--wm-btn-elevated-active);
18238
+ }
18625
18239
  .wm-app .btn.disabled,
18626
18240
  .wm-app .btn[disabled] {
18627
18241
  opacity: 1;
@@ -18655,6 +18269,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18655
18269
  .wm-app .btn[disabled]::before {
18656
18270
  display: none;
18657
18271
  }
18272
+ .wm-app .app-checkbox {
18273
+ position: relative;
18274
+ }
18658
18275
  .wm-app .app-checkbox.checkbox {
18659
18276
  display: inline-block;
18660
18277
  }
@@ -18782,6 +18399,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18782
18399
  .wm-app .app-checkboxset {
18783
18400
  padding: 0;
18784
18401
  margin: 0;
18402
+ position: relative;
18785
18403
  }
18786
18404
  .wm-app .app-checkboxset.list-group.inline {
18787
18405
  display: flex;
@@ -18797,10 +18415,24 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18797
18415
  .wm-app .app-checkboxset.list-group.inline > li + li {
18798
18416
  margin: 0;
18799
18417
  }
18418
+ .wm-app .app-container {
18419
+ position: relative;
18420
+ }
18421
+ .wm-app .app-outlined-container {
18422
+ border: var(--wm-container-outlined-border-width) var(--wm-container-outlined-border-style) var(--wm-container-outlined-border-color);
18423
+ }
18424
+ .wm-app .app-elevation-container {
18425
+ border-radius: var(--wm-container-elevation-border-radius);
18426
+ box-shadow: var(--wm-container-elevation-shadow);
18427
+ }
18428
+ .wm-app .app-currency {
18429
+ position: relative;
18430
+ }
18800
18431
  .wm-app .app-composite-widget {
18801
- display: flex;
18802
- flex-direction: column;
18803
18432
  position: relative;
18433
+ display: flex;
18434
+ flex-direction: row;
18435
+ align-items: center;
18804
18436
  }
18805
18437
  .wm-app .app-composite-widget:has(.form-control:not(.ng-touched.ng-invalid):focus) .control-label {
18806
18438
  color: var(--wm-color-primary);
@@ -18939,25 +18571,249 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18939
18571
  .wm-app .app-grid-layout {
18940
18572
  display: flex;
18941
18573
  flex-direction: column;
18574
+ flex-wrap: wrap;
18575
+ position: relative;
18576
+ width: 100%;
18942
18577
  }
18943
18578
  .wm-app .app-grid-layout > .app-grid-row {
18944
18579
  display: flex;
18580
+ flex-direction: row;
18581
+ flex-wrap: wrap;
18582
+ position: relative;
18583
+ width: 100%;
18945
18584
  }
18946
18585
  .wm-app .app-grid-layout > .app-grid-row > .app-grid-column {
18947
- padding: 8px;
18586
+ position: relative;
18587
+ height: auto;
18588
+ overflow: inherit;
18589
+ border-width: 0;
18590
+ padding: var(--wm-grid-layout-column-padding);
18948
18591
  }
18949
- .wm-app .app-nav.nav {
18592
+ .wm-app .app-html-container {
18593
+ position: relative;
18594
+ max-width: 100%;
18595
+ }
18596
+ .wm-app .app-icon,
18597
+ .wm-app .app-icon-wrapper {
18598
+ position: relative;
18599
+ display: inline-flex;
18600
+ justify-content: center;
18601
+ align-items: center;
18950
18602
  padding: 0;
18603
+ gap: var(--wm-icon-gap);
18604
+ }
18605
+ .wm-app .app-icon-wrapper {
18606
+ white-space: nowrap;
18607
+ max-width: 100%;
18608
+ overflow: hidden;
18609
+ }
18610
+ .wm-app .app-icon-wrapper .app-label {
18951
18611
  margin: 0;
18952
- list-style: none;
18612
+ text-overflow: ellipsis;
18613
+ max-width: 100%;
18614
+ overflow: hidden;
18615
+ }
18616
+ .wm-app .app-icon-wrapper[icon-position="right"] {
18617
+ flex-direction: row-reverse;
18618
+ }
18619
+ .wm-app .app-icon {
18620
+ font-size: var(--wm-icon-size);
18621
+ min-width: var(--wm-icon-size);
18622
+ width: var(--wm-icon-size);
18623
+ height: var(--wm-icon-size);
18624
+ }
18625
+ .wm-app .fa-xs {
18626
+ font-size: var(--wm-icon-size-xs);
18627
+ min-width: var(--wm-icon-size-xs);
18628
+ width: var(--wm-icon-size-xs);
18629
+ height: var(--wm-icon-size-xs);
18630
+ }
18631
+ .wm-app .fa-sm {
18632
+ font-size: var(--wm-icon-size-sm);
18633
+ min-width: var(--wm-icon-size-sm);
18634
+ width: var(--wm-icon-size-sm);
18635
+ height: var(--wm-icon-size-sm);
18636
+ }
18637
+ .wm-app .fa-lg {
18638
+ font-size: var(--wm-icon-size-lg);
18639
+ min-width: var(--wm-icon-size-lg);
18640
+ width: var(--wm-icon-size-lg);
18641
+ height: var(--wm-icon-size-lg);
18642
+ }
18643
+ .wm-app .fa-2x {
18644
+ font-size: var(--wm-icon-size-2x);
18645
+ min-width: var(--wm-icon-size-2x);
18646
+ width: var(--wm-icon-size-2x);
18647
+ height: var(--wm-icon-size-2x);
18648
+ }
18649
+ .wm-app .fa-3x {
18650
+ font-size: var(--wm-icon-size-3x);
18651
+ min-width: var(--wm-icon-size-3x);
18652
+ width: var(--wm-icon-size-3x);
18653
+ height: var(--wm-icon-size-3x);
18654
+ }
18655
+ .wm-app .fa-4x {
18656
+ font-size: var(--wm-icon-size-4x);
18657
+ min-width: var(--wm-icon-size-4x);
18658
+ width: var(--wm-icon-size-4x);
18659
+ height: var(--wm-icon-size-4x);
18660
+ }
18661
+ .wm-app .fa-5x {
18662
+ font-size: var(--wm-icon-size-5x);
18663
+ min-width: var(--wm-icon-size-5x);
18664
+ width: var(--wm-icon-size-5x);
18665
+ height: var(--wm-icon-size-5x);
18666
+ }
18667
+ .wm-app .app-iframe {
18953
18668
  position: relative;
18954
- min-height: 20px;
18955
- display: flex;
18956
- flex-wrap: wrap;
18957
18669
  }
18958
- .wm-app .app-nav.nav > li > a {
18670
+ .wm-app .app-iframe iframe {
18671
+ width: 100%;
18672
+ height: 100%;
18673
+ }
18674
+ .wm-app label,
18675
+ .wm-app .app-label {
18676
+ margin: 0;
18677
+ display: inline-block;
18678
+ width: auto;
18679
+ }
18680
+ .wm-app p,
18681
+ .wm-app .app-label.p,
18682
+ .wm-app label.p {
18683
+ margin: 0;
18684
+ padding: 0;
18685
+ word-wrap: break-word;
18959
18686
  display: block;
18960
18687
  }
18688
+ .wm-app h1,
18689
+ .wm-app .h1,
18690
+ .wm-app h2,
18691
+ .wm-app .h2,
18692
+ .wm-app h3,
18693
+ .wm-app .h3,
18694
+ .wm-app h4,
18695
+ .wm-app .h4,
18696
+ .wm-app h5,
18697
+ .wm-app .h5,
18698
+ .wm-app h6,
18699
+ .wm-app .h6 {
18700
+ word-wrap: break-word;
18701
+ margin: 0;
18702
+ padding: 0;
18703
+ color: var(--wm-headings-color);
18704
+ display: block;
18705
+ }
18706
+ .wm-app .h1,
18707
+ .wm-app h1 {
18708
+ font-family: var(--wm-h1-font-family);
18709
+ font-size: var(--wm-h1-font-size);
18710
+ font-weight: var(--wm-h1-font-weight);
18711
+ line-height: var(--wm-h1-line-height);
18712
+ letter-spacing: var(--wm-h1-letter-spacing);
18713
+ }
18714
+ .wm-app .h2,
18715
+ .wm-app h2 {
18716
+ font-family: var(--wm-h2-font-family);
18717
+ font-size: var(--wm-h2-font-size);
18718
+ font-weight: var(--wm-h2-font-weight);
18719
+ line-height: var(--wm-h2-line-height);
18720
+ letter-spacing: var(--wm-h2-letter-spacing);
18721
+ }
18722
+ .wm-app .h3,
18723
+ .wm-app h3 {
18724
+ font-family: var(--wm-h3-font-family);
18725
+ font-size: var(--wm-h3-font-size);
18726
+ font-weight: var(--wm-h3-font-weight);
18727
+ line-height: var(--wm-h3-line-height);
18728
+ letter-spacing: var(--wm-h3-letter-spacing);
18729
+ }
18730
+ .wm-app .h4,
18731
+ .wm-app h4 {
18732
+ font-family: var(--wm-h4-font-family);
18733
+ font-size: var(--wm-h4-font-size);
18734
+ font-weight: var(--wm-h4-font-weight);
18735
+ line-height: var(--wm-h4-line-height);
18736
+ letter-spacing: var(--wm-h4-letter-spacing);
18737
+ }
18738
+ .wm-app .h5,
18739
+ .wm-app h5 {
18740
+ font-family: var(--wm-h5-font-family);
18741
+ font-size: var(--wm-h5-font-size);
18742
+ font-weight: var(--wm-h5-font-weight);
18743
+ line-height: var(--wm-h5-line-height);
18744
+ letter-spacing: var(--wm-h5-letter-spacing);
18745
+ }
18746
+ .wm-app .h6,
18747
+ .wm-app h6 {
18748
+ font-family: var(--wm-h6-font-family);
18749
+ font-size: var(--wm-h6-font-size);
18750
+ font-weight: var(--wm-h6-font-weight);
18751
+ line-height: var(--wm-h6-line-height);
18752
+ letter-spacing: var(--wm-h6-letter-spacing);
18753
+ }
18754
+ .wm-app .app-message {
18755
+ position: relative;
18756
+ display: flex;
18757
+ align-items: center;
18758
+ gap: var(--wm-message-container-gap);
18759
+ padding: var(--wm-message-container-padding);
18760
+ border: var(--wm-message-container-border-width) var(--wm-message-container-border-style) var(--wm-message-container-border-color);
18761
+ border-radius: var(--wm-message-container-border-radius);
18762
+ background: var(--wm-message-container-background);
18763
+ color: var(--wm-message-container-color);
18764
+ box-shadow: var(--wm-message-container-shadow);
18765
+ font-family: var(--wm-message-font-family);
18766
+ font-weight: var(--wm-message-font-weight);
18767
+ font-size: var(--wm-message-font-size);
18768
+ line-height: var(--wm-message-line-height);
18769
+ letter-spacing: var(--wm-message-letter-spacing);
18770
+ }
18771
+ .wm-app .app-message .icon {
18772
+ margin: 0;
18773
+ font-size: 18px;
18774
+ }
18775
+ .wm-app .app-message > span {
18776
+ flex: 1;
18777
+ }
18778
+ .wm-app .app-message .btn-transparent.close {
18779
+ color: inherit;
18780
+ opacity: 1;
18781
+ }
18782
+ .wm-app .app-message .btn-transparent.close span {
18783
+ display: none;
18784
+ }
18785
+ .wm-app .app-message .btn-transparent.close:before {
18786
+ content: "\f1e2";
18787
+ font-family: wavicon;
18788
+ font-size: var(--wm-icon-size-sm);
18789
+ min-width: var(--wm-icon-size-sm);
18790
+ height: var(--wm-icon-size-sm);
18791
+ }
18792
+ .wm-app .app-message.alert-success {
18793
+ --wm-message-container-color: var(--wm-message-container-success-color);
18794
+ --wm-message-container-background: var(--wm-message-container-success-background);
18795
+ --wm-message-container-border-color: var(--wm-message-container-success-border-color);
18796
+ }
18797
+ .wm-app .app-message.alert-info {
18798
+ --wm-message-container-color: var(--wm-message-container-info-color);
18799
+ --wm-message-container-background: var(--wm-message-container-info-background);
18800
+ --wm-message-container-border-color: var(--wm-message-container-info-border-color);
18801
+ }
18802
+ .wm-app .app-message.alert-warning {
18803
+ --wm-message-container-color: var(--wm-message-container-warning-color);
18804
+ --wm-message-container-background: var(--wm-message-container-warning-background);
18805
+ --wm-message-container-border-color: var(--wm-message-container-warning-border-color);
18806
+ }
18807
+ .wm-app .app-message.alert-danger {
18808
+ --wm-message-container-color: var(--wm-message-container-danger-color);
18809
+ --wm-message-container-background: var(--wm-message-container-danger-background);
18810
+ --wm-message-container-border-color: var(--wm-message-container-danger-border-color);
18811
+ }
18812
+ .wm-app .app-message.alert-loading {
18813
+ --wm-message-container-color: var(--wm-message-container-loading-color);
18814
+ --wm-message-container-background: var(--wm-message-container-loading-background);
18815
+ --wm-message-container-border-color: var(--wm-message-container-loading-border-color);
18816
+ }
18961
18817
  .wm-app .app-navbar {
18962
18818
  position: relative;
18963
18819
  border: none;
@@ -18988,6 +18844,18 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18988
18844
  display: none;
18989
18845
  }
18990
18846
  }
18847
+ .wm-app .app-nav.nav {
18848
+ padding: 0;
18849
+ margin: 0;
18850
+ list-style: none;
18851
+ position: relative;
18852
+ min-height: 20px;
18853
+ display: flex;
18854
+ flex-wrap: wrap;
18855
+ }
18856
+ .wm-app .app-nav.nav > li > a {
18857
+ display: block;
18858
+ }
18991
18859
  .wm-app .app-page {
18992
18860
  display: flex;
18993
18861
  flex-direction: column;
@@ -20477,6 +20345,122 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
20477
20345
  .wm-app .app-footer .app-nav.nav-pills li + li {
20478
20346
  margin-left: var(--wm-space-8);
20479
20347
  }
20348
+ .wm-app .app-picture {
20349
+ position: relative;
20350
+ display: inline-flex;
20351
+ justify-content: center;
20352
+ align-items: center;
20353
+ max-width: 100%;
20354
+ width: auto;
20355
+ height: auto;
20356
+ cursor: default;
20357
+ }
20358
+ .wm-app .app-picture.img-rounded {
20359
+ border-radius: var(--wm-picture-radius-rounded);
20360
+ }
20361
+ .wm-app .app-picture.img-circle {
20362
+ border-radius: var(--wm-picture-radius-circle);
20363
+ }
20364
+ .wm-app .app-picture.img-thumbnail {
20365
+ padding: var(--wm-picture-thumbnail-padding);
20366
+ background: var(--wm-picture-thumbnail-background);
20367
+ border: var(--wm-picture-thumbnail-border-width) var(--wm-picture-thumbnail-border-style) var(--wm-picture-thumbnail-border-color);
20368
+ border-radius: var(--wm-picture-radius-thumbnail);
20369
+ transition: all 0.2s ease-in-out;
20370
+ }
20371
+ .wm-app .app-progress {
20372
+ position: relative;
20373
+ height: var(--wm-progress-bar-height);
20374
+ background: var(--wm-progress-bar-background-inactive);
20375
+ border-radius: var(--wm-progress-bar-radius);
20376
+ margin: var(--wm-progress-bar-margin);
20377
+ transition: width 0.6s ease;
20378
+ }
20379
+ .wm-app .app-progress:before {
20380
+ content: "";
20381
+ position: absolute;
20382
+ right: 0px;
20383
+ height: var(--wm-progress-bar-stop-indicator-height);
20384
+ width: var(--wm-progress-bar-stop-indicator-width);
20385
+ border-radius: var(--wm-progress-bar-stop-indicator-radius);
20386
+ background: var(--wm-progress-bar-stop-indicator-background);
20387
+ }
20388
+ .wm-app .app-progress .progress-bar {
20389
+ position: relative;
20390
+ height: 100%;
20391
+ background: var(--wm-progress-bar-background-active);
20392
+ border-top-left-radius: var(--wm-progress-bar-radius);
20393
+ border-bottom-left-radius: var(--wm-progress-bar-radius);
20394
+ transition: width 0.6s ease;
20395
+ }
20396
+ .wm-app .app-progress .progress-bar[aria-valuenow="100"] {
20397
+ border-radius: var(--wm-progress-bar-radius);
20398
+ }
20399
+ .wm-app .app-progress .progress-bar .app-progress-label[data-caption-placement=hidden] {
20400
+ display: none;
20401
+ }
20402
+ .wm-app .app-progress:has(.progress-bar-success) {
20403
+ --wm-progress-bar-background-inactive: var(--wm-progress-bar-success-background-inactive);
20404
+ }
20405
+ .wm-app .app-progress:has(.progress-bar-success):before {
20406
+ --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-success-stop-indicator-background);
20407
+ }
20408
+ .wm-app .app-progress > .progress-bar-success {
20409
+ --wm-progress-bar-background-active: var(--wm-progress-bar-success-background-active);
20410
+ }
20411
+ .wm-app .app-progress:has(.progress-bar-info) {
20412
+ --wm-progress-bar-background-inactive: var(--wm-progress-bar-info-background-inactive);
20413
+ }
20414
+ .wm-app .app-progress:has(.progress-bar-info):before {
20415
+ --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-info-stop-indicator-background);
20416
+ }
20417
+ .wm-app .app-progress > .progress-bar-info {
20418
+ --wm-progress-bar-background-active: var(--wm-progress-bar-info-background-active);
20419
+ }
20420
+ .wm-app .app-progress:has(.progress-bar-warning) {
20421
+ --wm-progress-bar-background-inactive: var(--wm-progress-bar-warning-background-inactive);
20422
+ }
20423
+ .wm-app .app-progress:has(.progress-bar-warning):before {
20424
+ --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-warning-stop-indicator-background);
20425
+ }
20426
+ .wm-app .app-progress > .progress-bar-warning {
20427
+ --wm-progress-bar-background-active: var(--wm-progress-bar-warning-background-active);
20428
+ }
20429
+ .wm-app .app-progress:has(.progress-bar-danger) {
20430
+ --wm-progress-bar-background-inactive: var(--wm-progress-bar-danger-background-inactive);
20431
+ }
20432
+ .wm-app .app-progress:has(.progress-bar-danger):before {
20433
+ --wm-progress-bar-stop-indicator-background: var(--wm-progress-bar-danger-stop-indicator-background);
20434
+ }
20435
+ .wm-app .app-progress > .progress-bar-danger {
20436
+ --wm-progress-bar-background-active: var(--wm-progress-bar-danger-background-active);
20437
+ }
20438
+ .wm-app .app-progress > .progress-bar-striped {
20439
+ background-image: var(--wm-progress-bar-striped);
20440
+ background-size: var(--wm-progress-bar-striped-size);
20441
+ }
20442
+ .wm-app .app-radio {
20443
+ position: relative;
20444
+ }
20445
+ .wm-app .app-radioset {
20446
+ position: relative;
20447
+ }
20448
+ .wm-app .app-textarea {
20449
+ position: relative;
20450
+ }
20451
+ .wm-app .app-video {
20452
+ position: relative;
20453
+ height: 150px;
20454
+ width: 300px;
20455
+ display: inline-block;
20456
+ }
20457
+ .wm-app .app-video > video {
20458
+ height: 100%;
20459
+ width: 100%;
20460
+ }
20461
+ .wm-app video {
20462
+ display: inline-block;
20463
+ }
20480
20464
  .wm-app .animated {
20481
20465
  -webkit-animation-duration: 1s;
20482
20466
  animation-duration: 1s;
@@ -25068,31 +25052,45 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
25068
25052
  cursor: pointer;
25069
25053
  }
25070
25054
  .wm-app .label-primary {
25071
- background: var(--wm-color-primary-70);
25055
+ background: var(--wm-color-primary-focus);
25072
25056
  color: var(--wm-color-primary);
25073
25057
  }
25058
+ .wm-app .label-secondary {
25059
+ background: var(--wm-color-secondary-focus);
25060
+ color: var(--wm-color-secondary);
25061
+ }
25062
+ .wm-app .label-tertiary {
25063
+ background: var(--wm-color-tertiary-focus);
25064
+ color: var(--wm-color-tertiary);
25065
+ }
25074
25066
  .wm-app .label-success {
25075
- background: var(--wm-color-success-70);
25067
+ background: var(--wm-color-success-focus);
25076
25068
  color: var(--wm-color-success);
25077
25069
  }
25078
25070
  .wm-app .label-info {
25079
- background: var(--wm-color-info-70);
25071
+ background: var(--wm-color-info-focus);
25080
25072
  color: var(--wm-color-info);
25081
25073
  }
25082
25074
  .wm-app .label-warning {
25083
- background: var(--wm-color-warning-70);
25075
+ background: var(--wm-color-warning-focus);
25084
25076
  color: var(--wm-color-warning);
25085
25077
  }
25078
+ .wm-app .label-danger {
25079
+ background: var(--wm-color-error-focus);
25080
+ color: var(--wm-color-error);
25081
+ }
25086
25082
  .wm-app .label-muted {
25087
- background-color: var(--wm-text-muted-color);
25088
- color: var(--wm-text-muted-color);
25083
+ background: var(--wm-color-on-surface-variant-focus);
25084
+ color: var(--wm-color-on-surface-variant);
25089
25085
  }
25090
- .wm-app .label-error {
25091
- background: var(--wm-color-error-70);
25092
- color: var(--wm-color-error);
25086
+ .wm-app .text-primary {
25087
+ color: var(--wm-color-primary);
25093
25088
  }
25094
- .wm-app .text-error {
25095
- color: var(--wm-color-error);
25089
+ .wm-app .text-secondary {
25090
+ color: var(--wm-color-secondary);
25091
+ }
25092
+ .wm-app .text-tertiary {
25093
+ color: var(--wm-color-tertiary);
25096
25094
  }
25097
25095
  .wm-app .text-success {
25098
25096
  color: var(--wm-color-success);
@@ -25100,14 +25098,29 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
25100
25098
  .wm-app .text-info {
25101
25099
  color: var(--wm-color-info);
25102
25100
  }
25103
- .wm-app .text-primary {
25104
- color: var(--wm-color-primary);
25105
- }
25106
25101
  .wm-app .text-warning {
25107
25102
  color: var(--wm-color-warning);
25108
25103
  }
25104
+ .wm-app .text-danger {
25105
+ color: var(--wm-color-error);
25106
+ }
25109
25107
  .wm-app .text-muted {
25110
- color: var(--wm-text-muted-color);
25108
+ color: var(--wm-color-on-surface-variant);
25109
+ }
25110
+ .wm-app .elevation-1 {
25111
+ box-shadow: var(--wm-elevation-shadow-1);
25112
+ }
25113
+ .wm-app .elevation-2 {
25114
+ box-shadow: var(--wm-elevation-shadow-2);
25115
+ }
25116
+ .wm-app .elevation-3 {
25117
+ box-shadow: var(--wm-elevation-shadow-3);
25118
+ }
25119
+ .wm-app .elevation-4 {
25120
+ box-shadow: var(--wm-elevation-shadow-4);
25121
+ }
25122
+ .wm-app .elevation-5 {
25123
+ box-shadow: var(--wm-elevation-shadow-5);
25111
25124
  }
25112
25125
  .wm-app .col-xs-1 {
25113
25126
  width: 8.33333333%;