@ihk-gfi/lux-components-theme 21.3.0 → 21.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +1560 -101
  2. package/package.json +1 -1
  3. package/prebuilt-themes/luxtheme-authentic-min.css +1 -1
  4. package/prebuilt-themes/luxtheme-authentic-min.css.map +1 -1
  5. package/prebuilt-themes/luxtheme-authentic.css +520 -25
  6. package/prebuilt-themes/luxtheme-authentic.css.map +1 -1
  7. package/prebuilt-themes/luxtheme-green-min.css +1 -1
  8. package/prebuilt-themes/luxtheme-green-min.css.map +1 -1
  9. package/prebuilt-themes/luxtheme-green.css +521 -26
  10. package/prebuilt-themes/luxtheme-green.css.map +1 -1
  11. package/src/base-templates/common/_luxstyles.scss +7 -8
  12. package/src/base-templates/common/_luxutilities.scss +343 -0
  13. package/src/base-templates/components/_luxAccordion.scss +22 -3
  14. package/src/base-templates/components/_luxCard.scss +25 -2
  15. package/src/base-templates/components/_luxFormControlWrapper.scss +37 -13
  16. package/src/base-templates/components/_luxList.scss +1 -1
  17. package/src/base-templates/components/_luxMenu.scss +1 -0
  18. package/src/base-templates/components/_luxMessagebox.scss +11 -0
  19. package/src/base-templates/components/_luxPaginator.scss +7 -0
  20. package/src/base-templates/components/_luxSnackbar.scss +1 -0
  21. package/src/base-templates/components/_luxStepper.scss +12 -1
  22. package/src/base-templates/components/_luxTabs.scss +21 -4
  23. package/src/base-templates/components/_luxTenantLogo.scss +27 -0
  24. package/src/base-templates/components/_luxTile.scss +5 -3
  25. package/src/base-templates/components/_luxTimepicker.scss +7 -0
  26. package/src/theme-authentic/_variables.scss +4 -0
  27. package/src/theme-authentic/lux-authentic.scss +4 -0
  28. package/src/theme-green/_variables.scss +5 -1
  29. package/src/theme-green/lux-green.scss +4 -0
@@ -1625,7 +1625,9 @@
1625
1625
  --lux-theme-radius-xxl: 999px;
1626
1626
  --lux-theme-spacing-xxs: 2px;
1627
1627
  --lux-theme-spacing-xs: 4px;
1628
+ --lux-theme-spacing-1-5: 6px;
1628
1629
  --lux-theme-spacing-sm: 8px;
1630
+ --lux-theme-spacing-3: 12px;
1629
1631
  --lux-theme-spacing-md: 16px;
1630
1632
  --lux-theme-spacing-lg: 24px;
1631
1633
  --lux-theme-spacing-xl: 32px;
@@ -1636,6 +1638,7 @@
1636
1638
  --lux-theme-font-size-md: 1rem;
1637
1639
  --lux-theme-font-size-lg: 1.125rem;
1638
1640
  --lux-theme-font-size-xl: 1.25rem;
1641
+ --lux-theme-font-size-2xl: 1.5rem;
1639
1642
  --lux-theme-primary-color: #003366;
1640
1643
  --lux-theme-accent-color: ;
1641
1644
  --lux-theme-warn-color: #ba1a1a;
@@ -1757,6 +1760,7 @@
1757
1760
  --lux-theme-snackbar-orange: #ec9c1b;
1758
1761
  --lux-theme-snackbar-yellow: #fbd12c;
1759
1762
  --lux-theme-snackbar-white: #ffffff;
1763
+ --lux-theme-accordion-panel-container-elevation-shadow-width: 1px;
1760
1764
  --lux-theme-accordion-header-color-neutral: var(--lux-theme-app-content-bg);
1761
1765
  --lux-theme-accordion-header-color-on-neutral: var(--lux-theme-dark-primary-text);
1762
1766
  --lux-theme-accordion-header-hover-color-on-neutral: var(--lux-theme-app-content-bg);
@@ -2204,8 +2208,8 @@
2204
2208
  --mat-progress-bar-track-shape: 0;
2205
2209
  --mat-progress-bar-active-indicator-color: var(--mat-sys-primary);
2206
2210
  --mat-progress-bar-track-color: var(--mat-sys-surface-variant);
2207
- --mat-tooltip-container-color: var(--mat-sys-inverse-surface);
2208
2211
  --mat-tooltip-container-shape: 4px;
