@wavemaker/foundation-css 12.0.0-next.45057 → 12.0.0-next.45061

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.
@@ -443,7 +443,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
443
443
  --wm-elevation-shadow-4: 0px 6px 10px 4px color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 15%)), 0px 2px 3px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 30%))";
444
444
  --wm-elevation-shadow-5: 0px 8px 12px 6px color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 15%)), 0px 4px 4px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 30%))";
445
445
  /**--Components--**/
446
+ --wm-accordion-group-gap: var(--wm-space-2);
446
447
  /*--Anchor--*/
448
+ --wm-anchor-color: var(--wm-color-primary);
447
449
  --wm-anchor-font-size: var(--wm-body-medium-font-size);
448
450
  --wm-anchor-font-family: var(--wm-body-medium-font-family);
449
451
  --wm-anchor-font-weight: var(--wm-body-medium-font-weight);
@@ -451,11 +453,33 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
451
453
  --wm-anchor-letter-spacing: var(--wm-body-medium-letter-spacing);
452
454
  --wm-anchor-text-transform: none;
453
455
  --wm-anchor-text-decoration: none;
454
- --wm-anchor-color: var(--wm-color-primary);
455
- --wm-anchor-color-hover: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-hover));
456
- --wm-anchor-color-focus: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-focus));
457
- --wm-anchor-color-active: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-active));
458
- --wm-anchor-gap: var(--wm-space-2);
456
+ --wm-anchor-text-decoration-hover: none;
457
+ --wm-anchor-text-decoration-focus: none;
458
+ --wm-anchor-text-decoration-active: none;
459
+ --wm-anchor-color-hover: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-hover));
460
+ --wm-anchor-color-focus: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-focus));
461
+ --wm-anchor-color-active: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-active));
462
+ --wm-anchor-gap: var(--wm-space-1);
463
+ --wm-breadcrumb-gap: var(--wm-space-1);
464
+ --wm-breadcrumb-item-font-size: var(--wm-body-large-font-size);
465
+ --wm-breadcrumb-item-font-family: var(--wm-body-large-font-family);
466
+ --wm-breadcrumb-item-font-weight: var(--wm-body-large-font-weight);
467
+ --wm-breadcrumb-item-line-height: var(--wm-body-large-line-height);
468
+ --wm-breadcrumb-item-letter-spacing: var(--wm-body-large-letter-spacing);
469
+ --wm-breadcrumb-item-text-transform: none;
470
+ --wm-breadcrumb-item-text-decoration: none;
471
+ --wm-breadcrumb-item-text-decoration-hover: underline;
472
+ --wm-breadcrumb-item-text-decoration-focus: underline;
473
+ --wm-breadcrumb-item-text-decoration-active: none;
474
+ --wm-breadcrumb-item-color: var(--wm-color-primary);
475
+ --wm-breadcrumb-item-color-hover: color-mix(in srgb, var(--wm-breadcrumb-item-color), var(--wm-color-black) var(--wm-opacity-hover));
476
+ --wm-breadcrumb-item-color-focus: color-mix(in srgb, var(--wm-breadcrumb-item-color), var(--wm-color-black) var(--wm-opacity-focus));
477
+ --wm-breadcrumb-item-color-active: color-mix(in srgb, var(--wm-breadcrumb-item-color), var(--wm-color-black) var(--wm-opacity-active));
478
+ --wm-breadcrumb-item-gap: var(--wm-space-1);
479
+ --wm-breadcrumb-item-icon-color: var(--wm-color-on-background);
480
+ --wm-breadcrumb-item-icon-size: var(--wm-icon-size-sm);
481
+ --wm-breadcrumb-item-separator-color: var(--wm-color-outline);
482
+ --wm-breadcrumb-item-separator-size: var(--wm-icon-size-sm);
459
483
  /*--Button Group--*/
460
484
  --wm-button-group-horizontal-radius: var(--wm-radius-pill);
461
485
  --wm-button-group-vertical-radius: var(--wm-radius-xs);
@@ -477,6 +501,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
477
501
  --wm-btn-height: 40px;
478
502
  --wm-btn-gap: var(--wm-space-2);
479
503
  --wm-btn-shadow: none;
504
+ --wm-btn-app-icon-size: var(--wm-icon-size-md);
480
505
  --wm-btn-state-layer-color: var(--wm-color-on-surface-variant);
481
506
  --wm-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
482
507
  --wm-btn-focus-state-layer-opacity: var(--wm-opacity-focus);
@@ -491,6 +516,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
491
516
  --wm-btn-icon-margin: var(--wm-space-1);
492
517
  --wm-btn-icon-padding: var(--wm-space-0);
493
518
  --wm-btn-icon-radius: var(--wm-radius-pill);
519
+ --wm-btn-icon-xs-width: 24px;
520
+ --wm-btn-icon-xs-height: 24px;
521
+ --wm-btn-icon-xs-size: var(--wm-icon-size-xs);
522
+ --wm-btn-icon-sm-width: 32px;
523
+ --wm-btn-icon-sm-height: 32px;
524
+ --wm-btn-icon-sm-size: var(--wm-icon-size-sm);
525
+ --wm-btn-icon-lg-width: 56px;
526
+ --wm-btn-icon-lg-height: 56px;
527
+ --wm-btn-icon-lg-size: var(--wm-icon-size-lg);
494
528
  --wm-btn-elevated: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
495
529
  --wm-btn-elevated-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, .15);
496
530
  --wm-btn-elevated-focus: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
@@ -561,6 +595,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
561
595
  --wm-btn-xs-min-width: auto;
562
596
  --wm-btn-xs-height: 32px;
563
597
  --wm-btn-xs-gap: var(--wm-space-1);
598
+ --wm-btn-xs-icon-size: var(--wm-icon-size-xs);
564
599
  --wm-btn-sm-font-size: var(--wm-label-medium-font-size);
565
600
  --wm-btn-sm-font-family: var(--wm-label-medium-font-family);
566
601
  --wm-btn-sm-font-weight: var(--wm-label-medium-font-weight);
@@ -571,6 +606,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
571
606
  --wm-btn-sm-min-width: auto;
572
607
  --wm-btn-sm-height: 36px;
573
608
  --wm-btn-sm-gap: var(--wm-space-1);
609
+ --wm-btn-sm-icon-size: var(--wm-icon-size-sm);
574
610
  --wm-btn-lg-font-size: var(--wm-body-large-font-size);
575
611
  --wm-btn-lg-font-family: var(--wm-body-large-font-family);
576
612
  --wm-btn-lg-font-weight: var(--wm-body-large-font-weight);
@@ -581,6 +617,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
581
617
  --wm-btn-lg-min-width: auto;
582
618
  --wm-btn-lg-height: 44px;
583
619
  --wm-btn-lg-gap: var(--wm-space-2);
