@ihk-gfi/lux-components-theme 16.3.0 → 18.0.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 (39) hide show
  1. package/README.md +1 -1
  2. package/package.json +2 -2
  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 +1071 -696
  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 +1029 -669
  10. package/prebuilt-themes/luxtheme-green.css.map +1 -1
  11. package/src/authentic/_custom.scss +42 -30
  12. package/src/authentic/_luxcommon.scss +1 -8
  13. package/src/base/_luxcomponents.scss +23 -50
  14. package/src/base/_luxfocus.scss +71 -64
  15. package/src/base/_luxstyles.scss +101 -2
  16. package/src/base/components/_luxAppHeader.scss +5 -37
  17. package/src/base/components/_luxAppHeaderAc.scss +6 -4
  18. package/src/base/components/_luxButton.scss +63 -26
  19. package/src/base/components/_luxCard.scss +20 -6
  20. package/src/base/components/_luxDialog.scss +23 -4
  21. package/src/base/components/_luxFilter.scss +22 -2
  22. package/src/base/components/_luxFormControlWrapper.scss +5 -2
  23. package/src/base/components/_luxFormControlsAuthentic.scss +402 -158
  24. package/src/base/components/_luxList.scss +3 -3
  25. package/src/base/components/_luxMasterDetailAc.scss +6 -6
  26. package/src/base/components/_luxMenu.scss +28 -14
  27. package/src/base/components/_luxMessagebox.scss +28 -33
  28. package/src/base/components/_luxProgressBar.scss +5 -0
  29. package/src/base/components/_luxProgressSpinner.scss +13 -0
  30. package/src/base/components/_luxSnackbar.scss +12 -8
  31. package/src/base/components/_luxStepper.scss +1 -0
  32. package/src/base/components/_luxTable.scss +41 -24
  33. package/src/base/components/_luxTabs.scss +33 -17
  34. package/src/base/components/_luxTile.scss +16 -5
  35. package/src/base/components/_luxTileAc.scss +11 -2
  36. package/src/base/components/_luxToolTip.scss +9 -0
  37. package/src/base/components/_luxTourHint.scss +16 -1
  38. package/src/green/_custom.scss +46 -68
  39. package/src/public/global.scss +42 -1
package/prebuilt-themes/luxtheme-green.css CHANGED
@@ -1,4 +1,42 @@
1
1
  @charset "UTF-8";
2
+ html body {
3
+ --mat-stepper-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
4
+ --mat-stepper-header-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
5
+ --mat-expansion-header-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
6
+ --mat-expansion-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
7
+ --mat-datepicker-calendar-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
8
+ --mat-legacy-button-toggle-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
9
+ --mat-standard-button-toggle-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
10
+ --mat-bottom-sheet-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
11
+ --mat-badge-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
12
+ --mat-toolbar-title-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
13
+ --mat-stepper-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
14
+ --mat-stepper-header-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
15
+ --mat-expansion-header-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
16
+ --mat-expansion-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
17
+ --mat-datepicker-calendar-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
18
+ --mat-legacy-button-toggle-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
19
+ --mat-standard-button-toggle-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
20
+ --mat-bottom-sheet-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
21
+ --mat-badge-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
22
+ --mat-table-header-headline-font: Source Sans Pro, Helvetica, Arial, sans-serif;
23
+ --mat-table-row-item-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
24
+ --mat-table-footer-supporting-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
25
+ --mat-paginator-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
26
+ --mat-menu-item-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
27
+ --mat-select-trigger-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
28
+ --mdc-filled-text-field-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
29
+ --mdc-outlined-text-field-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
30
+ --mat-form-field-container-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
31
+ --mat-form-field-subscript-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
32
+ --mat-optgroup-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
33
+ --mat-option-label-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
34
+ }
35
+
36
+ .mat-mdc-tooltip-surface {
37
+ --mdc-plain-tooltip-supporting-text-font: Source Sans Pro, Helvetica, Arial, sans-serif;
38
+ }
39
+
2
40
  /*
3
41
  Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
4
42
  */
@@ -32,18 +70,25 @@
32
70
  die ihnen zugrunde liegenden Material Components.
33
71
  */
34
72
  /** ########## Chips ########## **/
35
- lux-chips-ac .mat-standard-chip:focus-visible {
73
+ lux-chips-ac mat-chip-row.cdk-focused:not(.cdk-mouse-focused):not(.cdk-program-focused) {
36
74
  outline: 4px solid #2e8533 !important;
37
75
  }
38
- lux-chips-ac .mat-chip.mat-standard-chip:after {
39
- background-color: unset;
76
+ lux-chips-ac .mat-mdc-chip-focus-overlay {
77
+ transition: none;
78
+ }
79
+ lux-chips-ac lux-icon:focus-visible mat-icon {
80
+ outline: 4px solid #2e8533 !important;
81
+ border-radius: 15px;
82
+ }
83
+ lux-chips-ac .mat-mdc-chip-set-stacked .mat-mdc-chip {
84
+ width: auto !important;
85
+ }
86
+ lux-chips-ac .mat-mdc-chip-set-stacked .lux-chip-container {
87
+ width: 100%;
40
88
  }
41
89
 
42
90
  /** ########## Form-Control ########## **/
43
- .lux-form-control-wrapper.lux-focused-authentic .cdk-keyboard-focused .mat-radio-container,
44
- .lux-form-control-wrapper.lux-focused-authentic .cdk-keyboard-focused .mat-checkbox-inner-container,
45
- .lux-form-control-wrapper.lux-focused-authentic .cdk-keyboard-focused .mat-slide-toggle-thumb {
46
- position: relative;
91
+ .lux-form-control-wrapper.lux-focused-authentic .cdk-keyboard-focused .mdc-switch__track {
47
92
  outline: 4px solid #2e8533 !important;
48
93
  }
49
94
 
@@ -67,9 +112,6 @@ lux-datetimepicker-ac mat-datepicker-toggle .mat-mdc-button-persistent-ripple::b
67
112
  display: none;
68
113
  }
69
114
 
70
- .lux-datepicker-panel .mat-calendar-header button .mat-button-focus-overlay {
71
- display: none;
72
- }
73
115
  .lux-datepicker-panel .mat-calendar-header button:focus-visible {
74
116
  outline: 4px solid #2e8533 !important;
75
117
  }
@@ -88,9 +130,6 @@ lux-datetimepicker-ac mat-datepicker-toggle .mat-mdc-button-persistent-ripple::b
88
130
  }
89
131
 
90
132
  /** ########## Datetimepicker ########## **/
91
- .lux-datetimepicker-overlay .mat-calendar-header button .mat-button-focus-overlay {
92
- display: none;
93
- }
94
133
  .lux-datetimepicker-overlay .mat-calendar-header button:focus-visible {
95
134
  outline: 4px solid #2e8533 !important;
96
135
  }
@@ -108,190 +147,66 @@ lux-datetimepicker-ac mat-datepicker-toggle .mat-mdc-button-persistent-ripple::b
108
147
  outline: 4px solid #2e8533 !important;
109
148
  }
110
149
 
111
- /** ########## Select-AC ########## **/
112
- .lux-select-panel-ac mat-option.mat-selected.mat-option:not(.mat-option-disabled) .mat-option-text {
113
- position: relative;
114
- }
115
- .lux-select-panel-ac mat-option.mat-selected.mat-option:not(.mat-option-disabled) .mat-option-text::after {
116
- content: "";
117
- position: absolute;
118
- width: 18px;
119
- height: 18px;
120
- top: 14px;
121
- margin: 0 6px;
122
- background-color: #003366;
123
- -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
124
- -webkit-mask-repeat: no-repeat;
125
- -webkit-mask-position: center;
126
- -webkit-mask-size: cover;
127
- mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23036' stroke-linecap='round' stroke-linejoin='round' d='M0.5,8.55 L3.23,12.06 C3.4166359,12.3024927 3.70402432,12.4461869 4.01,12.4500671 C4.31092451,12.4534817 4.59741556,12.3212551 4.79,12.09 L13.5,1.55'/%3E%3C/svg%3E");
128
- mask-repeat: no-repeat;
129
- mask-position: center;
130
- mask-size: cover;
150
+ /** ########## Autocomplete-AC ########## **/
151
+ .lux-autocomplete-panel-ac mat-option.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled), .lux-autocomplete-panel-ac mat-option.mat-mdc-option:hover:not(.mdc-list-item--disabled), .lux-autocomplete-panel-ac mat-option.mat-mdc-option:focus-visible:not(.mdc-list-item--disabled), .lux-autocomplete-panel-ac mat-option.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) {
152
+ background-color: #e3ebf5;
131
153
  }
132
-
133
- .lux-select-panel-ac.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active), .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
134
- .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
135
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
136
- .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
137
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
138
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
139
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
140
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
141
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
142
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active),
143
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option.mat-selected.mat-option:not(.mat-option-disabled):not(:hover):not(.mat-active) {
144
- color: #003366;
145
- background-color: #ffffff;
146
- font-weight: 600;
154
+ .lux-autocomplete-panel-ac mat-option.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .lux-autocomplete-panel-ac mat-option.mat-mdc-option:hover:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .lux-autocomplete-panel-ac mat-option.mat-mdc-option:focus-visible:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .lux-autocomplete-panel-ac mat-option.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
155
+ color: #ffffff;
147
156
  }
148
- .lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused), .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
149
- .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
150
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
151
- .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
152
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
153
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
154
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
155
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
156
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
157
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused),
158
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) {
157
+ .lux-autocomplete-panel-ac mat-option.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) {
159
158
  outline: 4px solid #2e8533 !important;
160
159
  outline-offset: -4px;
161
- background-color: #4d7094;
162
- color: #ffffff;
163
160
  }
164
- .lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
165
- .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
166
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
167
- .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
168
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
169
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
170
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
171
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
172
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
173
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox,
174
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox {
175
- color: #ffffff;
161
+
162
+ /** ########## Select-AC ########## **/
163
+ .lux-select-panel-ac mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled), .lux-select-panel-ac mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled), .lux-select-panel-ac mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled),
164
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),
165
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled),
166
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) {
167
+ background-color: #e3ebf5;
176
168
  }
177
- .lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
178
- .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
179
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
180
- .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
181
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
182
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
183
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
184
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
185
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
186
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked,
187
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked {
188
- background-color: #ffffff;
169
+ .lux-select-panel-ac mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full, .lux-select-panel-ac mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full, .lux-select-panel-ac mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full,
170
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full,
171
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full,
172
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full {
173
+ background-color: #e3ebf5;
174
+ border-color: #ffffff;
189
175
  }
190
- .lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
191
- .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
192
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
193
- .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
194
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
195
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
196
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
197
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
198
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
199
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after,
200
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-pseudo-checkbox-checked::after {
201
- border-color: #003366 !important;
176
+ .lux-select-panel-ac mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .lux-select-panel-ac mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .lux-select-panel-ac mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
177
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
178
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
179
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked {
180
+ background-color: #ffffff;
202
181
  }
203
- .lux-select-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
204
- .lux-select-panel-ac-multiple.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
205
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
206
- .lux-autocomplete-panel-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
207
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
208
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
209
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
210
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
211
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
212
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after,
213
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option.mat-option.mat-active:not(.cdk-mouse-focused) .mat-option-text::after {
214
- background-color: #fff;
182
+ .lux-select-panel-ac mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after, .lux-select-panel-ac mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after, .lux-select-panel-ac mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after,
183
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after,
184
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after,
185
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after {
186
+ color: #e3ebf5;
215
187
  }
216
- .lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled), .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled),
217
- .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled),
218
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled),
219
- .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled),
220
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled),
221
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled),
222
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled),
223
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled),
224
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled),
225
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled),
226
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) {
227
- background-color: #4d7094;
228
- color: #ffffff;
229
- border-radius: 0px !important;
230
- }
231
- .lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
232
- .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
233
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
234
- .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
235
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
236
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
237
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
238
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
239
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
240
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
241
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox {
188
+ .lux-select-panel-ac mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .lux-select-panel-ac mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .lux-select-panel-ac mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
189
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
190
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple:focus-visible:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
191
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
242
192
  color: #ffffff;
243
193
  }
244
- .lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
245
- .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
246
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
247
- .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
248
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
249
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
250
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
251
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
252
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
253
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked,
254
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked {
255
- background-color: #ffffff;
256
- }
257
- .lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
258
- .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
259
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
260
- .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
261
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
262
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
263
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
264
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
265
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
266
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after,
267
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox-checked::after {
268
- border-color: #003366 !important;
194
+ .lux-select-panel-ac mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled),
195
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option-multiple.mat-mdc-option-active:not(.mdc-list-item--disabled) {
196
+ background-color: #e3ebf5;
197
+ outline: 4px solid #2e8533 !important;
198
+ outline-offset: -4px;
269
199
  }
270
- .lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
271
- .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
272
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
273
- .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
274
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
275
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
276
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
277
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
278
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
279
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox,
280
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-pseudo-checkbox {
200
+ .lux-select-panel-ac mat-option.mat-mdc-option:hover:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .lux-select-panel-ac mat-option.mat-mdc-option:focus-visible:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .lux-select-panel-ac mat-option.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
201
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option:hover:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
202
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option:focus-visible:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
203
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
281
204
  color: #ffffff;
282
205
  }
283
- .lux-select-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after, .lux-select-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
284
- .lux-select-panel-ac-multiple.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
285
- .lux-select-panel-ac-multiple.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
286
- .lux-autocomplete-panel-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
287
- .lux-autocomplete-panel-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
288
- .lux-autocomplete-panel-dense-ac.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
289
- .lux-autocomplete-panel-dense-ac.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
290
- .lux-chips-ac-autocomplete-panel.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
291
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
292
- .lux-chips-ac-autocomplete-panel-dense.mat-select-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after,
293
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel mat-option:hover:not(.invalid, .mat-option-disabled) .mat-option-text::after {
294
- background-color: #fff;
206
+ .lux-select-panel-ac mat-option.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled),
207
+ .lux-select-panel-ac-multiple mat-option.mat-mdc-option.mat-mdc-option-active:not(.mdc-list-item--disabled) {
208
+ outline: 4px solid #2e8533 !important;
209
+ outline-offset: -4px;
295
210
  }
296
211
 
297
212
  /** ########## Html ########## **/
@@ -364,7 +279,7 @@ lux-stepper-large .lux-stepper-large-nav-item.lux-active .lux-stepper-large-nav-
364
279
  cursor: text;
365
280
  }
366
281
  lux-stepper-large .lux-stepper-large-nav-item.lux-active .lux-stepper-large-nav-item-label-container a.lux-stepper-large-nav-item-label-link:hover {
367
- color: unset;
282
+ color: #003366;
368
283
  }
