@ngx-stoui/core 21.0.9 → 21.0.11
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.
- package/ngx-stoui.css +20 -10
- package/package.json +1 -1
package/ngx-stoui.css
CHANGED
|
@@ -105,11 +105,15 @@
|
|
|
105
105
|
/**
|
|
106
106
|
* CDK Overlay Theming
|
|
107
107
|
*
|
|
108
|
-
* Autocomplete, select, and datepicker panels render in
|
|
109
|
-
*
|
|
110
|
-
*
|
|
108
|
+
* Autocomplete, select, and datepicker panels render in CDK
|
|
109
|
+
* overlays. Historically they teleported into `.cdk-overlay-container`
|
|
110
|
+
* at <body>, but Angular CDK 21 introduced the popover API and now
|
|
111
|
+
* nests autocomplete / select panels in `.cdk-overlay-popover`
|
|
112
|
+
* adjacent to the trigger. Apply EDS token overrides to both wrappers
|
|
113
|
+
* so panels stay themed regardless of which overlay strategy CDK picks.
|
|
111
114
|
*/
|
|
112
|
-
.cdk-overlay-container
|
|
115
|
+
.cdk-overlay-container,
|
|
116
|
+
.cdk-overlay-popover {
|
|
113
117
|
/* Option panels */
|
|
114
118
|
--mat-option-label-text-color: var(
|
|
115
119
|
--eds_text_static_icons__default,
|
|
@@ -183,7 +187,8 @@
|
|
|
183
187
|
--mat-datepicker-calendar-text-font: Equinor, sans-serif;
|
|
184
188
|
}
|
|
185
189
|
|
|
186
|
-
body.sto-dark-theme .cdk-overlay-container
|
|
190
|
+
body.sto-dark-theme .cdk-overlay-container,
|
|
191
|
+
body.sto-dark-theme .cdk-overlay-popover {
|
|
187
192
|
color-scheme: dark;
|
|
188
193
|
}
|
|
189
194
|
|
|
@@ -315,6 +320,11 @@ html body.mat-app-background {
|
|
|
315
320
|
padding: 0;
|
|
316
321
|
}
|
|
317
322
|
|
|
323
|
+
.mat-mdc-autocomplete-panel,
|
|
324
|
+
.mat-mdc-select-panel {
|
|
325
|
+
min-width: max-content;
|
|
326
|
+
}
|
|
327
|
+
|
|
318
328
|
.mat-mdc-form-field-infix {
|
|
319
329
|
display: flex;
|
|
320
330
|
flex-direction: column-reverse;
|
|
@@ -2404,8 +2414,8 @@ span.sortable {
|
|
|
2404
2414
|
--mat-badge-background-color: var(--primary-highlight);
|
|
2405
2415
|
--mat-badge-container-overlap-offset: -1rem -0.9rem;
|
|
2406
2416
|
--mat-badge-container-padding: 0.3rem;
|
|
2407
|
-
--mat-badge-container-shape:
|
|
2408
|
-
--mat-badge-container-size: 1.
|
|
2417
|
+
--mat-badge-container-shape: 50%;
|
|
2418
|
+
--mat-badge-container-size: 1.5rem;
|
|
2409
2419
|
--mat-badge-text-color: var(--primary-resting);
|
|
2410
2420
|
--mat-button-filled-container-shape: var(--mat-sys-corner-small);
|
|
2411
2421
|
--mat-button-outlined-container-shape: var(--mat-sys-corner-small);
|
|
@@ -3124,7 +3134,7 @@ div.mat-primary {
|
|
|
3124
3134
|
}
|
|
3125
3135
|
|
|
3126
3136
|
.mat-accent {
|
|
3127
|
-
--message-panel-bg: var(--accent-
|
|
3137
|
+
--message-panel-bg: var(--accent-highlight);
|
|
3128
3138
|
--message-panel-color: var(--accent-resting-contrast);
|
|
3129
3139
|
--message-panel-border: var(--accent-resting);
|
|
3130
3140
|
--message-panel-icon: var(--accent-resting);
|
|
@@ -3204,8 +3214,8 @@ h6.mat-accent {
|
|
|
3204
3214
|
}
|
|
3205
3215
|
|
|
3206
3216
|
div.mat-accent {
|
|
3207
|
-
background-color: var(--accent-
|
|
3208
|
-
color: var(--accent-
|
|
3217
|
+
background-color: var(--accent-highlight);
|
|
3218
|
+
color: var(--accent-highlight-contrast);
|
|
3209
3219
|
}
|
|
3210
3220
|
|
|
3211
3221
|
.mat-warn {
|