@@ -21336,7 +21336,6 @@ html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-sw
21336
21336
.table .th {
21337
21337
display: flex;
21338
21338
align-items: flex-start;
21339
- font-weight: 600;
21340
21339
background-color: var(--bg-color-secondary, #fff);
21341
21340
border-width: 0;
21342
21341
border-color: var(--grid-border-color, #ced0d3);
@@ -21409,6 +21408,7 @@ html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-sw
21409
21408
margin: 1px 1px calc(-1 * var(--spacing-smaller, 4px) + 2px);
21410
21409
display: flex;
21411
21410
align-items: baseline;
21411
+ font-weight: 600;
21412
21412
}
21413
21413
.table .th .column-header span {
21414
21414
min-width: 0;
@@ -21435,18 +21435,9 @@ html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-sw
21435
21435
display: flex;
21436
21436
margin-top: 4px;
21437
21437
}
21438
- .table .th .filter input:not([type=checkbox]) {
21439
- font-weight: normal;
21440
- flex-grow: 1;
21441
- width: 100%;
21442
- }
21443
21438
.table .th .filter > .form-group {
21444
21439
margin-bottom: 0;
21445
21440
}
21446
- .table .th .filter > .form-control {
21447
- flex: unset;
21448
- min-width: unset;
21449
- }
21450
21441
.table:has(.th .column-container .filter:not(:empty)) .th {
21451
21442
/*adjust filter-selector icon to be mid-bottom aligned */
21452
21443
/*adjust checkbox toggle to be mid-bottom aligned */
@@ -21562,6 +21553,12 @@ html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-sw
21562
21553
justify-content: flex-end;
21563
21554
}
21564
21555
21556
+ :where(.table .th .filter input:not([type="checkbox"])) {
21557
+ font-weight: normal;
21558
+ flex-grow: 1;
21559
+ width: 100%;
21560
+ }
21561
+
21565
21562
.pagination-bar {
21566
21563
display: flex;
21567
21564
justify-content: flex-end;
@@ -22182,6 +22179,298 @@ div:not(.table-compact) > .table .th .dropdown-container .dropdown-list {
22182
22179
margin: 0;
22183
22180
}
22184
22181
22182
+ .widget-dropdown-filter {
22183
+ --wdf-outer-spacing: var(--dropdown-outer-spacing, 10px);
22184
+ --wdf-spacing: var(--spacing-smaller, 4px);
22185
+ --wdf-spacing-tiny: var(--spacing-smallest, 2px);
22186
+ --wdf-popover-spacing: 0;
22187
+ --wdf-popover-z-index: 50;
22188
+ --wdf-popover-shadow: 0px 0px var(--wdf-outer-spacing) 0px var(--shadow-color-border, rgba(0, 0, 0, 0.2));
22189
+ --wdf-bd-radius: var(--dropdown-border-radius, 7px);
22190
+ --wdf-menu-bg-color: var(--label-info-color, #ffffff);
22191
+ --wdf-menu-max-height: var(--dropdown-menu-max-height, 320px);
22192
+ --wdf-menu-item-padding: 6px 10px;
22193
+ --wdf-highlighted-bg-color: var(--color-default-light, #f5f6f6);
22194
+ --wdf-selected-bg-color: var(--color-primary-lighter, #e6eaff);
22195
+ --wdf-button-spacing: 8px;
22196
+ --wdf-color: var(--gray-dark, black);
22197
+ --wdf-state-icon-size: 16px;
22198
+ --wdf-toggle-width: calc(4px + var(--wdf-state-icon-size) + var(--wdf-button-spacing));
22199
+ --wdf-toggle-inline-end: var(--wdf-toggle-width);
22200
+ --wdf-clear-margin: var(--wdf-toggle-inline-end);
22201
+ --wdf-clear-inline-spacing: 6px;
22202
+ --wdf-clear-border-width: 1px;
22203
+ --wdf-clear-width: calc(14px + (var(--wdf-clear-inline-spacing) * 2) + var(--wdf-clear-border-width));
22204
+ --wdf-toggle-inline-end-clearable: calc(var(--wdf-clear-width) + var(--wdf-toggle-inline-end));
22205
+ --wdf-tag-padding: var(--wdf-spacing-tiny) var(--dropdown-outer-spacing, 10px);
22206
+ }
22207
+ .widget-dropdown-filter:where(.form-control) {
22208
+ padding: 0;
22209
+ position: relative;
22210
+ display: grid;
22211
+ min-width: 65px;
22212
+ }
22213
+ .widget-dropdown-filter-popover {
22214
+ z-index: var(--wdf-popover-z-index);
22215
+ box-shadow: var(--wdf-popover-shadow);
22216
+ margin-top: var(--wdf-spacing);
22217
+ border-radius: var(--wdf-bd-radius);
22218
+ }
22219
+ .widget-dropdown-filter-menu-slot {
22220
+ border-radius: inherit;
22221
+ background-color: var(--wdf-menu-bg-color);
22222
+ }
22223
+ .widget-dropdown-filter-menu {
22224
+ background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center top, linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center bottom;
22225
+ background-repeat: no-repeat;
22226
+ background-size: 100% 70px, 100% 70px, 100% 35px, 100% 35px;
22227
+ background-attachment: local, local, scroll, scroll;
22228
+ border-radius: inherit;
22229
+ margin: 0;
22230
+ padding: 0;
22231
+ list-style-type: none;
22232
+ max-height: var(--wdf-menu-max-height);
22233
+ overflow-y: auto;
22234
+ }
22235
+ .widget-dropdown-filter-menu-item {
22236
+ display: flex;
22237
+ flex-flow: row nowrap;
22238
+ align-content: center;
22239
+ align-items: center;
22240
+ cursor: pointer;
22241
+ user-select: none;
22242
+ padding: var(--wdf-menu-item-padding);
22243
+ height: fit-content;
22244
+ overflow: hidden;
22245
+ font-weight: normal;
22246
+ color: var(--wdf-color);
22247
+ }
22248
+ .widget-dropdown-filter-menu-item:where([data-selected]) {
22249
+ background-color: var(--wdf-selected-bg-color);
22250
+ }
22251
+ .widget-dropdown-filter-menu-item:where([data-highlighted]) {
22252
+ background-color: var(--wdf-highlighted-bg-color);
22253
+ }
22254
+ .widget-dropdown-filter-checkbox-slot {
22255
+ display: flex;
22256
+ margin-inline-end: var(--wdf-outer-spacing);
22257
+ }
22258
+ .widget-dropdown-filter-input {
22259
+ border: none;
22260
+ margin: 0;
22261
+ padding: 0;
22262
+ }
22263
+ .widget-dropdown-filter-toggle, .widget-dropdown-filter-clear {
22264
+ background-color: transparent;
22265
+ border: none;
22266
+ }
22267
+ .widget-dropdown-filter-input, .widget-dropdown-filter-toggle {
22268
+ text-align: start;
22269
+ overflow: hidden;
22270
+ white-space: nowrap;
22271
+ text-overflow: ellipsis;
22272
+ }
22273
+ .widget-dropdown-filter-clear {
22274
+ position: absolute;
22275
+ padding: 3px 6px;
22276
+ align-self: center;
22277
+ justify-self: end;
22278
+ display: flex;
22279
+ margin-inline-end: var(--wdf-clear-margin);
22280
+ border-inline-end: 1px solid var(--gray, #787d87);
22281
+ }
22282
+ .widget-dropdown-filter-clear path {
22283
+ stroke-width: 0;
22284
+ }
22285
+ .widget-dropdown-filter-clear:hover {
22286
+ color: var(--brand-primary, #264ae5);
22287
+ }
22288
+ .widget-dropdown-filter-clear:hover path {
22289
+ stroke-width: 1px;
22290
+ }
22291
+ .widget-dropdown-filter-toggle, .widget-dropdown-filter-input {
22292
+ color: var(--wdf-color);
22293
+ font-weight: normal;
22294
+ }
22295
+ .widget-dropdown-filter-state-icon {
22296
+ transition: transform 0.2s;
22297
+ }
22298
+ :where(.widget-dropdown-filter[data-expanded="true"]) .widget-dropdown-filter-state-icon {
22299
+ transform: rotate(180deg);
22300
+ }
22301
+ .widget-dropdown-filter-input-container {
22302
+ display: flex;
22303
+ gap: var(--wdf-spacing);
22304
+ flex-flow: row wrap;
22305
+ min-width: 0;
22306
+ overflow: hidden;
22307
+ }
22308
+ .widget-dropdown-filter-remove-icon {
22309
+ cursor: pointer;
22310
+ display: flex;
22311
+ }
22312
+ .widget-dropdown-filter-remove-icon path {
22313
+ stroke-width: 0;
22314
+ }
22315
+ .widget-dropdown-filter-remove-icon:hover {
22316
+ color: var(--brand-primary, #264ae5);
22317
+ }
22318
+ .widget-dropdown-filter-remove-icon:hover path {
22319
+ stroke-width: 1px;
22320
+ }
22321
+ .widget-dropdown-filter-separator {
22322
+ position: absolute;
22323
+ margin-inline-end: var(--wdf-clear-margin);
22324
+ background-color: var(--gray, #787d87);
22325
+ justify-self: end;
22326
+ inset-block: var(--wdf-button-spacing);
22327
+ width: 1px;
22328
+ }
22329
+
22330
+ :where([data-highlighted]) .widget-dropdown-filter-checkbox:not(:checked)::after {
22331
+ content: "";
22332
+ border-color: var(--form-input-bg-hover, #e7e7e9);
22333
+ }
22334
+
22335
+ /* Select variant */
22336
+ :where(.widget-dropdown-filter.variant-select) .widget-dropdown-filter-toggle {
22337
+ padding-block: var(--wdf-button-spacing);
22338
+ padding-inline-start: var(--wdf-button-spacing);
22339
+ padding-inline-end: var(--wdf-toggle-inline-end);
22340
+ }
22341
+ :where(.widget-dropdown-filter.variant-select):has(.widget-dropdown-filter-clear) .widget-dropdown-filter-toggle {
22342
+ padding-block: var(--wdf-button-spacing);
22343
+ padding-inline-start: var(--wdf-button-spacing);
22344
+ padding-inline-end: var(--wdf-toggle-inline-end-clearable);
22345
+ }
22346
+ :where(.widget-dropdown-filter.variant-select) .widget-dropdown-filter-state-icon {
22347
+ position: absolute;
22348
+ align-self: center;
22349
+ justify-self: end;
22350
+ pointer-events: none;
22351
+ margin-inline-end: var(--wdf-button-spacing);
22352
+ }
22353
+
22354
+ :where(.widget-dropdown-filter.variant-select[data-empty]) {
22355
+ --wdf-input-placeholder-color: rgb(117, 117, 117);
22356
+ }
22357
+ :where(.widget-dropdown-filter.variant-select[data-empty]) .widget-dropdown-filter-toggle {
22358
+ color: var(--wdf-input-placeholder-color);
22359
+ }
22360
+
22361
+ /* Combobox variant */
22362
+ :where(.widget-dropdown-filter.variant-combobox) {
22363
+ grid-template-columns: 1fr var(--wdf-toggle-width);
22364
+ }
22365
+ :where(.widget-dropdown-filter.variant-combobox) .widget-dropdown-filter-input {
22366
+ border-radius: inherit;
22367
+ padding-block: var(--wdf-button-spacing);
22368
+ padding-inline-start: var(--wdf-button-spacing);
22369
+ padding-inline-end: 0;
22370
+ }
22371
+ :where(.widget-dropdown-filter.variant-combobox):has(.widget-dropdown-filter-clear) .widget-dropdown-filter-input {
22372
+ padding-inline-end: var(--wdf-clear-width);
22373
+ }
22374
+ :where(.widget-dropdown-filter.variant-combobox) .widget-dropdown-filter-toggle {
22375
+ padding-block: var(--wdf-button-spacing);
22376
+ padding-inline-start: 4px;
22377
+ padding-inline-end: var(--wdf-button-spacing);
22378
+ display: flex;
22379
+ align-items: center;
22380
+ }
22381
+
22382
+ /* Tag Picker variant */
22383
+ :where(.widget-dropdown-filter.variant-tag-picker) {
22384
+ grid-template-columns: 1fr var(--wdf-toggle-width);
22385
+ }
22386
+ :where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-input-container {
22387
+ padding-block: var(--wdf-button-spacing);
22388
+ padding-inline-start: var(--wdf-button-spacing);
22389
+ padding-inline-end: 0;
22390
+ }
22391
+ :where(.widget-dropdown-filter.variant-tag-picker):has(.widget-dropdown-filter-clear) .widget-dropdown-filter-input-container {
22392
+ padding-inline-end: var(--wdf-clear-width);
22393
+ }
22394
+ :where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-selected-item {
22395
+ color: #000;
22396
+ font-size: var(--font-size-small, 12px);
22397
+ line-height: 1.334;
22398
+ display: inline-flex;
22399
+ flex-flow: row nowrap;
22400
+ border-radius: 26px;
22401
+ justify-content: center;
22402
+ padding: var(--wdf-tag-padding);
22403
+ align-items: center;
22404
+ gap: 8px;
22405
+ background-color: var(--color-primary-lighter, #e6eaff);
22406
+ }
22407
+ :where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-selected-item:focus-visible {
22408
+ outline: var(--brand-primary, #264ae5) auto 1px;
22409
+ }
22410
+ :where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-input {
22411
+ width: initial;
22412
+ flex-basis: 0;
22413
+ min-width: 75px;
22414
+ }
22415
+ :where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-clear {
22416
+ border-color: transparent;
22417
+ }
22418
+ :where(.widget-dropdown-filter.variant-tag-picker) .widget-dropdown-filter-toggle {
22419
+ padding-block: var(--wdf-button-spacing);
22420
+ padding-inline-start: 4px;
22421
+ padding-inline-end: var(--wdf-button-spacing);
22422
+ display: flex;
22423
+ align-items: center;
22424
+ }
22425
+
22426
+ /* Tag Picker variant text */
22427
+ :where(.widget-dropdown-filter.variant-tag-picker-text) {
22428
+ grid-template-columns: 1fr var(--wdf-toggle-width);
22429
+ }
22430
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-input-container {
22431
+ padding-block: var(--wdf-button-spacing);
22432
+ padding-inline-start: var(--wdf-button-spacing);
22433
+ padding-inline-end: 0;
22434
+ }
22435
+ :where(.widget-dropdown-filter.variant-tag-picker-text):has(.widget-dropdown-filter-clear) .widget-dropdown-filter-input-container {
22436
+ padding-inline-end: var(--wdf-clear-width);
22437
+ }
22438
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-selected-item {
22439
+ display: inline-flex;
22440
+ align-items: center;
22441
+ color: var(--wdf-color);
22442
+ border-radius: 2px;
22443
+ }
22444
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-selected-item:focus-visible {
22445
+ outline: var(--brand-primary, #264ae5) solid 1px;
22446
+ outline-offset: 2px;
22447
+ }
22448
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-selected-item:has(+ .widget-dropdown-filter-selected-item)::after {
22449
+ content: ",";
22450
+ }
22451
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-remove-icon {
22452
+ padding: var(--wdf-spacing-tiny);
22453
+ border-radius: 50%;
22454
+ }
22455
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-remove-icon path {
22456
+ stroke-width: 1px;
22457
+ }
22458
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-input {
22459
+ width: initial;
22460
+ flex-basis: 0;
22461
+ min-width: 75px;
22462
+ }
22463
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-clear {
22464
+ border-color: transparent;
22465
+ }
22466
+ :where(.widget-dropdown-filter.variant-tag-picker-text) .widget-dropdown-filter-toggle {
22467
+ padding-block: var(--wdf-button-spacing);
22468
+ padding-inline-start: 4px;
22469
+ padding-inline-end: var(--wdf-button-spacing);
22470
+ display: flex;
22471
+ align-items: center;
22472
+ }
22473
+
22185
22474
.table-compact .th {
22186
22475
padding: var(--spacing-small, 8px);
22187
22476
}
0 commit comments