620
+ --wm-btn-lg-icon-size: var(--wm-icon-size-lg);
584
621
  /*--card--*/
585
622
  --wm-card-list-gap: var(--wm-space-4);
586
623
  --wm-card-background: var(--wm-color-surface);
@@ -610,8 +647,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
610
647
  --wm-card-filled-shadow-focus: var(--wm-elevation-shadow-1);
611
648
  --wm-card-filled-shadow-active: var(--wm-elevation-shadow-1);
612
649
  --wm-card-filled-shadow-drag: var(--wm-elevation-shadow-3);
613
- --wm-card-body-padding: var(--wm-space-4);
614
- --wm-card-footer-padding: var(--wm-space-4);
650
+ --wm-card-body-padding: var(--wm-space-3);
651
+ --wm-card-footer-padding: var(--wm-space-3);
615
652
  --wm-card-footer-border-width: var(--wm-card-border-width);
616
653
  --wm-card-footer-border-style: var(--wm-card-border-style);
617
654
  --wm-card-footer-border-color: var(--wm-card-border-color);
@@ -1125,6 +1162,33 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1125
1162
  --wm-spinner-loading-data-msg-background: var(--wm-color-scrim-hover);
1126
1163
  --wm-spinner-loading-data-msg-color: inherit;
1127
1164
  --wm-spinner-loading-data-msg-radius: inherit;
1165
+ --wm-tabs-background: var(--wm-color-surface);
1166
+ --wm-tabs-nav-border-width: var(--wm-border-width);
1167
+ --wm-tabs-nav-border-style: var(--wm-border-style);
1168
+ --wm-tabs-nav-border-color: var(--wm-color-surface-container-highest);
1169
+ --wm-tabs-item-heading-height: 48px;
1170
+ --wm-tabs-item-heading-padding: var(--wm-space-2) var(--wm-space-6);
1171
+ --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
1172
+ --wm-tabs-item-heading-font-weight: var(--wm-h6-font-weight);
1173
+ --wm-tabs-item-heading-font-family: var(--wm-h6-font-family);
1174
+ --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
1175
+ --wm-tabs-item-heading-letter-spacing: var(--wm-h6-letter-spacing);
1176
+ --wm-tabs-item-heading-color: var(--wm-color-on-surface-variant);
1177
+ --wm-tabs-item-heading-color-active: var(--wm-color-primary);
1178
+ --wm-tabs-item-heading-border-width: 0px;
1179
+ --wm-tabs-item-heading-border-style: var(--wm-border-style);
1180
+ --wm-tabs-item-heading-border-color: var(--wm-border-color);
1181
+ --wm-tabs-item-heading-state-layer-color: var(--wm-color-primary);
1182
+ --wm-tabs-item-heading-hover-state-layer-opacity: var(--wm-opacity-hover);
1183
+ --wm-tabs-item-heading-focus-state-layer-opacity: var(--wm-opacity-focus);
1184
+ --wm-tabs-item-heading-active-state-layer-opacity: var(--wm-opacity-active);
1185
+ --wm-tabs-item-heading-indicator-height: 3px;
1186
+ --wm-tabs-item-heading-indicator-width: calc(100% - var(--wm-space-12));
1187
+ --wm-tabs-item-heading-indicator-radius: var(--wm-radius-md) var(--wm-radius-md) var(--wm-radius-none) var(--wm-radius-none);
1188
+ --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
1189
+ --wm-tabs-content-background: inherit;
1190
+ --wm-tabs-body-padding: var(--wm-space-4);
1191
+ --wm-tabs-body-height: 100px;
1128
1192
  /* Timepicker styles */
1129
1193
  --wm-timepicker-input-font-family: var(--wm-h3-font-family);
1130
1194
  --wm-timepicker-input-font-size: var(--wm-h3-font-size);
@@ -1199,30 +1263,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1199
1263
  /*--Icon--*/
1200
1264
  --wm-icon-gap: var(--wm-space-1);
1201
1265
  /*--Grid Layout--*/
1266
+ --wm-grid-layout-row-gap: var(--wm-space-2);
1202
1267
  --wm-grid-layout-column-padding: var(--wm-space-2);
1203
- /*--app grid (or) Data Table --*/
1204
- --wm-app-grid-bg: var(--wm-color-contrast-light);
1205
- --wm-app-grid-radius: 8px;
1206
- --wm-app-grid-spacing: var(--wm-space-4);
1207
- --wm-app-grid-table-bg-color: var(--wm-color-contrast-light);
1208
- --wm-app-grid-table-radius: 0;
1209
- --wm-app-grid-header-bg: var(--wm-color-primary-10);
1210
- --wm-app-grid-header-text-color: var(--wm-text-color);
1211
- --wm-app-grid-header-radius: 0;
1212
- --wm-app-grid-separator: var(--wm-color-mid-grey-100);
1213
- --wm-app-grid-text-color: var(--wm-text-color);
1214
- /*--pagination--*/
1215
- --wm-pagination-color: var(--wm-text-muted-color);
1216
- --wm-pagination-basic-bg: var(--wm-color-contrast-light);
1217
- --wm-pagination-hover-text: var(--wm-text-color);
1218
- --wm-pagination-hover-bg: var(--wm-color-primary-10);
1219
- --wm-pagination-active-text: var(--wm-color-contrast-light);
1220
- --wm-pagination-active-bg: var(--wm-color-primary);
1221
- --wm-pagination-disabled-text: var(--wm-text-muted-color);
1222
- --wm-pagination-disabled-bg: var(--wm-color-light-grey-300);
1223
- --wm-card-bg: var(--wm-background-light);
1224
- --wm-card-border-color: var(--wm-border-color);
1225
- --wm-card-shadow: 0px 3px 4px 0px var(--wm-border-color);
1226
1268
  --wm-scroll-bar-width: 6px;
1227
1269
  --wm-scroll-bar-height: 6px;
1228
1270
  --wm-scroll-bar-track-bg: var(--wm-color-surface-container-lowest);
@@ -1260,7 +1302,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1260
1302
  color: var(--wm-color-on-background);
1261
1303
  text-transform: none;
1262
1304
  -webkit-font-smoothing: antialiased;
1263
- overflow: auto;
1264
1305
  margin: 0;
1265
1306
  padding: 0;
1266
1307
  /** Reuasble style selectors with arguments */
@@ -1286,6 +1327,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1286
1327
  display: none;
1287
1328
  }
1288
1329
  .wm-app ul,