369
284
  lux-stepper-large .lux-stepper-large-nav-item:not(.lux-active):not(.lux-completed) .lux-stepper-large-nav-item-label-container a.lux-stepper-large-nav-item-label-link:hover {
370
285
  color: #2e8533;
@@ -412,14 +327,14 @@ lux-app-header-ac lux-button button.lux-button.lux-button-rounded lux-icon {
412
327
  color: #003366;
413
328
  box-sizing: border-box;
414
329
  }
415
- lux-app-header-ac lux-button button.lux-button.lux-button-rounded:hover:not([disabled]).mat-fab:hover.mat-primary lux-icon {
330
+ lux-app-header-ac lux-button button.lux-button.lux-button-rounded:hover:not([disabled]).mat-mdc-fab:hover.mat-primary lux-icon {
416
331
  color: #ffffff !important;
417
332
  }
418
- lux-app-header-ac lux-button button.lux-button.lux-button-rounded:focus-visible:not([disabled]).mat-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
333
+ lux-app-header-ac lux-button button.lux-button.lux-button-rounded:focus-visible:not([disabled]).mat-mdc-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
419
334
  background-color: transparent !important;
420
335
  outline: 4px solid #2e8533 !important;
421
336
  }
422
- lux-app-header-ac lux-button button.lux-button.lux-button-rounded:focus-visible:not([disabled]).mat-fab.mat-primary.cdk-focused.cdk-keyboard-focused lux-icon {
337
+ lux-app-header-ac lux-button button.lux-button.lux-button-rounded:focus-visible:not([disabled]).mat-mdc-fab.mat-primary.cdk-focused.cdk-keyboard-focused lux-icon {
423
338
  color: #002753 !important;
424
339
  }
425
340
  lux-app-header-ac lux-button.menu-opened button.lux-button.lux-button-rounded {
@@ -428,15 +343,15 @@ lux-app-header-ac lux-button.menu-opened button.lux-button.lux-button-rounded {
428
343
  lux-app-header-ac lux-button.menu-opened button.lux-button.lux-button-rounded lux-icon {
429
344
  color: #ffffff !important;
430
345
  }
431
- lux-app-header-ac lux-button.lux-menu-trigger-default button.mat-button.lux-button:hover {
346
+ lux-app-header-ac lux-button.lux-menu-trigger-default button.mat-mdc-button.lux-button:hover {
432
347
  background-color: #4d7094 !important;
433
348
  color: #ffffff !important;
434
349
  }
435
- lux-app-header-ac lux-button.lux-menu-trigger-default button.mat-button.lux-button:focus-visible:not(:hover) {
350
+ lux-app-header-ac lux-button.lux-menu-trigger-default button.mat-mdc-button.lux-button:focus-visible:not(:hover) {
436
351
  color: #002753 !important;
437
352
  background-color: transparent !important;
438
353
  }
439
- lux-app-header-ac lux-button.lux-menu-trigger-default button.mat-button.lux-button:active {
354
+ lux-app-header-ac lux-button.lux-menu-trigger-default button.mat-mdc-button.lux-button:active {
440
355
  color: #002753 !important;
441
356
  }
442
357
  lux-app-header-ac lux-menu {
@@ -619,10 +534,6 @@ lux-app-header .lux-app-header div.lux-header-action .lux-app-header-action-nav
619
534
  max-height: 45px !important;
620
535
  min-height: 45px !important;
621
536
  }
622
- lux-app-header .lux-app-header div.lux-header-action .lux-app-header-action-nav lux-app-header-action-nav-item lux-button.lux-action-nav-item-button button .mat-button-wrapper {
623
- display: inline-flex;
624
- height: 100%;
625
- }
626
537
  lux-app-header .lux-app-header div.lux-header-action .lux-app-header-action-nav lux-app-header-action-nav-item lux-button.lux-action-nav-item-button.lux-button-with-label button {
627
538
  padding: 0 4px;
628
539
  max-height: 45px !important;
@@ -643,19 +554,19 @@ lux-app-header .lux-app-header div.lux-header-action lux-button button {
643
554
  lux-app-header .lux-app-header div.lux-header-action lux-button button .lux-button-label {
644
555
  font-weight: normal !important;
645
556
  }
646
- lux-app-header .lux-app-header div.lux-header-action lux-button button:not(.mat-accent):not(.mat-warn):not(.mat-primary):not(.mat-button-disabled) {
557
+ lux-app-header .lux-app-header div.lux-header-action lux-button button:not(.mat-accent):not(.mat-warn):not(.mat-primary):not([disabled]) {
647
558
  color: #003366;
648
559
  }
649
- lux-app-header .lux-app-header div.lux-header-action lux-button button:not(.mat-accent):not(.mat-warn):not(.mat-primary).mat-button-disabled {
560
+ lux-app-header .lux-app-header div.lux-header-action lux-button button:not(.mat-accent):not(.mat-warn):not(.mat-primary):disabled {
650
561
  color: #636d76;
651
562
  }
652
- lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-accent:not(.mat-button-disabled) {
563
+ lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-accent:not([disabled]) {
653
564
  color: #dcffe0;
654
565
  }
655
- lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-warn:not(.mat-button-disabled) {
566
+ lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-warn:not([disabled]) {
656
567
  color: #ffffff;
657
568
  }
658
- lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-primary:not(.mat-button-disabled) {
569
+ lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-primary:not([disabled]) {
659
570
  color: #6e93ff;
660
571
  }
661
572
  lux-app-header .lux-app-header div.lux-header-action lux-button button.lux-button-rounded {
@@ -717,9 +628,6 @@ lux-app-header .lux-header-side-nav .lux-right-nav-trigger {
717
628
  padding-right: 8px;
718
629
  padding-left: 8px;
719
630
  }
720
- lux-app-header .lux-header-side-nav .lux-right-nav-trigger .mat-button-wrapper > span {
721
- display: inline-block;
722
- }
723
631
  lux-app-header .lux-header-side-nav .lux-side-nav-trigger-active {
724
632
  background-color: rgba(0, 0, 0, 0.12);
725
633
  }
@@ -814,26 +722,10 @@ lux-app-header .lux-side-nav .lux-side-nav-footer {
814
722
  color: #003366;
815
723
  }
816
724
 
817
- .lux-right-nav-menu lux-button .mat-button-wrapper,
818
- .lux-right-nav-menu .lux-menu-item .mat-button-wrapper,
819
- .lux-right-nav-menu .lux-action-nav-menu lux-button .mat-button-wrapper,
820
- .lux-side-nav .lux-side-nav-content lux-button .mat-button-wrapper,
821
- .lux-side-nav .lux-side-nav-content .lux-menu-item .mat-button-wrapper,
822
- .lux-side-nav .lux-side-nav-content .lux-action-nav-menu lux-button .mat-button-wrapper {
823
- font-weight: normal !important;
824
- font-size: 1rem;
825
- }
826
-
827
725
  .lux-header-menu-mobile .lux-menu-trigger {
828
726
  padding: 0 4px;
829
727
  margin: 0;
830
728
  }
831
- .lux-header-menu-mobile .lux-menu-trigger .mat-button-wrapper {
832
- display: inherit;
833
- }
834
- .lux-header-menu-mobile .lux-menu-trigger .mat-button-wrapper lux-icon {
835
- align-items: center;
836
- }
837
729
  .lux-header-menu-mobile .lux-menu-trigger button {
838
730
  padding: 0 6px;
839
731
  }
@@ -903,9 +795,6 @@ lux-app-header lux-menu-trigger button.lux-right-nav-trigger:hover lux-icon,
903
795
  lux-app-header lux-menu-trigger button.lux-right-nav-trigger:hover .lux-header-username {
904
796
  color: #003366 !important;
905
797
  }
906
- lux-app-header .lux-menu-trigger-default .mat-button-wrapper {
907
- display: block;
908
- }
909
798
 
910
799
  /** ########## Side-Nav ########## **/
911
800
  lux-side-nav .lux-side-nav-item.lux-side-nav-item-selected {
@@ -1037,7 +926,13 @@ lux-tile-ac {
1037
926
  box-sizing: border-box;
1038
927
  display: inline-block;
1039
928
  }
1040
- lux-tile-ac .mat-card.lux-tile-ac {
929
+ lux-tile-ac mat-card {
930
+ padding: 16px;
931
+ }
932
+ lux-tile-ac mat-card.mdc-card {
933
+ flex-direction: unset;
934
+ }
935
+ lux-tile-ac .mat-mdc-card.lux-tile-ac {
1041
936
  box-sizing: border-box;
1042
937
  display: flex;
1043
938
  height: 100%;
@@ -1046,42 +941,43 @@ lux-tile-ac .mat-card.lux-tile-ac {
1046
941
  background-image: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
1047
942
  border: 1px solid rgba(0, 0, 0, 0.12);
1048
943
  }
1049
- lux-tile-ac .mat-card.lux-tile-ac .lux-tile-icon-container {
944
+ lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-icon-container {
1050
945
  color: #003366;
1051
946
  grid-column-start: 2;
1052
947
  grid-row: 1/span 2;
1053
948
  }
1054
- lux-tile-ac .mat-card.lux-tile-ac .lux-tile-icon-container mat-icon.lux-icon {
949
+ lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-icon-container mat-icon.lux-icon {
1055
950
  padding: 0px !important;
1056
951
  height: 32px;
1057
952
  width: 32px;
1058
953
  }
1059
- lux-tile-ac .mat-card.lux-tile-ac .lux-tile-content {
954
+ lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content {
1060
955
  display: grid;
1061
956
  width: 100%;
1062
957
  grid-template-columns: 1fr auto;
1063
958
  gap: 5px;
1064
959
  }
1065
- lux-tile-ac .mat-card.lux-tile-ac .lux-tile-content mat-card-title.lux-tile-title {
960
+ lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content mat-card-title.lux-tile-title {
1066
961
  color: #003366;
1067
962
  font-family: Korb, "Blogger Sans", "Source Sans Pro", Arial, sans-serif, "Source Sans Pro", Arial, sans-serif;
963
+ line-height: 30px;
1068
964
  font-size: 1.25rem;
1069
965
  margin: 0;
1070
966
  }
1071
- lux-tile-ac .mat-card.lux-tile-ac .lux-tile-content mat-card-subtitle.mat-card-subtitle:not(:first-child) {
967
+ lux-tile-ac .mat-mdc-card.lux-tile-ac .lux-tile-content mat-card-subtitle.mat-mdc-card-subtitle:not(:first-child) {
1072
968
  color: #003366;
1073
969
  font-size: 0.875rem;
1074
970
  font-weight: normal;
1075
971
  margin: 0px;
1076
972
  grid-row-start: 2;
1077
973
  }
1078
- lux-tile-ac .mat-card.lux-tile-ac:not([class*=mat-elevation-z]) {
974
+ lux-tile-ac .mat-mdc-card.lux-tile-ac:not([class*=mat-elevation-z]) {
1079
975
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1080
976
  }
1081
- lux-tile-ac .mat-card.lux-tile-ac[class~=lux-cursor]:focus-visible {
977
+ lux-tile-ac .mat-mdc-card.lux-tile-ac[class~=lux-cursor]:focus-visible {
1082
978
  outline: 4px solid #2e8533 !important;
1083
979
  }
1084
- lux-tile-ac .mat-card.lux-tile-ac[class~=lux-cursor]:hover {
980
+ lux-tile-ac .mat-mdc-card.lux-tile-ac[class~=lux-cursor]:hover {
1085
981
  border-color: #003366;
1086
982
  background: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
1087
983
  }
@@ -1097,13 +993,20 @@ lux-tile .lux-notification-new {
1097
993
  lux-tile .lux-highlight {
1098
994
  color: #003366;
1099
995
  }
1100
- lux-tile mat-card.mat-card {
996
+ lux-tile .mat-mdc-card-outlined {
997
+ border: none;
998
+ }
999
+ lux-tile mat-card.mat-mdc-card-outlined {
1000
+ padding: 16px;
1001
+ }
1002
+ lux-tile mat-card.mat-mdc-card-outlined.mat-mdc-card {
1101
1003
  padding: 0;
1102
1004
  }
1103
- lux-tile mat-card.mat-card .mat-card-content {
1104
- margin: 0px;
1005
+ lux-tile mat-card.mat-mdc-card-outlined.mat-mdc-card mat-card-content.mat-mdc-card-content {
1006
+ margin: 0;
1007
+ padding: 0;
1105
1008
  }
1106
- lux-tile .mat-card:not([class*=mat-elevation-z]) {
1009
+ lux-tile .mat-mdc-card:not([class*=mat-elevation-z]) {
1107
1010
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1108
1011
  }
1109
1012
  lux-tile lux-divider {
@@ -1192,6 +1095,7 @@ lux-tile mat-card[class~=lux-cursor]:focus-visible {
1192
1095
  lux-tile mat-card[class~=lux-cursor]:hover {
1193
1096
  background-image: none !important;
1194
1097
  background-color: white !important;
1098
+ border-radius: 4px;
1195
1099
  box-shadow: 0px 3px 1px -2px rgba(46, 133, 51, 0.2), 0px 2px 2px 0px rgba(46, 133, 51, 0.14), 0px 1px 5px 0px rgba(46, 133, 51, 0.12);
1196
1100
  }
1197
1101
  lux-tile mat-card[class~=lux-cursor]:hover h2 {
@@ -1201,6 +1105,10 @@ lux-tile mat-card[class~=lux-cursor].lux-highlight:hover {
1201
1105
  color: #56bd66;
1202
1106
  }
1203
1107
 
1108
+ .mat-mdc-card-outlined {
1109
+ --mdc-outlined-card-container-shape: 4px;
1110
+ }
1111
+
1204
1112
  lux-card {
1205
1113
  /*
1206
1114
  Setze den Margin (links und rechts) auf 1px, damit sich die LUX-CARDS, welche sich innerhalb eines Tabs befinden,
@@ -1212,16 +1120,18 @@ lux-card.lux-flex mat-card,
1212
1120
  lux-card.lux-flex mat-card-content {
1213
1121
  flex: 1 1 auto;
1214
1122
  }
1215
- lux-card .mat-card.lux-card {
1123
+ lux-card .mat-mdc-card.lux-card {
1216
1124
  border: 1px solid rgba(0, 0, 0, 0.12);
1125
+ border-radius: 4px;
1217
1126
  background-color: #fff;
1218
1127
  display: flex;
1219
1128
  box-sizing: border-box;
1220
1129
  }
1221
- lux-card .mat-card.lux-card:not([class*=mat-elevation-z]) {
1130
+ lux-card .mat-mdc-card.lux-card:not([class*=mat-elevation-z]) {
1222
1131
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
1223
1132
  }
1224
- lux-card .mat-card.lux-card .mat-card-content {
1133
+ lux-card .mat-mdc-card.lux-card .mat-mdc-card-content {
1134
+ padding: 16px 0 0 0;
1225
1135
  font-size: 1rem;
1226
1136
  }
1227
1137
  lux-card .lux-card-content-container {
@@ -1283,6 +1193,10 @@ lux-card .lux-card-header .lux-card-subtitle {
1283
1193
  lux-card .lux-card-content-expanded {
1284
1194
  background: #ffffff;
1285
1195
  }
1196
+ lux-card mat-card-actions.mat-mdc-card-actions {
1197
+ justify-content: flex-end;
1198
+ min-height: 36px;
1199
+ }
1286
1200
  lux-card mat-card-actions.lux-card-actions {
1287
1201
  margin-right: 0;
1288
1202
  margin-left: 0;
@@ -1292,6 +1206,9 @@ lux-card .lux-tab-content .lux-card {
1292
1206
  margin-right: 1px;
1293
1207
  margin-left: 1px;
1294
1208
  }
1209
+ lux-card mat-card {
1210
+ padding: 16px;
1211
+ }
1295
1212
  lux-card mat-card[class~=lux-cursor]:hover {
1296
1213
  background-image: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
1297
1214
  background-color: #ffffff;
@@ -1628,7 +1545,7 @@ div {
1628
1545
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
1629
1546
  }
1630
1547
 
1631
- .mat-dialog-container {
1548
+ .mat-mdc-dialog-container {
1632
1549
  background-color: #ffffff !important;
1633
1550
  }
1634
1551
 
@@ -1777,6 +1694,15 @@ lux-card.lux-card-grow mat-card-content {
1777
1694
  overflow-x: auto;
1778
1695
  }
1779
1696
 
1697
+ .lux-reset-icon {
1698
+ display: inline-block;
1699
+ }
1700
+ .lux-reset-icon:hover {
1701
+ border-radius: 50%;
1702
+ color: #e3ebf5;
1703
+ cursor: pointer;
1704
+ }
1705
+
1780
1706
  /* <MARGINS / PADDINGS> */
1781
1707
  /*
1782
1708
  Erstellt die Layout-Gaps (Margin-Abstände für Children von fxLayouts).
@@ -3982,11 +3908,183 @@ lux-button.lux-uppercase .lux-button-label {
3982
3908
  column-rule-color: #000000;
3983
3909
  }
3984
3910
 
3911
+ .lux-badge-notification.mat-badge-before.mat-badge-above.mat-badge-small .mat-badge-content {
3912
+ left: -18px;
3913
+ right: unset;
3914
+ top: -9px;
3915
+ bottom: unset;
3916
+ }
3917
+ .lux-badge-notification.mat-badge-before.mat-badge-above.mat-badge-small.mat-badge-overlap .mat-badge-content {
3918
+ left: -9px;
3919
+ right: unset;
3920
+ top: -9px;
3921
+ bottom: unset;
3922
+ }
3923
+
3924
+ .lux-badge-notification.mat-badge-before.mat-badge-above.mat-badge-medium .mat-badge-content {
3925
+ left: -24px;
3926
+ right: unset;
3927
+ top: -12px;
3928
+ bottom: unset;
3929
+ }
3930
+ .lux-badge-notification.mat-badge-before.mat-badge-above.mat-badge-medium.mat-badge-overlap .mat-badge-content {
3931
+ left: -12px;
3932
+ right: unset;
3933
+ top: -12px;
3934
+ bottom: unset;
3935
+ }
3936
+
3937
+ .lux-badge-notification.mat-badge-before.mat-badge-above.mat-badge-large .mat-badge-content {
3938
+ left: -30px;
3939
+ right: unset;
3940
+ top: -15px;
3941
+ bottom: unset;
3942
+ }
3943
+ .lux-badge-notification.mat-badge-before.mat-badge-above.mat-badge-large.mat-badge-overlap .mat-badge-content {
3944
+ left: -15px;
3945
+ right: unset;
3946
+ top: -15px;
3947
+ bottom: unset;
3948
+ }
3949
+
3950
+ .lux-badge-notification.mat-badge-before.mat-badge-below.mat-badge-small .mat-badge-content {
3951
+ left: -18px;
3952
+ right: unset;
3953
+ top: unset;
3954
+ bottom: -9px;
3955
+ }
3956
+ .lux-badge-notification.mat-badge-before.mat-badge-below.mat-badge-small.mat-badge-overlap .mat-badge-content {
3957
+ left: -9px;
3958
+ right: unset;
3959
+ top: unset;
3960
+ bottom: -9px;
3961
+ }
3962
+
3963
+ .lux-badge-notification.mat-badge-before.mat-badge-below.mat-badge-medium .mat-badge-content {
3964
+ left: -24px;
3965
+ right: unset;
3966
+ top: unset;
3967
+ bottom: -12px;
3968
+ }
3969
+ .lux-badge-notification.mat-badge-before.mat-badge-below.mat-badge-medium.mat-badge-overlap .mat-badge-content {
3970
+ left: -12px;
3971
+ right: unset;
3972
+ top: unset;
3973
+ bottom: -12px;
3974
+ }
3975
+
3976
+ .lux-badge-notification.mat-badge-before.mat-badge-below.mat-badge-large .mat-badge-content {
3977
+ left: -30px;
3978
+ right: unset;
3979
+ top: unset;
3980
+ bottom: -15px;
3981
+ }
3982
+ .lux-badge-notification.mat-badge-before.mat-badge-below.mat-badge-large.mat-badge-overlap .mat-badge-content {
3983
+ left: -15px;
3984
+ right: unset;
3985
+ top: unset;
3986
+ bottom: -15px;
3987
+ }
3988
+
3989
+ .lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-small .mat-badge-content {
3990
+ left: unset;
3991
+ right: -18px;
3992
+ top: -9px;
3993
+ bottom: unset;
3994
+ }
3995
+ .lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-small.mat-badge-overlap .mat-badge-content {
3996
+ left: unset;
3997
+ right: -9px;
3998
+ top: -9px;
3999
+ bottom: unset;
4000
+ }
4001
+
4002
+ .lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-medium .mat-badge-content {
4003
+ left: unset;
4004
+ right: -24px;
4005
+ top: -12px;
4006
+ bottom: unset;
4007
+ }
4008
+ .lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-medium.mat-badge-overlap .mat-badge-content {
4009
+ left: unset;
4010
+ right: -12px;
4011
+ top: -12px;
4012
+ bottom: unset;
4013
+ }
4014
+
4015
+ .lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-large .mat-badge-content {
4016
+ left: unset;
4017
+ right: -30px;
4018
+ top: -15px;
4019
+ bottom: unset;
4020
+ }
4021
+ .lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-large.mat-badge-overlap .mat-badge-content {
4022
+ left: unset;
4023
+ right: -15px;
4024
+ top: -15px;
4025
+ bottom: unset;
4026
+ }
4027
+
4028
+ .lux-badge-notification.mat-badge-after.mat-badge-below.mat-badge-small .mat-badge-content {
4029
+ left: unset;
4030
+ right: -18px;
4031
+ top: unset;
4032
+ bottom: -9px;
4033
+ }
4034
+ .lux-badge-notification.mat-badge-after.mat-badge-below.mat-badge-small.mat-badge-overlap .mat-badge-content {
4035
+ left: unset;
4036
+ right: -9px;
4037
+ top: unset;
4038
+ bottom: -9px;
4039
+ }
4040
+
4041
+ .lux-badge-notification.mat-badge-after.mat-badge-below.mat-badge-medium .mat-badge-content {
4042
+ left: unset;
4043
+ right: -24px;
4044
+ top: unset;
4045
+ bottom: -12px;
4046
+ }
4047
+ .lux-badge-notification.mat-badge-after.mat-badge-below.mat-badge-medium.mat-badge-overlap .mat-badge-content {
4048
+ left: unset;
4049
+ right: -12px;
4050
+ top: unset;
4051
+ bottom: -12px;
4052
+ }
4053
+
4054
+ .lux-badge-notification.mat-badge-after.mat-badge-below.mat-badge-large .mat-badge-content {
4055
+ left: unset;
4056
+ right: -30px;
4057
+ top: unset;
4058
+ bottom: -15px;
4059
+ }
4060
+ .lux-badge-notification.mat-badge-after.mat-badge-below.mat-badge-large.mat-badge-overlap .mat-badge-content {
4061
+ left: unset;
4062
+ right: -15px;
4063
+ top: unset;
4064
+ bottom: -15px;
4065
+ }
4066
+
4067
+ .lux-badge-notification.mat-badge-small .mat-badge-content {
4068
+ padding-top: 2px;
4069
+ font-size: 9px;
4070
+ width: 18px;
4071
+ height: 18px;
4072
+ }
4073
+ .lux-badge-notification.mat-badge-medium .mat-badge-content {
4074
+ padding-top: 4px;
4075
+ font-size: 12px;
4076
+ width: 24px;
4077
+ height: 24px;
4078
+ }
3985
4079
  .lux-badge-notification.mat-badge-large .mat-badge-content {
4080
+ padding-top: 5px;
3986
4081
  font-size: 15px;
4082
+ width: 30px;
4083
+ height: 30px;
3987
4084
  }
3988
4085
  .lux-badge-notification.mat-badge .mat-badge-content {
3989
- border: 2px solid white;
4086
+ border-radius: 50px;
4087
+ border: 2px solid #ffffff;
3990
4088
  }
3991
4089
  .lux-badge-notification.mat-badge.lux-badge-no-border .mat-badge-content {
3992
4090
  border: 2px solid transparent;
@@ -4127,7 +4225,7 @@ lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authen
4127
4225
  lux-form-control-wrapper .lux-form-control-wrapper.lux-form-control-error-authentic:not(.lux-form-control-disabled-authentic) .lux-form-control-misc-authentic .lux-alert-icon mat-icon.mat-icon {
4128
4226
  box-sizing: border-box;
4129
4227
  }
4130
- 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-error {
4228
+ 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 {
4131
4229
  background-color: rgb(255, 228, 231);
4132
4230
  border-radius: 4px;
4133
4231
  padding-right: 2px;
@@ -4156,22 +4254,48 @@ lux-form-control-wrapper select:-webkit-autofill:focus {
4156
4254
  transition: background-color 5000s ease-in-out 0s;
4157
4255
  }
4158
4256
 
4257
+ /*
4258
+ * Theming for LUX-Autocomplete
4259
+ */
4260
+ div.mat-mdc-autocomplete-panel.lux-autocomplete-panel-ac {
4261
+ padding-top: 0;
4262
+ padding-bottom: 0;
4263
+ }
4264
+ div.mat-mdc-autocomplete-panel.lux-autocomplete-panel-ac mat-option .mat-pseudo-checkbox {
4265
+ display: none;
4266
+ }
4267
+
4159
4268
  /*
4160
4269
  * Theming for LUX-Select
4161
4270
  */
4271
+ .mat-mdc-select-panel {
4272
+ --mat-full-pseudo-checkbox-selected-checkmark-color: #ffffff;
4273
+ }
4274
+
4275
+ div.mat-mdc-select-panel.lux-select-panel-ac {
4276
+ padding-top: 0;
4277
+ padding-bottom: 0;
4278
+ }
4279
+ div.mat-mdc-select-panel.lux-select-panel-ac .mat-mdc-option {
4280
+ --mat-option-selected-state-label-text-color: #ffffff;
4281
+ --mat-option-selected-state-layer-color: #e3ebf5;
4282
+ --mat-option-focus-state-layer-color: #e3ebf5;
4283
+ --mat-option-hover-state-layer-color: #e3ebf5;
4284
+ }
4285
+
4162
4286
  lux-select-ac mat-select,
4163
4287
  lux-lookup-combobox-ac mat-select {
4164
4288
  font-family: "Source Sans Pro", Arial, sans-serif;
4165
4289
  height: calc(1.5em - 1px) !important;
4166
4290
  }
4167
- lux-select-ac mat-select .mat-select-arrow-wrapper,
4168
- lux-lookup-combobox-ac mat-select .mat-select-arrow-wrapper {
4291
+ lux-select-ac mat-select .mat-mdc-select-arrow-wrapper,
4292
+ lux-lookup-combobox-ac mat-select .mat-mdc-select-arrow-wrapper {
4169
4293
  margin-left: 2px;
4170
4294
  height: 24px;
4171
4295
  width: 24px;
4172
4296
  }
4173
- lux-select-ac mat-select .mat-select-arrow-wrapper .mat-select-arrow,
4174
- lux-lookup-combobox-ac mat-select .mat-select-arrow-wrapper .mat-select-arrow {
4297
+ lux-select-ac mat-select .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow,
4298
+ lux-lookup-combobox-ac mat-select .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
4175
4299
  border: none;
4176
4300
  width: 100%;
4177
4301
  height: 100%;
@@ -4186,24 +4310,24 @@ lux-lookup-combobox-ac mat-select .mat-select-arrow-wrapper .mat-select-arrow {
4186
4310
  mask-position: center;
4187
4311
  mask-size: cover;
4188
4312
  }
4189
- lux-select-ac mat-select[aria-disabled=true] .mat-select-arrow,
4190
- lux-lookup-combobox-ac mat-select[aria-disabled=true] .mat-select-arrow {
4313
+ lux-select-ac mat-select[aria-readonly=true] .mat-mdc-select-arrow,
4314
+ lux-lookup-combobox-ac mat-select[aria-readonly=true] .mat-mdc-select-arrow {
4191
4315
  background-color: #636d76;
4192
4316
  }
4193
- lux-select-ac mat-select[aria-disabled=false] .mat-select-arrow,
4194
- lux-lookup-combobox-ac mat-select[aria-disabled=false] .mat-select-arrow {
4317
+ lux-select-ac mat-select[aria-readonly=true] .mat-mdc-select-trigger,
4318
+ lux-lookup-combobox-ac mat-select[aria-readonly=true] .mat-mdc-select-trigger {
4319
+ cursor: text;
4320
+ }
4321
+ lux-select-ac mat-select[aria-readonly=false] .mat-mdc-select-arrow,
4322
+ lux-lookup-combobox-ac mat-select[aria-readonly=false] .mat-mdc-select-arrow {
4195
4323
  background-color: #003366;
4196
4324
  }
4197
- lux-select-ac mat-select[aria-readonly=true] .mat-select-arrow,
4198
- lux-lookup-combobox-ac mat-select[aria-readonly=true] .mat-select-arrow {
4325
+ lux-select-ac mat-select[aria-disabled=true] .mat-mdc-select-arrow,
4326
+ lux-lookup-combobox-ac mat-select[aria-disabled=true] .mat-mdc-select-arrow {
4199
4327
  background-color: #636d76;
4200
4328
  }
4201
- lux-select-ac mat-select[aria-readonly=true] .mat-select-trigger,
4202
- lux-lookup-combobox-ac mat-select[aria-readonly=true] .mat-select-trigger {
4203
- cursor: text;
4204
- }
4205
- lux-select-ac mat-select[aria-readonly=false] .mat-select-arrow,
4206
- lux-lookup-combobox-ac mat-select[aria-readonly=false] .mat-select-arrow {
4329
+ lux-select-ac mat-select[aria-disabled=false] .mat-mdc-select-arrow,
4330
+ lux-lookup-combobox-ac mat-select[aria-disabled=false] .mat-mdc-select-arrow {
4207
4331
  background-color: #003366;
4208
4332
  }
4209
4333
 
@@ -4215,63 +4339,48 @@ lux-lookup-combobox-ac mat-select[aria-readonly=false] .mat-select-arrow {
4215
4339
  .cdk-overlay-pane .mat-option {
4216
4340
  font-family: "Source Sans Pro", Arial, sans-serif;
4217
4341
  }
4218
- .cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-ac,
4219
- .cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac,
4220
- .cdk-overlay-pane .mat-select-panel.lux-select-panel-ac,
4221
- .cdk-overlay-pane .mat-select-panel.lux-select-panel-ac-multiple {
4342
+ .cdk-overlay-pane .mat-mdc-autocomplete-panel.lux-autocomplete-panel-ac,
4343
+ .cdk-overlay-pane .mat-mdc-autocomplete-panel.lux-autocomplete-panel-dense-ac,
4344
+ .cdk-overlay-pane .mat-mdc-select-panel.lux-select-panel-ac,
4345
+ .cdk-overlay-pane .mat-mdc-select-panel.lux-select-panel-ac-multiple {
4222
4346
  border: 2px solid #003366;
4223
- border-radius: 4px;
4347
+ border-radius: 4px !important;
4224
4348
  box-shadow: none !important;
4225
4349
  }
4226
- .cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-ac .mat-pseudo-checkbox,
4227
- .cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac .mat-pseudo-checkbox,
4228
- .cdk-overlay-pane .mat-select-panel.lux-select-panel-ac .mat-pseudo-checkbox,
4229
- .cdk-overlay-pane .mat-select-panel.lux-select-panel-ac-multiple .mat-pseudo-checkbox {
4230
- color: #003366;
4231
- }
4232
- .cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-ac,
4233
- .cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac {
4234
- min-width: calc(100% + 14px) !important;
4235
- max-width: calc(100% + 14px) !important;
4236
- margin: 13px -9px 0px;
4237
- }
4238
- .cdk-overlay-pane .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac {
4239
- margin-top: 7px;
4240
- }
4241
4350
 
4242
4351
  /*
4243
4352
  * Theming für Lux-Checkbox
4244
4353
  */
4354
+ lux-checkbox-ac input:focus ~ .mdc-checkbox__background,
4355
+ lux-checkbox-ac input:hover ~ .mdc-checkbox__background,
4356
+ lux-checkbox-ac .mat-mdc-checkbox-touch-target:hover ~ .mdc-checkbox__background {
4357
+ border-color: #003366 !important;
4358
+ }
4359
+ lux-checkbox-ac input:focus-visible ~ .mdc-checkbox__background {
4360
+ border-color: #003366 !important;
4361
+ outline: 4px solid #2e8533 !important;
4362
+ }
4363
+ lux-checkbox-ac .mdc-checkbox {
4364
+ padding: 0;
4365
+ align-self: flex-start;
4366
+ margin-top: 0.2em;
4367
+ }
4368
+ lux-checkbox-ac .mdc-checkbox .mdc-checkbox__background {
4369
+ top: 0;
4370
+ left: 0;
4371
+ }
4245
4372
  lux-checkbox-ac label {
4246
4373
  font-family: "Source Sans Pro", Arial, sans-serif;
4247
4374
  font-size: 1rem;
4248
4375
  color: #003366;
4249
4376
  cursor: pointer;
4250
4377
  }
4251
- lux-checkbox-ac label .mat-checkbox-label {
4252
- -ms-word-break: break-word;
4253
- word-break: break-word;
4254
- white-space: normal;
4255
- }
4256
- lux-checkbox-ac .mat-checkbox-ripple {
4378
+ lux-checkbox-ac .mat-mdc-checkbox-ripple,
4379
+ lux-checkbox-ac .mdc-checkbox__ripple {
4257
4380
  display: none;
4258
4381
  }
4259
- lux-checkbox-ac .mat-checkbox-inner-container {
4260
- width: 1.25em;
4261
- height: 1.25em;
4262
- margin-top: 0.125em;
4263
- }
4264
- lux-checkbox-ac .mat-checkbox-inner-container .mat-checkbox-frame {
4265
- border-color: #003366;
4266
- }
4267
- lux-checkbox-ac .mat-checkbox-inner-container .mat-checkbox-frame {
4268
- border-color: #003366;
4269
- }
4270
- lux-checkbox-ac .mat-checkbox-disabled label {
4271
- color: #636d76;
4272
- }
4273
- lux-checkbox-ac .mat-checkbox-disabled .mat-checkbox-inner-container .mat-checkbox-frame {
4274
- border-color: #636d76;
4382
+ lux-checkbox-ac .mat-mdc-checkbox-disabled .mdc-checkbox {
4383
+ color: #ffffff;
4275
4384
  }
4276
4385
  lux-checkbox-ac.lux-form-control-readonly {
4277
4386
  pointer-events: none;
@@ -4306,13 +4415,14 @@ lux-datetimepicker-ac mat-datepicker-toggle .mdc-icon-button.mat-mdc-icon-button
4306
4415
  }
4307
4416
 
4308
4417
  .cdk-overlay-pane .mat-datepicker-content,
4309
- .lux-datetimepicker-overlay .mat-card.lux-card {
4418
+ .lux-datetimepicker-overlay .mat-mdc-card.lux-card {
4419
+ --mat-datepicker-calendar-container-shape: 4px;
4310
4420
  border: 2px solid #003366;
4311
4421
  box-shadow: none !important;
4312
4422
  margin: 13px -9px 0;
4313
4423
  }
4314
4424
  .cdk-overlay-pane .mat-datepicker-content .mat-calendar-header button:hover,
4315
- .lux-datetimepicker-overlay .mat-card.lux-card .mat-calendar-header button:hover {
4425
+ .lux-datetimepicker-overlay .mat-mdc-card.lux-card .mat-calendar-header button:hover {
4316
4426
  background-color: #fff !important;
4317
4427
  color: #4d7094;
4318
4428
  }
@@ -4320,85 +4430,161 @@ lux-datetimepicker-ac mat-datepicker-toggle .mdc-icon-button.mat-mdc-icon-button
4320
4430
  /*
4321
4431
  * Theming für lux-Toggle
4322
4432
  */
4323
- lux-toggle-ac .mat-slide-toggle label {
4324
- color: #003366;
4325
- font-family: "Source Sans Pro", Arial, sans-serif;
4433
+ lux-toggle-ac mat-slide-toggle .mdc-switch__ripple {
4434
+ display: none;
4326
4435
  }
4327
- lux-toggle-ac .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
4328
- background-color: #e0e7ed;
4436
+ lux-toggle-ac mat-slide-toggle button.mdc-switch--disabled.mdc-switch--checked .mdc-switch__track::before {
4437
+ border-color: #e0e0e0 !important;
4329
4438
  }
4330
- lux-toggle-ac .mat-slide-toggle .mat-slide-toggle-thumb {
4331
- box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
4439
+ lux-toggle-ac mat-slide-toggle button.mdc-switch--disabled.mdc-switch--checked .mdc-switch__track::after {
4440
+ border-color: #e0e0e0 !important;
4441
+ background: #e0e0e0;
4332
4442
  }
4333
- lux-toggle-ac .mat-slide-toggle.mat-disabled {
4334
- opacity: 1;
4443
+ lux-toggle-ac mat-slide-toggle button.mdc-switch--disabled.mdc-switch--checked .mdc-switch__icons svg.mdc-switch__icon--on {
4444
+ fill: #636d76;
4445
+ background-color: white;
4335
4446
  }
4336
- lux-toggle-ac .mat-slide-toggle.mat-disabled .mat-slide-toggle-bar {
4337
- opacity: 0.38;
4447
+ lux-toggle-ac mat-slide-toggle button.mdc-switch--disabled:not(.mdc-switch--checked) .mdc-switch__track::before {
4448
+ border-color: #e0e0e0 !important;
4449
+ background: White;
4338
4450
  }
4339
- lux-toggle-ac .mat-slide-toggle.mat-disabled .lux-form-label {
4340
- color: #636d76;
4451
+ lux-toggle-ac mat-slide-toggle button.mdc-switch--disabled:not(.mdc-switch--checked) .mdc-switch__track::after {
4452
+ border-color: #e0e0e0 !important;
4341
4453
  }
4342
- lux-toggle-ac .mat-slide-toggle.mat-disabled.mat-checked .mat-slide-toggle-bar {
4343
- background-color: #636d76;
4454
+ lux-toggle-ac mat-slide-toggle button.mdc-switch--disabled:not(.mdc-switch--checked) .mdc-switch__icons svg.mdc-switch__icon--off {
4455
+ fill: white;
4456
+ background-color: #a9a9a9;
4457
+ }
4458
+ lux-toggle-ac mat-slide-toggle button:not(.mdc-switch--disabled).mdc-switch--checked .mdc-switch__track::before {
4459
+ border-color: #003366 !important;
4344
4460
  }
4345
- lux-toggle-ac .mat-slide-toggle.mat-disabled.mat-checked .mat-slide-toggle-thumb {
4346
- background-color: #666666;
4461
+ lux-toggle-ac mat-slide-toggle button:not(.mdc-switch--disabled).mdc-switch--checked .mdc-switch__track::after {
4462
+ border-color: #003366 !important;
4347
4463
  }
4348
- lux-toggle-ac .mat-slide-toggle.mat-disabled:not(.mat-checked) .mat-slide-toggle-bar {
4349
- background-color: #636d76;
4464
+ lux-toggle-ac mat-slide-toggle button:not(.mdc-switch--disabled).mdc-switch--checked .mdc-switch__icons svg.mdc-switch__icon--on {
4465
+ fill: #003366;
4466
+ background-color: white;
4467
+ }
4468
+ lux-toggle-ac mat-slide-toggle button:not(.mdc-switch--disabled):not(.mdc-switch--checked) .mdc-switch__track::before {
4469
+ border-color: #003366 !important;
4470
+ }
4471
+ lux-toggle-ac mat-slide-toggle button:not(.mdc-switch--disabled):not(.mdc-switch--checked) .mdc-switch__track::after {
4472
+ border-color: #003366 !important;
4473
+ }
4474
+ lux-toggle-ac mat-slide-toggle button {
4475
+ width: 50px;
4476
+ height: 24px;
4477
+ }
4478
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__track {
4479
+ width: 50px;
4480
+ height: 30px;
4481
+ border-radius: 15px;
4482
+ }
4483
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__track::before {
4484
+ border-width: 2px !important;
4485
+ }
4486
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__track::after {
4487
+ border-width: 2px !important;
4488
+ }
4489
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__handle {
4490
+ width: 23px;
4491
+ height: 23px;
4492
+ margin-left: 3px !important;
4493
+ border-radius: 15px;
4494
+ }
4495
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__handle-track {
4496
+ width: 20px;
4497
+ }
4498
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__icons {
4499
+ width: 23px;
4500
+ height: 23px;
4501
+ }
4502
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__icons svg.mdc-switch__icon--on {
4503
+ border-radius: 15px;
4504
+ }
4505
+ lux-toggle-ac mat-slide-toggle button .mdc-switch__icons svg.mdc-switch__icon--off {
4506
+ border-radius: 15px;
4350
4507
  }
4351
4508
  lux-toggle-ac.lux-form-control-readonly {
4352
4509
  pointer-events: none;
4353
4510
  }
4511
+ lux-toggle-ac.lux-form-control-readonly button {
4512
+ pointer-events: none;
4513
+ }
4514
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__track {
4515
+ pointer-events: none;
4516
+ }
4517
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__track::before {
4518
+ pointer-events: none;
4519
+ }
4520
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__track::after {
4521
+ pointer-events: none;
4522
+ }
4523
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__handle {
4524
+ pointer-events: none;
4525
+ }
4526
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__handle-track {
4527
+ pointer-events: none;
4528
+ }
4529
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__icons {
4530
+ pointer-events: none;
4531
+ }
4532
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__icons svg.mdc-switch__icon--on {
4533
+ pointer-events: none;
4534
+ }
4535
+ lux-toggle-ac.lux-form-control-readonly button .mdc-switch__icons svg.mdc-switch__icon--off {
4536
+ pointer-events: none;
4537
+ }
4354
4538
 
4355
4539
  /*
4356
4540
  * Theming for LUX-Radio
4357
4541
  */
4358
- lux-radio-ac .mat-radio-container {
4542
+ lux-radio-ac .mat-mdc-radio-button .mdc-radio {
4543
+ padding: 0;
4544
+ }
4545
+ lux-radio-ac mat-radio-button:not(.mat-mdc-radio-checked) input:hover ~ .mdc-radio__background div.mdc-radio__outer-circle,
4546
+ lux-radio-ac mat-radio-button:not(.mat-mdc-radio-checked) .mat-mdc-radio-touch-target:hover ~ .mdc-radio__background div.mdc-radio__outer-circle {
4547
+ border-color: #003366 !important;
4548
+ }
4549
+ lux-radio-ac input:focus-visible ~ .mdc-radio__background {
4550
+ border-color: #003366 !important;
4551
+ outline: 4px solid #2e8533 !important;
4552
+ }
4553
+ lux-radio-ac .mdc-radio__background {
4359
4554
  border-radius: 50%;
4360
4555
  }
4361
- lux-radio-ac .mat-radio-container span.mat-radio-outer-circle {
4362
- border-color: #003366;
4556
+ lux-radio-ac .mdc-radio__background::before {
4557
+ display: none;
4363
4558
  }
4364
- lux-radio-ac .mat-radio-label {
4559
+ lux-radio-ac .mdc-label {
4365
4560
  color: #003366;
4366
4561
  font-family: "Source Sans Pro", Arial, sans-serif;
4367
4562
  }
4368
- lux-radio-ac .mat-radio-checked.mat-radio-disabled label .mat-radio-container span.mat-radio-inner-circle {
4369
- background-color: #636d76;
4370
- }
4371
- lux-radio-ac .mat-radio-checked.mat-radio-disabled label .mat-radio-container span.mat-radio-outer-circle {
4372
- border-color: #636d76;
4373
- }
4374
- lux-radio-ac .mat-radio-group {
4563
+ lux-radio-ac .mat-mdc-radio-group {
4375
4564
  display: flex;
4376
4565
  box-sizing: border-box;
4377
- gap: 0.75em;
4378
4566
  place-content: stretch flex-start;
4379
4567
  align-items: stretch;
4380
4568
  }
4381
- lux-radio-ac .mat-radio-group.lux-horizontal {
4382
- row-gap: 0.75em;
4569
+ lux-radio-ac .mat-mdc-radio-group.lux-horizontal {
4570
+ gap: 0.75em;
4383
4571
  flex-direction: row;
4384
4572
  flex-flow: wrap;
4385
4573
  max-height: 100%;
4386
4574
  }
4387
- lux-radio-ac .mat-radio-group.lux-vertical {
4575
+ lux-radio-ac .mat-mdc-radio-group.lux-vertical {
4576
+ gap: 0;
4388
4577
  flex-direction: column;
4389
4578
  max-width: 100%;
4390
4579
  }
4391
- lux-radio-ac .mat-radio-group .mat-radio-button {
4580
+ lux-radio-ac .mat-mdc-radio-group .mat-mdc-radio-button {
4392
4581
  flex: 0 0 auto;
4393
4582
  box-sizing: border-box;
4394
4583
  }
4395
- lux-radio-ac .mat-radio-disabled label.mat-radio-label .mat-radio-label-content {
4396
- color: #636d76;
4397
- }
4398
- lux-radio-ac .mat-radio-disabled label.mat-radio-label .mat-radio-container span.mat-radio-inner-circle {
4399
- background-color: #636d76;
4584
+ lux-radio-ac .mat-mdc-radio-group .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background div.mdc-radio__inner-circle {
4585
+ border-color: #636d76;
4400
4586
  }
4401
- lux-radio-ac .mat-radio-disabled label.mat-radio-label .mat-radio-container span.mat-radio-outer-circle {
4587
+ lux-radio-ac .mat-mdc-radio-group .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background div.mdc-radio__outer-circle {
4402
4588
  border-color: #636d76;
4403
4589
  }
4404
4590
  lux-radio-ac.lux-form-control-readonly {
@@ -4432,6 +4618,53 @@ lux-textarea-ac text-area {
4432
4618
  /**
4433
4619
  * Theming für LUX-Chips
4434
4620
  */
4621
+ lux-chips-ac {
4622
+ --mdc-chip-container-shape-radius: 20px;
4623
+ --mdc-chip-outline-width: 1px;
4624
+ }
4625
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) span.mdc-evolution-chip__action::before {
4626
+ border: none;
4627
+ }
4628
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-default {
4629
+ background-color: var(--lux-theme-primary-500) !important;
4630
+ }
4631
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-default .mat-mdc-chip-action-label {
4632
+ color: white;
4633
+ }
4634
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-default lux-icon {
4635
+ color: white;
4636
+ opacity: 1;
4637
+ }
4638
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-primary {
4639
+ background-color: var(--lux-theme-primary-500) !important;
4640
+ }
4641
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-primary .mat-mdc-chip-action-label {
4642
+ color: white;
4643
+ }
4644
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-primary lux-icon {
4645
+ color: white;
4646
+ opacity: 1;
4647
+ }
4648
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-accent {
4649
+ background-color: var(--lux-theme-accent-500) !important;
4650
+ }
4651
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-accent .mat-mdc-chip-action-label {
4652
+ color: white;
4653
+ }
4654
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-accent lux-icon {
4655
+ color: white;
4656
+ opacity: 1;
4657
+ }
4658
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-warn {
4659
+ background-color: var(--lux-theme-warn-500) !important;
4660
+ }
4661
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-warn .mat-mdc-chip-action-label {
4662
+ color: white;
4663
+ }
4664
+ lux-chips-ac .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled).lux-chip-color-warn lux-icon {
4665
+ color: white;
4666
+ opacity: 1;
4667
+ }
4435
4668
  lux-chips-ac .lux-chips-autocomplete-icon {
4436
4669
  color: var(--lux-theme-primary-500);
4437
4670
  font-size: 1.5rem;
@@ -4442,24 +4675,15 @@ lux-chips-ac .lux-chips-autocomplete-icon.lux-disabled {
4442
4675
  color: var(--lux-theme-dark-disabled-text);
4443
4676
  cursor: default;
4444
4677
  }
4445
- lux-chips-ac .lux-chips mat-chip.mat-chip-selected .mat-chip-remove {
4446
- color: #ffffff !important;
4447
- opacity: 1 !important;
4448
- }
4449
- lux-chips-ac .lux-chips mat-chip:not(.mat-chip-selected) .mat-chip-remove {
4450
- color: #ffffff !important;
4451
- opacity: 1 !important;
4452
- }
4453
- lux-chips-ac .lux-chips mat-chip.mat-chip-disabled {
4454
- background-color: #636d76 !important;
4678
+ lux-chips-ac .lux-chips .mat-mdc-chip-list-disabled {
4455
4679
  color: #ffffff !important;
4456
4680
  opacity: 1;
4457
4681
  }
4458
- lux-chips-ac .lux-chips mat-chip.mat-chip-disabled lux-icon mat-icon {
4682
+ lux-chips-ac .lux-chips .mat-mdc-chip-list-disabled .mdc-evolution-chip__text-label {
4459
4683
  color: #ffffff;
4460
4684
  }
4461
- lux-chips-ac .lux-chips mat-chip-list div.mat-chip-list-wrapper {
4462
- margin: 0px 0px 0px -4px;
4685
+ lux-chips-ac .lux-chips .mat-mdc-chip-list-disabled lux-icon mat-icon {
4686
+ color: #ffffff;
4463
4687
  }
4464
4688
  lux-chips-ac .lux-hide-input-border .lux-form-control-container-authentic {
4465
4689
  border: none;
@@ -4467,8 +4691,8 @@ lux-chips-ac .lux-hide-input-border .lux-form-control-container-authentic {
4467
4691
  box-shadow: none !important;
4468
4692
  }
4469
4693
 
4470
- .lux-chips-ac-autocomplete-panel.mat-autocomplete-panel,
4471
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel {
4694
+ .lux-chips-ac-autocomplete-panel.mat-mdc-autocomplete-panel,
4695
+ .lux-chips-ac-autocomplete-panel-dense.mat-mdc-autocomplete-panel {
4472
4696
  margin-top: -18px;
4473
4697
  margin-left: 0;
4474
4698
  margin-right: 0;
@@ -4477,18 +4701,65 @@ lux-chips-ac .lux-hide-input-border .lux-form-control-container-authentic {
4477
4701
  border: 2px solid #003366;
4478
4702
  }
4479
4703
 
4480
- .lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel {
4704
+ .lux-chips-ac-autocomplete-panel-dense.mat-mdc-autocomplete-panel {
4481
4705
  margin-top: -18px;
4482
4706
  }
4483
4707
 
4484
4708
  /*
4485
4709
  * Theming for LUX-Slider
4486
4710
  */
4487
- lux-slider-ac mat-slider.lux-slider-ac.mat-slider-horizontal {
4488
- height: 1.5em;
4711
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row {
4712
+ padding-top: 20px;
4713
+ padding-bottom: 4px;
4714
+ }
4715
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider,
4716
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider input {
4717
+ max-height: 24px;
4718
+ }
4719
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider.mat-primary .mdc-slider__value-indicator {
4720
+ background-color: var(--lux-theme-primary-500);
4721
+ }
4722
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider.mat-primary .mdc-slider__value-indicator::before {
4723
+ border-top-color: var(--lux-theme-primary-500);
4489
4724
  }
4490
- lux-slider-ac .lux-show-thumb-label-always.mat-slider-disabled .mat-slider-thumb-label {
4725
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider.mat-accent .mdc-slider__value-indicator {
4726
+ background-color: var(--lux-theme-accent-500);
4727
+ }
4728
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider.mat-accent .mdc-slider__value-indicator::before {
4729
+ border-top-color: var(--lux-theme-accent-500);
4730
+ }
4731
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider.mat-warn .mdc-slider__value-indicator {
4732
+ background-color: var(--lux-theme-warn-500);
4733
+ }
4734
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider.mat-warn .mdc-slider__value-indicator::before {
4735
+ border-top-color: var(--lux-theme-warn-500);
4736
+ }
4737
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row .mdc-slider__track {
4491
4738
  background-color: #636d76;
4739
+ height: 2px;
4740
+ }
4741
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row .mdc-slider__value-indicator-container {
4742
+ left: 26%;
4743
+ }
4744
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row .mdc-slider__thumb-knob {
4745
+ height: 15px;
4746
+ width: 15px;
4747
+ top: 27%;
4748
+ border-radius: 50%;
4749
+ }
4750
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider-visual-thumb div.mdc-slider__value-indicator-container {
4751
+ bottom: 48px;
4752
+ }
4753
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider-visual-thumb div.mdc-slider__value-indicator-container .mdc-slider__value-indicator {
4754
+ border-radius: 50%;
4755
+ min-height: 25px;
4756
+ min-width: 20px;
4757
+ padding-left: 2px;
4758
+ padding-right: 2px;
4759
+ }
4760
+ lux-slider-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row mat-slider-visual-thumb div.mdc-slider__value-indicator-container .mdc-slider__value-indicator-text {
4761
+ min-width: 100%;
4762
+ font-size: 12px;
4492
4763
  }
4493
4764
  lux-slider-ac.lux-form-control-readonly {
4494
4765
  pointer-events: none;
@@ -4576,16 +4847,16 @@ lux-slider-ac.lux-form-control-readonly {
4576
4847
  .lux-master-detail-ac .lux-master-header-container-ac h2 {
4577
4848
  font-size: 1rem;
4578
4849
  }
4579
- .lux-master-detail-ac .lux-master-header-container-ac mat-card-subtitle.mat-card-subtitle {
4850
+ .lux-master-detail-ac .lux-master-header-container-ac mat-card-subtitle.mat-mdc-card-subtitle {
4580
4851
  font-size: 0.875rem;
4581
4852
  }
4582
4853
  .lux-master-detail-ac .lux-master-header-container-ac .lux-master-header-content-container-ac {
4583
4854
  flex: 1 1 100%;
4584
4855
  max-width: 100%;
4585
4856
  }
4586
- .lux-master-detail-ac lux-filter-form .lux-filter-card mat-card.mat-card,
4587
- .lux-master-detail-ac .detail-header-container .lux-detail-header-ac mat-card.mat-card,
4588
- .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-card {
4857
+ .lux-master-detail-ac lux-filter-form .lux-filter-card mat-card.mat-mdc-card,
4858
+ .lux-master-detail-ac .detail-header-container .lux-detail-header-ac mat-card.mat-mdc-card,
4859
+ .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-mdc-card {
4589
4860
  padding: 12px;
4590
4861
  }
4591
4862
  .lux-master-detail-ac lux-filter-form .lux-filter-card mat-card-title,
@@ -4596,9 +4867,9 @@ lux-slider-ac.lux-form-control-readonly {
4596
4867
  .lux-master-detail-ac .lux-master-view-ac lux-list-item h2 {
4597
4868
  font-size: 1rem;
4598
4869
  }
4599
- .lux-master-detail-ac lux-filter-form .lux-filter-card mat-card-subtitle.mat-card-subtitle,
4600
- .lux-master-detail-ac .detail-header-container .lux-detail-header-ac mat-card-subtitle.mat-card-subtitle,
4601
- .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card-subtitle.mat-card-subtitle {
4870
+ .lux-master-detail-ac lux-filter-form .lux-filter-card mat-card-subtitle.mat-mdc-card-subtitle,
4871
+ .lux-master-detail-ac .detail-header-container .lux-detail-header-ac mat-card-subtitle.mat-mdc-card-subtitle,
4872
+ .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card-subtitle.mat-mdc-card-subtitle {
4602
4873
  font-size: 0.875rem;
4603
4874
  }
4604
4875
  .lux-master-detail-ac .lux-empty-master-header div.lux-master-header-container-ac {
@@ -4624,14 +4895,14 @@ lux-slider-ac.lux-form-control-readonly {
4624
4895
  * Die List-Items basieren auf einer Card, für die Masterliste werden hier die Schriftgrößen und der White-Space verkleinert
4625
4896
  */
4626
4897
  }
4627
- .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-card {
4898
+ .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-mdc-card {
4628
4899
  margin: 0px;
4629
4900
  }
4630
- .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-card lux-list-item-content :last-child {
4901
+ .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-mdc-card lux-list-item-content :last-child {
4631
4902
  margin-bottom: 0px;
4632
4903
  padding-bottom: 0px;
4633
4904
  }
4634
- .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-card lux-icon.lux-lx-icon {
4905
+ .lux-master-detail-ac .lux-master-view-ac lux-list-item mat-card.mat-mdc-card lux-icon.lux-lx-icon {
4635
4906
  width: 20px;
4636
4907
  height: 20px;
4637
4908
  }
@@ -4672,7 +4943,7 @@ lux-slider-ac.lux-form-control-readonly {
4672
4943
  .lux-master-detail-ac .lux-detail-ac-container.lux-empty-detail {
4673
4944
  width: 100%;
4674
4945
  }
4675
- .lux-master-detail-ac .lux-detail-ac-container .lux-detail-header-ac mat-card.mat-card.lux-card {
4946
+ .lux-master-detail-ac .lux-detail-ac-container .lux-detail-header-ac mat-card.mat-mdc-card.lux-card {
4676
4947
  border: none;
4677
4948
  }
4678
4949
  .lux-master-detail-ac .lux-detail-ac-container .lux-detail-empty-icon,
@@ -4684,7 +4955,7 @@ lux-slider-ac.lux-form-control-readonly {
4684
4955
  border: none;
4685
4956
  background-color: unset;
4686
4957
  }
4687
- .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .lux-detail-header-ac mat-card.mat-card.lux-card {
4958
+ .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .lux-detail-header-ac mat-card.mat-mdc-card.lux-card {
4688
4959
  border: 2px solid #003366;
4689
4960
  }
4690
4961
  .lux-master-detail-ac .lux-detail-ac-container.lux-detail-ac-container-mobile .back-to-master-button-container {
@@ -4858,6 +5129,20 @@ lux-button button.lux-button {
4858
5129
  font-weight: 600;
4859
5130
  height: 45px;
4860
5131
  }
5132
+ lux-button button.lux-button.mat-mdc-fab {
5133
+ border-radius: 50%;
5134
+ }
5135
+ lux-button button.lux-button:not(.mat-mdc-fab) {
5136
+ border-radius: 4px;
5137
+ border-width: 1px;
5138
+ }
5139
+ lux-button button.lux-button.mdc-button {
5140
+ padding: 0 16px;
5141
+ letter-spacing: 1.25px;
5142
+ }
5143
+ lux-button button.lux-button.mat-mdc-button.mat-unthemed {
5144
+ color: #003366;
5145
+ }
4861
5146
  lux-button button.lux-button .lux-button-content-container {
4862
5147
  display: flex;
4863
5148
  justify-content: center;
@@ -4865,11 +5150,11 @@ lux-button button.lux-button .lux-button-content-container {
4865
5150
  gap: 8px;
4866
5151
  flex-wrap: nowrap;
4867
5152
  }
4868
- lux-button button.lux-button.mat-button.mat-button-disabled, lux-button button.lux-button.mat-raised-button.mat-button-disabled, lux-button button.lux-button.mat-flat-button.mat-button-disabled, lux-button button.lux-button.mat-stroked-button.mat-button-disabled, lux-button button.lux-button.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]), lux-button button.lux-button.mat-fab.mat-button-disabled {
5153
+ lux-button button.lux-button.mat-mdc-button:disabled, lux-button button.lux-button.mat-mdc-raised-button:disabled, lux-button button.lux-button.mat-mdc-raised-button:disabled:not([class*=mat-elevation-z]), lux-button button.lux-button.mat-mdc-unelevated-button:disabled, lux-button button.lux-button.mat-mdc-outlined-button:disabled, lux-button button.lux-button.mat-mdc-fab:disabled {
4869
5154
  color: #636d76;
4870
5155
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
4871
5156
  }
4872
- lux-button button.lux-button.mat-raised-button:not([class*=mat-elevation-z]) {
5157
+ lux-button button.lux-button.mat-mdc-raised-button:not([class*=mat-elevation-z]) {
4873
5158
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
4874
5159
  }
4875
5160
  lux-button button.lux-button.lux-button-rounded {
@@ -4877,12 +5162,6 @@ lux-button button.lux-button.lux-button-rounded {
4877
5162
  width: 45px;
4878
5163
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
4879
5164
  }
4880
- lux-button button.lux-button.lux-button-rounded .mat-button-wrapper {
4881
- padding: 0;
4882
- height: 100%;
4883
- display: inline-flex;
4884
- align-items: center;
4885
- }
4886
5165
  lux-button button.lux-button.lux-button-rounded lux-icon.lux-button-icon-round {
4887
5166
  line-height: 1;
4888
5167
  }
@@ -4922,46 +5201,65 @@ lux-button button.lux-button .lux-button-badge {
4922
5201
  /*
4923
5202
  * Focus / Hover / Disabled
4924
5203
  */
4925
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]) .mat-button-focus-overlay {
4926
- display: none;
5204
+ lux-button button:not([disabled]) .mat-mdc-button-persistent-ripple::before {
5205
+ background-color: transparent;
5206
+ }
5207
+ lux-button button:not([disabled]).mat-mdc-fab:active, lux-button button:not([disabled]).mat-mdc-fab:focus {
5208
+ box-shadow: none;
5209
+ }
5210
+ lux-button button:not([disabled]).lux-button-rounded.mat-accent.lux-fab-rounded-default {
5211
+ background-color: white;
4927
5212
  }
4928
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]):focus-visible {
5213
+ lux-button button:not([disabled]).lux-button-rounded.mat-primary:not(.lux-stroked) {
5214
+ color: white;
5215
+ }
5216
+ lux-button button:not([disabled]).lux-button-rounded.mat-warn {
5217
+ color: white;
5218
+ }
5219
+ lux-button button:not([disabled]).lux-button-rounded.lux-stroked.mat-accent.lux-fab-stroked-default {
5220
+ background-color: white;
5221
+ border-color: rgba(0, 0, 0, 0.2);
5222
+ }
5223
+ lux-button button:not([disabled]):focus-visible {
4929
5224
  outline: calc(4px - 1px) solid #2e8533 !important;
4930
5225
  outline-offset: 1px;
4931
5226
  }
4932
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]):not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button):hover, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-stroked-button:hover {
5227
+ lux-button button:not([disabled]):not(.mat-mdc-fab):not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):hover, lux-button button:not([disabled]).mat-mdc-outlined-button:hover {
4933
5228
  background-color: #bdd0e8;
4934
5229
  }
4935
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]):not(.mat-fab):not(.mat-raised-button):not(.mat-flat-button):hover.mat-accent, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-stroked-button:hover.mat-accent {
5230
+ lux-button button:not([disabled]):not(.mat-mdc-fab):not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):hover.mat-accent, lux-button button:not([disabled]).mat-mdc-outlined-button:hover.mat-accent {
4936
5231
  color: #2b9838;
4937
5232
  }
4938
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:hover, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:hover, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:hover {
5233
+ lux-button button:not([disabled]).mat-mdc-fab:hover, lux-button button:not([disabled]).mat-mdc-raised-button:hover, lux-button button:not([disabled]).mat-mdc-unelevated-button:hover {
4939
5234
  background-color: #bdd0e8 !important;
4940
5235
  }
4941
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:hover.mat-accent, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:hover.mat-accent, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:hover.mat-accent {
5236
+ lux-button button:not([disabled]).mat-mdc-fab:hover.mat-accent, lux-button button:not([disabled]).mat-mdc-raised-button:hover.mat-accent, lux-button button:not([disabled]).mat-mdc-unelevated-button:hover.mat-accent {
4942
5237
  background-color: #7bcb87 !important;
4943
5238
  }
4944
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:hover.mat-warn, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:hover.mat-warn, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:hover.mat-warn {
5239
+ lux-button button:not([disabled]).mat-mdc-fab:hover.mat-warn, lux-button button:not([disabled]).mat-mdc-raised-button:hover.mat-warn, lux-button button:not([disabled]).mat-mdc-unelevated-button:hover.mat-warn {
4945
5240
  background-color: #ef7f85 !important;
4946
5241
  }
4947
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:hover.mat-primary, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:hover.mat-primary, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:hover.mat-primary {
5242
+ lux-button button:not([disabled]).mat-mdc-fab:hover.mat-primary, lux-button button:not([disabled]).mat-mdc-raised-button:hover.mat-primary, lux-button button:not([disabled]).mat-mdc-unelevated-button:hover.mat-primary {
4948
5243
  background-color: #004d99 !important;
4949
5244
  }
4950
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab.lux-button-rounded.lux-stroked:active {
5245
+ lux-button button:not([disabled]).mat-mdc-fab.lux-button-rounded.lux-stroked:active {
4951
5246
  box-shadow: unset;
4952
5247
  }
4953
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:focus-visible:not(:hover), lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:focus-visible:not(:hover), lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:focus-visible:not(:hover) {
5248
+ lux-button button:not([disabled]).mat-mdc-fab:focus-visible:not(:hover), lux-button button:not([disabled]).mat-mdc-raised-button:focus-visible:not(:hover), lux-button button:not([disabled]).mat-mdc-unelevated-button:focus-visible:not(:hover) {
4954
5249
  background-color: white !important;
4955
5250
  }
4956
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:focus-visible:not(:hover).mat-accent, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:focus-visible:not(:hover).mat-accent, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:focus-visible:not(:hover).mat-accent {
5251
+ lux-button button:not([disabled]).mat-mdc-fab:focus-visible:not(:hover).mat-accent, lux-button button:not([disabled]).mat-mdc-raised-button:focus-visible:not(:hover).mat-accent, lux-button button:not([disabled]).mat-mdc-unelevated-button:focus-visible:not(:hover).mat-accent {
4957
5252
  background-color: #68c477 !important;
4958
5253
  }
4959
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:focus-visible:not(:hover).mat-warn, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:focus-visible:not(:hover).mat-warn, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:focus-visible:not(:hover).mat-warn {
5254
+ lux-button button:not([disabled]).mat-mdc-fab:focus-visible:not(:hover).mat-warn, lux-button button:not([disabled]).mat-mdc-raised-button:focus-visible:not(:hover).mat-warn, lux-button button:not([disabled]).mat-mdc-unelevated-button:focus-visible:not(:hover).mat-warn {
4960
5255
  background-color: #ed6870 !important;
4961
5256
  }
4962
- lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-fab:focus-visible:not(:hover).mat-primary, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-raised-button:focus-visible:not(:hover).mat-primary, lux-button:not(.lang-select-trigger-ac, .user-menu-trigger-ac, .lux-action-nav-item-btn, .nav-menu-trigger-ac, .lux-filter-menu-trigger) button:not([disabled]).mat-flat-button:focus-visible:not(:hover).mat-primary {
5257
+ lux-button button:not([disabled]).mat-mdc-fab:focus-visible:not(:hover).mat-primary, lux-button button:not([disabled]).mat-mdc-raised-button:focus-visible:not(:hover).mat-primary, lux-button button:not([disabled]).mat-mdc-unelevated-button:focus-visible:not(:hover).mat-primary {
4963
5258
  background-color: #004080 !important;
4964
5259
  }
5260
+ lux-button button.mat-mdc-fab span.mdc-button__label {
5261
+ display: inline-flex;
5262
+ }
4965
5263
 
4966
5264
  /*
4967
5265
  * Theming for LUX-List
@@ -4983,13 +5281,13 @@ lux-list .lux-list-empty-icon-text {
4983
5281
  color: #636d76;
4984
5282
  padding: 0 8px;
4985
5283
  }
4986
- lux-list .mat-card:not([class*=mat-elevation-z]) {
5284
+ lux-list .mat-mdc-card:not([class*=mat-elevation-z]) {
4987
5285
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
4988
5286
  }
4989
5287
  lux-list lux-list-item:not(:last-of-type) lux-card {
4990
5288
  margin-bottom: 4px;
4991
5289
  }
4992
- lux-list .mat-card-content.menu-item-content {
5290
+ lux-list .mat-mdc-card-content.menu-item-content {
4993
5291
  margin-bottom: 0;
4994
5292
  }
4995
5293
  lux-list .lux-card-footer {
@@ -5020,7 +5318,7 @@ lux-list lux-list-item:focus-visible lux-card mat-card {
5020
5318
  outline-offset: -4px;
5021
5319
  background-color: #fff !important;
5022
5320
  }
5023
- lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card {
5321
+ lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-mdc-card.lux-card {
5024
5322
  background: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
5025
5323
  background-color: #fff;
5026
5324
  border: 1px solid #003366;
@@ -5039,22 +5337,131 @@ lux-list lux-list-item lux-card:not(.lux-list-item-selected) mat-card[class~=lux
5039
5337
  background-color: #fff !important;
5040
5338
  }
5041
5339
 
5340
+ lux-progress .mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
5341
+ border-color: unset;
5342
+ }
5343
+
5344
+ .mat-mdc-progress-spinner.lux-color-red .mdc-circular-progress__determinate-circle {
5345
+ stroke: #db272e;
5346
+ }
5347
+
5348
+ .mat-mdc-progress-spinner.lux-color-green .mdc-circular-progress__determinate-circle {
5349
+ stroke: #56bd66;
5350
+ }
5351
+
5352
+ .mat-mdc-progress-spinner.lux-color-purple .mdc-circular-progress__determinate-circle {
5353
+ stroke: #9900b8;
5354
+ }
5355
+
5356
+ .mat-mdc-progress-spinner.lux-color-blue .mdc-circular-progress__determinate-circle {
5357
+ stroke: #003366;
5358
+ }
5359
+
5360
+ .mat-mdc-progress-spinner.lux-color-gray .mdc-circular-progress__determinate-circle {
5361
+ stroke: #636d76;
5362
+ }
5363
+
5364
+ .mat-mdc-progress-spinner.lux-color-orange .mdc-circular-progress__determinate-circle {
5365
+ stroke: #c75000;
5366
+ }
5367
+
5368
+ .mat-mdc-progress-spinner.lux-color-brown .mdc-circular-progress__determinate-circle {
5369
+ stroke: #783f04;
5370
+ }
5371
+
5372
+ .mat-mdc-progress-spinner.lux-color-black .mdc-circular-progress__determinate-circle {
5373
+ stroke: black;
5374
+ }
5375
+
5376
+ .mat-mdc-progress-spinner.lux-color-white .mdc-circular-progress__determinate-circle {
5377
+ stroke: #ffffff;
5378
+ }
5379
+
5380
+ .mat-mdc-progress-spinner.lux-color-yellow .mdc-circular-progress__determinate-circle {
5381
+ stroke: rgb(244, 203, 37);
5382
+ }
5383
+
5384
+ .mat-mdc-progress-spinner.lux-color-pink .mdc-circular-progress__determinate-circle {
5385
+ stroke: #ea515a;
5386
+ }
5387
+
5388
+ .mat-mdc-progress-spinner.lux-color-lightblue .mdc-circular-progress__determinate-circle {
5389
+ stroke: rgb(63, 155, 218);
5390
+ }
5391
+
5392
+ .mat-mdc-progress-spinner.lux-color-red .mdc-circular-progress__indeterminate-circle-graphic {
5393
+ stroke: #db272e;
5394
+ }
5395
+
5396
+ .mat-mdc-progress-spinner.lux-color-green .mdc-circular-progress__indeterminate-circle-graphic {
5397
+ stroke: #56bd66;
5398
+ }
5399
+
5400
+ .mat-mdc-progress-spinner.lux-color-purple .mdc-circular-progress__indeterminate-circle-graphic {
5401
+ stroke: #9900b8;
5402
+ }
5403
+
5404
+ .mat-mdc-progress-spinner.lux-color-blue .mdc-circular-progress__indeterminate-circle-graphic {
5405
+ stroke: #003366;
5406
+ }
5407
+
5408
+ .mat-mdc-progress-spinner.lux-color-gray .mdc-circular-progress__indeterminate-circle-graphic {
5409
+ stroke: #636d76;
5410
+ }
5411
+
5412
+ .mat-mdc-progress-spinner.lux-color-orange .mdc-circular-progress__indeterminate-circle-graphic {
5413
+ stroke: #c75000;
5414
+ }
5415
+
5416
+ .mat-mdc-progress-spinner.lux-color-brown .mdc-circular-progress__indeterminate-circle-graphic {
5417
+ stroke: #783f04;
5418
+ }
5419
+
5420
+ .mat-mdc-progress-spinner.lux-color-black .mdc-circular-progress__indeterminate-circle-graphic {
5421
+ stroke: black;
5422
+ }
5423
+
5424
+ .mat-mdc-progress-spinner.lux-color-white .mdc-circular-progress__indeterminate-circle-graphic {
5425
+ stroke: #ffffff;
5426
+ }
5427
+
5428
+ .mat-mdc-progress-spinner.lux-color-yellow .mdc-circular-progress__indeterminate-circle-graphic {
5429
+ stroke: rgb(244, 203, 37);
5430
+ }
5431
+
5432
+ .mat-mdc-progress-spinner.lux-color-pink .mdc-circular-progress__indeterminate-circle-graphic {
5433
+ stroke: #ea515a;
5434
+ }
5435
+
5436
+ .mat-mdc-progress-spinner.lux-color-lightblue .mdc-circular-progress__indeterminate-circle-graphic {
5437
+ stroke: rgb(63, 155, 218);
5438
+ }
5439
+
5042
5440
  lux-tabs .mat-tab-nav-bar,
5043
5441
  lux-tabs .mat-tab-header {
5044
5442
  border-color: rgba(0, 0, 0, 0.12);
5045
5443
  font-size: 1rem;
5046
5444
  }
5445
+ lux-tabs .mat-mdc-tab-label-container {
5446
+ border: none;
5447
+ }
5448
+ lux-tabs .mdc-tab {
5449
+ padding-left: 0;
5450
+ padding-right: 0;
5451
+ }
5047
5452
  lux-tabs mat-tab-group div[role=tab] {
5048
5453
  font-size: 0.875rem;
5049
5454
  font-weight: 600;
5455
+ letter-spacing: normal;
5050
5456
  min-height: unset !important;
5457
+ height: unset !important;
5051
5458
  }
5052
- lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled) {
5459
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled) .mdc-tab__text-label {
5053
5460
  color: #003366;
5054
5461
  opacity: 1;
5055
5462
  }
5056
- lux-tabs mat-tab-group.lux-tabs-no-divider mat-tab-header {
5057
- border-bottom: none;
5463
+ lux-tabs mat-tab-group.lux-tabs-show-divider mat-tab-header {
5464
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
5058
5465
  }
5059
5466
  lux-tabs .lux-tab-title {
5060
5467
  margin-top: 3px;
@@ -5070,9 +5477,6 @@ lux-tabs .lux-counter-offset {
5070
5477
  lux-tabs .lux-label-lower {
5071
5478
  padding-top: 4px;
5072
5479
  }
5073
- lux-tabs .lux-tabs-no-anim .mat-ink-bar {
5074
- transition: none !important;
5075
- }
5076
5480
  lux-tabs .lux-notification-new {
5077
5481
  background-color: #56bd66;
5078
5482
  }
@@ -5088,35 +5492,35 @@ lux-tabs .lux-tabs-show-border {
5088
5492
  border: 1px solid rgba(0, 0, 0, 0.12);
5089
5493
  border-radius: 4px;
5090
5494
  }
5091
- lux-tabs .mat-tab-label {
5092
- padding-left: 40px;
5093
- padding-right: 40px;
5495
+ lux-tabs .mdc-tab__text-label {
5496
+ padding-left: 48px;
5497
+ padding-right: 48px;
5094
5498
  height: auto;
5095
5499
  position: relative;
5096
5500
  }
5097
5501
  @media screen and (min-width: calc(599px + 1px)) and (max-width: 959px) {
5098
- lux-tabs .mat-tab-label {
5502
+ lux-tabs .mdc-tab__text-label {
5099
5503
  padding-left: 40px;
5100
5504
  padding-right: 40px;
5101
5505
  }
5102
5506
  }
5103
5507
  @media screen and (max-width: 599px) {
5104
- lux-tabs .mat-tab-label {
5508
+ lux-tabs .mdc-tab__text-label {
5105
5509
  padding-left: 30px;
5106
5510
  padding-right: 30px;
5107
5511
  }
5108
5512
  }
5109
- lux-tabs .mat-tab-label mat-chip {
5513
+ lux-tabs .mdc-tab__text-label mat-chip {
5110
5514
  background: white !important;
5111
5515
  }
5112
5516
  @media screen and (min-width: calc(599px + 1px)) and (max-width: 959px) {
5113
- lux-tabs .mat-tab-label.lux-tab-with-icon {
5517
+ lux-tabs .mat-mdc-tab-label.lux-tab-with-icon {
5114
5518
  min-width: 125px;
5115
5519
  width: 125px;
5116
5520
  }
5117
5521
  }
5118
5522
  @media screen and (max-width: 599px) {
5119
- lux-tabs .mat-tab-label.lux-tab-with-icon {
5523
+ lux-tabs .mat-mdc-tab-label.lux-tab-with-icon {
5120
5524
  min-width: 90px;
5121
5525
  width: 90px;
5122
5526
  }
@@ -5191,18 +5595,27 @@ lux-tabs .lux-tabs-notification-icon-position-after-icon.lux-counter-visible {
5191
5595
  }
5192
5596
 
5193
5597
  /** ########## HOVER / FOCUS ########## **/
5194
- lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled):focus-visible,
5195
- mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled):focus-visible {
5598
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):focus-visible,
5599
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):focus-visible {
5196
5600
  outline: 4px solid #2e8533 !important;
5197
5601
  outline-offset: -4px;
5198
5602
  border-radius: 4px;
5199
5603
  }
5200
- lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled):hover:not(.mat-tab-label-active),
5201
- mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled):hover:not(.mat-tab-label-active) {
5604
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover,
5605
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover {
5606
+ background-color: transparent;
5607
+ }
5608
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) .lux-tab-title, lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) lux-icon,
5609
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) .lux-tab-title,
5610
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) lux-icon {
5202
5611
  color: #e3ebf5;
5203
5612
  }
5204
- lux-tabs mat-ink-bar.mat-ink-bar,
5205
- mat-card lux-tabs mat-ink-bar.mat-ink-bar {
5613
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover .mdc-tab__ripple::before,
5614
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover .mdc-tab__ripple::before {
5615
+ background-color: transparent;
5616
+ }
5617
+ lux-tabs .mdc-tab-indicator__content,
5618
+ mat-card lux-tabs .mdc-tab-indicator__content {
5206
5619
  background-color: #003366 !important;
5207
5620
  height: 4px;
5208
5621
  border-radius: 4px;
@@ -5383,6 +5796,9 @@ lux-stepper .lux-stepper-mobile mat-horizontal-stepper:not(.lux-ignore-mat-step-
5383
5796
  lux-stepper .lux-stepper-mobile mat-horizontal-stepper:not(.lux-ignore-mat-step-icons) .mat-step-icon {
5384
5797
  margin: 0 !important;
5385
5798
  }
5799
+ lux-stepper mat-step-header {
5800
+ --mat-stepper-header-hover-state-layer-shape: 4px;
5801
+ }
5386
5802
  lux-stepper mat-step-header:hover {
5387
5803
  background-color: transparent !important;
5388
5804
  border-radius: 0;
@@ -5461,12 +5877,16 @@ lux-stepper .lux-ignore-mat-step-icons mat-step-header:hover div.mat-step-label
5461
5877
  color: #e3ebf5;
5462
5878
  }
5463
5879
 
5880
+ .mat-mdc-menu-panel {
5881
+ --mat-menu-container-shape: 4px;
5882
+ }
5883
+
5464
5884
  lux-menu {
5465
5885
  display: block;
5466
5886
  width: 100%;
5467
5887
  }
5468
- lux-menu .lux-menu-extended > lux-button button,
5469
- lux-menu .lux-menu-trigger > lux-button button {
5888
+ lux-menu .lux-menu-extended > lux-button button.mat-mdc-button,
5889
+ lux-menu .lux-menu-trigger > lux-button button.mat-mdc-button {
5470
5890
  padding-left: 8px;
5471
5891
  padding-right: 8px;
5472
5892
  min-width: 36px;
@@ -5482,6 +5902,7 @@ lux-menu .lux-menu-trigger > lux-button button {
5482
5902
  margin-right: 8px;
5483
5903
  }
5484
5904
  .lux-menu-extended > lux-button.lux-menu-item .lux-button-label {
5905
+ white-space: nowrap;
5485
5906
  font-weight: 400;
5486
5907
  letter-spacing: 1px;
5487
5908
  font-family: "Source Sans Pro", Arial, sans-serif;
@@ -5495,7 +5916,8 @@ lux-menu .lux-menu-trigger > lux-button button {
5495
5916
  box-sizing: border-box;
5496
5917
  }
5497
5918
 
5498
- .lux-menu-trigger-default button.mat-button {
5919
+ .lux-menu-trigger-default button.mat-mdc-button {
5920
+ white-space: nowrap;
5499
5921
  color: #003366;
5500
5922
  }
5501
5923
 
@@ -5504,29 +5926,33 @@ lux-menu .lux-menu-trigger > lux-button button {
5504
5926
  border: 2px solid #003366;
5505
5927
  box-shadow: none !important;
5506
5928
  }
5929
+ .lux-menu-panel .mat-mdc-menu-item,
5930
+ .lux-menu-panel .mat-mdc-menu-item:has(.material-icons, mat-icon, [matButtonIcon]) {
5931
+ padding: 0 16px;
5932
+ }
5933
+ .lux-menu-panel .mat-mdc-menu-item-text {
5934
+ display: flex;
5935
+ }
5507
5936
  .lux-menu-panel .lux-menu-item {
5508
5937
  font-size: 1rem;
5509
5938
  display: block;
5510
5939
  color: #003366;
5511
5940
  margin-top: 4px;
5512
5941
  margin-bottom: 4px;
5942
+ hyphens: auto;
5943
+ word-break: break-all;
5513
5944
  }
5514
5945
  .lux-menu-panel .lux-menu-item .mat-icon-no-color {
5515
5946
  color: #003366;
5516
5947
  }
5517
- .lux-menu-panel .lux-menu-item.with-badge {
5518
- display: inline-flex;
5519
- align-items: center;
5520
- justify-content: flex-start;
5521
- flex-wrap: nowrap;
5522
- width: 100%;
5523
- max-width: 100%;
5948
+ .lux-menu-panel .lux-menu-item .lux-button-label {
5949
+ hyphens: auto;
5950
+ word-break: break-word;
5524
5951
  }
5525
- .lux-menu-panel .lux-menu-item .lux-button-label.with-badge {
5526
- display: inline-block;
5527
- overflow: hidden;
5528
- text-overflow: ellipsis;
5529
- white-space: nowrap;
5952
+ .lux-menu-panel .lux-menu-item .lux-button-badge-container {
5953
+ min-width: 38px;
5954
+ vertical-align: middle;
5955
+ align-self: center;
5530
5956
  }
5531
5957
  .lux-menu-panel .lux-menu-item .lux-button-badge {
5532
5958
  color: #fff;
@@ -5534,6 +5960,7 @@ lux-menu .lux-menu-trigger > lux-button button {
5534
5960
  padding: 1px 4px;
5535
5961
  font-size: 11px;
5536
5962
  line-height: normal;
5963
+ max-height: 16px;
5537
5964
  min-width: 15px;
5538
5965
  max-width: 38px;
5539
5966
  display: inline-block;
@@ -5544,6 +5971,7 @@ lux-menu .lux-menu-trigger > lux-button button {
5544
5971
  letter-spacing: 1.25px;
5545
5972
  }
5546
5973
  .lux-menu-panel .lux-menu-item-icon {
5974
+ align-self: center;
5547
5975
  vertical-align: middle;
5548
5976
  }
5549
5977
  .lux-menu-panel .lux-menu-item-icon mat-icon {
@@ -5572,7 +6000,12 @@ lux-table {
5572
6000
  display: flex;
5573
6001
  height: 100%;
5574
6002
  }
5575
- lux-table table.mat-table {
6003
+ lux-table th.mat-mdc-header-cell:first-of-type,
6004
+ lux-table td.mat-mdc-cell:first-of-type,
6005
+ lux-table td.mat-mdc-footer-cell:first-of-type {
6006
+ padding-left: 24px;
6007
+ }
6008
+ lux-table table.mat-mdc-table {
5576
6009
  font-family: "Source Sans Pro", Arial, sans-serif;
5577
6010
  }
5578
6011
  lux-table .lux-row-selected {
@@ -5600,15 +6033,15 @@ lux-table .lux-table th {
5600
6033
  lux-table .lux-table th {
5601
6034
  padding-top: 1em;
5602
6035
  }
5603
- lux-table .lux-table tr.mat-header-row {
6036
+ lux-table .lux-table tr.mat-mdc-header-row {
5604
6037
  height: auto;
5605
6038
  }
5606
- lux-table .lux-table th.mat-header-cell,
5607
- lux-table .lux-table td.mat-cell {
6039
+ lux-table .lux-table th.mat-mdc-header-cell,
6040
+ lux-table .lux-table td.mat-mdc-cell {
5608
6041
  border: none;
5609
6042
  font-size: 1rem;
5610
6043
  }
5611
- lux-table .lux-table td.mat-footer-cell {
6044
+ lux-table .lux-table td.mat-mdc-footer-cell {
5612
6045
  border: none;
5613
6046
  border-top: 1px solid rgba(0, 0, 0, 0.12);
5614
6047
  font-size: 0.9375rem;
@@ -5624,9 +6057,11 @@ lux-table .lux-table .lux-table-content {
5624
6057
  overflow: auto;
5625
6058
  height: 100%;
5626
6059
  width: 100%;
5627
- border: 1px solid rgba(0, 0, 0, 0.12);
5628
6060
  border-radius: 4px;
5629
6061
  }
6062
+ lux-table .lux-table .lux-table-content:not(.lux-hide-borders) {
6063
+ border: 1px solid rgba(0, 0, 0, 0.12);
6064
+ }
5630
6065
  lux-table .lux-table .lux-table-content table {
5631
6066
  width: 100%;
5632
6067
  border-spacing: 0 !important;
@@ -5643,7 +6078,7 @@ lux-table .lux-table .lux-table-content table td .lux-form-control-wrapper .lux-
5643
6078
  lux-table .lux-table .lux-table-content table tbody tr:last-of-type td {
5644
6079
  border-bottom: none;
5645
6080
  }
5646
- lux-table .lux-table .lux-table-content table .mat-footer-row > td {
6081
+ lux-table .lux-table .lux-table-content table .mat-mdc-footer-row > td {
5647
6082
  border-top: 1px solid rgba(0, 0, 0, 0.12);
5648
6083
  }
5649
6084
  lux-table .lux-table .lux-table-content table .lux-header-title,
@@ -5660,10 +6095,10 @@ lux-table .lux-table .lux-table-content thead th {
5660
6095
  color: #003366;
5661
6096
  font-weight: 700;
5662
6097
  }
5663
- lux-table .lux-table .lux-table-content .mat-row:nth-child(odd) {
6098
+ lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(odd) {
5664
6099
  background-color: #e0e7ed;
5665
6100
  }
5666
- lux-table .lux-table .lux-table-content .mat-row:nth-child(even) {
6101
+ lux-table .lux-table .lux-table-content .mat-mdc-row:nth-child(even) {
5667
6102
  background-color: #ffffff;
5668
6103
  }
5669
6104
  lux-table .lux-table .lux-table-content.lux-hide-borders td,
@@ -5675,10 +6110,14 @@ lux-table .lux-table .lux-table-content.lux-hide-borders .lux-multiselect-tf {
5675
6110
  lux-table .lux-table .lux-table-content th.lux-table-column-header-empty {
5676
6111
  display: none;
5677
6112
  }
5678
- lux-table .lux-table .mat-paginator,
5679
- lux-table .lux-table .mat-paginator-page-size .mat-select-trigger {
6113
+ lux-table .lux-table .mat-mdc-paginator,
6114
+ lux-table .lux-table .mat-mdc-paginator-page-size .mat-mdc-select-trigger {
5680
6115
  font-size: 0.75rem;
5681
6116
  }
6117
+ lux-table .lux-table .mat-mdc-paginator .mdc-text-field--filled:not(.mdc-text-field--disabled),
6118
+ lux-table .lux-table .mat-mdc-paginator-page-size .mat-mdc-select-trigger .mdc-text-field--filled:not(.mdc-text-field--disabled) {
6119
+ background-color: #ffffff;
6120
+ }
5682
6121
  lux-table .lux-table .lux-table-overlay {
5683
6122
  -webkit-transition: opacity 1s;
5684
6123
  -moz-transition: opacity 1s;
@@ -5702,9 +6141,9 @@ lux-table .lux-table .lux-hide {
5702
6141
  lux-table .lux-table .lux-multiselect-th,
5703
6142
  lux-table .lux-table .lux-multiselect-td,
5704
6143
  lux-table .lux-table .lux-multiselect-tf {
5705
- max-width: 70px;
5706
- min-width: 70px;
5707
- width: 70px;
6144
+ max-width: 110px;
6145
+ min-width: 110px;
6146
+ width: 110px;
5708
6147
  }
5709
6148
  lux-table .lux-table .lux-multiselect-th {
5710
6149
  width: 1% !important;
@@ -5729,15 +6168,7 @@ lux-table .lux-table .lux-aria-visible {
5729
6168
  width: 0;
5730
6169
  height: 0;
5731
6170
  }
5732
- lux-table .lux-table .reset-icon {
5733
- display: inline-block;
5734
- }
5735
- lux-table .lux-table .reset-icon:hover {
5736
- border-radius: 50%;
5737
- background-color: #e3ebf5;
5738
- cursor: pointer;
5739
- }
5740
- lux-table .lux-table lux-checkbox-ac .mat-checkbox-inner-container {
6171
+ lux-table .lux-table lux-checkbox-ac .mat-mdc-checkbox-inner-container {
5741
6172
  margin: 0px;
5742
6173
  }
5743
6174
  @media screen and (max-width: 599px) {
@@ -5766,12 +6197,27 @@ lux-table th.cdk-keyboard-focused div.mat-sort-header-container {
5766
6197
  border: none !important;
5767
6198
  }
5768
6199
 
6200
+ lux-filter-form lux-menu div.lux-menu-custom-trigger {
6201
+ padding-top: 4px;
6202
+ padding-bottom: 4px;
6203
+ }
5769
6204
  lux-filter-form .no-filter-active {
5770
6205
  padding: 8px 25px;
5771
6206
  }
5772
6207
  lux-filter-form .no-filter-active-sm {
5773
6208
  padding: 8px 12px;
5774
6209
  }
6210
+ lux-filter-form mat-chip-row.mat-mdc-standard-chip {
6211
+ height: 24px;
6212
+ }
6213
+ lux-filter-form mat-chip-row.mat-mdc-standard-chip span.mat-mdc-chip-action {
6214
+ padding-left: 6px !important;
6215
+ }
6216
+ lux-filter-form mat-chip-row.mat-mdc-standard-chip lux-icon {
6217
+ margin: 0 !important;
6218
+ padding-left: 4px !important;
6219
+ padding-right: 4px !important;
6220
+ }
5775
6221
  lux-filter-form .filter-item .mat-standard-chip {
5776
6222
  min-height: 24px;
5777
6223
  }
@@ -5845,8 +6291,8 @@ lux-filter-save-dialog .lux-filter-save-dialog-form-container {
5845
6291
  }
5846
6292
 
5847
6293
  lux-filter-load-dialog .filter-content button,
5848
- lux-filter-load-dialog .filter-content button.lux-button.mat-button,
5849
- lux-filter-load-dialog .filter-content button.lux-button.mat-raised-button {
6294
+ lux-filter-load-dialog .filter-content button.lux-button.mat-mdc-button,
6295
+ lux-filter-load-dialog .filter-content button.lux-button.mat-mdc-raised-button {
5850
6296
  height: 25px;
5851
6297
  line-height: 25px;
5852
6298
  }
@@ -5857,6 +6303,10 @@ lux-filter-load-dialog .filter-content mat-card-content {
5857
6303
  padding: 0;
5858
6304
  }
5859
6305
 
6306
+ .cdk-overlay-pane.mat-mdc-dialog-panel .mat-mdc-dialog-container {
6307
+ border-radius: 4px;
6308
+ }
6309
+
5860
6310
  lux-dialog-preset {
5861
6311
  height: 100%;
5862
6312
  }
@@ -5874,12 +6324,16 @@ lux-dialog-structure {
5874
6324
  }
5875
6325
  lux-dialog-structure .lux-dialog {
5876
6326
  outline-width: 0;
6327
+ padding: 24px;
5877
6328
  }
5878
- lux-dialog-structure .lux-dialog .lux-dialog-title.mat-dialog-title {
6329
+ lux-dialog-structure .lux-dialog .lux-dialog-title.mat-mdc-dialog-title {
6330
+ display: flex;
6331
+ padding-left: 0;
6332
+ padding-right: 0;
5879
6333
  color: #003366;
5880
6334
  font-family: Korb, "Blogger Sans", "Source Sans Pro", Arial, sans-serif, "Source Sans Pro", Arial, sans-serif;
5881
6335
  }
5882
- lux-dialog-structure .lux-dialog .mat-dialog-container {
6336
+ lux-dialog-structure .lux-dialog .mat-mdc-dialog-container {
5883
6337
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
5884
6338
  border: 1px solid #636d76;
5885
6339
  }
@@ -5887,9 +6341,13 @@ lux-dialog-structure .lux-dialog .lux-dialog-content {
5887
6341
  margin: 0;
5888
6342
  padding: 0;
5889
6343
  max-height: 100%;
6344
+ font-family: "Source Sans Pro", Arial, sans-serif;
6345
+ letter-spacing: normal;
6346
+ color: #003366;
5890
6347
  }
5891
6348
  lux-dialog-structure .lux-dialog .lux-dialog-actions {
5892
6349
  margin: 20px 0 0 0;
6350
+ justify-content: center;
5893
6351
  }
5894
6352
  lux-dialog-structure .lux-dialog .lux-icon-close {
5895
6353
  margin: -15px -15px 0 0;
@@ -5898,10 +6356,10 @@ lux-dialog-structure .lux-dialog .lux-icon-close {
5898
6356
  font-size: 1rem;
5899
6357
  }
5900
6358
  @media screen and (max-width: 959px) {
5901
- lux-dialog-structure .mat-dialog-container {
6359
+ lux-dialog-structure .mat-mdc-dialog-container {
5902
6360
  padding: 8px;
5903
6361
  }
5904
- lux-dialog-structure .mat-dialog-title {
6362
+ lux-dialog-structure .mat-mdc-dialog-title {
5905
6363
  margin-bottom: 8px;
5906
6364
  }
5907
6365
  lux-dialog-structure .lux-dialog .lux-dialog-actions {
@@ -5925,52 +6383,55 @@ lux-dialog-structure .lux-icon-close:focus-visible {
5925
6383
  border-radius: 4px;
5926
6384
  }
5927
6385
 
5928
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar {
6386
+ .cdk-overlay-container .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {
6387
+ min-width: unset;
6388
+ border-radius: 4px;
6389
+ }
6390
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar {
5929
6391
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
5930
6392
  position: relative;
5931
6393
  margin: 0 !important;
5932
- min-width: unset !important;
5933
6394
  visibility: hidden;
5934
6395
  }
5935
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-red {
6396
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .mat-mdc-snack-bar-label {
6397
+ visibility: hidden;
6398
+ }
6399
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-red {
5936
6400
  color: #f17474;
5937
6401
  background-color: transparent;
5938
6402
  }
5939
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-green {
6403
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-green {
5940
6404
  color: #53b12b;
5941
6405
  background-color: transparent;
5942
6406
  }
5943
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-purple {
6407
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-purple {
5944
6408
  color: #e561ff;
5945
6409
  background-color: transparent;
5946
6410
  }
5947
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-blue {
6411
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-blue {
5948
6412
  color: #729eca;
5949
6413
  background-color: transparent;
5950
6414
  }
5951
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-gray {
6415
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-gray {
5952
6416
  color: #c8c8c8;
5953
6417
  background-color: transparent;
5954
6418
  }
5955
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-orange {
6419
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-orange {
5956
6420
  color: #ec9c1b;
5957
6421
  background-color: transparent;
5958
6422
  }
5959
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-brown {
6423
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-brown {
5960
6424
  color: #eb7c05;
5961
6425
  background-color: transparent;
5962
6426
  }
5963
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-white {
6427
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar .lux-snackbar-content .lux-bg-color-white {
5964
6428
  color: #ffffff;
5965
6429
  background-color: transparent;
5966
6430
  }
5967
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar mat-icon.mat-icon.lux-icon {
6431
+ .cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar mat-icon.mat-icon.lux-icon {
5968
6432
  width: 2em;
5969
6433
  height: 2em;
5970
6434
  }
5971
- .cdk-overlay-container .mat-snack-bar-container.lux-snackbar .snackbar-action .mat-button-focus-overlay {
5972
- display: none;
5973
- }
5974
6435
  .cdk-overlay-container .mat-snack-bar-handset snack-bar-container.mat-snack-bar-container.lux-snackbar {
5975
6436
  left: 8px;
5976
6437
  width: auto !important;
@@ -6001,24 +6462,15 @@ lux-message-box .lux-message-box-content .lux-message-container.lux-bg-color-whi
6001
6462
  border: 1px solid #003366;
6002
6463
  box-sizing: border-box;
6003
6464
  }
6004
- lux-message-box .lux-message-box-content .lux-message-container.lux-bg-color-white button.mat-fab.lux-button-rounded.lux-icon-button:not([disabled]) {
6465
+ lux-message-box .lux-message-box-content .lux-message-container.lux-bg-color-white button:not([disabled]).lux-button-rounded.mat-accent.lux-fab-rounded-default:not([class*=mat-elevation-z]) {
6005
6466
  color: #003366;
6006
6467
  }
6007
- lux-message-box .lux-message-box-content .lux-message-container.lux-bg-color-white button.mat-fab.lux-button-rounded.lux-icon-button:not([disabled]):hover {
6008
- color: #fff;
6009
- }
6010
- lux-message-box .lux-message-box-content .lux-message-container:not(.lux-bg-color-white) button:not([disabled]):hover .mat-icon-no-color {
6011
- color: #fff;
6012
- }
6013
- lux-message-box .lux-message-box-content .lux-message-container lux-button button.mat-fab.lux-icon-button.lux-button-rounded:not([class*=mat-elevation-z]) {
6468
+ lux-message-box .lux-message-box-content .lux-message-container lux-button button:not([disabled]).lux-button-rounded.mat-accent.lux-fab-rounded-default:not([class*=mat-elevation-z]) {
6014
6469
  color: #fff;
6015
6470
  background-color: transparent;
6016
- height: 36px;
6017
- width: 36px;
6018
6471
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
6019
6472
  }
6020
- lux-message-box .lux-message-box-content .lux-message-container lux-button .mat-button-ripple,
6021
- lux-message-box .lux-message-box-content .lux-message-container lux-button .mat-button-focus-overlay {
6473
+ lux-message-box .lux-message-box-content .lux-message-container lux-button .mat-mdc-button-ripple {
6022
6474
  display: none;
6023
6475
  }
6024
6476
  lux-message-box .lux-message-box-content .lux-message-container lux-icon:not(.lux-button-icon, .lux-button-icon-round) {
@@ -6039,34 +6491,35 @@ lux-message-box mat-paginator .mat-paginator-container {
6039
6491
  lux-message-box div.lux-message-box-content:focus-visible {
6040
6492
  outline: 4px solid #2e8533 !important;
6041
6493
  }
6494
+ lux-message-box div.lux-message-box-content .mat-mdc-fab.mat-unthemed,
6495
+ lux-message-box div.lux-message-box-content .mat-mdc-mini-fab.mat-unthemed {
6496
+ background-color: transparent;
6497
+ }
6042
6498
  lux-message-box div.lux-message-box-content .lux-message-container.lux-bg-color-white .lux-message-text:focus-visible {
6043
6499
  outline: 4px solid #2e8533 !important;
6044
6500
  border-radius: 4px;
6045
6501
  }
6046
- lux-message-box div.lux-message-box-content .lux-message-container.lux-bg-color-white button:not([disabled]):focus-visible {
6502
+ lux-message-box div.lux-message-box-content .lux-message-container.lux-bg-color-white lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default:hover {
6503
+ color: #ffffff;
6504
+ background-color: #003366 !important;
6505
+ }
6506
+ lux-message-box div.lux-message-box-content .lux-message-container.lux-bg-color-white lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default:focus-visible {
6047
6507
  outline: 4px solid #2e8533 !important;
6048
6508
  background-color: transparent !important;
6049
6509
  }
6050
- lux-message-box div.lux-message-box-content .lux-message-container.lux-bg-color-white button:not([disabled]):hover {
6051
- background-color: #e3ebf5 !important;
6052
- border-radius: 4px;
6053
- border-radius: 50%;
6054
- }
6055
6510
  lux-message-box div.lux-message-box-content .lux-message-container:not(.lux-bg-color-white) .lux-message-text:focus-visible {
6056
6511
  outline: 4px solid #ffffff !important;
6057
6512
  border-radius: 4px;
6058
6513
  }
6059
- lux-message-box div.lux-message-box-content .lux-message-container:not(.lux-bg-color-white) button:not([disabled]):focus-visible {
6514
+ lux-message-box div.lux-message-box-content .lux-message-container:not(.lux-bg-color-white) lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default:hover {
6515
+ color: white;
6516
+ background-color: rgba(1, 1, 1, 0.2) !important;
6517
+ }
6518
+ lux-message-box div.lux-message-box-content .lux-message-container:not(.lux-bg-color-white) lux-button button.lux-button.mat-mdc-fab:not([disabled]).lux-fab-rounded-default:focus-visible {
6060
6519
  outline: 4px solid #ffffff !important;
6520
+ color: white;
6061
6521
  background-color: transparent !important;
6062
6522
  }
6063
- lux-message-box div.lux-message-box-content .lux-message-container:not(.lux-bg-color-white) button:not([disabled]):hover {
6064
- background-color: #e3ebf5 !important;
6065
- border-radius: 4px;
6066
- border-radius: 50%;
6067
- color: #003366;
6068
- background-color: rgba(1, 1, 1, 0.2) !important;
6069
- }
6070
6523
 
6071
6524
  lux-error-page {
6072
6525
  display: flex;
@@ -6166,6 +6619,14 @@ lux-file-preview-imgviewer img {
6166
6619
  opacity: 0.8 !important;
6167
6620
  }
6168
6621
 
6622
+ .mat-mdc-tooltip {
6623
+ --mdc-plain-tooltip-container-shape: 4px;
6624
+ }
6625
+
6626
+ .mat-mdc-tooltip-surface {
6627
+ --mdc-plain-tooltip-supporting-text-size: 14px;
6628
+ }
6629
+
6169
6630
  lux-tour-hint .tour-hint {
6170
6631
  --baseOffsetX: 0px;
6171
6632
  --baseOffsetY: 0px;
@@ -6267,8 +6728,16 @@ lux-tour-hint-preset .tour-hint-container .action-close {
6267
6728
  right: 8px;
6268
6729
  }
6269
6730
  lux-tour-hint-preset .tour-hint-container .action-close:hover {
6731
+ background-color: #fff !important;
6270
6732
  cursor: pointer;
6271
6733
  }
6734
+ lux-tour-hint-preset .tour-hint-container .action-close:hover mat-icon.mat-icon-no-color {
6735
+ color: #e3ebf5;
6736
+ }
6737
+ lux-tour-hint-preset .tour-hint-container .action-close:focus-visible {
6738
+ outline: 4px solid #2e8533 !important;
6739
+ border-radius: 4px;
6740
+ }
6272
6741
  lux-tour-hint-preset .tour-hint-container .tour-hint-inner-container {
6273
6742
  height: 100%;
6274
6743
  display: grid;
@@ -6418,6 +6887,10 @@ lux-card .lux-card-content-container mat-tab-group.lux-tab-group .lux-tabs-notif
6418
6887
  */
6419
6888
  lux-divider .mat-divider {
6420
6889
  background-color: rgba(0, 0, 0, 0.2);
6890
+ border-width: 1px;
6891
+ }
6892
+ lux-divider .mat-divider.mat-divider-vertical {
6893
+ border-width: 1px;
6421
6894
  }
6422
6895
 
6423
6896
  /*
@@ -6466,6 +6939,11 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
6466
6939
  /*
6467
6940
  * Theming für Lux-File-Upload
6468
6941
  */
6942
+ .mat-mdc-progress-bar.lux-file-upload-drop-container-progress {
6943
+ --mdc-linear-progress-active-indicator-height: 8px;
6944
+ --mdc-linear-progress-track-height: 8px;
6945
+ }
6946
+
6469
6947
  .lux-file-upload-container {
6470
6948
  display: flex;
6471
6949
  flex-direction: column;
@@ -6491,7 +6969,6 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
6491
6969
  gap: 12px;
6492
6970
  padding: 24px 48px;
6493
6971
  }
6494
- .lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-container-progress,
6495
6972
  .lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-container-no-progress {
6496
6973
  height: 8px;
6497
6974
  }
@@ -6597,14 +7074,14 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
6597
7074
  display: flex;
6598
7075
  align-items: center;
6599
7076
  }
6600
- .lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button.mat-button {
7077
+ .lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button.mat-mdc-button {
6601
7078
  padding: 0;
6602
7079
  margin: 0;
6603
7080
  border-radius: 8px;
6604
7081
  min-width: 40px;
6605
7082
  min-height: 30px;
6606
7083
  }
6607
- .lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button.mat-button .lux-button-icon mat-icon.mat-icon.lux-icon {
7084
+ .lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button.mat-mdc-button .lux-button-icon mat-icon.mat-icon.lux-icon {
6608
7085
  width: 24px !important;
6609
7086
  height: 24px !important;
6610
7087
  }
@@ -6644,7 +7121,7 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
6644
7121
  padding-bottom: 30px;
6645
7122
  }
6646
7123
 
6647
- .file-dialog div.mat-dialog-title.lux-dialog-title {
7124
+ .file-dialog div.mat-mdc-dialog-title.lux-dialog-title {
6648
7125
  font-size: 1.75rem;
6649
7126
  font-weight: normal;
6650
7127
  margin-bottom: 0;
@@ -6669,106 +7146,6 @@ lux-lookup-combobox-ac mat-select[aria-disabled=false] .mat-select-arrow {
6669
7146
  color: #003366;
6670
7147
  }
6671
7148
 
6672
- /*
6673
- * Stylings für für Elemente die im Mat-Menu-Panel im cdk-overlay-container liegen
6674
- */
6675
- .cdk-overlay-container .lux-user-name-label.mat-menu-item[disabled] {
6676
- color: #003366;
6677
- }
6678
-
6679
- /*
6680
- * Theming for LUX-Progress
6681
- */
6682
- lux-progress .mat-progress-bar-fill:after,
6683
- lux-progress .mat-progress-spinner > svg > circle {
6684
- stroke: #0846ff;
6685
- background: #0846ff;
6686
- }
6687
- lux-progress .lux-bg-color-red .mat-progress-bar-primary:after,
6688
- lux-progress .lux-bg-color-red .mat-progress-bar-secondary:after {
6689
- background: #db272e;
6690
- }
6691
- lux-progress .lux-bg-color-green .mat-progress-bar-primary:after,
6692
- lux-progress .lux-bg-color-green .mat-progress-bar-secondary:after {
6693
- background: #56bd66;
6694
- }
6695
- lux-progress .lux-bg-color-purple .mat-progress-bar-primary:after,
6696
- lux-progress .lux-bg-color-purple .mat-progress-bar-secondary:after {
6697
- background: #9900b8;
6698
- }
6699
- lux-progress .lux-bg-color-blue .mat-progress-bar-primary:after,
6700
- lux-progress .lux-bg-color-blue .mat-progress-bar-secondary:after {
6701
- background: #003366;
6702
- }
6703
- lux-progress .lux-bg-color-gray .mat-progress-bar-primary:after,
6704
- lux-progress .lux-bg-color-gray .mat-progress-bar-secondary:after {
6705
- background: #636d76;
6706
- }
6707
- lux-progress .lux-bg-color-orange .mat-progress-bar-primary:after,
6708
- lux-progress .lux-bg-color-orange .mat-progress-bar-secondary:after {
6709
- background: #c75000;
6710
- }
6711
- lux-progress .lux-bg-color-brown .mat-progress-bar-primary:after,
6712
- lux-progress .lux-bg-color-brown .mat-progress-bar-secondary:after {
6713
- background: #783f04;
6714
- }
6715
- lux-progress .lux-bg-color-black .mat-progress-bar-primary:after,
6716
- lux-progress .lux-bg-color-black .mat-progress-bar-secondary:after {
6717
- background: black;
6718
- }
6719
- lux-progress .lux-bg-color-white .mat-progress-bar-primary:after,
6720
- lux-progress .lux-bg-color-white .mat-progress-bar-secondary:after {
6721
- background: #ffffff;
6722
- }
6723
- lux-progress .lux-bg-color-yellow .mat-progress-bar-primary:after,
6724
- lux-progress .lux-bg-color-yellow .mat-progress-bar-secondary:after {
6725
- background: rgb(244, 203, 37);
6726
- }
6727
- lux-progress .lux-bg-color-pink .mat-progress-bar-primary:after,
6728
- lux-progress .lux-bg-color-pink .mat-progress-bar-secondary:after {
6729
- background: #ea515a;
6730
- }
6731
- lux-progress .lux-bg-color-lightblue .mat-progress-bar-primary:after,
6732
- lux-progress .lux-bg-color-lightblue .mat-progress-bar-secondary:after {
6733
- background: rgb(63, 155, 218);
6734
- }
6735
- lux-progress mat-progress-spinner.lux-bg-color-red circle {
6736
- stroke: #db272e;
6737
- }
6738
- lux-progress mat-progress-spinner.lux-bg-color-green circle {
6739
- stroke: #56bd66;
6740
- }
6741
- lux-progress mat-progress-spinner.lux-bg-color-purple circle {
6742
- stroke: #9900b8;
6743
- }
6744
- lux-progress mat-progress-spinner.lux-bg-color-blue circle {
6745
- stroke: #003366;
6746
- }
6747
- lux-progress mat-progress-spinner.lux-bg-color-gray circle {
6748
- stroke: #636d76;
6749
- }
6750
- lux-progress mat-progress-spinner.lux-bg-color-orange circle {
6751
- stroke: #c75000;
6752
- }
6753
- lux-progress mat-progress-spinner.lux-bg-color-brown circle {
6754
- stroke: #783f04;
6755
- }
6756
- lux-progress mat-progress-spinner.lux-bg-color-black circle {
6757
- stroke: black;
6758
- }
6759
- lux-progress mat-progress-spinner.lux-bg-color-white circle {
6760
- stroke: #ffffff;
6761
- }
6762
- lux-progress mat-progress-spinner.lux-bg-color-yellow circle {
6763
- stroke: rgb(244, 203, 37);
6764
- }
6765
- lux-progress mat-progress-spinner.lux-bg-color-pink circle {
6766
- stroke: #ea515a;
6767
- }
6768
- lux-progress mat-progress-spinner.lux-bg-color-lightblue circle {
6769
- stroke: rgb(63, 155, 218);
6770
- }
6771
-
6772
7149
  .spinner-padding {
6773
7150
  padding: 6px;
6774
7151
  }
@@ -6807,13 +7184,6 @@ lux-side-nav .lux-side-nav .lux-side-nav-content .lux-side-nav-item .lux-side-na
6807
7184
  background-color: rgba(0, 0, 0, 0.12);
6808
7185
  }
6809
7186
 
6810
- /*
6811
- * Theming for LUX-Tooltip
6812
- */
6813
- mat-tooltip-component .mat-tooltip {
6814
- font-size: 0.875rem;
6815
- }
6816
-
6817
7187
  /*
6818
7188
  * Theming for LUX-Accordion
6819
7189
  */
@@ -6825,10 +7195,15 @@ mat-expansion-panel.mat-expansion-panel:not([class*=mat-elevation-z]) .mat-expan
6825
7195
  font-size: 1rem;
6826
7196
  }
6827
7197
 
7198
+ .mat-expansion-panel {
7199
+ --mat-expansion-container-shape: 4px;
7200
+ --mat-expansion-container-shape: 4px;
7201
+ }
7202
+
6828
7203
  /*
6829
7204
  * Theming for LUX-Errorpage
6830
7205
  */
6831
- lux-error-page lux-card:not(.lux-error-page-desktop) .mat-card:not([class*=mat-elevation-z]) {
7206
+ lux-error-page lux-card:not(.lux-error-page-desktop) .mat-mdc-card:not([class*=mat-elevation-z]) {
6832
7207
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
6833
7208
  }
6834
7209
 
@@ -44139,7 +44514,7 @@ h6 {
44139
44514
  /*
44140
44515
  * Theming for LUX-Card
44141
44516
  */
44142
- lux-card .mat-card {
44517
+ lux-card .mat-mdc-card {
44143
44518
  color: #003366;
44144
44519
  }
44145
44520
 
@@ -44187,33 +44562,36 @@ lux-button button.lux-button {
44187
44562
  font-weight: 400 !important;
44188
44563
  font-family: "Blogger Sans", "Source Sans Pro", Arial, sans-serif;
44189
44564
  }
44565
+ lux-button button.lux-button.mdc-button {
44566
+ letter-spacing: normal;
44567
+ }
44190
44568
  lux-button button.lux-button p,
44191
44569
  lux-button button.lux-button div,
44192
44570
  lux-button button.lux-button span {
44193
44571
  font-family: "Blogger Sans", "Source Sans Pro", Arial, sans-serif;
44194
44572
  }
44195
- lux-button button.lux-button.mat-button, lux-button button.lux-button.mat-raised-button, lux-button button.lux-button.mat-flat-button, lux-button button.lux-button.mat-stroked-button {
44573
+ lux-button button.lux-button.mat-mdc-button, lux-button button.lux-button.mat-mdc-raised-button, lux-button button.lux-button.mat-mdc-unelevated-button, lux-button button.lux-button.mat-mdc-outlined-button {
44196
44574
  border-radius: 18px;
44197
44575
  height: 45px;
44198
44576
  font-size: 22px;
44199
44577
  }
44200
- lux-button button.lux-button.mat-button.mat-button-disabled, lux-button button.lux-button.mat-raised-button.mat-button-disabled, lux-button button.lux-button.mat-fab.mat-button-disabled, lux-button button.lux-button.mat-stroked-button.mat-button-disabled, lux-button button.lux-button.mat-flat-button.mat-button-disabled {
44578
+ lux-button button.lux-button.mat-mdc-button:disabled, lux-button button.lux-button.mat-mdc-raised-button:disabled, lux-button button.lux-button.mat-mdc-fab:disabled, lux-button button.lux-button.mat-mdc-outlined-button:disabled, lux-button button.lux-button.mat-mdc-unelevated-button:disabled {
44201
44579
  color: #636d76;
44202
44580
  }
44203
- lux-button button.lux-button.mat-button.mat-button-disabled.lux-stroked, lux-button button.lux-button.mat-raised-button.mat-button-disabled.lux-stroked, lux-button button.lux-button.mat-fab.mat-button-disabled.lux-stroked, lux-button button.lux-button.mat-stroked-button.mat-button-disabled.lux-stroked, lux-button button.lux-button.mat-flat-button.mat-button-disabled.lux-stroked {
44581
+ lux-button button.lux-button.mat-mdc-button:disabled.lux-stroked, lux-button button.lux-button.mat-mdc-raised-button:disabled.lux-stroked, lux-button button.lux-button.mat-mdc-fab:disabled.lux-stroked, lux-button button.lux-button.mat-mdc-outlined-button:disabled.lux-stroked, lux-button button.lux-button.mat-mdc-unelevated-button:disabled.lux-stroked {
44204
44582
  color: #636d76;
44205
44583
  border-color: #636d76;
44206
44584
  }
44207
- lux-button button.lux-button.mat-flat-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary), lux-button button.lux-button.mat-raised-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary), lux-button button.lux-button.mat-stroked-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary) {
44585
+ lux-button button.lux-button.mat-mdc-unelevated-button:not([disabled], .mat-accent, .mat-warn, .mat-primary), lux-button button.lux-button.mat-mdc-raised-button:not([disabled], .mat-accent, .mat-warn, .mat-primary), lux-button button.lux-button.mat-mdc-outlined-button:not([disabled], .mat-accent, .mat-warn, .mat-primary) {
44208
44586
  color: #003366;
44209
44587
  }
44210
- lux-button button.lux-button.mat-flat-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary) lux-icon.lux-button-icon:not(.lux-button-icon-round), lux-button button.lux-button.mat-raised-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary) lux-icon.lux-button-icon:not(.lux-button-icon-round), lux-button button.lux-button.mat-stroked-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary) lux-icon.lux-button-icon:not(.lux-button-icon-round) {
44588
+ lux-button button.lux-button.mat-mdc-unelevated-button:not([disabled], .mat-accent, .mat-warn, .mat-primary) lux-icon.lux-button-icon:not(.lux-button-icon-round), lux-button button.lux-button.mat-mdc-raised-button:not([disabled], .mat-accent, .mat-warn, .mat-primary) lux-icon.lux-button-icon:not(.lux-button-icon-round), lux-button button.lux-button.mat-mdc-outlined-button:not([disabled], .mat-accent, .mat-warn, .mat-primary) lux-icon.lux-button-icon:not(.lux-button-icon-round) {
44211
44589
  color: #000000;
44212
44590
  }
44213
- lux-button button.lux-button.mat-raised-button.mat-accent:not(.mat-button-disabled), lux-button button.lux-button.mat-flat-button.mat-accent:not(.mat-button-disabled), lux-button button.lux-button.mat-fab.mat-accent:not(.mat-button-disabled) {
44591
+ lux-button button.lux-button.mat-mdc-raised-button.mat-accent:not([disabled]), lux-button button.lux-button.mat-mdc-unelevated-button.mat-accent:not([disabled]), lux-button button.lux-button.mat-mdc-fab.mat-accent:not([disabled]) {
44214
44592
  color: #003366;
44215
44593
  }
44216
- lux-button button.lux-button.mat-raised-button.mat-accent:not(.mat-button-disabled).lux-stroked, lux-button button.lux-button.mat-flat-button.mat-accent:not(.mat-button-disabled).lux-stroked, lux-button button.lux-button.mat-fab.mat-accent:not(.mat-button-disabled).lux-stroked {
44594
+ lux-button button.lux-button.mat-mdc-raised-button.mat-accent:not([disabled]).lux-stroked, lux-button button.lux-button.mat-mdc-unelevated-button.mat-accent:not([disabled]).lux-stroked, lux-button button.lux-button.mat-mdc-fab.mat-accent:not([disabled]).lux-stroked {
44217
44595
  color: #56bd66;
44218
44596
  }
44219
44597
  lux-button button.lux-button.lux-icon-button {
@@ -44224,27 +44602,27 @@ lux-button button.lux-button.lux-icon-button lux-icon.lux-button-icon mat-icon.m
44224
44602
  height: 22px !important;
44225
44603
  width: 22px !important;
44226
44604
  }
44227
- lux-button button.lux-button.mat-fab.lux-button-rounded {
44605
+ lux-button button.lux-button.mat-mdc-fab.lux-button-rounded {
44228
44606
  border-radius: 16px !important;
44229
44607
  height: 45px;
44230
44608
  width: 45px;
44231
44609
  font-size: 22px;
44232
44610
  }
44233
- lux-button button.lux-button.mat-fab.lux-button-rounded lux-icon.lux-button-icon-round mat-icon.mat-icon.lux-icon {
44611
+ lux-button button.lux-button.mat-mdc-fab.lux-button-rounded lux-icon.lux-button-icon-round mat-icon.mat-icon.lux-icon {
44234
44612
  height: 22px !important;
44235
44613
  width: 22px !important;
44236
44614
  }
44237
- lux-button button.lux-button.mat-fab.lux-button-rounded.lux-stroked {
44615
+ lux-button button.lux-button.mat-mdc-fab.lux-button-rounded.lux-stroked {
44238
44616
  border-color: rgba(0, 0, 0, 0.12) !important;
44239
44617
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
44240
44618
  }
44241
- lux-button button.lux-button.mat-fab.lux-button-rounded.lux-stroked:hover:not(.mat-button-disabled) {
44619
+ lux-button button.lux-button.mat-mdc-fab.lux-button-rounded.lux-stroked:hover:not([disabled]) {
44242
44620
  background-color: #bdd0e8 !important;
44243
44621
  }
44244
- lux-button button.lux-button.mat-fab.lux-button-rounded.lux-stroked:focus-visible:not(.mat-button-disabled, :hover) {
44622
+ lux-button button.lux-button.mat-mdc-fab.lux-button-rounded.lux-stroked:focus-visible:not([disabled], :hover) {
44245
44623
  background-color: transparent !important;
44246
44624
  }
44247
- lux-button button.lux-button.mat-fab.lux-button-rounded.lux-stroked:active {
44625
+ lux-button button.lux-button.mat-mdc-fab.lux-button-rounded.lux-stroked:active {
44248
44626
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
44249
44627
  }
44250
44628
  lux-button button.lux-button .lux-button-badge {
@@ -44309,7 +44687,7 @@ lux-table tr:hover > th {
44309
44687
  /*
44310
44688
  * Theming für LUX-List
44311
44689
  */
44312
- lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card {
44690
+ lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-mdc-card.lux-card {
44313
44691
  background-color: #e3ebf5 !important;
44314
44692
  position: relative;
44315
44693
  border-radius: 4px;
@@ -44317,7 +44695,7 @@ lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-car
44317
44695
  box-shadow: unset;
44318
44696
  border: 1px solid rgba(0, 0, 0, 0.12);
44319
44697
  }
44320
- lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-card.lux-card:after {
44698
+ lux-list lux-list-item lux-card.lux-list-item-selected mat-card.mat-mdc-card.lux-card:after {
44321
44699
  content: "";
44322
44700
  left: 0;
44323
44701
  width: 6px;
@@ -44402,14 +44780,23 @@ lux-stepper .lux-ignore-mat-step-icons mat-step-header:hover[aria-selected=true]
44402
44780
  /*
44403
44781
  * Theming für LUX-Tabs
44404
44782
  */
44405
- lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled).mat-tab-label-active,
44406
- mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled).mat-tab-label-active {
44783
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled).mat-tab-label-active,
44784
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled).mat-tab-label-active {
44407
44785
  background-color: #e3ebf5;
44408
44786
  border-radius: 4px;
44409
44787
  }
44410
- lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled):hover:not(.mat-tab-label-active),
44411
- mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled):hover:not(.mat-tab-label-active) {
44788
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover,
44789
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover {
44790
+ background-color: #e3ebf5;
44791
+ border-radius: 4px;
44792
+ }
44793
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) .lux-tab-title, lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) lux-icon,
44794
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) .lux-tab-title,
44795
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover:not(.mdc-tab--active) lux-icon {
44412
44796
  color: #003366;
44797
+ }
44798
+ lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover .mdc-tab__ripple::before,
44799
+ mat-card lux-tabs mat-tab-group div[role=tab]:not(.mat-mdc-tab-disabled):hover .mdc-tab__ripple::before {
44413
44800
  background-color: #e3ebf5;
44414
44801
  border-radius: 4px;
44415
44802
  }
@@ -44438,10 +44825,6 @@ mat-card lux-tabs div.lux-tab-title {
44438
44825
  font-size: 1.125rem;
44439
44826
  color: #003366;
44440
44827
  }
44441
- .lux-datepicker-custom-header-component button .mat-button-focus-overlay,
44442
- .lux-datepicker-custom-header-component .mat-icon-button .mat-button-focus-overlay {
44443
- display: none;
44444
- }
44445
44828
  .lux-datepicker-custom-header-component button:focus,
44446
44829
  .lux-datepicker-custom-header-component .mat-icon-button:focus {
44447
44830
  outline: 4px solid #2e8533 !important;
@@ -44533,7 +44916,7 @@ mat-card lux-tabs div.lux-tab-title {
44533
44916
  /*
44534
44917
  * Theming for LUX-Filter-Form
44535
44918
  */
44536
- lux-filter-form lux-accordion lux-menu .lux-menu-trigger button.mat-button {
44919
+ lux-filter-form lux-accordion lux-menu .lux-menu-trigger button.mat-mdc-button {
44537
44920
  height: 45px;
44538
44921
  }
44539
44922
  lux-filter-form lux-accordion .mat-expansion-panel-header.mat-expanded {
@@ -44553,7 +44936,7 @@ lux-filter-form lux-menu .lux-filter-menu-trigger button:not([disabled]).mat-fab
44553
44936
  .lux-master-detail-ac .lux-master-header-container-ac lux-button.master-light-toggle {
44554
44937
  right: -23px;
44555
44938
  }
44556
- .lux-master-detail-ac .lux-detail-header-ac mat-card.mat-card {
44939
+ .lux-master-detail-ac .lux-detail-header-ac mat-card.mat-mdc-card {
44557
44940
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
44558
44941
  }
44559
44942
  .lux-master-detail-ac .lux-master-ac-container {
@@ -44653,30 +45036,7 @@ lux-radio-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-contro
44653
45036
  padding: 10px 0;
44654
45037
  height: auto;
44655
45038
  }
44656
- lux-radio-ac .mat-radio-outer-circle {
44657
- border: 1.5px solid #003366;
44658
- }
44659
- lux-radio-ac .mat-radio-inner-circle {
44660
- border-radius: 2px;
44661
- background-color: transparent !important;
44662
- border-bottom: 5px solid white;
44663
- border-right: 5px solid white;
44664
- height: 32px;
44665
- width: 14px;
44666
- margin-top: -8px;
44667
- margin-left: 3px;
44668
- }
44669
- lux-radio-ac .mat-radio-checked .mat-radio-outer-circle {
44670
- background: #003366;
44671
- }
44672
- lux-radio-ac .mat-radio-checked.mat-radio-disabled .mat-radio-outer-circle {
44673
- background: #636d76;
44674
- border: none;
44675
- }
44676
- lux-radio-ac .mat-radio-checked .mat-radio-inner-circle {
44677
- transform: rotate(45deg) scale(0.4);
44678
- }
44679
- lux-radio-ac .mat-radio-button .mat-radio-label-content {
45039
+ lux-radio-ac .mat-radio-button .mdc-label {
44680
45040
  line-height: normal;
44681
45041
  }
44682
45042
  lux-radio-ac .mat-radio-button .mat-radio-ripple {
@@ -44715,8 +45075,8 @@ lux-datetimepicker-ac mat-datepicker-toggle .mdc-icon-button.mat-mdc-icon-button
44715
45075
  height: 18px;
44716
45076
  width: 18px;
44717
45077
  }
44718
- lux-datepicker-ac mat-datepicker-toggle .mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base.mat-button-disabled svg,
44719
- lux-datetimepicker-ac mat-datepicker-toggle .mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base.mat-button-disabled svg {
45078
+ lux-datepicker-ac mat-datepicker-toggle .mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base:disabled svg,
45079
+ lux-datetimepicker-ac mat-datepicker-toggle .mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base:disabled svg {
44720
45080
  color: #636d76;
44721
45081
  }
44722
45082
  lux-datepicker-ac mat-datepicker-toggle button:hover lux-icon.lux-datepicker-toggle-icon.lux-color-blue,
@@ -44725,7 +45085,7 @@ lux-datetimepicker-ac mat-datepicker-toggle button:hover lux-icon.lux-datepicker
44725
45085
  }
44726
45086
 
44727
45087
  .cdk-overlay-pane .mat-datepicker-content,
44728
- .lux-datetimepicker-overlay .mat-card.lux-card {
45088
+ .lux-datetimepicker-overlay .mat-mdc-card.lux-card {
44729
45089
  margin: 11px -6px;
44730
45090
  }
44731
45091
 
@@ -44745,10 +45105,10 @@ lux-lookup-combobox-ac .mat-select-value {
44745
45105
  * Eineheitliche Elevation für die Components auf Cdk-Overlay-Pane
44746
45106
  * wird noch für "Green" benötigt
44747
45107
  */
44748
- .cdk-overlay-pane > .mat-autocomplete-panel:not([class*=mat-elevation-z]),
45108
+ .cdk-overlay-pane > .mat-mdc-autocomplete-panel:not([class*=mat-elevation-z]),
44749
45109
  .cdk-overlay-pane .mat-datepicker-content,
44750
- .cdk-overlay-pane .mat-select-panel:not([class*=mat-elevation-z]),
44751
- .cdk-overlay-pane .mat-menu-panel {
45110
+ .cdk-overlay-pane .mat-mdc-select-panel:not([class*=mat-elevation-z]),
45111
+ .cdk-overlay-pane .mat-mdc-menu-panel {
44752
45112
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
44753
45113
  }
44754
45114