2212
+ --mat-tooltip-container-color: var(--mat-sys-inverse-surface);
2209
2213
  --mat-tooltip-supporting-text-color: var(--mat-sys-inverse-on-surface);
2210
2214
  --mat-tooltip-supporting-text-font: Source Sans Pro;
2211
2215
  --mat-tooltip-supporting-text-line-height: 1rem;
@@ -3584,14 +3588,6 @@ lux-card.lux-card-grow mat-card-content {
3584
3588
  opacity: 0.6;
3585
3589
  }
3586
3590
 
3587
- .lux-overflow-y-hidden {
3588
- overflow-y: hidden;
3589
- }
3590
-
3591
- .lux-overflow-y-auto {
3592
- overflow-y: auto;
3593
- }
3594
-
3595
3591
  .lux-overflow-wrap-break-word {
3596
3592
  overflow-wrap: break-word;
3597
3593
  }
@@ -3659,6 +3655,7 @@ lux-card.lux-card-grow mat-card-content {
3659
3655
  }
3660
3656
 
3661
3657
  /*
3658
+ @deprecated Verwende stattdessen .lux-z-{n} aus _luxutilities.scss (z.B. .lux-z-100).
3662
3659
  Erstellt die Z-Indizes.
3663
3660
  Um weitere Z-Indizes anzulegen, die Variable zindexSteps um die entsprechenden Werte ergaenzen.
3664
3661
  */
@@ -36329,9 +36326,393 @@ lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd).lux-text-hig
36329
36326
  grid-auto-rows: minmax(0, 1fr);
36330
36327
  }
36331
36328
  }