1330
+ .wm-app ol,
1289
1331
  .wm-app li {
1290
1332
  padding: 0;
1291
1333
  margin: 0;
@@ -10549,21 +10591,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
10549
10591
  .wm-app .app-popover-wrapper .disable-popover {
10550
10592
  pointer-events: none;
10551
10593
  }
10552
- .wm-app .app-button {
10553
- position: relative;
10554
- }
10555
- .wm-app .app-button .btn-caption {
10556
- margin: 0 0.2em;
10557
- vertical-align: middle;
10558
- }
10559
- .wm-app .app-button .btn-caption:empty {
10560
- margin: 0;
10561
- }
10562
- .wm-app .app-button .badge {
10563
- position: absolute;
10564
- top: 9pt;
10565
- right: 9pt;
10566
- }
10567
10594
  .wm-app .app-tree {
10568
10595
  padding: 0;
10569
10596
  margin: 0;
@@ -13509,95 +13536,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13509
13536
  .wm-app .nvtooltip {
13510
13537
  font-family: inherit;
13511
13538
  }
13512
- .wm-app .btn-transparent,
13513
- .wm-app .btn.btn-transparent {
13514
- background: 0 0 !important;
13515
- border: none !important;
13516
- box-shadow: none !important;
13517
- padding: 0;
13518
- text-align: center;
13519
- }
13520
- .wm-app .btn-transparent:hover,
13521
- .wm-app .btn.btn-transparent:hover {
13522
- color: inherit;
13523
- }
13524
- .wm-app .btn.btn-rounded {
13525
- border-radius: 500px;
13526
- padding: 0.45em 0.75em;
13527
- height: auto;
13528
- }
13529
- .wm-app .btn.btn-rounded > * {
13530
- vertical-align: middle;
13531
- }
13532
- .wm-app .btn.btn-fab {
13533
- font-size: 24px;
13534
- width: 38pt;
13535
- height: 38pt;
13536
- box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 2px 0, rgba(0, 0, 0, 0.239216) 0 1px 1px 0;
13537
- border-radius: 50%;
13538
- position: relative;
13539
- overflow: hidden;
13540
- line-height: normal;
13541
- padding: 0;
13542
- }
13543
- .wm-app .btn.btn-fab.btn-lg {
13544
- width: 48pt;
13545
- height: 48pt;
13546
- }
13547
- .wm-app .btn.btn-fab.btn-sm {
13548
- width: 30pt;
13549
- height: 30pt;
13550
- }
13551
- .wm-app .btn.btn-fab .app-icon {
13552
- padding: 0 0.06em;
13553
- vertical-align: middle;
13554
- }
13555
- .wm-app .btn.btn-raised:hover {
13556
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
13557
- }
13558
- .wm-app .btn.btn-raised:active {
13559
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
13560
- }
13561
- .wm-app .btn.btn-link {
13562
- box-shadow: none;
13563
- }
13564
- .wm-app .btn[icon-position="top"],
13565
- .wm-app a[icon-position="top"] {
13566
- height: auto;
13567
- text-align: center;
13568
- }
13569
13539
  .wm-app .rtl .app-grid-layout .app-grid-row .app-grid-column[horizontalalign="right"],
13570
13540
  .wm-app .rtl .app-top-nav [class^="col-"][horizontalalign="right"] {
13571
13541
  text-align: left !important;
13572
13542
  }
13573
- .wm-app .btn[icon-position="top"] .anchor-caption,
13574
- .wm-app .btn[icon-position="top"] .btn-caption,
13575
- .wm-app .btn[icon-position="top"] i.app-icon,
13576
- .wm-app a[icon-position="top"] .anchor-caption,
13577
- .wm-app a[icon-position="top"] .btn-caption,
13578
- .wm-app a[icon-position="top"] i.app-icon {
13579
- display: block;
13580
- }
13581
- .wm-app .btn[icon-position="right"],
13582
- .wm-app a[icon-position="right"] {
13583
- direction: rtl;
13584
- }
13585
- .wm-app .btn[icon-position="right"] i.app-icon,
13586
- .wm-app a[icon-position="right"] i.app-icon {
13587
- margin: 0 0 0 0.5em;
13588
- }
13589
- .wm-app .btn .badge,
13590
- .wm-app a .badge {
13591
- right: -1em;
13592
- top: -1em;
13593
- font-weight: 400;
13594
- z-index: 3;
13595
- }
13596
- .wm-app .btn .badge.btn-link,
13597
- .wm-app a .badge.btn-link {
13598
- top: 0;
13599
- right: 0;
13600
- }
13601
13543
  .wm-app .inline {
13602
13544
  display: inline;
13603
13545
  }
@@ -13749,9 +13691,37 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13749
13691
  left: 0;
13750
13692
  right: auto;
13751
13693
  }
13694
+ .wm-app .app-accordion.panel-group {
13695
+ display: flex;
13696
+ flex-direction: column;
13697
+ gap: var(--wm-accordion-group-gap);
13698
+ }
13699
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-title .accordion-toggle {
13700
+ width: 100%;
13701
+ align-items: flex-start;
13702
+ justify-content: flex-start;
13703
+ }
13704
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading > .panel-actions {
13705
+ display: flex;
13706
+ align-items: center;
13707
+ gap: var(--wm-panel-actions-gap);
13708
+ margin: calc(calc(var(--wm-panel-heading-padding) / 2)* -1);
13709
+ }
13710
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-collapse.collapse:not(.in) {
13711
+ display: none;
13712
+ }
13713
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-collapse > .panel-body {
13714
+ padding: var(--wm-panel-content-padding);
13715
+ }
13716
+ .wm-app .app-accordion.panel-group > .app-accordion-panel:has( > .panel-collapse.collapse:not(.in)) > .panel-heading {
13717
+ border-radius: inherit;
13718
+ }
13752
13719
  .wm-app a,
13753
13720
  .wm-app .app-anchor {
13754
- position: relative;
13721
+ display: inline-flex;
13722
+ align-items: center;
13723
+ justify-content: center;
13724
+ color: var(--wm-anchor-color);
13755
13725
  font-size: var(--wm-anchor-font-size);
13756
13726
  font-family: var(--wm-anchor-font-family);
13757
13727
  font-weight: var(--wm-anchor-font-weight);
@@ -13759,24 +13729,23 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13759
13729
  letter-spacing: var(--wm-anchor-letter-spacing);
13760
13730
  text-transform: var(--wm-anchor-text-transform);
13761
13731
  text-decoration: var(--wm-anchor-text-decoration);
13762
- color: var(--wm-anchor-color);
13763
- display: inline-flex;
13764
- align-items: center;
13765
- justify-content: center;
13766
13732
  gap: var(--wm-anchor-gap);
13767
13733
  cursor: pointer;
13768
13734
  }
13769
13735
  .wm-app a:hover,
13770
13736
  .wm-app .app-anchor:hover {
13771
13737
  --wm-anchor-color: var(--wm-anchor-color-hover);
13738
+ --wm-anchor-text-decoration: var(--wm-anchor-text-decoration-hover);
13772
13739
  }
13773
13740
  .wm-app a:focus,
13774
13741
  .wm-app .app-anchor:focus {
13775
13742
  --wm-anchor-color: var(--wm-anchor-color-focus);
13743
+ --wm-anchor-text-decoration: var(--wm-anchor-text-decoration-focus);
13776
13744
  }
13777
13745
  .wm-app a:active,
13778
13746
  .wm-app .app-anchor:active {
13779
13747
  --wm-anchor-color: var(--wm-anchor-color-active);
13748
+ --wm-anchor-text-decoration: var(--wm-anchor-text-decoration-active);
13780
13749
  }
13781
13750
  .wm-app a .anchor-caption:empty,
13782
13751
  .wm-app .app-anchor .anchor-caption:empty {
@@ -13799,6 +13768,79 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13799
13768
  .wm-app audio {
13800
13769
  display: inline-block;
13801
13770
  }
13771
+ .wm-app .app-breadcrumb {
13772
+ display: inline-flex;
13773
+ flex-wrap: wrap;
13774
+ row-gap: var(--wm-breadcrumb-gap);
13775
+ }
13776
+ .wm-app .app-breadcrumb > li {
13777
+ display: inline-flex;
13778
+ align-items: center;
13779
+ justify-content: center;
13780
+ gap: var(--wm-breadcrumb-item-gap);
13781
+ }
13782
+ .wm-app .app-breadcrumb > li > i {
13783
+ font-size: var(--wm-breadcrumb-item-icon-size);
13784
+ min-width: var(--wm-breadcrumb-item-icon-size);
13785
+ width: var(--wm-breadcrumb-item-icon-size);
13786
+ height: var(--wm-breadcrumb-item-icon-size);
13787
+ }
13788
+ .wm-app .app-breadcrumb > li > i[class=""] {
13789
+ display: none;
13790
+ }
13791
+ .wm-app .app-breadcrumb > li > a {
13792
+ flex-wrap: nowrap;
13793
+ font-size: var(--wm-breadcrumb-item-font-size);
13794
+ font-family: var(--wm-breadcrumb-item-font-family);
13795
+ font-weight: var(--wm-breadcrumb-item-font-weight);
13796
+ line-height: var(--wm-breadcrumb-item-line-height);
13797
+ letter-spacing: var(--wm-breadcrumb-item-letter-spacing);
13798
+ text-transform: var(--wm-breadcrumb-item-text-transform);
13799
+ text-decoration: var(--wm-breadcrumb-item-text-decoration);
13800
+ color: var(--wm-breadcrumb-item-color);
13801
+ }
13802
+ .wm-app .app-breadcrumb > li > a:hover {
13803
+ --wm-breadcrumb-item-color: var(--wm-breadcrumb-item-color-hover);
13804
+ --wm-breadcrumb-item-text-decoration: var(--wm-breadcrumb-item-text-decoration-hover);
13805
+ }
13806
+ .wm-app .app-breadcrumb > li > a:focus {
13807
+ --wm-breadcrumb-item-color: var(--wm-breadcrumb-item-color-focus);
13808
+ --wm-breadcrumb-item-text-decoration: var(--wm-breadcrumb-item-text-decoration-focus);
13809
+ }
13810
+ .wm-app .app-breadcrumb > li > a:active {
13811
+ --wm-breadcrumb-item-color: var(--wm-breadcrumb-item-color-active);
13812
+ --wm-breadcrumb-item-text-decoration: var(--wm-breadcrumb-item-text-decoration-active);
13813
+ }
13814
+ .wm-app .app-breadcrumb > li.active > label {
13815
+ font-size: var(--wm-breadcrumb-item-font-size);
13816
+ font-family: var(--wm-breadcrumb-item-font-family);
13817
+ font-weight: var(--wm-breadcrumb-item-font-weight);
13818
+ line-height: var(--wm-breadcrumb-item-line-height);
13819
+ letter-spacing: var(--wm-breadcrumb-item-letter-spacing);
13820
+ text-transform: var(--wm-breadcrumb-item-text-transform);
13821
+ }
13822
+ .wm-app .app-breadcrumb > li + li:before {
13823
+ content: "\f1d2";
13824
+ font-family: wavicon;
13825
+ display: inline-flex;
13826
+ align-items: center;
13827
+ justify-content: center;
13828
+ font-size: var(--wm-breadcrumb-item-separator-size);
13829
+ min-width: var(--wm-breadcrumb-item-separator-size);
13830
+ width: var(--wm-breadcrumb-item-separator-size);
13831
+ height: var(--wm-breadcrumb-item-separator-size);
13832
+ color: var(--wm-breadcrumb-item-separator-color);
13833
+ margin: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-1);
13834
+ }
13835
+ .wm-app .app-breadcrumb.classic li + li:before {
13836
+ content: "/";
13837
+ font-size: var(--wm-breadcrumb-item-separator-size);
13838
+ min-width: var(--wm-breadcrumb-item-separator-size);
13839
+ width: var(--wm-breadcrumb-item-separator-size);
13840
+ height: var(--wm-breadcrumb-item-separator-size);
13841
+ color: var(--wm-breadcrumb-item-separator-color);
13842
+ margin: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-1);
13843
+ }
13802
13844
  .wm-app .app-button-group {
13803
13845
  position: relative;
13804
13846
  display: inline-flex;
@@ -13862,6 +13904,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13862
13904
  .wm-app .btn .app-icon,
13863
13905
  .wm-app button .app-icon {
13864
13906
  padding: 0;
13907
+ font-size: var(--wm-btn-app-icon-size);
13908
+ min-width: var(--wm-btn-app-icon-size);
13909
+ width: var(--wm-btn-app-icon-size);
13910
+ height: var(--wm-btn-app-icon-size);
13911
+ margin-left: calc(calc(var(--wm-btn-app-icon-size) / 3)* -1);
13865
13912
  }
13866
13913
  .wm-app .btn .btn-caption,
13867
13914
  .wm-app button .btn-caption {
@@ -13899,6 +13946,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13899
13946
  --wm-btn-min-width: var(--wm-btn-xs-min-width);
13900
13947
  --wm-btn-height: var(--wm-btn-xs-height);
13901
13948
  --wm-btn-gap: var(--wm-btn-xs-gap);
13949
+ --wm-btn-app-icon-size: var(--wm-btn-xs-icon-size);
13950
+ --wm-btn-icon-width: var(--wm-btn-icon-xs-width);
13951
+ --wm-btn-icon-height: var(--wm-btn-icon-xs-height);
13952
+ --wm-btn-icon-size: var(--wm-btn-icon-xs-size);
13902
13953
  }
13903
13954
  .wm-app .btn-sm,
13904
13955
  .wm-app button-sm {
@@ -13912,6 +13963,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13912
13963
  --wm-btn-min-width: var(--wm-btn-sm-min-width);
13913
13964
  --wm-btn-height: var(--wm-btn-sm-height);
13914
13965
  --wm-btn-gap: var(--wm-btn-sm-gap);
13966
+ --wm-btn-app-icon-size: var(--wm-btn-sm-icon-size);
13967
+ --wm-btn-icon-width: var(--wm-btn-icon-sm-width);
13968
+ --wm-btn-icon-height: var(--wm-btn-icon-sm-height);
13969
+ --wm-btn-icon-size: var(--wm-btn-icon-sm-size);
13915
13970
  }
13916
13971
  .wm-app .btn-lg,
13917
13972
  .wm-app button-lg {
@@ -13925,6 +13980,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
13925
13980
  --wm-btn-min-width: var(--wm-btn-lg-min-width);
13926
13981
  --wm-btn-height: var(--wm-btn-lg-height);
13927
13982
  --wm-btn-gap: var(--wm-btn-lg-gap);
13983
+ --wm-btn-app-icon-size: var(--wm-btn-lg-icon-size);
13984
+ --wm-btn-icon-width: var(--wm-btn-icon-lg-width);
13985
+ --wm-btn-icon-height: var(--wm-btn-icon-lg-height);
13986
+ --wm-btn-icon-size: var(--wm-btn-icon-lg-size);
13928
13987
  }
13929
13988
  .wm-app .btn-block,
13930
13989
  .wm-app button-block {
@@ -14094,11 +14153,22 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14094
14153
  .wm-app button-icon {
14095
14154
  width: var(--wm-btn-icon-width);
14096
14155
  height: var(--wm-btn-icon-height);
14156
+ min-height: var(--wm-btn-icon-height);
14097
14157
  margin: var(--wm-btn-icon-margin);
14098
14158
  --wm-btn-padding: var(--wm-btn-icon-padding);
14099
- --wm-btn-font-size: var(--wm-btn-icon-size);
14100
14159
  --wm-btn-radius: var(--wm-btn-icon-radius);
14101
14160
  }
14161
+ .wm-app .btn-icon .app-icon,
14162
+ .wm-app button-icon .app-icon {
14163
+ margin: 0;
14164
+ }
14165
+ .wm-app .btn-icon .btn-caption,
14166
+ .wm-app button-icon .btn-caption {
14167
+ width: 100%;
14168
+ white-space: nowrap;
14169
+ overflow: hidden;
14170
+ text-overflow: ellipsis;
14171
+ }
14102
14172
  .wm-app .btn.disabled,
14103
14173
  .wm-app button.disabled,
14104
14174
  .wm-app .btn[disabled],
@@ -14163,22 +14233,26 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14163
14233
  }
14164
14234
  .wm-app .app-panel,
14165
14235
  .wm-app .panel {
14166
- position: relative;
14236
+ width: 100%;
14167
14237
  background: var(--wm-panel-background);
14168
14238
  border-radius: var(--wm-panel-radius);
14169
14239
  box-shadow: var(--wm-panel-shadow);
14170
14240
  }
14171
14241
  .wm-app .app-panel > .panel-heading,
14172
14242
  .wm-app .panel > .panel-heading {
14243
+ width: 100%;
14244
+ display: flex;
14173
14245
  padding: var(--wm-panel-heading-padding);
14174
14246
  background: var(--wm-panel-heading-background);
14175
- border-top-left-radius: var(--wm-panel-radius);
14176
- border-top-right-radius: var(--wm-panel-radius);
14247
+ border-top-left-radius: inherit;
14248
+ border-top-right-radius: inherit;
14177
14249
  }
14178
14250
  .wm-app .app-panel > .panel-heading .panel-title,
14179
14251
  .wm-app .panel > .panel-heading .panel-title {
14252
+ width: 100%;
14180
14253
  display: flex;
14181
14254
  justify-content: flex-start;
14255
+ align-items: center;
14182
14256
  gap: var(--wm-panel-heading-gap);
14183
14257
  }
14184
14258
  .wm-app .app-panel > .panel-heading .panel-title .panel-toggle,
@@ -14190,6 +14264,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14190
14264
  gap: var(--wm-panel-heading-gap);
14191
14265
  color: var(--wm-panel-heading-color);
14192
14266
  }
