ng-configcat-publicapi-ui 6.0.2 → 6.0.3

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 (24) hide show
  1. package/package.json +1 -1
  2. package/src/css/button.scss +73 -70
  3. package/src/css/controls.scss +318 -310
  4. package/src/css/dialog.scss +50 -46
  5. package/src/css/icon.scss +11 -8
  6. package/src/css/snackbar.scss +14 -11
  7. package/src/css/table.scss +107 -104
  8. package/src/css/theme.scss +12 -7
  9. package/src/css/tooltip.scss +21 -16
  10. package/src/css/variables.scss +267 -261
  11. package/src/css/variation.scss +22 -17
  12. package/src/css/vars/auth.scss +6 -3
  13. package/src/css/vars/banner.scss +6 -3
  14. package/src/css/vars/box.scss +8 -5
  15. package/src/css/vars/config-overview.scss +6 -3
  16. package/src/css/vars/flag.scss +6 -3
  17. package/src/css/vars/header.scss +6 -3
  18. package/src/css/vars/icon.scss +11 -8
  19. package/src/css/vars/logo.scss +6 -3
  20. package/src/css/vars/notification.scss +6 -3
  21. package/src/css/vars/overview.scss +7 -4
  22. package/src/css/vars/prism.scss +7 -4
  23. package/src/css/vars/sidenav.scss +6 -3
  24. package/src/public-api.scss +105 -59
package/src/css/controls.scss CHANGED
@@ -1,436 +1,444 @@
1
1
  // This scss differ from the app version becasue of the integrations iframes handle the fix max-width differently.
2
2
  @use "@angular/material" as mat;
3
3
 
