@ihk-gfi/lux-components-theme 21.5.0 → 21.7.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 (16) hide show
  1. package/package.json +1 -1
  2. package/prebuilt-themes/luxtheme-authentic-min.css +1 -1
  3. package/prebuilt-themes/luxtheme-authentic-min.css.map +1 -1
  4. package/prebuilt-themes/luxtheme-authentic.css +211 -3
  5. package/prebuilt-themes/luxtheme-authentic.css.map +1 -1
  6. package/prebuilt-themes/luxtheme-green-min.css +1 -1
  7. package/prebuilt-themes/luxtheme-green-min.css.map +1 -1
  8. package/prebuilt-themes/luxtheme-green.css +211 -3
  9. package/prebuilt-themes/luxtheme-green.css.map +1 -1
  10. package/src/base-templates/components/_luxBadge.scss +32 -0
  11. package/src/base-templates/components/_luxFilter.scss +1 -1
  12. package/src/base-templates/components/_luxInput.scss +41 -4
  13. package/src/base-templates/components/_luxMenu.scss +56 -2
  14. package/src/base-templates/components/_luxPaginator.scss +37 -5
  15. package/src/theme-authentic/_variables.scss +32 -0
  16. package/src/theme-green/_variables.scss +32 -0
package/src/base-templates/components/_luxBadge.scss CHANGED
@@ -11,6 +11,18 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yell
11
11
  }
12
12
  }
13
13
 
14
+ @mixin lux-badge-muted-color-mixin($prefix) {
15
+ @each $colorName in $componentColorNames {
16
+ &.lux-badge-#{$colorName} {
17
+ background-color: var(#{$prefix}-#{$colorName});
18
+ box-shadow: inset 0 0 0 1px var(#{$prefix}-stroke-#{$colorName});
19
+ }
20
+ &.lux-badge-on-#{$colorName} {
21
+ color: var(#{$prefix}-on-#{$colorName});
22
+ }
23
+ }
24
+ }
25
+
14
26
  .lux-badge {
15
27
  border-radius: 8px;
16
28
  display: inline-flex;
@@ -18,6 +30,22 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yell
18
30
  flex: initial;
19
31
 
20
32
  @include lux-badge-color-mixin("--lux-theme-badge");
33
+
34
+ &.lux-badge-muted {
35
+ @include lux-badge-muted-color-mixin("--lux-theme-badge-muted");
36
+ }
37
+
38
+ &.lux-badge-size-small {
39
+ font-size: 0.75rem;
40
+ }
41
+
42
+ &.lux-badge-size-medium {
43
+ font-size: 1rem;
44
+ }
45
+
46
+ &.lux-badge-size-large {
47
+ font-size: 1.25rem;
48
+ }
21
49
  }
22
50
 
23
51
  .lux-badge.lux-badge-uppercase * {
@@ -36,5 +64,9 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yell
36
64
  font-style: normal;
37
65
  font-weight: 600;
38
66
  line-height: normal;
67
+
68
+ &.lux-badge-size-small {
69
+ font-size: 1rem;
70
+ }
39
71
  }
40
72
  }
package/src/base-templates/components/_luxFilter.scss CHANGED
@@ -107,7 +107,7 @@ lux-filter-load-dialog {
107
107
  max-width: 100%;
108
108
  box-sizing: border-box;
109
109
  gap: 12px;
110
- place-content: center end;
110
+ place-content: center center;
111
111
  align-items: center;
112
112
  }
113
113
  }
package/src/base-templates/components/_luxInput.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "@angular/material" as mat;
2
+
1
3
  // Muss der Wrapper sein, da Input-Elemente auch in anderen Komponenten (z.B. lux-autocomplete) genutzt werden