14267
+ .wm-app .app-panel > .panel-heading .panel-title .panel-actions,
14268
+ .wm-app .panel > .panel-heading .panel-title .panel-actions {
14269
+ margin: calc(calc(var(--wm-panel-heading-padding) / 2)* -1);
14270
+ }
14193
14271
  .wm-app .app-panel > .panel-heading .panel-title .panel-actions:not(:empty),
14194
14272
  .wm-app .panel > .panel-heading .panel-title .panel-actions:not(:empty) {
14195
14273
  display: flex;
@@ -14198,7 +14276,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14198
14276
  }
14199
14277
  .wm-app .app-panel > .panel-heading .panel-title .panel-actions .panel-action,
14200
14278
  .wm-app .panel > .panel-heading .panel-title .panel-actions .panel-action {
14201
- --wm-btn-state-layer-color: var(--wm-panel-heading-color);
14279
+ margin: var(--wm-space-0);
14202
14280
  }
14203
14281
  .wm-app .app-panel > .panel-heading .panel-title .heading,
14204
14282
  .wm-app .panel > .panel-heading .panel-title .heading {
@@ -14274,6 +14352,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14274
14352
  .wm-app .panel > .app-panel-footer {
14275
14353
  padding: var(--wm-panel-footer-padding);
14276
14354
  border-top: var(--wm-panel-footer-border-width) var(--wm-panel-footer-border-style) var(--wm-panel-footer-border);
14355
+ border-bottom-left-radius: inherit;
14356
+ border-bottom-right-radius: inherit;
14277
14357
  }
14278
14358
  .wm-app .app-panel.show-help > .panel-content > .panel-body.show-help,
14279
14359
  .wm-app .panel.show-help > .panel-content > .panel-body.show-help {
@@ -14349,6 +14429,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14349
14429
  display: flex;
14350
14430
  flex-direction: row;
14351
14431
  flex-wrap: wrap;
14432
+ width: calc(100% + var(--wm-card-list-gap));
14433
+ margin: calc(calc(var(--wm-card-list-gap) / 2) * -1);
14352
14434
  }
14353
14435
  .wm-app .app-livelist.list-card .list-group .app-list-item {
14354
14436
  background: none;
@@ -14367,6 +14449,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14367
14449
  margin-top: var(--wm-panel-footer-padding);
14368
14450
  }
14369
14451
  .wm-app .app-card {
14452
+ display: flex;
14453
+ flex-direction: column;
14454
+ width: 100%;
14370
14455
  background: var(--wm-card-background);
14371
14456
  border: var(--wm-card-border-width) var(--wm-card-border-style) var(--wm-card-border-color);
14372
14457
  border-radius: var(--wm-card-border-radius);
@@ -14383,8 +14468,26 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14383
14468
  opacity: var(--wm-card-state-layer-opacity);
14384
14469
  border-radius: inherit;
14385
14470
  }
14471
+ .wm-app .app-card .app-card-header {
14472
+ background: none;
14473
+ }
14474
+ .wm-app .app-card .app-card-header + .app-card-image {
14475
+ border-radius: var(--wm-radius-none);
14476
+ }
14477
+ .wm-app .app-card > .app-card-image {
14478
+ overflow: hidden;
14479
+ border-top-left-radius: inherit;
14480
+ border-top-right-radius: inherit;
14481
+ }
14482
+ .wm-app .app-card > .app-card-image .app-picture {
14483
+ width: 100%;
14484
+ height: 100%;
14485
+ object-fit: cover;
14486
+ object-position: center;
14487
+ }
14386
14488
  .wm-app .app-card .app-card-content {
14387
14489
  padding: var(--wm-card-body-padding);
14490
+ flex: 1;
14388
14491
  }
14389
14492
  .wm-app .app-card .app-card-footer {
14390
14493
  padding: var(--wm-card-footer-padding);
@@ -14402,17 +14505,17 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
14402
14505
  --wm-card-shadow: var(--wm-card-shadow-active);
14403
14506
  --wm-card-state-layer-opacity: var(--wm-card-state-layer-opacity-active);
14404
14507
  }
14405
- .wm-app .app-card.card-elevation {
14508
+ .wm-app .app-card.card-elevated {
14406
14509
  --wm-card-border-width: var(--wm-card-elevation-border-width);
14407
14510
  --wm-card-shadow: var(--wm-card-elevation-shadow);
14408
14511
  }
14409
- .wm-app .app-card.card-elevation:hover {
14512
+ .wm-app .app-card.card-elevated:hover {
14410
14513
  --wm-card-shadow: var(--wm-card-elevation-shadow-hover);
14411
14514
  }
14412
- .wm-app .app-card.card-elevation:focus {
14515
+ .wm-app .app-card.card-elevated:focus {
14413
14516
  --wm-card-shadow: var(--wm-card-elevation-shadow-focus);
14414
14517
  }
14415
- .wm-app .app-card.card-elevation:active {
14518
+ .wm-app .app-card.card-elevated:active {
14416
14519
  --wm-card-shadow: var(--wm-card-elevation-shadow-active);
14417
14520
  }
14418
14521
  .wm-app .app-card.card-filled {
@@ -15039,6 +15142,39 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15039
15142
  position: relative;
15040
15143
  display: inline-flex;
15041
15144
  }
15145
+ .wm-app .dropdown.app-menu .btn > .anchor-caption,
15146
+ .wm-app .dropdown.app-menu a > .anchor-caption,
15147
+ .wm-app .dropdown.app-menu .btn > .btn-caption,
15148
+ .wm-app .dropdown.app-menu a > .btn-caption {
15149
+ width: 100%;
15150
+ white-space: nowrap;
15151
+ overflow: hidden;
15152
+ text-overflow: ellipsis;
15153
+ text-align: left;
15154
+ }
15155
+ .wm-app .dropdown.app-menu .btn .caret,
15156
+ .wm-app .dropdown.app-menu a .caret {
15157
+ margin: 0;
15158
+ display: inline-flex;
15159
+ justify-content: center;
15160
+ align-items: center;
15161
+ position: absolute;
15162
+ right: calc(var(--wm-dropdown-menu-caret-size) / 1.5);
15163
+ width: var(--wm-dropdown-menu-caret-size);
15164
+ height: var(--wm-dropdown-menu-caret-size);
15165
+ font-size: var(--wm-dropdown-menu-caret-size);
15166
+ transform: rotate(180deg);
15167
+ }
15168
+ .wm-app .dropdown.app-menu .btn:has(> .caret),
15169
+ .wm-app .dropdown.app-menu a:has(> .caret) {
15170
+ padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2) !important;
15171
+ }
15172
+ .wm-app .dropdown.app-menu:not(.open) > .btn .caret {
15173
+ transform: rotate(0deg);
15174
+ }
15175
+ .wm-app .dropdown.app-menu:not(.open) > .dropdown-menu {
15176
+ display: none;
15177
+ }
15042
15178
  .wm-app .dropdown.app-menu .dropdown-menu {
15043
15179
  display: flex;
15044
15180
  flex-direction: column;
@@ -15120,6 +15256,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15120
15256
  .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > a {
15121
15257
  padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2);
15122
15258
  }
15259
+ .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > a .caret {
15260
+ transform: rotate(0deg);
15261
+ }
15123
15262
  .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu > .dropdown-menu {
15124
15263
  display: none;
15125
15264
  top: 0;
@@ -15132,6 +15271,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15132
15271
  .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
15133
15272
  display: flex;
15134
15273
  }
15274
+ .wm-app .dropdown.app-menu .dropdown-menu .dropdown-submenu:hover > a .caret {
15275
+ transform: rotate(180deg);
15276
+ }
15135
15277
  .wm-app .dropdown.app-menu .dropdown-menu.pull-right {
15136
15278
  left: auto;
15137
15279
  right: 0;
@@ -15151,12 +15293,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15151
15293
  .wm-app .dropdown.app-menu .dropdown-menu.dropinline-menu.horizontal .dropdown-submenu > .dropdown-menu {
15152
15294
  padding: var(--wm-dropdown-menu-horizontal-inline-submenu-padding);
15153
15295
  }
15154
- .wm-app .dropdown.app-menu:not(.open) > .btn .caret {
15155
- transform: rotate(0deg);
15156
- }
15157
- .wm-app .dropdown.app-menu:not(.open) > .dropdown-menu {
15158
- display: none;
15159
- }
15160
15296
  .wm-app .dropdown.app-menu.dropup > .dropdown-menu {
15161
15297
  bottom: 100%;
15162
15298
  top: auto;
@@ -15176,33 +15312,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15176
15312
  .wm-app .dropdown.app-menu[menuposition="inline"] > .dropdown-toggle {
15177
15313
  align-self: flex-start;
15178
15314
  }
15179
- .wm-app .dropdown.app-menu .btn > .anchor-caption,
15180
- .wm-app .dropdown.app-menu a > .anchor-caption,
15181
- .wm-app .dropdown.app-menu .btn > .btn-caption,
15182
- .wm-app .dropdown.app-menu a > .btn-caption {
15183
- width: 100%;
15184
- white-space: nowrap;
15185
- overflow: hidden;
15186
- text-overflow: ellipsis;
15187
- text-align: left;
15188
- }
15189
- .wm-app .dropdown.app-menu .btn .caret,
15190
- .wm-app .dropdown.app-menu a .caret {
15191
- margin: 0;
15192
- display: inline-flex;
15193
- justify-content: center;
15194
- align-items: center;
15195
- position: absolute;
15196
- right: calc(var(--wm-dropdown-menu-caret-size) / 1.5);
15197
- width: var(--wm-dropdown-menu-caret-size);
15198
- height: var(--wm-dropdown-menu-caret-size);
15199
- font-size: var(--wm-dropdown-menu-caret-size);
15200
- transform: rotate(180deg);
15201
- }
15202
- .wm-app .dropdown.app-menu .btn:has(> .caret),
15203
- .wm-app .dropdown.app-menu a:has(> .caret) {
15204
- padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2) !important;
15205
- }
15206
15315
  .wm-app .wm-app .app-fileupload {
15207
15316
  position: relative;
15208
15317
  overflow: hidden;
@@ -15353,21 +15462,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15353
15462
  border-radius: var(--wm-panel-radius);
15354
15463
  }
15355
15464
  .wm-app .app-grid-layout {
15465
+ width: 100%;
15356
15466
  display: flex;
15357
15467
  flex-direction: column;
15358
15468
  flex-wrap: wrap;
15359
- position: relative;
15360
- width: 100%;
15469
+ gap: var(--wm-grid-layout-row-gap);
15470
+ padding: var(--wm-grid-layout-column-padding);
15361
15471
  }
15362
15472
  .wm-app .app-grid-layout > .app-grid-row {
15473
+ width: 100%;
15363
15474
  display: flex;
15364
15475
  flex-direction: row;
15365
15476
  flex-wrap: wrap;
15366
- position: relative;
15367
- width: 100%;
15368
15477
  }
15369
15478
  .wm-app .app-grid-layout > .app-grid-row > .app-grid-column {
15370
- position: relative;
15371
15479
  height: auto;
15372
15480
  overflow: inherit;
15373
15481
  border-width: 0;
@@ -15460,6 +15568,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15460
15568
  margin: 0;
15461
15569
  display: inline-block;
15462
15570
  width: auto;
15571
+ font-weight: inherit;
15463
15572
  }
15464
15573
  .wm-app p,
15465
15574
  .wm-app .app-label.p,
@@ -15758,7 +15867,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15758
15867
  }
15759
15868
  .wm-app .app-nav.nav .app-nav-item > .app-anchor,
15760
15869
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor,
15761
- .wm-app .app-nav.nav .app-nav-item > .app-button {
15870
+ .wm-app .app-nav.nav .app-nav-item > .app-button,
15871
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor {
15762
15872
  position: relative;
15763
15873
  width: 100%;
15764
15874
  min-height: var(--wm-nav-item-min-height);
@@ -15770,19 +15880,23 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15770
15880
  letter-spacing: var(--wm-nav-item-letter-spacing);
15771
15881
  border-radius: var(--wm-nav-item-radius);
15772
15882
  gap: var(--wm-nav-item-gap);
15883
+ text-decoration: none;
15773
15884
  }
15774
15885
  .wm-app .app-nav.nav .app-nav-item > .app-anchor .app-icon,
15775
15886
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor .app-icon,
15776
- .wm-app .app-nav.nav .app-nav-item > .app-button .app-icon {
15887
+ .wm-app .app-nav.nav .app-nav-item > .app-button .app-icon,
15888
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
15777
15889
  margin-left: calc(var(--wm-space-2) * -1);
15778
15890
  }
15779
15891
  .wm-app .app-nav.nav .app-nav-item > .app-anchor,
15780
- .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor {
15892
+ .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor,
15893
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor {
15781
15894
  background: var(--wm-nav-item-background);
15782
15895
  color: var(--wm-nav-item-color);
15783
15896
  }
15784
15897
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:before,
15785
- .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:before {
15898
+ .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:before,
15899
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:before {
15786
15900
  content: "";
15787
15901
  top: 0;
15788
15902
  left: 0;
@@ -15796,28 +15910,37 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15796
15910
  }
15797
15911
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:hover::before,
15798
15912
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:hover::before,
15913
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover::before,
15799
15914
  .wm-app .app-nav.nav .app-nav-item > .app-anchor.hover::before,
15800
- .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.hover::before {
15915
+ .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.hover::before,
15916
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before {
15801
15917
  opacity: var(--wm-nav-item-hover-state-layer-opacity);
15802
15918
  }
15803
15919
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:focus::before,
15804
15920
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:focus::before,
15921
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus::before,
15805
15922
  .wm-app .app-nav.nav .app-nav-item > .app-anchor.focus::before,
15806
- .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.focus::before {
15923
+ .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.focus::before,
15924
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before {
15807
15925
  opacity: var(--wm-nav-item-focus-state-layer-opacity);
15808
15926
  }
15809
15927
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:active::before,
15810
15928
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:active::before,
15929
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:active::before,
15811
15930
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:active:focus::before,
15812
15931
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:active:focus::before,
15932
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus::before,
15813
15933
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:active:hover::before,
15814
15934
  .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:active:hover::before,
15935
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover::before,
15815
15936
  .wm-app .app-nav.nav .app-nav-item > .app-anchor:active.focus::before,
15816
- .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:active.focus::before {
15937
+ .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
15938
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before {
15817
15939
  opacity: var(--wm-nav-item-active-state-layer-opacity);
15818
15940
  }
15819
15941
  .wm-app .app-nav.nav .app-nav-item > .app-anchor.active,
15820
- .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.active {
15942
+ .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor.active,
15943
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor.active {
15821
15944
  --wm-nav-item-background: var(--wm-nav-item-background-selected);
15822
15945
  --wm-nav-item-color: var(--wm-nav-item-color-selected);
15823
15946
  }
@@ -16030,7 +16153,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16030
16153
  min-width: var(--wm-aside-nav-item-icon-size);
16031
16154
  width: var(--wm-aside-nav-item-icon-size);
16032
16155
  height: var(--wm-aside-nav-item-icon-size);
16033
- margin-left: calc(var(--wm-space-2) * -1);
16156
+ margin-left: calc(calc(var(--wm-aside-nav-item-icon-size) / 3)* -1);
16034
16157
  }
16035
16158
  .wm-app .app-page .app-left-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
16036
16159
  .wm-app .app-page .app-right-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
@@ -16585,9 +16708,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16585
16708
  display: inline-flex;
16586
16709
  justify-content: center;
16587
16710
  align-items: center;
16588
- max-width: 100%;
16589
16711
  width: auto;
16590
16712
  height: auto;
16713
+ max-width: 100%;
16714
+ max-height: 100%;
16715
+ aspect-ratio: auto;
16591
16716
  cursor: default;
16592
16717
  }
16593
16718
  .wm-app .app-picture.img-rounded {
@@ -16858,6 +16983,145 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16858
16983
  justify-content: center;
16859
16984
  gap: var(--wm-space-2);
16860
16985
  }
16986
+ .wm-app .app-tabs {
16987
+ width: 100%;
16988
+ display: flex;
16989
+ flex-direction: column;
16990
+ justify-content: flex-start;
16991
+ background: var(--wm-tabs-background);
16992
+ }
16993
+ .wm-app .app-tabs > .nav-tabs {
16994
+ display: flex;
16995
+ align-items: stretch;
16996
+ border-bottom: var(--wm-tabs-nav-border-width) var(--wm-tabs-nav-border-style) var(--wm-tabs-nav-border-color);
16997
+ }
16998
+ .wm-app .app-tabs > .nav-tabs > .tab-header {
16999
+ display: inline-flex;
17000
+ align-items: center;
17001
+ }
17002
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading {
17003
+ display: flex;
17004
+ justify-content: center;
17005
+ align-items: center;
17006
+ height: 100%;
17007
+ min-height: var(--wm-tabs-item-heading-height);
17008
+ padding: var(--wm-tabs-item-heading-padding);
17009
+ font-family: var(--wm-tabs-item-heading-font-family);
17010
+ font-size: var(--wm-tabs-item-heading-font-size);
17011
+ line-height: var(--wm-tabs-item-heading-line-height);
17012
+ font-weight: var(--wm-tabs-item-heading-font-weight);
17013
+ letter-spacing: var(--wm-tabs-item-heading-letter-spacing);
17014
+ color: var(--wm-tabs-item-heading-color);
17015
+ }
17016
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:before {
17017
+ content: "";
17018
+ position: absolute;
17019
+ inset: 0;
17020
+ pointer-events: none;
17021
+ border-radius: inherit;
17022
+ opacity: 0;
17023
+ background: var(--wm-tabs-item-heading-state-layer-color);
17024
+ }
17025
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:after {
17026
+ content: "";
17027
+ position: absolute;
17028
+ bottom: 0px;
17029
+ height: var(--wm-tabs-item-heading-indicator-height);
17030
+ width: var(--wm-tabs-item-heading-indicator-width);
17031
+ background: var(--wm-tabs-item-heading-indicator-background);
17032
+ border-radius: var(--wm-tabs-item-heading-indicator-radius);
17033
+ transform: scale(0);
17034
+ transition: all 0.2s ease-in-out;
17035
+ }
17036
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:hover:before {
17037
+ opacity: var(--wm-tabs-item-heading-hover-state-layer-opacity);
17038
+ }
17039
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:focus:before {
17040
+ opacity: var(--wm-tabs-item-heading-focus-state-layer-opacity);
17041
+ }
17042
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:active:before {
17043
+ opacity: var(--wm-tabs-item-heading-active-state-layer-opacity);
17044
+ }
17045
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading span:empty {
17046
+ display: none;
17047
+ }
17048
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading[icon-position="right"] {
17049
+ flex-direction: row-reverse;
17050
+ }
17051
+ .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading[icon-position="top"] {
17052
+ flex-direction: column;
17053
+ }
17054
+ .wm-app .app-tabs > .nav-tabs > .tab-header.active .tab-heading:after {
17055
+ transform: scale(1);
17056
+ transition: all 0.2s ease-in-out;
17057
+ }
17058
+ .wm-app .app-tabs > .nav-tabs > .tab-header.disabled .tab-heading {
17059
+ opacity: 0.5;
17060
+ cursor: not-allowed;
17061
+ }
17062
+ .wm-app .app-tabs > .nav-tabs > .tab-header.disabled .tab-heading:before,
17063
+ .wm-app .app-tabs > .nav-tabs > .tab-header.disabled .tab-heading:after {
17064
+ display: none;
17065
+ }
17066
+ .wm-app .app-tabs > .nav-tabs.nav-stacked {
17067
+ min-width: 220px;
17068
+ width: 220px;
17069
+ height: auto;
17070
+ flex-direction: column;
17071
+ border: none;
17072
+ border-right: var(--wm-tabs-nav-border-width) var(--wm-tabs-nav-border-style) var(--wm-tabs-nav-border-color);
17073
+ }
17074
+ .wm-app .app-tabs > .nav-tabs.nav-stacked > .tab-header {
17075
+ width: 100%;
17076
+ }
17077
+ .wm-app .app-tabs > .nav-tabs.nav-stacked > .tab-header .tab-heading {
17078
+ width: 100%;
17079
+ justify-content: flex-start;
17080
+ }
17081
+ .wm-app .app-tabs > .tab-content {
17082
+ max-width: 100%;
17083
+ height: 100%;
17084
+ background: var(--wm-tabs-content-background);
17085
+ }
17086
+ .wm-app .app-tabs > .tab-content > .tab-pane:not(.active) {
17087
+ display: none;
17088
+ }
17089
+ .wm-app .app-tabs > .tab-content > .tab-pane > .tab-body {
17090
+ padding: var(--wm-tabs-body-padding);
17091
+ min-height: var(--wm-tabs-body-height);
17092
+ }
17093
+ .wm-app .app-tabs > .tab-content.tab-stacked {
17094
+ height: auto;
17095
+ width: 100%;
17096
+ }
17097
+ .wm-app .app-tabs > .tab-content.tab-stacked > .tab-pane {
17098
+ height: 100%;
17099
+ }
17100
+ .wm-app .app-tabs > .tab-content.tab-stacked > .tab-pane > .tab-body {
17101
+ height: 100%;
17102
+ }
17103
+ .wm-app .app-tabs[tabsposition="left"] {
17104
+ flex-direction: row;
17105
+ }
17106
+ .wm-app .app-tabs[tabsposition="right"] {
17107
+ flex-direction: row;
17108
+ }
17109
+ .wm-app .app-tabs[tabsposition="right"] > .nav-tabs.nav-stacked {
17110
+ border: none;
17111
+ border-left: var(--wm-tabs-nav-border-width) var(--wm-tabs-nav-border-style) var(--wm-tabs-nav-border-color);
17112
+ }
17113
+ .wm-app .app-tabs[tabsposition="bottom"] > .nav-tabs {
17114
+ border: none;
17115
+ border-top: var(--wm-tabs-nav-border-width) var(--wm-tabs-nav-border-style) var(--wm-tabs-nav-border-color);
17116
+ }
17117
+ .wm-app .app-tabs[tabsposition="bottom"] > .nav-tabs > .tab-header .tab-heading:after {
17118
+ bottom: auto;
17119
+ top: 0px;
17120
+ transform: scale(0) rotateX(180deg);
17121
+ }
17122
+ .wm-app .app-tabs[tabsposition="bottom"] > .nav-tabs > .tab-header.active .tab-heading:after {
17123
+ transform: scale(1) rotateX(180deg);
17124
+ }
16861
17125
  .wm-app .app-textarea {
16862
17126
  position: relative;
16863
17127
  padding: var(--wm-form-control-padding) var(--wm-form-control-padding) calc(var(--wm-form-control-padding) * 0.85);