36329
+ :root {
36330
+ --lux-focus-state-layer-color: color-mix(in srgb, var(--lux-theme-primary-color) 12%, transparent);
36331
+ --lux-z-action-bar: 8;
36332
+ --lux-z-header: 100;
36333
+ --lux-z-backdrop: 199;
36334
+ --lux-z-drawer: 200;
36335
+ --lux-z-skip-link: 10000;
36336
+ }
36337
+
36338
+ .lux-static {
36339
+ position: static;
36340
+ }
36341
+
36342
+ .lux-relative {
36343
+ position: relative;
36344
+ }
36345
+
36346
+ .lux-absolute {
36347
+ position: absolute;
36348
+ }
36349
+
36350
+ .lux-fixed {
36351
+ position: fixed;
36352
+ }
36353
+
36354
+ .lux-sticky {
36355
+ position: sticky;
36356
+ }
36357
+
36358
+ .lux-inset-0 {
36359
+ inset: 0;
36360
+ }
36361
+
36362
+ .lux-top-0 {
36363
+ top: 0;
36364
+ }
36365
+
36366
+ .lux-right-0 {
36367
+ right: 0;
36368
+ }
36369
+
36370
+ .lux-bottom-0 {
36371
+ bottom: 0;
36372
+ }
36373
+
36374
+ .lux-left-0 {
36375
+ left: 0;
36376
+ }
36377
+
36378
+ .lux-inset-auto {
36379
+ inset: auto;
36380
+ }
36381
+
36382
+ .lux-top-auto {
36383
+ top: auto;
36384
+ }
36385
+
36386
+ .lux-right-auto {
36387
+ right: auto;
36388
+ }
36389
+
36390
+ .lux-bottom-auto {
36391
+ bottom: auto;
36392
+ }
36393
+
36394
+ .lux-left-auto {
36395
+ left: auto;
36396
+ }
36397
+
36398
+ .lux-z-auto {
36399
+ z-index: auto;
36400
+ }
36401
+
36402
+ .lux-z-0 {
36403
+ z-index: 0;
36404
+ }
36405
+
36406
+ .lux-z-1 {
36407
+ z-index: 1;
36408
+ }
36409
+
36410
+ .lux-z-5 {
36411
+ z-index: 5;
36412
+ }
36413
+
36414
+ .lux-z-8 {
36415
+ z-index: 8;
36416
+ }
36417
+
36418
+ .lux-z-9 {
36419
+ z-index: 9;
36420
+ }
36421
+
36422
+ .lux-z-10 {
36423
+ z-index: 10;
36424
+ }
36425
+
36426
+ .lux-z-100 {
36427
+ z-index: 100;
36428
+ }
36429
+
36430
+ .lux-z-199 {
36431
+ z-index: 199;
36432
+ }
36433
+
36434
+ .lux-z-200 {
36435
+ z-index: 200;
36436
+ }
36437
+
36438
+ .lux-z-500 {
36439
+ z-index: 500;
36440
+ }
36441
+
36442
+ .lux-z-1000 {
36443
+ z-index: 1000;
36444
+ }
36445
+
36446
+ .lux-z-10000 {
36447
+ z-index: 10000;
36448
+ }
36449
+
36450
+ .lux-overflow-auto {
36451
+ overflow: auto;
36452
+ }
36453
+
36454
+ .lux-overflow-x-auto {
36455
+ overflow-x: auto;
36456
+ }
36457
+
36458
+ .lux-overflow-y-auto {
36459
+ overflow-y: auto;
36460
+ }
36461
+
36462
+ .lux-overflow-hidden {
36463
+ overflow: hidden;
36464
+ }
36465
+
36466
+ .lux-overflow-x-hidden {
36467
+ overflow-x: hidden;
36468
+ }
36469
+
36470
+ .lux-overflow-y-hidden {
36471
+ overflow-y: hidden;
36472
+ }
36473
+
36474
+ .lux-overflow-visible {
36475
+ overflow: visible;
36476
+ }
36477
+
36478
+ .lux-overflow-x-visible {
36479
+ overflow-x: visible;
36480
+ }
36481
+
36482
+ .lux-overflow-y-visible {
36483
+ overflow-y: visible;
36484
+ }
36485
+
36486
+ .lux-overflow-scroll {
36487
+ overflow: scroll;
36488
+ }
36489
+
36490
+ .lux-overflow-x-scroll {
36491
+ overflow-x: scroll;
36492
+ }
36493
+
36494
+ .lux-overflow-y-scroll {
36495
+ overflow-y: scroll;
36496
+ }
36497
+
36498
+ .lux-border-0 {
36499
+ border: none;
36500
+ }
36501
+
36502
+ .lux-rounded-none {
36503
+ border-radius: 0;
36504
+ }
36505
+
36506
+ .lux-rounded-xs {
36507
+ border-radius: var(--lux-theme-radius-xs);
36508
+ }
36509
+
36510
+ .lux-rounded-sm {
36511
+ border-radius: var(--lux-theme-radius-sm);
36512
+ }
36513
+
36514
+ .lux-rounded-md {
36515
+ border-radius: var(--lux-theme-radius-md);
36516
+ }
36517
+
36518
+ .lux-rounded-lg {
36519
+ border-radius: var(--lux-theme-radius-lg);
36520
+ }
36521
+
36522
+ .lux-rounded-xl {
36523
+ border-radius: var(--lux-theme-radius-xl);
36524
+ }
36525
+
36526
+ .lux-rounded-xxl {
36527
+ border-radius: var(--lux-theme-radius-xxl);
36528
+ }
36529
+
36530
+ .lux-rounded-full {
36531
+ border-radius: 50%;
36532
+ }
36533
+
36534
+ .lux-rounded-theme {
36535
+ border-radius: var(--lux-theme-app-border-radius);
36536
+ }
36537
+
36538
+ .lux-shadow-none {
36539
+ box-shadow: none;
36540
+ }
36541
+
36542
+ .lux-cursor-pointer {
36543
+ cursor: pointer;
36544
+ }
36545
+
36546
+ .lux-cursor-default {
36547
+ cursor: default;
36548
+ }
36549
+
36550
+ .lux-pointer-events-none {
36551
+ pointer-events: none;
36552
+ }
36553
+
36554
+ .lux-pointer-events-auto {
36555
+ pointer-events: auto;
36556
+ }
36557
+
36558
+ .lux-text-xs {
36559
+ font-size: var(--lux-theme-font-size-xs);
36560
+ }
36561
+
36562
+ .lux-text-sm {
36563
+ font-size: var(--lux-theme-font-size-sm);
36564
+ }
36565
+
36566
+ .lux-text-base {
36567
+ font-size: var(--lux-theme-font-size-md);
36568
+ }
36569
+
36570
+ .lux-text-lg {
36571
+ font-size: var(--lux-theme-font-size-lg);
36572
+ }
36573
+
36574
+ .lux-text-xl {
36575
+ font-size: var(--lux-theme-font-size-xl);
36576
+ }
36577
+
36578
+ .lux-text-2xl {
36579
+ font-size: var(--lux-theme-font-size-2xl);
36580
+ }
36581
+
36582
+ .lux-font-light {
36583
+ font-weight: 300;
36584
+ }
36585
+
36586
+ .lux-font-normal {
36587
+ font-weight: 400;
36588
+ }
36589
+
36590
+ .lux-font-medium {
36591
+ font-weight: 500;
36592
+ }
36593
+
36594
+ .lux-font-semibold {
36595
+ font-weight: 600;
36596
+ }
36597
+
36598
+ .lux-font-bold {
36599
+ font-weight: 700;
36600
+ }
36601
+
36602
+ .lux-font-headline {
36603
+ font-family: var(--lux-theme-app-headline-font, inherit);
36604
+ }
36605
+
36606
+ .lux-font-body {
36607
+ font-family: var(--lux-theme-app-font-family, inherit);
36608
+ }
36609
+
36610
+ .lux-leading-none {
36611
+ line-height: 1;
36612
+ }
36613
+
36614
+ .lux-leading-tight {
36615
+ line-height: 1.2;
36616
+ }
36617
+
36618
+ .lux-leading-normal {
36619
+ line-height: 1.5;
36620
+ }
36621
+
36622
+ .lux-leading-relaxed {
36623
+ line-height: 1.75;
36624
+ }
36625
+
36626
+ .lux-whitespace-nowrap {
36627
+ white-space: nowrap;
36628
+ }
36629
+
36630
+ .lux-whitespace-normal {
36631
+ white-space: normal;
36632
+ }
36633
+
36634
+ .lux-bg-transparent {
36635
+ background: transparent;
36636
+ }
36637
+
36638
+ .lux-bg-header {
36639
+ background-color: var(--lux-theme-app-header-bg);
36640
+ }
36641
+
36642
+ .lux-bg-content {
36643
+ background-color: var(--lux-theme-app-content-bg);
36644
+ }
36645
+
36646
+ .lux-bg-footer {
36647
+ background-color: var(--lux-theme-app-footer-bg);
36648
+ }
36649
+
36650
+ .lux-bg-primary {
36651
+ background-color: var(--lux-theme-primary-color);
36652
+ }
36653
+
36654
+ .lux-text-primary {
36655
+ color: var(--lux-theme-primary-color);
36656
+ }
36657
+
36658
+ .lux-text-dark {
36659
+ color: var(--lux-theme-dark-primary-text);
36660
+ }
36661
+
36662
+ .lux-text-light {
36663
+ color: var(--lux-theme-light-primary-text);
36664
+ }
36665
+
36666
+ .lux-text-secondary {
36667
+ color: var(--lux-theme-dark-secondary-text);
36668
+ }
36669
+
36670
+ .lux-text-disabled {
36671
+ color: var(--lux-theme-dark-disabled-text);
36672
+ }
36673
+
36674
+ .lux-outline-none {
36675
+ outline: none;
36676
+ }
36677
+
36678
+ .lux-transition-none {
36679
+ transition: none;
36680
+ }
36681
+
36682
+ .lux-skip-link:focus-visible {
36683
+ position: fixed;
36684
+ top: var(--lux-theme-spacing-sm);
36685
+ left: var(--lux-theme-spacing-sm);
36686
+ width: auto;
36687
+ height: auto;
36688
+ padding: var(--lux-theme-spacing-sm) var(--lux-theme-spacing-md);
36689
+ background-color: var(--lux-theme-primary-20);
36690
+ color: var(--lux-theme-primary-100);
36691
+ font-size: var(--lux-theme-font-size-sm);
36692
+ font-weight: 600;
36693
+ border-radius: var(--lux-theme-radius-sm);
36694
+ z-index: var(--lux-z-skip-link);
36695
+ outline: 3px solid var(--lux-theme-custom-lightblue);
36696
+ }
36697
+
36698
+ .lux-interactive:hover:not(:focus-visible) {
36699
+ background-color: var(--lux-theme-hover-color);
36700
+ }
36701
+ .lux-interactive:active {
36702
+ background-color: var(--lux-theme-selected-bg-color);
36703
+ }
36704
+ .lux-interactive:focus-visible {
36705
+ outline: calc(var(--lux-theme-outline-width) - 1px) var(--lux-theme-outline-style) var(--lux-theme-outline-color-dark) !important;
36706
+ outline-offset: 1px;
36707
+ }
36708
+
36332
36709
  lux-accordion {
36333
36710
  --mat-expansion-container-text-color: var(--lux-theme-dark-primary-text);
36334
36711
  }