2
4
  lux-form-control-wrapper {
3
5
  input {
@@ -18,9 +20,44 @@ lux-form-control-wrapper {
18
20
 
19
21
  lux-input-ac {
20
22
  // Theming des Prefix- und Suffix-Containers
21
- lux-input-ac-prefix,
22
- lux-input-ac-suffix {
23
- display: flex;
24
- white-space: nowrap;
23
+ lux-input-ac-prefix,
24
+ lux-input-ac-suffix {
25
+ display: flex;
26
+ white-space: nowrap;
27
+ }
28
+ }
29
+
30
+ @mixin input-clear-button($touchSize, $containerSize) {
31
+ lux-button.lux-icon-button.lux-input-clear-btn {
32
+ display: flex;
33
+
34
+ @include mat.icon-button-overrides(
35
+ (
36
+ container-shape: var(--lux-theme-button-icon-container-shape),
37
+ icon-color: var(--lux-theme-primary-color),
38
+ icon-size: var(--mat-icon-button-icon-size),
39
+ state-layer-size: #{$containerSize},
40
+ state-layer-color: var(--mat-sys-on-surface-variant),
41
+ touch-target-size: #{$touchSize}
42
+ )
43
+ );
44
+
45
+ lux-icon,
46
+ .lux-icon {
47
+ width: var(--mat-icon-button-icon-size);
48
+ height: var(--mat-icon-button-icon-size);
49
+ }
50
+
51
+ button:not([disabled]):focus,
52
+ button:not([disabled]):focus-visible {
53
+ outline-color: transparent !important; // In V22 wieder entfernen, wenn alle !important entfernt wurden
54
+ }
25
55
  }
26
56
  }
57
+
58
+ //Clear-Button für Input-Felder
59
+ @include input-clear-button(calc(var(--lux-theme-form-min-height) - 2 * var(--lux-theme-form-border-width)), "40px");
60
+
61
+ .lux-dense-authentic {
62
+ @include input-clear-button(calc(var(--lux-theme-form-dense-min-height) - 2 * var(--lux-theme-form-border-width)), "36px");
63
+ }
package/src/base-templates/components/_luxMenu.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @use "@angular/material" as mat;
2
2
  @use "../common/luxSvgIcons" as luxicons;
3
- @use "../common/luxfocus" as luxfocus;
4
3
 
5
4
  .mat-mdc-menu-panel {
6
5
  .mat-mdc-menu-item-text {
@@ -70,6 +69,18 @@ lux-menu {
70
69
  }
71
70
 
72
71
  /* Menu-Overlay-Panel anpassen */
72
+ .lux-menu-panel:not(.lux-menu-section-panel) {
73
+ .lux-menu-item-color-warn:not([disabled]) {
74
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-warn-text-color);
75
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-warn-text-color);
76
+ }
77
+
78
+ .lux-menu-item-color-accent:not([disabled]) {
79
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-accent-text-color);
80
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-accent-text-color);
81
+ }
82
+ }
83
+
73
84
  .lux-menu-panel {
74
85
  @include mat.menu-overrides(
75
86
  (
@@ -139,7 +150,9 @@ lux-menu {
139
150
  }
140
151
 
141
152
  .lux-menu-item-icon {
142
- display: inline-block;
153
+ display: inline-flex;
154
+ align-items: center;
155
+ justify-content: center;
143
156
  align-self: center;
144
157
  vertical-align: middle;
145
158
  width: var(--lux-theme-menu-item-icon-size);
@@ -147,13 +160,25 @@ lux-menu {
147
160
 
148
161
  .lux-icon,
149
162
  mat-icon {
163
+ display: inline-flex;
164
+ align-items: center;
165
+ justify-content: center;
150
166
  width: 100%;
151
167
  height: 100%;
168
+ max-width: var(--lux-theme-menu-item-icon-size);
169
+ max-height: var(--lux-theme-menu-item-icon-size);
152
170
  font-size: var(--lux-theme-menu-item-icon-size);
153
171
  }
154
172
 
155
173
  mat-icon {
156
174
  margin: 0;
175
+
176
+ svg {
177
+ width: 100%;
178
+ height: 100%;
179
+ max-width: var(--lux-theme-menu-item-icon-size);
180
+ max-height: var(--lux-theme-menu-item-icon-size);
181
+ }
157
182
  }
158
183
  }
159
184
  }
@@ -248,6 +273,26 @@ lux-menu {
248
273
  padding: 4px;
249
274
  }
250
275
 
276
+ .lux-menu-item-color-warn:not([disabled]) {
277
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-warn-text-color);
278
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-warn-text-color);
279
+
280
+ .lux-button-label,
281
+ .lux-button-label-subtitle {
282
+ color: var(--lux-theme-button-text-warn-text-color);
283
+ }
284
+ }
285
+
286
+ .lux-menu-item-color-accent:not([disabled]) {
287
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-accent-text-color);
288
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-accent-text-color);
289
+
290
+ .lux-button-label,
291
+ .lux-button-label-subtitle {
292
+ color: var(--lux-theme-button-text-accent-text-color);
293
+ }
294
+ }
295
+
251
296
  .lux-menu-item-selected {
252
297
  background-color: var(--lux-theme-primary-90) !important;
253
298
  text-decoration-line: underline;
@@ -287,8 +332,17 @@ lux-menu {
287
332
 
288
333
  .lux-icon,
289
334
  mat-icon {
335
+ max-width: var(--lux-theme-menu-item-icon-size-large);
336
+ max-height: var(--lux-theme-menu-item-icon-size-large);
290
337
  font-size: var(--lux-theme-menu-item-icon-size-large);
291
338
  }
339
+
340
+ mat-icon {
341
+ svg {
342
+ max-width: var(--lux-theme-menu-item-icon-size-large);
343
+ max-height: var(--lux-theme-menu-item-icon-size-large);
344
+ }
345
+ }
292
346
  }
293
347
  }
294
348
  }