4
- html > body {
5
- .mdc-notched-outline__notch {
6
- border-left: none !important;
7
- }
8
-
9
- .mdc-notched-outline > * {
10
- border-color: var(--input-border-color) !important;
11
- }
4
+ @mixin input-suffix-button {
5
+ @include mat.icon-button-density(-5);
12
6
 
13
- .mat-mdc-text-field-wrapper {
14
- border-bottom-left-radius: 4px;
15
- border-bottom-right-radius: 4px;
16
- background-color: var(--input-background);
7
+ & {
8
+ color: var(--action-icon-button-color);
9
+ padding: 0 !important;
10
+ height: 24px !important;
11
+ width: 24px !important;
12
+ line-height: 1;
13
+ display: inline-flex;
14
+ align-items: center;
15
+ justify-content: center;
17
16
  }
18
17
 
19
- .small-density-form-field {
20
- @include mat.form-field-density(-5);
18
+ mat-icon {
19
+ font-size: 20px;
20
+ height: 20px;
21
+ width: 20px;
21
22
  }
23
+ }
22
24
 
23
- @mixin input-suffix-button {
24
- @include mat.icon-button-density(-5);
25
-
26
- & {
27
- color: var(--action-icon-button-color);
28
- padding: 0 !important;
29
- height: 24px !important;
30
- width: 24px !important;
31
- line-height: 1;
32
- display: inline-flex;
33
- align-items: center;
34
- justify-content: center;
35
- }
36
-
37
- mat-icon {
38
- font-size: 20px;
39
- height: 20px;
40
- width: 20px;
25
+ /// @param {String} $scope-selector
26
+ @mixin apply-form-field-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
27
+ #{$scope-selector} {
28
+ .mdc-notched-outline__notch {
29
+ border-left: none !important;
41
30
  }
42
- }
43
31
 
44
- .mat-mdc-form-field.small-form-field {
45
- @extend .small-density-form-field;
46
-
47
- mat-label,
48
- .mat-mdc-select {
49
- font-size: 12px;
32
+ .mdc-notched-outline > * {
33
+ border-color: var(--input-border-color) !important;
50
34
  }
51
35
 
52
36
  .mat-mdc-text-field-wrapper {
53
- padding: 0 10px;
37
+ border-bottom-left-radius: 4px;
38
+ border-bottom-right-radius: 4px;
39
+ background-color: var(--input-background);
54
40
  }
55
41
 
56
- .mat-mdc-form-field-infix {
57
- padding-top: 4px !important;
58
- padding-bottom: 4px !important;
59
- min-height: 32px !important;
60
- font-size: 12px;
42
+ .small-density-form-field {
43
+ @include mat.form-field-density(-5);
61
44
  }
62
45
 
63
- .input-suffix-button {
64
- @include input-suffix-button();
65
- }
46
+ .mat-mdc-form-field.small-form-field {
47
+ @extend .small-density-form-field;
66
48
 
67
- .input-suffix-button:last-of-type {
68
- @extend .input-suffix-button;
69
- margin-right: 2px;
70
- }
71
- }
49
+ mat-label,
50
+ .mat-mdc-select {
51
+ font-size: 12px;
52
+ }
72
53
 
73
- .mat-mdc-form-field.suffixed {
74
- .mat-mdc-text-field-wrapper {
75
- padding: 0 0 0 10px;
76
- }
77
- }
54
+ .mat-mdc-text-field-wrapper {
55
+ padding: 0 10px;
56
+ }
78
57
 
79
- .mat-mdc-form-field.suffixed-prefixed {
80
- .mat-mdc-text-field-wrapper {
81
- padding: 0;
82
- }
83
- }
58
+ .mat-mdc-form-field-infix {
59
+ padding-top: 4px !important;
60
+ padding-bottom: 4px !important;
61
+ min-height: 32px !important;
62
+ font-size: 12px;
63
+ }
84
64
 
85
- .mat-mdc-form-field.select {
86
- .mat-mdc-text-field-wrapper {
87
- padding: 0 10px 0 10px;
88
- }
65
+ .input-suffix-button {
66
+ @include input-suffix-button();
67
+ }
89
68
 
90
- select {
91
- padding: 0 15px 0 10px;
69
+ .input-suffix-button:last-of-type {
70
+ @extend .input-suffix-button;
71
+ margin-right: 2px;
72
+ }
92
73
  }
93
- }
94
74
 
95
- .mat-mdc-form-field.no-suffix {
96
- .mat-mdc-form-field-icon-suffix {
97
- display: none;
75
+ .mat-mdc-form-field.suffixed {
76
+ .mat-mdc-text-field-wrapper {
77
+ padding: 0 0 0 10px;
78
+ }
98
79
  }
99
- }
100
80
 
101
- .mat-mdc-form-field.select-suffixed {
102
- .mat-mdc-text-field-wrapper {
103
- padding: 0 0 0 10px;
81
+ .mat-mdc-form-field.suffixed-prefixed {
82
+ .mat-mdc-text-field-wrapper {
83
+ padding: 0;
84
+ }
104
85
  }
105
86
 
106
- select {
107
- padding: 0 15px 0 10px;
87
+ .mat-mdc-form-field.select {
88
+ .mat-mdc-text-field-wrapper {
89
+ padding: 0 10px 0 10px;
90
+ }
91
+
92
+ select {
93
+ padding: 0 15px 0 10px;
94
+ }
108
95
  }
109
- }
110
96
 
111
- .mdc-text-field--focused .mdc-notched-outline > * {
112
- border-color: var(--input-outline-focused-color) !important;
113
- }
97
+ .mat-mdc-form-field.no-suffix {
98
+ .mat-mdc-form-field-icon-suffix {
99
+ display: none;
100
+ }
101
+ }
114
102
 
115
- .mdc-text-field--invalid .mdc-notched-outline > * {
116
- border-color: var(--input-outline-invalid-color) !important;
117
- }
103
+ .mat-mdc-form-field.select-suffixed {
104
+ .mat-mdc-text-field-wrapper {
105
+ padding: 0 0 0 10px;
106
+ }
118
107
 
119
- .mdc-text-field--invalid .mat-mdc-floating-label > * {
120
- color: var(--error-text-color);
121
- }
108
+ select {
109
+ padding: 0 15px 0 10px;
110
+ }
111
+ }
122
112
 
123
- .mat-mdc-form-field-error {
124
- color: var(--error-text-color);
125
- }
113
+ .mdc-text-field--focused .mdc-notched-outline > * {
114
+ border-color: var(--input-outline-focused-color) !important;
115
+ }
126
116
 
127
- .mat-mdc-checkbox {
128
- --mat-checkbox-state-layer-size: 28px;
129
- --mat-checkbox-label-text-color: var(--text-color);
117
+ .mdc-text-field--invalid .mdc-notched-outline > * {
118
+ border-color: var(--input-outline-invalid-color) !important;
119
+ }
130
120
 
131
- .mat-mdc-checkbox-ripple,
132
- .mdc-checkbox__ripple {
133
- top: -10px;
134
- left: -10px;
135
- right: -10px;
136
- bottom: -10px;
121
+ .mdc-text-field--invalid .mat-mdc-floating-label > * {
122
+ color: var(--error-text-color);
137
123
  }
138
124
 
139
- label {
140
- padding-left: 6px !important;
125
+ .mat-mdc-form-field-error {
126
+ color: var(--error-text-color);
141
127
  }
142
- }
143
128
 
144
- .mat-mdc-form-field {
145
- font-size: 13px;
129
+ .mat-mdc-checkbox {
130
+ --mat-checkbox-state-layer-size: 28px;
131
+ --mat-checkbox-label-text-color: var(--text-color);
146
132
 
147
- .mat-mdc-form-field-hint-wrapper,
148
- .mat-mdc-form-field-error-wrapper {
149
- padding: 0 8px;
133
+ .mat-mdc-checkbox-ripple,
134
+ .mdc-checkbox__ripple {
135
+ top: -10px;
136
+ left: -10px;
137
+ right: -10px;
138
+ bottom: -10px;
139
+ }
150
140
 
151
- .mat-mdc-form-field-hint,
152
- .mat-mdc-form-field-error {
153
- font-size: 10px;
154
- letter-spacing: normal;
155
- line-height: 10px;
141
+ label {
142
+ padding-left: 6px !important;
156
143
  }
157
144
  }
158
- }
159
145
 
160
- .mat-form-field-disabled {
161
- .mdc-notched-outline > * {
162
- border-color: var(--input-disabled-border-color) !important;
163
- }
146
+ .mat-mdc-form-field {
147
+ font-size: 13px;
164
148
 
165
- .mat-mdc-text-field-wrapper {
166
- --mat-form-field-outlined-disabled-input-text-color: var(--input-disabled-color);
167
- background-color: var(--input-disabled-background-color);
168
- }
149
+ .mat-mdc-form-field-hint-wrapper,
150
+ .mat-mdc-form-field-error-wrapper {
151
+ padding: 0 8px;
169
152
 
170
- .mat-mdc-select-disabled {
171
- --mat-select-disabled-trigger-text-color: var(--input-disabled-color);
153
+ .mat-mdc-form-field-hint,
154
+ .mat-mdc-form-field-error {
155
+ font-size: 10px;
156
+ letter-spacing: normal;
157
+ line-height: 10px;
158
+ }
159
+ }
172
160
  }
173
- }
174
161
 
175
- .mat-mdc-paginator {
176
- .mat-mdc-form-field {
162
+ .mat-form-field-disabled {
163
+ .mdc-notched-outline > * {
164
+ border-color: var(--input-disabled-border-color) !important;
165
+ }
166
+
177
167
  .mat-mdc-text-field-wrapper {
178
- padding: 0 10px;
168
+ --mat-form-field-outlined-disabled-input-text-color: var(--input-disabled-color);
169
+ background-color: var(--input-disabled-background-color);
179
170
  }
180
171
 
181
- .mat-mdc-form-field-infix {
182
- padding-top: 4px !important;
183
- padding-bottom: 4px !important;
184
- min-height: 32px !important;
172
+ .mat-mdc-select-disabled {
173
+ --mat-select-disabled-trigger-text-color: var(--input-disabled-color);
185
174
  }
186
175
  }
187
- }
188
176
 
189
- .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-notched-outline__notch {
190
- max-width: inherit;
191
- }
177
+ .mat-mdc-paginator {
178
+ .mat-mdc-form-field {
179
+ .mat-mdc-text-field-wrapper {
180
+ padding: 0 10px;
181
+ }
192
182
 
193
- .top-icon-suffix {
194
- .mat-mdc-form-field-icon-suffix {
195
- align-self: start;
196
- padding-top: 4px;
183
+ .mat-mdc-form-field-infix {
184
+ padding-top: 4px !important;
185
+ padding-bottom: 4px !important;
186
+ min-height: 32px !important;
187
+ }
188
+ }
197
189
  }
198
190
 
199
- .mat-mdc-form-field-icon-prefix {
200
- align-self: start;
201
- padding-top: 6px;
191
+ .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-notched-outline__notch {
192
+ max-width: inherit;
202
193
  }
203
- }
204
194
 
205
- .search-bar,
206
- .tag-filter {
207
- .mat-mdc-form-field-icon-prefix,
208
- .mat-mdc-form-field-icon-suffix {
209
- color: var(--flag-search-bar-search-icon-color);
195
+ .top-icon-suffix {
196
+ .mat-mdc-form-field-icon-suffix {
197
+ align-self: start;
198
+ padding-top: 4px;
199
+ }
210
200
 
211
- mat-icon {
212
- font-size: 22px;
213
- width: 22px;
214
- height: 22px;
201
+ .mat-mdc-form-field-icon-prefix {
202
+ align-self: start;
203
+ padding-top: 6px;
215
204
  }
216
205
  }
217
206
 
218
- .mat-mdc-form-field-icon-suffix {
219
- padding-right: 4px;
220
- }
207
+ .search-bar,
208
+ .tag-filter {
209
+ .mat-mdc-form-field-icon-prefix,
210
+ .mat-mdc-form-field-icon-suffix {
211
+ color: var(--flag-search-bar-search-icon-color);
221
212
 
222
- .mat-mdc-form-field-infix {
223
- padding-top: 5px !important;
224
- padding-bottom: 4px !important;
225
- min-height: 34px !important;
226
- }
227
- }
213
+ mat-icon {
214
+ font-size: 22px;
215
+ width: 22px;
216
+ height: 22px;
217
+ }
218
+ }
219
+
220
+ .mat-mdc-form-field-icon-suffix {
221
+ padding-right: 4px;
222
+ }
228
223
 
229
- .select-bar {
230
- .mat-mdc-form-field {
231
224
  .mat-mdc-form-field-infix {
232
225
  padding-top: 5px !important;
233
226
  padding-bottom: 4px !important;
234
- min-height: 34px;
227
+ min-height: 34px !important;
235
228
  }
236
229
  }
237
230
 
238
- .mat-mdc-text-field-wrapper .mat-mdc-floating-label {
239
- top: 50% !important;
240
- }
241
- }
242
-
243
- .mat-mdc-form-field-icon-suffix {
244
- mat-icon.info-mat-icon {
245
- color: var(--info-icon-color);
246
- }
247
- }
231
+ .select-bar {
232
+ .mat-mdc-form-field {
233
+ .mat-mdc-form-field-infix {
234
+ padding-top: 5px !important;
235
+ padding-bottom: 4px !important;
236
+ min-height: 34px;
237
+ }
238
+ }
248
239
 
249
- .search-bar .mat-mdc-form-field-icon-suffix {
250
- button {
251
- width: 26px !important;
252
- height: 26px !important;
240
+ .mat-mdc-text-field-wrapper .mat-mdc-floating-label {
241
+ top: 50% !important;
242
+ }
253
243
  }
254
- }
255
244
 
256
- .tag-filter {
257
- .mat-mdc-form-field-icon-prefix,
258
245
  .mat-mdc-form-field-icon-suffix {
259
- opacity: 0.9;
260
-
261
- mat-icon {
262
- font-size: 18px;
263
- width: 18px;
264
- height: 18px;
246
+ mat-icon.info-mat-icon {
247
+ color: var(--info-icon-color);
265
248
  }
266
249
  }
267
250
 
268
- .mat-mdc-form-field-infix {
269
- width: 100%;
251
+ .search-bar .mat-mdc-form-field-icon-suffix {
252
+ button {
253
+ width: 26px !important;
254
+ height: 26px !important;
255
+ }
270
256
  }
271
257
 
272
- .mat-mdc-standard-chip {
273
- border-radius: unset;
274
- height: unset;
258
+ .tag-filter {
259
+ .mat-mdc-form-field-icon-prefix,
260
+ .mat-mdc-form-field-icon-suffix {
261
+ opacity: 0.9;
275
262
 
276
- .mdc-evolution-chip__action--trailing {
277
- padding-right: unset;
278
- padding-left: 3px;
263
+ mat-icon {
264
+ font-size: 18px;
265
+ width: 18px;
266
+ height: 18px;
267
+ }
279
268
  }
280
269
 
281
- .mat-mdc-chip-remove {
282
- opacity: 1;
283
- mat-icon {
284
- opacity: var(--flag-tag-filter-chip-remove-opacity);
285
- color: var(--flag-tag-filter-chip-remove-color);
286
- padding: 0 0 0 2px !important;
287
- font-size: 14px;
288
- height: 14px;
289
- width: 14px;
270
+ .mat-mdc-form-field-infix {
271
+ width: 100%;
272
+ }
273
+
274
+ .mat-mdc-standard-chip {
275
+ border-radius: unset;
276
+ height: unset;
277
+
278
+ .mdc-evolution-chip__action--trailing {
279
+ padding-right: unset;
280
+ padding-left: 3px;
290
281
  }
291
282
 
292
- &:hover {
283
+ .mat-mdc-chip-remove {
284
+ opacity: 1;
293
285
  mat-icon {
294
- opacity: 0.7;
286
+ opacity: var(--flag-tag-filter-chip-remove-opacity);
287
+ color: var(--flag-tag-filter-chip-remove-color);
288
+ padding: 0 0 0 2px !important;
289
+ font-size: 14px;
290
+ height: 14px;
291
+ width: 14px;
295
292
  }
296
- }
297
293
 
298
- &::before {
299
- content: "";
300
- display: block;
301
- position: absolute;
302
- border-radius: 50%;
303
- top: 7px;
304
- left: 11px;
305
- height: 10px;
306
- width: 10px;
307
- background-color: var(--flag-delete-background);
308
- opacity: 1;
294
+ &:hover {
295
+ mat-icon {
296
+ opacity: 0.7;
297
+ }
298
+ }
299
+
300
+ &::before {
301
+ content: "";
302
+ display: block;
303
+ position: absolute;
304
+ border-radius: 50%;
305
+ top: 7px;
306
+ left: 11px;
307
+ height: 10px;
308
+ width: 10px;
309
+ background-color: var(--flag-delete-background);
310
+ opacity: 1;
311
+ }
309
312
  }
310
313
  }
311
- }
312
314
 
313
- .mdc-evolution-chip-set {
314
- .mdc-evolution-chip {
315
- margin-top: 1px;
316
- margin-bottom: 1px;
317
- height: 18px;
315
+ .mdc-evolution-chip-set {
316
+ .mdc-evolution-chip {
317
+ margin-top: 1px;
318
+ margin-bottom: 1px;
319
+ height: 18px;
320
+
321
+ .mdc-evolution-chip__cell--primary,
322
+ .mat-mdc-chip-action-label {
323
+ overflow: hidden;
324
+ font-size: 11px;
325
+ padding-left: 0px;
326
+ padding-right: 0px;
327
+ color: unset;
328
+ min-width: 0;
329
+ }
330
+ }
318
331
 
319
- .mdc-evolution-chip__cell--primary,
320
- .mat-mdc-chip-action-label {
321
- overflow: hidden;
322
- font-size: 11px;
323
- padding-left: 0px;
324
- padding-right: 0px;
325
- color: unset;
326
- min-width: 0;
332
+ .mdc-evolution-chip-set__chips {
333
+ align-items: center;
334
+ flex-flow: row;
327
335
  }
328
336
  }
329
337
 
330
- .mdc-evolution-chip-set__chips {
331
- align-items: center;
332
- flex-flow: row;
338
+ .mdc-text-field--outlined {
339
+ padding-right: 4px;
333
340
  }
334
341
  }
335
342
 
336
- .mdc-text-field--outlined {
337
- padding-right: 4px;
343
+ ::placeholder {
344
+ opacity: var(--input-placeholder-opacity) !important;
338
345
  }
339
- }
340
346
 
341
- .tag-option {
342
- min-height: 36px;
347
+ .clear-filter {
348
+ @include input-suffix-button();
349
+ margin-right: 5px;
343
350
 
344
- .mdc-list-item__primary-text {
345
- overflow: unset !important;
351
+ &.marginless {
352
+ margin-right: unset;
353
+ }
346
354
  }
347
355
  }
348
356
 
349
- ::placeholder {
350
- opacity: var(--input-placeholder-opacity) !important;
351
- }
352
-
353
- .mat-mdc-menu-panel.full-width-menu {
354
- max-width: max-content;
355
- }
357
+ // To use this package's overlay styles on dropdowns/menus, give them the overlay class
358
+ // (e.g., panelClass="ng-configcat-publicapi-ui-overlay" on mat-select, class="ng-configcat-publicapi-ui-overlay" on mat-menu).
356
359
 
357
- .mat-mdc-menu-panel,
358
- .mat-mdc-select-panel {
359
- .mat-divider {
360
- margin: 8px 0 !important;
360
+ html > body {
361
+ .mat-mdc-menu-panel.full-width-menu {
362
+ max-width: max-content;
361
363
  }
362
- }
363
364
 
364
- .mat-mdc-select-panel,
365
- .mat-mdc-autocomplete-panel {
366
- max-height: 50vh;
367
- max-width: 50vh;
365
+ .tag-option {
366
+ min-height: 36px;
368
367
 
369
- .mdc-list-item__primary-text {
370
- overflow: hidden;
371
- text-overflow: ellipsis;
372
- white-space: nowrap;
368
+ .mdc-list-item__primary-text {
369
+ overflow: unset !important;
370
+ }
373
371
  }
374
372
 
375
- .mat-mdc-optgroup-label {
376
- font-weight: 700;
377
- min-height: 40px;
373
+ .mat-mdc-menu-panel,
374
+ .mat-mdc-select-panel,
375
+ .mat-mdc-autocomplete-panel {
376
+ .mat-divider {
377
+ margin: 8px 0 !important;
378
+ }
378
379
  }
379
380
 
380
- .mat-mdc-option {
381
- --mat-option-selected-state-label-text-color: var(--theme-color);
382
- min-height: 38px;
383
- }
381
+ .mat-mdc-select-panel,
382
+ .mat-mdc-autocomplete-panel {
383
+ max-height: 50vh;
384
+ max-width: 50vw;
384
385
 
385
- .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple) {
386
- padding-left: 24px;
387
- }
388
- }
386
+ .mdc-list-item__primary-text {
387
+ overflow: hidden;
388
+ text-overflow: ellipsis;
389
+ white-space: nowrap;
390
+ }
389
391
 
390
- .cdk-overlay-pane.select-overlay-panel {
391
- min-width: fit-content;
392
+ .mat-mdc-optgroup-label {
393
+ font-weight: 700;
394
+ min-height: 40px;
395
+ }
392
396
 
393
- .mat-mdc-select-panel.custom-dropdown-below {
394
- max-width: 98vw;
397
+ .mat-mdc-option {
398
+ --mat-option-selected-state-label-text-color: var(--theme-color);
399
+ min-height: 38px;
400
+ }
401
+
402
+ .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple) {
403
+ padding-left: 24px;
404
+ }
395
405
  }
396
- }
397
406
 
398
- .menu-filter {
399
- display: flex;
400
- margin: 0 8px 8px 8px;
401
- justify-content: space-around;
402
- min-width: 230px;
407
+ .cdk-overlay-pane.select-overlay-panel {
408
+ min-width: fit-content;
403
409
 
404
- mat-form-field {
405
- width: 100%;
410
+ .mat-mdc-select-panel.custom-dropdown-below {
411
+ max-width: 98vw;
412
+ }
406
413
  }
407
- }
408
414
 
409
- .clear-filter {
410
- @include input-suffix-button();
411
- margin-right: 5px;
415
+ .menu-filter {
416
+ display: flex;
417
+ margin: 0 8px 8px 8px;
418
+ justify-content: space-around;
419
+ min-width: 230px;
412
420
 
413
- &.marginless {
414
- margin-right: unset;
421
+ mat-form-field {
422
+ width: 100%;
423
+ }
415
424
  }
416
- }
417
-
418
- &[data-theme="dark"] .mat-mdc-autocomplete-panel,
419
- &[data-theme="dark"] .mat-mdc-dialog-surface,
420
- &[data-theme="dark"] .mat-mdc-select-panel,
421
- &[data-theme="dark"] .mat-mdc-menu-panel {
422
- border: var(--popup-panel-border);
423
- }
424
425
 
425
- &[data-theme="dark"] .mat-mdc-autocomplete-panel,
426
- &[data-theme="dark"] .mat-mdc-select-panel,
427
- &[data-theme="dark"] .mat-mdc-menu-panel {
428
- margin: 3px 0;
429
- }
426
+ // Dark theme rules for panels
427
+ &[data-theme="dark"] {
428
+ .mat-mdc-autocomplete-panel,
429
+ .mat-mdc-dialog-surface,
430
+ .mat-mdc-select-panel,
431
+ .mat-mdc-menu-panel {
432
+ border: var(--popup-panel-border);
433
+ }
430
434
 
431
- &[data-theme="dark"] .mat-mdc-autocomplete-panel,
432
- &[data-theme="dark"] .mat-mdc-select-panel {
433
- border-top-left-radius: 4px !important;
434
- border-top-right-radius: 4px !important;
435
+ .mat-mdc-autocomplete-panel,
436
+ .mat-mdc-select-panel,
437
+ .mat-mdc-menu-panel {
438
+ margin: 3px 0;
439
+ border-top-left-radius: 4px !important;
440
+ border-top-right-radius: 4px !important;
441
+ }
442
+ }
435
443
  }
436
444
  }