36712
+ lux-accordion .mat-accordion {
36713
+ display: block;
36714
+ padding: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
36715
+ }
36335
36716
  lux-accordion .lux-primary .lux-expansion-panel-header,
36336
36717
  lux-accordion .lux-primary .lux-expansion-panel-header.mat-expanded {
36337
36718
  background-color: var(--lux-theme-accordion-header-color-primary);
@@ -36380,7 +36761,7 @@ lux-panel {
36380
36761
  --mat-expansion-header-disabled-state-text-color: var(--lux-theme-dark-disabled-text);
36381
36762
  --mat-expansion-header-hover-state-layer-color: var(--lux-theme-accordion-header-hover-color-on-neutral);
36382
36763
  --mat-expansion-container-shape: var(--lux-theme-app-border-radius);
36383
- --mat-expansion-container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
36764
+ --mat-expansion-container-elevation-shadow: 0 0 0 var(--lux-theme-accordion-panel-container-elevation-shadow-width) var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
36384
36765
  }
36385
36766
  lux-panel .lux-expansion-panel-header[aria-disabled=true],
36386
36767
  lux-panel .lux-expansion-panel-header.mat-expanded[aria-disabled=true],
@@ -36415,6 +36796,16 @@ lux-panel .lux-expansion-panel-header:not([aria-disabled=true]):focus-visible {
36415
36796
  outline: var(--lux-theme-outline-dark);
36416
36797
  outline-offset: calc(var(--lux-theme-outline-width) * -1);
36417
36798
  }
36799
+ lux-panel:not(lux-accordion lux-panel) {
36800
+ padding-left: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
36801
+ padding-right: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
36802
+ }
36803
+ lux-panel:not(lux-accordion lux-panel):first-of-type {
36804
+ padding-top: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
36805
+ }
36806
+ lux-panel:not(lux-accordion lux-panel):last-of-type {
36807
+ padding-bottom: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
36808
+ }
36418
36809
 
36419
36810
  lux-app-content {
36420
36811
  background-color: var(--lux-theme-app-content-bg);
@@ -37677,10 +38068,12 @@ lux-card .lux-card .lux-card-header > * {
37677
38068
  order: 10;
37678
38069
  }
37679
38070
  lux-card .lux-card .lux-card-header .lux-card-icon-container {
38071
+ margin-top: 4px;
37680
38072
  margin-right: 10px;
37681
38073
  order: 5;
37682
38074
  }
37683
38075
  lux-card .lux-card .lux-card-header .lux-card-info-container {
38076
+ margin-top: 4px;
37684
38077
  order: 15;
37685
38078
  margin-left: auto;
37686
38079
  }
@@ -37723,17 +38116,33 @@ lux-card .lux-card .lux-card-content.lux-card-no-actions {
37723
38116
  lux-card .lux-card .lux-card-actions {
37724
38117
  padding: var(--lux-theme-card-padding);
37725
38118
  }
37726
- lux-card .lux-card[class~=lux-cursor]:hover {
38119
+ @media screen and (max-width: 599px) {
38120
+ lux-card .lux-card .lux-card-actions lux-card-actions {
38121
+ flex-direction: column;
38122
+ }
38123
+ lux-card .lux-card .lux-card-actions .lux-card-actions-container {
38124
+ flex-direction: column;
38125
+ align-items: stretch;
38126
+ }
38127
+ lux-card .lux-card .lux-card-actions .lux-card-actions-container lux-button {
38128
+ display: block;
38129
+ width: 100%;
38130
+ }
38131
+ lux-card .lux-card .lux-card-actions .lux-card-actions-container lux-button button.lux-button {
38132
+ width: 100%;
38133
+ }
38134
+ }
38135
+ lux-card .lux-card[class~=lux-cursor-pointer]:hover {
37727
38136
  background-image: var(--lux-theme-app-gradient-reverse);
37728
38137
  background-color: #ffffff;
37729
38138
  border-color: var(--lux-theme-dark-primary-text);
37730
38139
  }
37731
- lux-card .lux-card[class~=lux-cursor]:hover .lux-card-content-expanded {
38140
+ lux-card .lux-card[class~=lux-cursor-pointer]:hover .lux-card-content-expanded {
37732
38141
  background-image: var(--lux-theme-app-gradient-reverse);
37733
38142
  background-color: #ffffff;
37734
38143
  border-color: var(--lux-theme-dark-primary-text);
37735
38144
  }
37736
- lux-card .lux-card[class~=lux-cursor]:focus-visible {
38145
+ lux-card .lux-card[class~=lux-cursor-pointer]:focus-visible {
37737
38146
  outline: var(--lux-theme-outline-dark);
37738
38147
  outline-offset: calc(var(--lux-theme-outline-width) * -1);
37739
38148
  }
@@ -38573,6 +38982,7 @@ lux-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-co
38573
38982
  lux-select-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
38574
38983
  lux-lookup-combobox-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
38575
38984
  lux-datepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
38985
+ lux-timepicker lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
38576
38986
  lux-datetimepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
38577
38987
  lux-file-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic,
38578
38988
  lux-textarea-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic {
@@ -38585,6 +38995,7 @@ lux-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-co
38585
38995
  lux-select-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
38586
38996
  lux-lookup-combobox-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
38587
38997
  lux-datepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
38998
+ lux-timepicker lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
38588
38999
  lux-datetimepicker-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
38589
39000
  lux-file-input-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow,
38590
39001
  lux-textarea-ac lux-form-control-wrapper .lux-form-control-wrapper:not(.lux-form-control-disabled-authentic).lux-form-control-readonly-authentic .lux-form-control-container-authentic .mat-mdc-select-arrow {
@@ -38747,6 +39158,7 @@ lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authen
38747
39158
  }
38748
39159
  lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) .lux-form-control-misc-authentic .mat-mdc-form-field-error {
38749
39160
  display: flex;
39161
+ flex: 0 1 auto;
38750
39162
  background-color: var(--lux-theme-form-error-msg-background);
38751
39163
  border-radius: 4px;
38752
39164
  padding-right: 2px;
@@ -38775,6 +39187,29 @@ lux-form-control-wrapper select:-webkit-autofill:focus {
38775
39187
  transition: background-color 5000s ease-in-out 0s;
38776
39188
  }
38777
39189
 
39190
+ .lux-form-error-container {
39191
+ display: flex;
39192
+ flex: 0 1 auto;
39193
+ font-size: 0.75rem;
39194
+ }
39195
+
39196
+ .lux-form-error-icon {
39197
+ color: var(--mat-sys-on-error-container);
39198
+ }
39199
+ .lux-form-error-icon mat-icon.mat-icon {
39200
+ box-sizing: border-box;
39201
+ }
39202
+
39203
+ .lux-form-error-label {
39204
+ display: flex;
39205
+ flex: 0 1 auto;
39206
+ background-color: var(--lux-theme-form-error-msg-background);
39207
+ border-radius: 4px;
39208
+ padding-right: 2px;
39209
+ color: var(--mat-sys-on-error-container) !important;
39210
+ box-shadow: -18px 0px 0 0 var(--lux-theme-form-error-msg-background), -18px -1px 0 0 var(--lux-theme-form-error-msg-background), 0 -1px 0 0 var(--lux-theme-form-error-msg-background);
39211
+ }
39212
+
38778
39213
  lux-html a[href]:focus-visible {
38779
39214
  outline: var(--lux-theme-outline-dark);
38780
39215
  border-radius: var(--lux-theme-app-border-radius);
@@ -39016,12 +39451,12 @@ lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-mdc-card.lux
39016
39451
  position: relative;
39017
39452
  border-radius: 4px;
39018
39453
  }
39019
- lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor]:not([class*=mat-elevation-z]) {
39454
+ lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor-pointer]:not([class*=mat-elevation-z]) {
39020
39455
  -webkit-box-sizing: border-box;
39021
39456
  -moz-box-sizing: border-box;
39022
39457
  box-sizing: border-box;
39023
39458
  }
39024
- lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor]:not([class*=mat-elevation-z]):hover {
39459
+ lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux-cursor-pointer]:not([class*=mat-elevation-z]):hover {
39025
39460
  border: 1px solid var(--lux-theme-primary-color);
39026
39461
  background: var(--lux-theme-app-gradient-reverse);
39027
39462
  background-color: #fff !important;
@@ -39369,6 +39804,7 @@ lux-menu .lux-menu-trigger > lux-button button {
39369
39804
  letter-spacing: 1.25px;
39370
39805
  }
39371
39806
  .lux-menu-panel .lux-menu-item-icon {
39807
+ display: inline-block;
39372
39808
  align-self: center;
39373
39809
  vertical-align: middle;
39374
39810
  width: var(--lux-theme-menu-item-icon-size);
@@ -39581,6 +40017,16 @@ lux-message-box .lux-message-box-content .lux-message-container {
39581
40017
  align-items: center;
39582
40018
  padding: var(--lux-theme-outline-width) 24px;
39583
40019
  border-radius: 4px;
40020
+ transition: opacity 300ms ease-out;
40021
+ }
40022
+ @starting-style {
40023
+ lux-message-box .lux-message-box-content .lux-message-container {
40024
+ opacity: 0;
40025
+ }
40026
+ }
40027
+ lux-message-box .lux-message-box-content .lux-message-container.lux-message-closing {
40028
+ opacity: 0;
40029
+ transition: opacity 300ms ease-in;
39584
40030
  }
39585
40031
  lux-message-box .lux-message-box-content .lux-message-container.lux-messagebox-white {
39586
40032
  border: 1px solid var(--lux-theme-primary-color);
@@ -39634,6 +40080,10 @@ lux-message-box div.lux-message-box-content .lux-message-container:not(.lux-mess
39634
40080
  line-height: normal;
39635
40081
  }
39636
40082
  }
40083
+ :root {
40084
+ --mat-paginator-container-background-color: transparent;
40085
+ }
40086
+
39637
40087
  lux-progress {
39638
40088
  --mat-progress-bar-track-color: #bcc8d5;
39639
40089
  }
@@ -39884,6 +40334,7 @@ lux-slider-ac {
39884
40334
 
39885
40335
  .lux-snackbar {
39886
40336
  --mat-snack-bar-supporting-text-size: 1rem;
40337
+ --mat-snack-bar-supporting-text-line-height: 1.5rem;
39887
40338
  --mat-snack-bar-supporting-text-weight: 600;
39888
40339
  }
39889
40340
  .lux-snackbar .lux-snackbar-text,
@@ -40010,6 +40461,13 @@ lux-stepper .mat-horizontal-stepper-header-container {
40010
40461
  lux-stepper .mat-vertical-stepper-header {
40011
40462
  margin: 8px 8px 0 8px;
40012
40463
  }
40464
+ lux-stepper .mat-horizontal-stepper-header .mat-step-icon,
40465
+ lux-stepper .mat-vertical-stepper-header .mat-step-icon {
40466
+ margin-right: 0;
40467
+ }
40468
+ lux-stepper lux-step-header div {
40469
+ margin-left: 0.75rem;
40470
+ }
40013
40471
  lux-stepper mat-step-header {
40014
40472
  margin: var(--lux-theme-outline-width);
40015
40473
  }
@@ -40022,6 +40480,7 @@ lux-stepper mat-step-header .mat-step-icon-not-touched {
40022
40480
  }
40023
40481
  lux-stepper mat-step-header .mat-step-label {
40024
40482
  height: 100%;
40483
+ min-width: unset;
40025
40484
  display: flex;
40026
40485
  align-items: center;
40027
40486
  position: relative;
@@ -40720,8 +41179,18 @@ lux-tabs .lux-counter-offset {
40720
41179
  lux-tabs .lux-label-lower {
40721
41180
  padding-top: 4px;
40722
41181
  }
41182
+ lux-tabs .lux-notification-color-primary {
41183
+ background-color: var(--lux-theme-primary-color);
41184
+ }
41185
+ lux-tabs .lux-notification-color-accent,
40723
41186
  lux-tabs .lux-notification-new {
40724
- background-color: var(--lux-theme-custom-green);
41187
+ background-color: var(--lux-theme-accent-70);
41188
+ }
41189
+ lux-tabs .lux-notification-color-warn {
41190
+ background-color: var(--mat-sys-error);
41191
+ }
41192
+ lux-tabs .lux-notification-color-default {
41193
+ background-color: #605e5e;
40725
41194
  }
40726
41195
  lux-tabs .lux-tabs-notification-icon {
40727
41196
  border: 2px solid var(--lux-theme-app-content-bg);
@@ -40835,6 +41304,28 @@ lux-tabs .lux-tabs-notification-icon-position-after-icon.lux-counter-visible {
40835
41304
  }
40836
41305
  }
40837
41306
 
41307
+ lux-tenant-logo .lux-tenant-logo-error-container {
41308
+ display: flex;
41309
+ flex: 0 1 auto;
41310
+ }
41311
+ lux-tenant-logo .lux-tenant-logo-error-container .lux-tenant-logo-error {
41312
+ display: flex;
41313
+ flex: 0 1 auto;
41314
+ align-items: center;
41315
+ padding: 4px;
41316
+ color: var(--lux-theme-custom-gray);
41317
+ background-color: var(--lux-theme-custom-on-gray);
41318
+ font-size: 1rem;
41319
+ font-style: italic;
41320
+ border: 1px solid var(--lux-theme-app-border-color);
41321
+ border-radius: var(--lux-theme-app-border-radius);
41322
+ }
41323
+ lux-tenant-logo img:focus-visible,
41324
+ lux-tenant-logo .lux-tenant-logo-error:focus-visible {
41325
+ outline: var(--lux-theme-outline-dark);
41326
+ border-radius: var(--lux-theme-app-border-radius);
41327
+ }
41328
+
40838
41329
  lux-textarea-ac textarea {
40839
41330
  font: inherit;
40840
41331
  color: currentColor;
@@ -40960,18 +41451,18 @@ lux-tile {
40960
41451
  lux-tile .lux-notification-new {
40961
41452
  background-color: var(--lux-theme-accent-70);
40962
41453
  }
40963
- lux-tile mat-card[class~=lux-cursor].mat-mdc-card {
41454
+ lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card {
40964
41455
  border-radius: var(--lux-theme-tile-border-radius);
40965
41456
  overflow: hidden !important;
40966
41457
  padding: 24px;
40967
41458
  }
40968
- lux-tile mat-card[class~=lux-cursor] .mat-mdc-card-content {
41459
+ lux-tile mat-card[class~=lux-cursor-pointer] .mat-mdc-card-content {
40969
41460
  padding-top: 0px !important;
40970
41461
  }
40971
- lux-tile mat-card[class~=lux-cursor].mat-mdc-card.lux-tile-mobile {
41462
+ lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card.lux-tile-mobile {
40972
41463
  padding: 14px;
40973
41464
  }
40974
- lux-tile mat-card[class~=lux-cursor].mat-mdc-card::before {
41465
+ lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card::before {
40975
41466
  content: "";
40976
41467
  position: absolute;
40977
41468
  display: block;
@@ -40982,7 +41473,7 @@ lux-tile mat-card[class~=lux-cursor].mat-mdc-card::before {
40982
41473
  background-color: var(--lux-theme-tile-bottom-line-color);
40983
41474
  transition: 0.2s ease;
40984
41475
  }
40985
- lux-tile mat-card[class~=lux-cursor].lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-medium.mat-badge-overlap .mat-badge-content {
41476
+ lux-tile mat-card[class~=lux-cursor-pointer].lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-medium.mat-badge-overlap .mat-badge-content {
40986
41477
  right: 2px;
40987
41478
  top: 5px;
40988
41479
  padding-top: 0px;
@@ -41087,18 +41578,18 @@ lux-tile .lux-tile-small-font ::ng-deep .mat-badge-content {
41087
41578
  top: -4px !important;
41088
41579
  right: -4px !important;
41089
41580
  }
41090
- lux-tile mat-card[class~=lux-cursor].mat-mdc-card:focus-visible {
41581
+ lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card:focus-visible {
41091
41582
  box-shadow: 0 0 0 2px #2e8533, 0 0 8px 2px #2e8533 !important;
41092
41583
  outline: 0 !important;
41093
41584
  }
41094
- lux-tile mat-card[class~=lux-cursor]:hover {
41585
+ lux-tile mat-card[class~=lux-cursor-pointer]:hover {
41095
41586
  background-image: none !important;
41096
41587
  background-color: white !important;
41097
41588
  }
41098
- lux-tile mat-card[class~=lux-cursor]:hover h2 {
41589
+ lux-tile mat-card[class~=lux-cursor-pointer]:hover h2 {
41099
41590
  color: var(--lux-theme-tile-font-hover-color);
41100
41591
  }
41101
- lux-tile mat-card[class~=lux-cursor].mat-mdc-card:hover::before {
41592
+ lux-tile mat-card[class~=lux-cursor-pointer].mat-mdc-card:hover::before {
41102
41593
  height: 14px;
41103
41594
  }
41104
41595
 
@@ -41147,6 +41638,10 @@ lux-tile-ac:hover .lux-tile-ac {
41147
41638
  background-image: var(--lux-theme-tile-ac-hover-bg-color);
41148
41639
  }
41149
41640
 
41641
+ lux-timepicker button:not(:disabled) .lux-timepicker-toggle-icon {
41642
+ color: var(--lux-theme-datepicker-icon-color);
41643
+ }
41644
+
41150
41645
  lux-toggle-ac {
41151
41646
  --mat-slide-toggle-label-text-size: var(--lux-theme-form-control-font-size);
41152
41647
  --mat-slide-toggle-disabled-label-text-color: var(--lux-theme-dark-disabled-text);