package/src/base-templates/components/_luxPaginator.scss CHANGED
@@ -1,7 +1,39 @@
1
1
  @use "@angular/material" as mat;
2
2
 
3
- :root {
4
- @include mat.paginator-overrides((
5
- container-background-color: transparent,
6
- ));
7
- }
3
+ lux-paginator {
4
+ @include mat.paginator-overrides(
5
+ (
6
+ container-background-color: transparent
7
+ )
8
+ );
9
+
10
+ // Override the form field styles for the paginator's page size select
11
+ @include mat.form-field-overrides(
12
+ (
13
+ filled-container-color: transparent
14
+ )
15
+ );
16
+
17
+ mat-paginator.lux-no-wrap .mat-mdc-paginator-container {
18
+ flex-wrap: nowrap;
19
+ }
20
+
21
+ mat-paginator {
22
+ .mat-mdc-paginator-range-label {
23
+ margin-left: 0.25rem;
24
+ margin-right: 0.25rem;
25
+ }
26
+
27
+ &.lux-dense {
28
+ .mat-mdc-form-field-infix {
29
+ min-height: 0;
30
+ }
31
+
32
+ @include mat.form-field-overrides(
33
+ (
34
+ container-vertical-padding: 4px
35
+ )
36
+ );
37
+ }
38
+ }
39
+ }
package/src/theme-authentic/_variables.scss CHANGED
@@ -234,6 +234,38 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
234
234
  --lux-theme-badge-lightblue: var(--lux-theme-custom-lightblue);
235
235
  --lux-theme-badge-on-lightblue: var(--lux-theme-custom-on-lightblue);
236
236
 
237
+ // LUX-Badge Muted
238
+ --lux-theme-badge-muted-red: #ffedea;
239
+ --lux-theme-badge-muted-on-red: #93000c;
240
+ --lux-theme-badge-muted-stroke-red: #ffb4ab;
241
+ --lux-theme-badge-muted-green: #ebffe6;
242
+ --lux-theme-badge-muted-on-green: #00531d;
243
+ --lux-theme-badge-muted-stroke-green: #75dc81;
244
+ --lux-theme-badge-muted-purple: #f4eeff;
245
+ --lux-theme-badge-muted-on-purple: #4a3597;
246
+ --lux-theme-badge-muted-stroke-purple: #d2bbff;
247
+ --lux-theme-badge-muted-blue: #ffffff;
248
+ --lux-theme-badge-muted-on-blue: #003366;
249
+ --lux-theme-badge-muted-stroke-blue: #003366;
250
+ --lux-theme-badge-muted-gray: #f4f0ef;
251
+ --lux-theme-badge-muted-on-gray: #484646;
252
+ --lux-theme-badge-muted-stroke-gray: #c9c6c5;
253
+ --lux-theme-badge-muted-orange: #ffede4;
254
+ --lux-theme-badge-muted-on-orange: #793100;
255
+ --lux-theme-badge-muted-stroke-orange: #793100;
256
+ --lux-theme-badge-muted-black: #ffffff;
257
+ --lux-theme-badge-muted-on-black: #1c1b1b;
258
+ --lux-theme-badge-muted-stroke-black: #605e5e;
259
+ --lux-theme-badge-muted-yellow: #ffefd3;
260
+ --lux-theme-badge-muted-on-yellow: #5a4400;
261
+ --lux-theme-badge-muted-stroke-yellow: #f5bf00;
262
+ --lux-theme-badge-muted-pink: #ffecf2;
263
+ --lux-theme-badge-muted-on-pink: #8e0051;
264
+ --lux-theme-badge-muted-stroke-pink: #ffb0ce;
265
+ --lux-theme-badge-muted-lightblue: #e6f2ff;
266
+ --lux-theme-badge-muted-on-lightblue: #003366;
267
+ --lux-theme-badge-muted-stroke-lightblue: #91cdff;
268
+
237
269
  // LUX-Breadcrumb
238
270
  --lux-theme-breadcrumb-hover-color: var(--lux-theme-link-plain-hover-color);
239
271
 
package/src/theme-green/_variables.scss CHANGED
@@ -235,6 +235,38 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
235
235
  --lux-theme-badge-lightblue: var(--lux-theme-custom-lightblue);
236
236
  --lux-theme-badge-on-lightblue: var(--lux-theme-custom-on-lightblue);
237
237
 
238
+ // LUX-Badge Muted
239
+ --lux-theme-badge-muted-red: #ffedea;
240
+ --lux-theme-badge-muted-on-red: #93000c;
241
+ --lux-theme-badge-muted-stroke-red: #ffb4ab;
242
+ --lux-theme-badge-muted-green: #ebffe6;
243
+ --lux-theme-badge-muted-on-green: #00531d;
244
+ --lux-theme-badge-muted-stroke-green: #75dc81;
245
+ --lux-theme-badge-muted-purple: #f4eeff;
246
+ --lux-theme-badge-muted-on-purple: #4a3597;
247
+ --lux-theme-badge-muted-stroke-purple: #d2bbff;
248
+ --lux-theme-badge-muted-blue: #ffffff;
249
+ --lux-theme-badge-muted-on-blue: #003366;
250
+ --lux-theme-badge-muted-stroke-blue: #003366;
251
+ --lux-theme-badge-muted-gray: #f4f0ef;
252
+ --lux-theme-badge-muted-on-gray: #484646;
253
+ --lux-theme-badge-muted-stroke-gray: #c9c6c5;
254
+ --lux-theme-badge-muted-orange: #ffede4;
255
+ --lux-theme-badge-muted-on-orange: #793100;
256
+ --lux-theme-badge-muted-stroke-orange: #793100;
257
+ --lux-theme-badge-muted-black: #ffffff;
258
+ --lux-theme-badge-muted-on-black: #1c1b1b;
259
+ --lux-theme-badge-muted-stroke-black: #605e5e;
260
+ --lux-theme-badge-muted-yellow: #ffefd3;
261
+ --lux-theme-badge-muted-on-yellow: #5a4400;
262
+ --lux-theme-badge-muted-stroke-yellow: #f5bf00;
263
+ --lux-theme-badge-muted-pink: #ffecf2;
264
+ --lux-theme-badge-muted-on-pink: #8e0051;
265
+ --lux-theme-badge-muted-stroke-pink: #ffb0ce;
266
+ --lux-theme-badge-muted-lightblue: #e6f2ff;
267
+ --lux-theme-badge-muted-on-lightblue: #003366;
268
+ --lux-theme-badge-muted-stroke-lightblue: #91cdff;
269
+
238
270
  // LUX-Breadcrumb
239
271
  --lux-theme-breadcrumb-hover-color: var(--lux-theme-accent-secondary-color);
240
272