@flood-md/react 0.2.10 → 0.2.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/README.md +239 -1
- package/dist/app-shell.d.ts +3 -0
- package/dist/app-shell.js +66 -0
- package/dist/bulk-action-bar.d.ts +3 -0
- package/dist/bulk-action-bar.js +17 -0
- package/dist/collection-toolbar.d.ts +3 -0
- package/dist/collection-toolbar.js +26 -0
- package/dist/collection-view-switcher.d.ts +3 -0
- package/dist/collection-view-switcher.js +19 -0
- package/dist/combobox.d.ts +6 -1
- package/dist/combobox.js +77 -29
- package/dist/command-list.d.ts +5 -1
- package/dist/command-list.js +2 -2
- package/dist/data-display.js +1 -1
- package/dist/data-table.js +44 -9
- package/dist/date-picker.js +2 -2
- package/dist/date-range-picker.js +2 -2
- package/dist/date-time-picker.js +2 -2
- package/dist/date-time-range-picker.js +2 -2
- package/dist/disclosure.d.ts +2 -1
- package/dist/disclosure.js +4 -4
- package/dist/filter-condition.d.ts +3 -0
- package/dist/filter-condition.js +21 -0
- package/dist/filter-group.d.ts +2 -0
- package/dist/filter-group.js +62 -0
- package/dist/foundations.css +752 -76
- package/dist/index.d.ts +399 -3
- package/dist/index.js +61 -7
- package/dist/menu.js +5 -4
- package/dist/menubar.d.ts +2 -0
- package/dist/menubar.js +85 -0
- package/dist/navigation-group.d.ts +3 -0
- package/dist/navigation-group.js +13 -0
- package/dist/navigation-item.d.ts +3 -0
- package/dist/navigation-item.js +68 -0
- package/dist/navigation-layout.d.ts +2 -1
- package/dist/navigation-layout.js +12 -4
- package/dist/navigation-tree.js +51 -7
- package/dist/navigation.js +2 -2
- package/dist/overflow-actions.d.ts +2 -0
- package/dist/overflow-actions.js +75 -0
- package/dist/overlay-runtime.d.ts +3 -0
- package/dist/overlay-runtime.js +35 -1
- package/dist/overlays.js +32 -16
- package/dist/select.js +4 -1
- package/dist/sidebar.d.ts +2 -0
- package/dist/sidebar.js +58 -0
- package/dist/toolbar.js +2 -2
- package/package.json +2 -2
package/dist/foundations.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
.flood-root .flood-list[data-marker="false"] { list-style: none; padding: 0; }
|
|
14
14
|
.flood-root .flood-empty-state { box-sizing: border-box; align-items: center; text-align: center; padding-block: var(--flood-sys-space-8); padding-inline: min(var(--flood-sys-space-8), 8%); }
|
|
15
15
|
.flood-root .flood-empty-state[data-density="compact"] { padding-block: var(--flood-sys-space-6); padding-inline: min(var(--flood-sys-space-6), 8%); }
|
|
16
|
-
.flood-root .flood-empty-state__icon { display:grid; place-items:center; flex:none; padding: var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-
|
|
16
|
+
.flood-root .flood-empty-state__icon { display:grid; place-items:center; flex:none; padding: var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-muted); }
|
|
17
17
|
.flood-root .flood-empty-state__actions { justify-content: center; }
|
|
18
18
|
.flood-root :is(.flood-container, .flood-grid, .flood-aspect-ratio, .flood-list, .flood-image, .flood-empty-state)[hidden] { display: none; }
|
|
19
19
|
|
|
@@ -29,11 +29,14 @@
|
|
|
29
29
|
.flood-root .flood-card[hidden] { display: none; }
|
|
30
30
|
@media (forced-colors: active) { .flood-root .flood-card { border: var(--flood-sys-stroke-width) solid CanvasText; background: Canvas !important; color: CanvasText; } }
|
|
31
31
|
|
|
32
|
-
.flood-root .flood-kbd { display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; min-inline-size: var(--flood-sys-size-keycap-sm); min-block-size: var(--flood-sys-size-keycap-sm); padding-inline: var(--flood-sys-space-1); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-indicator); background: var(--flood-sys-color-surface-
|
|
32
|
+
.flood-root .flood-kbd { display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; min-inline-size: var(--flood-sys-size-keycap-sm); min-block-size: var(--flood-sys-size-keycap-sm); padding-inline: var(--flood-sys-space-1); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-indicator); background: var(--flood-sys-color-surface-muted); color: var(--flood-sys-color-content-subtle); font-family: var(--flood-sys-font-mono); font-size: var(--flood-sys-type-helper-size); font-weight: var(--flood-sys-type-helper-weight); line-height: var(--flood-sys-type-helper-line-height); white-space: nowrap; }
|
|
33
33
|
.flood-root .flood-kbd[data-size="md"] { min-inline-size: var(--flood-sys-size-keycap-md); min-block-size: var(--flood-sys-size-keycap-md); font-size: var(--flood-sys-type-compact-size); }
|
|
34
34
|
.flood-root .flood-kbd[data-size="lg"] { min-inline-size: var(--flood-sys-size-keycap-lg); min-block-size: var(--flood-sys-size-keycap-lg); font-size: var(--flood-sys-type-body-size); }
|
|
35
35
|
.flood-root .flood-toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--flood-sys-space-1); box-sizing: border-box; inline-size: fit-content; max-inline-size: 100%; min-inline-size: 0; padding: var(--flood-sys-space-1); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-surface-default); }
|
|
36
36
|
.flood-root .flood-toolbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
|
|
37
|
+
.flood-root .flood-toolbar[data-shape="pill"] { border-radius: var(--flood-sys-radius-action); }
|
|
38
|
+
.flood-root .flood-toolbar[data-variant="plain"] { padding:0; border:0; background:transparent; }
|
|
39
|
+
.flood-root .flood-toolbar[data-shape="pill"][data-orientation="horizontal"] { flex-wrap: nowrap; overflow: auto; }
|
|
37
40
|
.flood-root .flood-toolbar:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
38
41
|
.flood-root .flood-toolbar[data-orientation="horizontal"] > .flood-divider { align-self: stretch; inline-size: var(--flood-sys-stroke-width); block-size: auto; border: 0; border-inline-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); margin-inline: var(--flood-sys-space-1); margin-block: var(--flood-sys-space-1); }
|
|
39
42
|
.flood-root .flood-toolbar[data-orientation="vertical"] > .flood-divider { align-self: stretch; inline-size: 100%; block-size: var(--flood-sys-stroke-width); border: 0; border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); margin-block: var(--flood-sys-space-1); }
|
|
@@ -114,7 +117,7 @@
|
|
|
114
117
|
.flood-root .flood-indicator__fill { display: block; flex: none; block-size: 100%; border-radius: inherit; background: var(--flood-indicator-color); transition: inline-size var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing); }
|
|
115
118
|
.flood-root .flood-indicator[data-indeterminate="true"] .flood-indicator__fill { inline-size: 100%; background: linear-gradient(90deg, transparent, var(--flood-indicator-color), transparent); background-size: 200% 100%; animation: flood-indeterminate 1.4s linear infinite; }
|
|
116
119
|
@keyframes flood-indeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } }
|
|
117
|
-
.flood-root .flood-alert { --flood-alert-color: var(--flood-sys-color-content-subtle); position: relative; display: flex; align-items: flex-start; gap: var(--flood-sys-space-3); box-sizing: border-box; min-inline-size: 0; padding: var(--flood-sys-space-4); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); background: color-mix(in srgb, var(--flood-alert-color) 4%, var(--flood-sys-color-surface-
|
|
120
|
+
.flood-root .flood-alert { --flood-alert-color: var(--flood-sys-color-content-subtle); position: relative; display: flex; align-items: flex-start; gap: var(--flood-sys-space-3); box-sizing: border-box; min-inline-size: 0; padding: var(--flood-sys-space-4); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); background: color-mix(in srgb, var(--flood-alert-color) 4%, var(--flood-sys-color-surface-current)); color: var(--flood-sys-color-content-default); }
|
|
118
121
|
.flood-root .flood-alert[data-tone="info"] { --flood-alert-color: var(--flood-sys-color-feedback-info); }
|
|
119
122
|
.flood-root .flood-alert[data-tone="success"] { --flood-alert-color: var(--flood-sys-color-feedback-success); }
|
|
120
123
|
.flood-root .flood-alert[data-tone="warning"] { --flood-alert-color: var(--flood-sys-color-feedback-warning); }
|
|
@@ -140,7 +143,7 @@
|
|
|
140
143
|
.flood-root :is(.flood-alert__icon, .flood-alert__body) { color: CanvasText; }
|
|
141
144
|
}
|
|
142
145
|
|
|
143
|
-
.flood-root .flood-badge { --flood-badge-color: var(--flood-sys-color-content-default); display: inline-flex; align-items: center; vertical-align: middle; gap: var(--flood-sys-space-1); box-sizing: border-box; max-inline-size: 100%; min-inline-size: 0; padding: var(--flood-sys-space-1) var(--flood-sys-space-2); border: var(--flood-sys-stroke-width) solid transparent; border-radius: var(--flood-sys-radius-action); background: color-mix(in srgb, var(--flood-badge-color) 9%, var(--flood-sys-color-surface-
|
|
146
|
+
.flood-root .flood-badge { --flood-badge-color: var(--flood-sys-color-content-default); display: inline-flex; align-items: center; vertical-align: middle; gap: var(--flood-sys-space-1); box-sizing: border-box; max-inline-size: 100%; min-inline-size: 0; padding: var(--flood-sys-space-1) var(--flood-sys-space-2); border: var(--flood-sys-stroke-width) solid transparent; border-radius: var(--flood-sys-radius-action); background: color-mix(in srgb, var(--flood-badge-color) 9%, var(--flood-sys-color-surface-current)); color: var(--flood-badge-color); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); font-weight: var(--flood-sys-type-label-weight); letter-spacing: var(--flood-sys-type-helper-tracking); overflow-wrap: break-word; }
|
|
144
147
|
.flood-root .flood-badge[data-size="sm"] { padding-block: 0; }
|
|
145
148
|
.flood-root .flood-badge[data-size="lg"] { padding-inline: var(--flood-sys-space-3); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
146
149
|
.flood-root .flood-badge[data-tone="accent"] { --flood-badge-color: var(--flood-sys-color-accent-content); }
|
|
@@ -155,7 +158,7 @@
|
|
|
155
158
|
.flood-root .flood-skeleton[data-shape="circle"] { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--flood-sys-radius-action); }
|
|
156
159
|
.flood-root .flood-skeleton[data-animate="true"] { animation: flood-skeleton-pulse 1.8s ease-in-out infinite; }
|
|
157
160
|
@keyframes flood-skeleton-pulse { 50% { opacity: .5; } }
|
|
158
|
-
.flood-root .flood-avatar { --flood-avatar-size: var(--flood-sys-control-md-height); position: relative; display: inline-grid; place-items: center; vertical-align: middle; flex: none; inline-size: var(--flood-avatar-size); block-size: var(--flood-avatar-size); box-sizing: border-box; overflow: hidden; border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-
|
|
161
|
+
.flood-root .flood-avatar { --flood-avatar-size: var(--flood-sys-control-md-height); position: relative; display: inline-grid; place-items: center; vertical-align: middle; flex: none; inline-size: var(--flood-avatar-size); block-size: var(--flood-avatar-size); box-sizing: border-box; overflow: hidden; border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-avatar); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); font-weight: var(--flood-sys-type-label-weight); line-height: 1; user-select: none; }
|
|
159
162
|
.flood-root .flood-avatar[data-size="sm"] { --flood-avatar-size: var(--flood-sys-control-sm-height); font-size: var(--flood-sys-type-helper-size); }
|
|
160
163
|
.flood-root .flood-avatar[data-size="lg"] { --flood-avatar-size: var(--flood-sys-control-xl-height); }
|
|
161
164
|
.flood-root .flood-avatar[data-shape="rounded"] { border-radius: var(--flood-sys-radius-field); }
|
|
@@ -186,6 +189,31 @@
|
|
|
186
189
|
.flood-root .flood-tabs__panel { min-inline-size: 0; padding: var(--flood-sys-space-4); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
187
190
|
.flood-root .flood-tabs__panel[hidden] { display: none; }
|
|
188
191
|
.flood-root .flood-tabs__panel:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
192
|
+
.flood-root .flood-tabs[data-variant="line"] {
|
|
193
|
+
gap: var(--flood-sys-space-4);
|
|
194
|
+
border: 0;
|
|
195
|
+
border-radius: 0;
|
|
196
|
+
background: transparent;
|
|
197
|
+
}
|
|
198
|
+
.flood-root .flood-tabs[data-variant="line"] .flood-tabs__scroll { background: transparent; }
|
|
199
|
+
.flood-root .flood-tabs[data-variant="line"] .flood-tab { position: relative; }
|
|
200
|
+
.flood-root .flood-tabs[data-variant="line"] .flood-tab[aria-selected="true"] { background: transparent; }
|
|
201
|
+
.flood-root .flood-tabs[data-variant="line"] .flood-tab[aria-selected="true"]::after {
|
|
202
|
+
position: absolute;
|
|
203
|
+
inset-inline: var(--flood-sys-space-2);
|
|
204
|
+
inset-block-end: 0;
|
|
205
|
+
block-size: var(--flood-sys-focus-width);
|
|
206
|
+
background: currentColor;
|
|
207
|
+
content: "";
|
|
208
|
+
pointer-events: none;
|
|
209
|
+
}
|
|
210
|
+
.flood-root .flood-tabs[data-variant="line"] .flood-tabs__panel { padding: 0; }
|
|
211
|
+
.flood-root .flood-tabs[data-variant="line"][data-orientation="vertical"] .flood-tab[aria-selected="true"]::after {
|
|
212
|
+
inset-inline: auto 0;
|
|
213
|
+
inset-block: var(--flood-sys-space-2);
|
|
214
|
+
inline-size: var(--flood-sys-focus-width);
|
|
215
|
+
block-size: auto;
|
|
216
|
+
}
|
|
189
217
|
.flood-root :is(.flood-breadcrumb, .flood-pagination) { min-inline-size: 0; max-inline-size: 100%; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
190
218
|
.flood-root :is(.flood-breadcrumb ol, .flood-pagination ul) { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; list-style: none; gap: var(--flood-sys-space-2); }
|
|
191
219
|
.flood-root .flood-breadcrumb { inline-size: max-content; }
|
|
@@ -229,8 +257,8 @@
|
|
|
229
257
|
.flood-root .flood-disclosure__heading { margin: 0; padding: 0; font: inherit; }
|
|
230
258
|
.flood-root .flood-disclosure .flood-disclosure__trigger { inline-size: 100%; max-inline-size: none; justify-content: space-between; text-align: start; border-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
|
|
231
259
|
.flood-root .flood-disclosure__title { min-inline-size: 0; }
|
|
232
|
-
.flood-root .flood-disclosure__indicator {
|
|
233
|
-
.flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading .flood-disclosure__indicator { transform: rotate(
|
|
260
|
+
.flood-root .flood-disclosure__indicator { transition: transform var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); }
|
|
261
|
+
.flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading .flood-disclosure__indicator { transform: rotate(180deg); }
|
|
234
262
|
.flood-root .flood-disclosure__panel { padding: 0 var(--flood-control-padding) var(--flood-control-padding); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
235
263
|
.flood-root .flood-disclosure__panel[hidden] { display: none; }
|
|
236
264
|
.flood-root .flood-accordion > .flood-disclosure { border: 0; border-radius: 0; background: transparent; }
|
|
@@ -326,8 +354,6 @@
|
|
|
326
354
|
box-sizing: border-box;
|
|
327
355
|
border-radius: var(--flood-sys-radius-block);
|
|
328
356
|
min-inline-size: 0;
|
|
329
|
-
--flood-surface-action-rest: var(--flood-sys-color-action-on-surface-rest);
|
|
330
|
-
--flood-surface-action-hover: var(--flood-sys-color-action-on-surface-hover);
|
|
331
357
|
}
|
|
332
358
|
.flood-root .flood-divider { border: 0; border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); margin: 0; inline-size: 100%; }
|
|
333
359
|
.flood-root .flood-button {
|
|
@@ -354,18 +380,6 @@
|
|
|
354
380
|
.flood-root .flood-button:active:not(:disabled) { background: var(--flood-action-pressed); }
|
|
355
381
|
.flood-root .flood-button:disabled { background: var(--flood-action-disabled); color: var(--flood-action-disabled-content); opacity: 1; }
|
|
356
382
|
.flood-root .flood-button[aria-pressed="true"]:not(:disabled) { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
357
|
-
.flood-root .flood-surface .flood-button--subtle {
|
|
358
|
-
--flood-action-rest: var(--flood-surface-action-rest);
|
|
359
|
-
--flood-action-hover: var(--flood-surface-action-hover);
|
|
360
|
-
--flood-action-pressed: var(--flood-sys-color-action-on-surface-pressed);
|
|
361
|
-
--flood-action-content: var(--flood-sys-color-action-on-surface-content);
|
|
362
|
-
--flood-action-disabled: var(--flood-sys-color-action-on-surface-disabled);
|
|
363
|
-
--flood-action-disabled-content: var(--flood-sys-color-action-on-surface-disabled-content);
|
|
364
|
-
}
|
|
365
|
-
.flood-root .flood-surface[data-flood-elevation="overlay"] {
|
|
366
|
-
--flood-surface-action-rest: var(--flood-sys-color-action-on-surface-hover);
|
|
367
|
-
--flood-surface-action-hover: var(--flood-sys-color-action-on-surface-pressed);
|
|
368
|
-
}
|
|
369
383
|
.flood-root .flood-button--outline { border-color: var(--flood-sys-color-field-border); }
|
|
370
384
|
.flood-root .flood-icon-button { min-inline-size: var(--flood-control-height); padding: var(--flood-sys-space-1); }
|
|
371
385
|
.flood-root .flood-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; inline-size: var(--flood-icon-size); block-size: var(--flood-icon-size); color: inherit; }
|
|
@@ -387,6 +401,8 @@
|
|
|
387
401
|
font-weight: var(--flood-sys-type-compact-weight);
|
|
388
402
|
}
|
|
389
403
|
.flood-root .flood-number-input > .flood-input { text-align: center; appearance: textfield; font-variant-numeric: tabular-nums; }
|
|
404
|
+
.flood-root .flood-input-group.flood-number-input { flex-wrap: nowrap; min-inline-size: calc(2 * var(--flood-group-height) + 2 * var(--flood-control-gap) + 2ch); }
|
|
405
|
+
.flood-root .flood-input-group.flood-number-input > .flood-input { flex: 1 1 4ch; min-inline-size: 2ch; }
|
|
390
406
|
.flood-root .flood-number-input > .flood-input::-webkit-inner-spin-button,
|
|
391
407
|
.flood-root .flood-number-input > .flood-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
|
|
392
408
|
.flood-root .flood-slider { --flood-slider-thumb: var(--flood-control-icon); min-inline-size: 0; inline-size: 100%; }
|
|
@@ -419,7 +435,7 @@
|
|
|
419
435
|
.flood-root .flood-input::placeholder { color: var(--flood-sys-color-field-placeholder); opacity: 1; }
|
|
420
436
|
.flood-root .flood-input[aria-invalid="true"] { border-color: var(--flood-sys-color-feedback-error); }
|
|
421
437
|
.flood-root .flood-input[readonly] { cursor: text; }
|
|
422
|
-
.flood-root .flood-input[readonly]:not(:disabled) { background: var(--flood-sys-color-
|
|
438
|
+
.flood-root .flood-input[readonly]:not(:disabled) { background: var(--flood-sys-color-field-readonly); }
|
|
423
439
|
.flood-root .flood-input[readonly]:not(:disabled):not(:focus-visible) { border-style: dashed; }
|
|
424
440
|
.flood-root [data-status="error"] { --flood-field-feedback: var(--flood-sys-color-feedback-error); }
|
|
425
441
|
.flood-root [data-status="warning"] { --flood-field-feedback: var(--flood-sys-color-feedback-warning); }
|
|
@@ -459,6 +475,7 @@
|
|
|
459
475
|
.flood-root .flood-select[hidden] { display: none; }
|
|
460
476
|
.flood-root .flood-select--custom .flood-select__control { position: relative; text-align: start; font-family: inherit; }
|
|
461
477
|
.flood-root .flood-select--custom .flood-select__control::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; inset-inline-end: var(--flood-control-padding); inset-block-start: 50%; inline-size: var(--flood-sys-space-2); block-size: var(--flood-sys-space-2); border-right: var(--flood-sys-focus-width) solid currentColor; border-bottom: var(--flood-sys-focus-width) solid currentColor; transform: translateY(-75%) rotate(45deg); }
|
|
478
|
+
.flood-root .flood-select--custom .flood-select__control[aria-expanded="true"]::after { transform: translateY(-25%) rotate(225deg); }
|
|
462
479
|
.flood-root .flood-select__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
463
480
|
.flood-root .flood-select__native[hidden] { display: none; }
|
|
464
481
|
.flood-root .flood-select__menu {
|
|
@@ -550,7 +567,7 @@
|
|
|
550
567
|
.flood-root .flood-switch-input:disabled::before { background: var(--flood-sys-color-field-disabled-content); }
|
|
551
568
|
.flood-root .flood-link { font-size: inherit; color: var(--flood-sys-color-content-default); text-underline-offset: var(--flood-sys-space-1); }
|
|
552
569
|
.flood-root .flood-link--button { font-size: var(--flood-control-text); color: var(--flood-action-content); text-decoration: none; }
|
|
553
|
-
.flood-root .flood-link--button[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
570
|
+
.flood-root .flood-link--button:is([aria-current="page"],[aria-current="location"]) { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
554
571
|
.flood-root :where(.flood-button, .flood-check, .flood-switch-input, .flood-link):focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: var(--flood-sys-focus-offset); }
|
|
555
572
|
.flood-root .flood-spinner { inline-size: var(--flood-control-icon); block-size: var(--flood-control-icon); border-width: var(--flood-sys-focus-width); }
|
|
556
573
|
@media (pointer: coarse) {
|
|
@@ -763,7 +780,7 @@
|
|
|
763
780
|
.flood-root .flood-button-group[data-orientation="vertical"] > .flood-button:nth-last-child(1 of .flood-button:not([hidden])) { border-end-start-radius: var(--flood-sys-radius-field); border-end-end-radius: var(--flood-sys-radius-field); }
|
|
764
781
|
.flood-root .flood-input-group { flex-wrap: wrap; --flood-group-stroke: var(--flood-sys-stroke-width); --flood-group-height: var(--flood-control-height); --flood-group-inset: max(var(--flood-sys-space-1), var(--flood-sys-focus-width)); box-sizing: border-box; display: flex; align-items: center; gap: var(--flood-control-gap); min-inline-size: 0; inline-size: 100%; min-block-size: var(--flood-group-height); padding-inline: calc(var(--flood-control-padding) - var(--flood-group-stroke)); padding-block: calc(var(--flood-group-inset) - var(--flood-group-stroke)); border: var(--flood-group-stroke) solid var(--flood-sys-color-field-border); border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-field-background); color: var(--flood-sys-color-field-content); }
|
|
765
782
|
.flood-root .flood-input-group[data-status] { border-color: var(--flood-field-feedback); }
|
|
766
|
-
.flood-root .flood-input-group[data-readonly="true"] { background: var(--flood-sys-color-
|
|
783
|
+
.flood-root .flood-input-group[data-readonly="true"] { background: var(--flood-sys-color-field-readonly); border-style: dashed; }
|
|
767
784
|
.flood-root .flood-input-group[data-disabled="true"] { background: var(--flood-sys-color-field-disabled); border-color: var(--flood-sys-color-field-border); color: var(--flood-sys-color-field-disabled-content); }
|
|
768
785
|
.flood-root .flood-input-group:has(> .flood-input:focus-visible) { --flood-group-stroke: var(--flood-sys-focus-width); border-color: var(--flood-sys-color-focus-ring); border-style: solid; }
|
|
769
786
|
.flood-root .flood-input-group > .flood-input { flex: 1 1 4rem; align-self: stretch; inline-size: 0; min-inline-size: min(100%, 4rem); min-block-size: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border: 0; border-radius: 0; background: transparent; padding-inline: 0; padding-block: max(0px, calc((var(--flood-control-height) - var(--flood-control-text) * var(--flood-control-line)) / 2 - var(--flood-group-inset))); }
|
|
@@ -794,6 +811,8 @@
|
|
|
794
811
|
.flood-root .flood-segmented .flood-choice-group[data-orientation="vertical"] > .flood-choice { inline-size: 100%; }
|
|
795
812
|
.flood-root .flood-segmented--icons .flood-choice { padding-inline: var(--flood-sys-space-1); min-inline-size: calc(var(--flood-control-height) - 2 * var(--flood-sys-space-1)); }
|
|
796
813
|
.flood-root .flood-segmented .flood-choice > span { display: inline-flex; align-items: center; justify-content: center; gap: var(--flood-control-gap); }
|
|
814
|
+
.flood-root .flood-segmented__counted-label { display: inline-flex; align-items: baseline; gap: var(--flood-sys-space-1); }
|
|
815
|
+
.flood-root .flood-segmented__count { font-size: min(var(--flood-control-text), var(--flood-sys-type-helper-size)); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
797
816
|
.flood-root .flood-segmented .flood-choice > .flood-check { position: absolute; inset: 0; inline-size: 100%; min-inline-size: 0; max-inline-size: none; block-size: 100%; margin: 0; border: 0; opacity: 0; cursor: inherit; }
|
|
798
817
|
.flood-root .flood-segmented .flood-choice > .flood-check::before { display: none; }
|
|
799
818
|
.flood-root .flood-segmented .flood-choice:has(input:checked) { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
@@ -831,11 +850,13 @@
|
|
|
831
850
|
.flood-root .flood-combobox__control > .flood-input-group__addon--end { flex: none; max-inline-size: 100%; margin-inline-start: auto; }
|
|
832
851
|
.flood-root .flood-combobox__control:has(> .flood-input-group__addon--end .flood-combobox__actions) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
|
|
833
852
|
.flood-root .flood-combobox__actions > .flood-button { --flood-control-height: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-group-inset))); }
|
|
853
|
+
/* Nested icon actions budget their inset against the reduced inner target. */
|
|
854
|
+
.flood-root :is(.flood-input-group__addon, .flood-combobox__actions) > .flood-icon-button { padding:max(0px,calc((var(--flood-control-height) - var(--flood-control-icon) - 2 * var(--flood-sys-stroke-width)) / 2)); }
|
|
834
855
|
.flood-root .flood-combobox__clear-empty { visibility: hidden; }
|
|
835
856
|
.flood-root .flood-combobox__option-text { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; }
|
|
836
857
|
.flood-root .flood-combobox__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
837
858
|
@media (forced-colors: active) { .flood-root .flood-combobox__description { color: inherit; } }
|
|
838
|
-
.flood-root .flood-tag { --flood-tag-height: var(--flood-sys-control-xs-height); display: inline-flex; align-items: center; gap: var(--flood-sys-space-1); box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--flood-tag-height); padding: calc(var(--flood-sys-space-1) / 2) var(--flood-sys-space-2); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-
|
|
859
|
+
.flood-root .flood-tag { --flood-tag-height: var(--flood-sys-control-xs-height); display: inline-flex; align-items: center; gap: var(--flood-sys-space-1); box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--flood-tag-height); padding: calc(var(--flood-sys-space-1) / 2) var(--flood-sys-space-2); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-supporting); color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); letter-spacing: var(--flood-sys-type-compact-tracking); vertical-align: middle; }
|
|
839
860
|
.flood-root .flood-tag[data-size="sm"] { --flood-tag-height: var(--flood-sys-control-2xs-height); font-size: var(--flood-sys-type-helper-size); }
|
|
840
861
|
.flood-root .flood-tag[data-size="lg"] { --flood-tag-height: var(--flood-sys-control-sm-height); font-size: var(--flood-sys-type-body-size); }
|
|
841
862
|
.flood-root .flood-tag__label { min-inline-size: 0; overflow-wrap: break-word; }
|
|
@@ -843,8 +864,10 @@
|
|
|
843
864
|
.flood-root .flood-tag > .flood-tag__remove { --flood-control-height: calc(var(--flood-tag-height) - var(--flood-sys-space-1) - 2 * var(--flood-sys-stroke-width)); min-block-size: var(--flood-control-height); min-inline-size: var(--flood-control-height); flex: none; padding: 0; border-radius: var(--flood-sys-radius-action); }
|
|
844
865
|
.flood-root .flood-tag[data-disabled="true"] { color: var(--flood-sys-color-content-subtle); }
|
|
845
866
|
.flood-root .flood-tag[hidden] { display: none; }
|
|
846
|
-
.flood-root .flood-multi-select__control { padding: calc(var(--flood-group-inset) - var(--flood-group-stroke)); gap: var(--flood-sys-space-1); }
|
|
867
|
+
.flood-root .flood-multi-select__control { --flood-multi-select-action-count:1; padding: calc(var(--flood-group-inset) - var(--flood-group-stroke)); gap: var(--flood-sys-space-1); }
|
|
868
|
+
.flood-root .flood-multi-select__control.flood-control--sm { gap:calc(var(--flood-sys-space-1) / 2); }
|
|
847
869
|
.flood-root .flood-multi-select__control > .flood-tag { --flood-tag-height: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-group-inset))); font-size: var(--flood-control-text); line-height: var(--flood-control-line); }
|
|
870
|
+
.flood-root .flood-multi-select__control > .flood-tag { padding-block:max(0px,min(calc(var(--flood-sys-space-1) / 2),calc((var(--flood-tag-height) - var(--flood-control-text) * var(--flood-control-line) - 2 * var(--flood-sys-stroke-width)) / 2))); }
|
|
848
871
|
@media (pointer: coarse) {
|
|
849
872
|
.flood-root .flood-tag:has(> .flood-tag__remove) { padding-block: 0; }
|
|
850
873
|
.flood-root .flood-tag > .flood-tag__remove { min-block-size: var(--flood-sys-size-touch); min-inline-size: var(--flood-sys-size-touch); }
|
|
@@ -856,6 +879,10 @@
|
|
|
856
879
|
.flood-root .flood-multi-select__editor { display: flex; align-items: center; gap: var(--flood-sys-space-1); flex: 1 1 10rem; min-inline-size: min(100%, calc(var(--flood-group-height) + 4rem)); max-inline-size: 100%; }
|
|
857
880
|
.flood-root .flood-multi-select__editor > .flood-input { inline-size: 0; min-inline-size: 0; flex: 1 1 0; min-block-size: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border: 0; border-radius: 0; background: transparent; padding: 0 var(--flood-sys-space-2); }
|
|
858
881
|
.flood-root .flood-multi-select__editor > .flood-input:focus-visible { outline: none; border: 0; padding: 0 var(--flood-sys-space-2); }
|
|
882
|
+
.flood-root .flood-multi-select__control[data-has-selection="true"]:not([data-query]) { --flood-multi-select-idle-width:calc((var(--flood-group-height) - 2 * var(--flood-group-inset) + var(--flood-sys-space-1)) * var(--flood-multi-select-action-count) + 1px); }
|
|
883
|
+
.flood-root .flood-multi-select__control[data-clearable="true"] { --flood-multi-select-action-count:2; }
|
|
884
|
+
.flood-root .flood-multi-select__control[data-has-selection="true"]:not([data-query]) .flood-multi-select__editor { flex-basis:var(--flood-multi-select-idle-width); min-inline-size:min(100%,var(--flood-multi-select-idle-width)); }
|
|
885
|
+
.flood-root .flood-multi-select__control[data-has-selection="true"]:not([data-query]) .flood-multi-select__editor > .flood-input { padding-inline:0; }
|
|
859
886
|
.flood-root .flood-multi-select__control:has(.flood-multi-select__editor > .flood-input:focus-visible) { --flood-group-stroke: var(--flood-sys-focus-width); border-color: var(--flood-sys-color-focus-ring); border-style: solid; }
|
|
860
887
|
|
|
861
888
|
/* Flood owns the single clear action; suppress duplicate browser decoration. */
|
|
@@ -913,11 +940,10 @@
|
|
|
913
940
|
.flood-root .flood-drawer > .flood-overlay-header { grid-area: header; }
|
|
914
941
|
.flood-root .flood-drawer > .flood-overlay-description { grid-area: description; }
|
|
915
942
|
.flood-root .flood-drawer__body { grid-area: body; min-block-size: 0; min-inline-size: 0; margin-block-start: var(--flood-sys-space-4); }
|
|
943
|
+
.flood-root .flood-drawer > .flood-overlay-description + .flood-drawer__body { margin-block-start: min(var(--flood-sys-space-6), 5dvh); }
|
|
916
944
|
.flood-root .flood-drawer .flood-overlay-body { margin: 0; }
|
|
917
945
|
.flood-root .flood-drawer__footer { grid-area: footer; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--flood-sys-space-2); margin-block-start: min(var(--flood-sys-space-4), 2dvh); padding-block-start: min(var(--flood-sys-space-4), 2dvh); border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
|
|
918
946
|
.flood-root .flood-drawer__footer > * { max-inline-size: 100%; }
|
|
919
|
-
@keyframes flood-drawer-enter { from { transform: translate(var(--flood-drawer-x), var(--flood-drawer-y)); } to { transform: translate(0, 0); } }
|
|
920
|
-
@media (prefers-reduced-motion: no-preference) { .flood-root .flood-drawer[open] { animation: flood-drawer-enter var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); } }
|
|
921
947
|
|
|
922
948
|
.flood-root .flood-drawer__body > .flood-scroll-area { block-size: 100%; }
|
|
923
949
|
.flood-root .flood-drawer > .flood-overlay-header { position: relative; padding-inline-end: calc(max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)) + var(--flood-sys-space-2)); align-items: flex-start; }
|
|
@@ -945,8 +971,8 @@
|
|
|
945
971
|
.flood-root .flood-avatar-group { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; list-style: none; gap: 0; }
|
|
946
972
|
.flood-root .flood-avatar-group > li { display: flex; min-inline-size: 0; }
|
|
947
973
|
.flood-root .flood-avatar-group > li + li { margin-inline-start: calc(-1 * var(--flood-sys-space-2)); }
|
|
948
|
-
.flood-root .flood-avatar-group .flood-avatar { border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); box-shadow: 0 0 0 var(--flood-sys-stroke-width) var(--flood-sys-color-surface-
|
|
949
|
-
.flood-root .flood-avatar-group__overflow { color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-
|
|
974
|
+
.flood-root .flood-avatar-group .flood-avatar { border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); box-shadow: 0 0 0 var(--flood-sys-stroke-width) var(--flood-sys-color-surface-current); }
|
|
975
|
+
.flood-root .flood-avatar-group__overflow { color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-supporting); font-size: var(--flood-sys-type-helper-size); font-variant-numeric: tabular-nums; }
|
|
950
976
|
.flood-root .flood-status-indicator { --flood-status-color: var(--flood-sys-color-content-subtle); display: inline-flex; align-items: center; gap: var(--flood-sys-space-2); max-inline-size: 100%; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
951
977
|
.flood-root .flood-status-indicator[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
952
978
|
.flood-root .flood-status-indicator[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
@@ -964,7 +990,7 @@
|
|
|
964
990
|
.flood-root .flood-blockquote__quote > :first-child { margin-block-start: 0; }
|
|
965
991
|
.flood-root .flood-blockquote__quote > :last-child { margin-block-end: 0; }
|
|
966
992
|
.flood-root .flood-blockquote__attribution { margin-block-start: var(--flood-sys-space-2); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap: break-word; }
|
|
967
|
-
.flood-root .flood-inline-code { border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-surface-
|
|
993
|
+
.flood-root .flood-inline-code { border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-surface-supporting); color: var(--flood-sys-color-content-default); font-family: var(--flood-sys-font-mono); font-size: .875em; line-height: inherit; padding: .125em var(--flood-sys-space-2); box-decoration-break: clone; -webkit-box-decoration-break: clone; overflow-wrap: anywhere; white-space: break-spaces; }
|
|
968
994
|
.flood-root .flood-inline-code[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
969
995
|
.flood-root .flood-inline-code[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
970
996
|
.flood-root .flood-inline-code[data-wrap="false"] { white-space: pre; overflow-wrap: normal; }
|
|
@@ -985,7 +1011,7 @@
|
|
|
985
1011
|
.flood-root .flood-timeline__item { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--flood-sys-space-3); padding-block-end: var(--flood-sys-space-4); }
|
|
986
1012
|
.flood-root .flood-timeline__item:last-child { padding-block-end: 0; }
|
|
987
1013
|
.flood-root .flood-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(.625rem - var(--flood-sys-stroke-width) / 2); inset-block-start: 1.25rem; inset-block-end: 0; inline-size: var(--flood-sys-stroke-width); background: var(--flood-sys-color-border-decorative); }
|
|
988
|
-
.flood-root .flood-timeline__marker { z-index: 1; box-sizing: border-box; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); color: var(--flood-sys-color-content-subtle); background: var(--flood-sys-color-surface-
|
|
1014
|
+
.flood-root .flood-timeline__marker { z-index: 1; box-sizing: border-box; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); color: var(--flood-sys-color-content-subtle); background: var(--flood-sys-color-surface-muted); }
|
|
989
1015
|
.flood-root .flood-timeline__marker > svg { inline-size: 100%; block-size: 100%; }
|
|
990
1016
|
.flood-root .flood-timeline__item[data-state="current"] .flood-timeline__marker { color: var(--flood-sys-color-accent-content); }
|
|
991
1017
|
.flood-root .flood-timeline__item[data-state="current"] .flood-timeline__marker > span { inline-size: .375rem; block-size: .375rem; background: currentColor; border-radius: var(--flood-sys-radius-action); }
|
|
@@ -1002,26 +1028,20 @@
|
|
|
1002
1028
|
.flood-root .flood-timeline__marker { color: CanvasText; background: Canvas; border-color: CanvasText; }
|
|
1003
1029
|
}
|
|
1004
1030
|
|
|
1005
|
-
.flood-root .flood-navigation-list { min-inline-size:
|
|
1006
|
-
.flood-root .flood-navigation-list :is(ul,
|
|
1007
|
-
.flood-root .flood-navigation-
|
|
1008
|
-
.flood-root .flood-navigation-list__group
|
|
1009
|
-
.flood-root .flood-
|
|
1010
|
-
.flood-root .flood-
|
|
1011
|
-
.flood-root .flood-
|
|
1012
|
-
.flood-root .flood-
|
|
1013
|
-
.flood-root .flood-navigation-list__link[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1014
|
-
.flood-root :is(.flood-navigation-list__text,.flood-steps__text) { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); }
|
|
1015
|
-
.flood-root :is(.flood-navigation-list__label,.flood-steps__title) { overflow-wrap: break-word; }
|
|
1016
|
-
.flood-root :is(.flood-navigation-list__description,.flood-steps__description) { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap: break-word; }
|
|
1017
|
-
.flood-root .flood-navigation-list__link > .flood-icon { flex: none; }
|
|
1018
|
-
.flood-root :is(.flood-navigation-list__link,.flood-steps__action):focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: var(--flood-sys-focus-offset); }
|
|
1031
|
+
.flood-root .flood-navigation-list { min-inline-size:0; }
|
|
1032
|
+
.flood-root .flood-navigation-list :is(ul,li) { padding:0; margin:0; list-style:none; min-inline-size:0; }
|
|
1033
|
+
.flood-root .flood-navigation-list ul { display:grid; row-gap:var(--flood-sys-space-1); }
|
|
1034
|
+
.flood-root .flood-navigation-list__group + .flood-navigation-list__group { margin-block-start:var(--flood-sys-space-4); }
|
|
1035
|
+
.flood-root .flood-steps__text { display:grid; min-inline-size:0; gap:var(--flood-sys-space-1); }
|
|
1036
|
+
.flood-root .flood-steps__title { overflow-wrap:break-word; }
|
|
1037
|
+
.flood-root .flood-steps__description { color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); line-height:var(--flood-sys-type-helper-line-height); overflow-wrap:break-word; }
|
|
1038
|
+
.flood-root .flood-steps__action:focus-visible { outline:var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset:var(--flood-sys-focus-offset); }
|
|
1019
1039
|
|
|
1020
1040
|
.flood-root .flood-steps { display: flex; align-items: flex-start; gap: var(--flood-sys-space-4); padding: 0; margin: 0; min-inline-size: 0; list-style: none; }
|
|
1021
1041
|
.flood-root .flood-steps > li { flex: 1 1 0; min-inline-size: 0; }
|
|
1022
1042
|
.flood-root .flood-steps__content { display: flex; gap: var(--flood-sys-space-2); align-items: flex-start; min-inline-size: 0; box-sizing: border-box; font: inherit; color: var(--flood-sys-color-content-default); text-align: start; }
|
|
1023
1043
|
.flood-root .flood-steps__action { inline-size: 100%; min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-1); border: 0; border-radius: var(--flood-sys-radius-field); background: transparent; cursor: pointer; }
|
|
1024
|
-
.flood-root .flood-steps__action:hover:not(:disabled) { background: var(--flood-sys-color-
|
|
1044
|
+
.flood-root .flood-steps__action:hover:not(:disabled) { background: var(--flood-sys-color-action-ghost-hover); }
|
|
1025
1045
|
.flood-root .flood-steps__action:disabled { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
1026
1046
|
.flood-root .flood-steps__indicator { display: inline-grid; place-items: center; flex: none; inline-size: var(--flood-sys-control-xs-height); block-size: var(--flood-sys-control-xs-height); box-sizing: border-box; border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); font-size: var(--flood-sys-type-helper-size); font-weight: var(--flood-sys-type-label-weight); color: var(--flood-sys-color-content-subtle); }
|
|
1027
1047
|
.flood-root .flood-steps__indicator > svg { inline-size: var(--flood-sys-control-xs-icon-size); block-size: var(--flood-sys-control-xs-icon-size); }
|
|
@@ -1041,6 +1061,39 @@
|
|
|
1041
1061
|
.flood-root .flood-section__description > :first-child { margin-block-start: 0; }
|
|
1042
1062
|
.flood-root .flood-section__description > :last-child { margin-block-end: 0; }
|
|
1043
1063
|
.flood-root .flood-section__actions { display: flex; flex-wrap: wrap; gap: var(--flood-sys-space-2); max-inline-size: 100%; }
|
|
1064
|
+
.flood-root .flood-page-header { align-items: center; min-inline-size: 0; }
|
|
1065
|
+
.flood-root .flood-page-header .flood-section__heading { gap: var(--flood-sys-space-2); flex-basis: 16rem; }
|
|
1066
|
+
.flood-root .flood-page-header .flood-section__description { font-size: var(--flood-sys-type-body-size); line-height: var(--flood-sys-type-body-line-height); }
|
|
1067
|
+
|
|
1068
|
+
.flood-root .flood-app-shell { display: flex; min-inline-size: 0; min-block-size: 0; }
|
|
1069
|
+
.flood-root .flood-app-shell[data-scroll="content"] { block-size: 100dvh; }
|
|
1070
|
+
.flood-root .flood-app-shell__navigation { display: flex; flex: none; min-block-size: 0; min-inline-size: 0; }
|
|
1071
|
+
.flood-root .flood-app-shell__workspace { display: flex; flex: 1 1 0; flex-direction: column; min-block-size: 0; min-inline-size: 0; }
|
|
1072
|
+
.flood-root .flood-app-shell__main { flex: 1 1 auto; min-block-size: 0; min-inline-size: 0; }
|
|
1073
|
+
.flood-root .flood-app-shell[data-scroll="content"] .flood-app-shell__main { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
|
|
1074
|
+
.flood-root .flood-app-shell__scroll { block-size: 100%; overscroll-behavior: contain; }
|
|
1075
|
+
.flood-root .flood-app-top-bar {
|
|
1076
|
+
position: relative;
|
|
1077
|
+
display: flex;
|
|
1078
|
+
flex: none;
|
|
1079
|
+
flex-wrap: wrap;
|
|
1080
|
+
align-items: center;
|
|
1081
|
+
gap: var(--flood-sys-space-2) var(--flood-sys-space-4);
|
|
1082
|
+
min-block-size: calc(var(--flood-sys-control-md-height) + 2 * var(--flood-sys-space-2));
|
|
1083
|
+
padding: var(--flood-sys-space-2) var(--flood-sys-space-4);
|
|
1084
|
+
box-sizing: border-box;
|
|
1085
|
+
}
|
|
1086
|
+
.flood-root .flood-app-top-bar[data-bordered]::after {
|
|
1087
|
+
content: "";
|
|
1088
|
+
position: absolute;
|
|
1089
|
+
inset-inline: 0;
|
|
1090
|
+
inset-block-end: 0;
|
|
1091
|
+
border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
|
|
1092
|
+
pointer-events: none;
|
|
1093
|
+
}
|
|
1094
|
+
.flood-root .flood-app-top-bar__start, .flood-root .flood-app-top-bar__end { min-inline-size: 0; max-inline-size: 100%; }
|
|
1095
|
+
.flood-root .flood-app-top-bar__end { margin-inline-start: auto; }
|
|
1096
|
+
.flood-root :is(.flood-app-shell, .flood-app-top-bar)[hidden] { display: none; }
|
|
1044
1097
|
.flood-root .flood-section__body { margin-block-start: var(--flood-sys-space-4); min-inline-size: 0; }
|
|
1045
1098
|
|
|
1046
1099
|
.flood-root .flood-split { container: flood-split / inline-size; min-inline-size: 0; inline-size: 100%; }
|
|
@@ -1060,9 +1113,9 @@
|
|
|
1060
1113
|
.flood-root .flood-skip-link { position: fixed; inset-block-start: var(--flood-sys-space-3); inset-inline-start: var(--flood-sys-space-3); z-index: var(--flood-sys-layer-popover); padding: var(--flood-sys-space-2) var(--flood-sys-space-4); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-raised); color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
1061
1114
|
.flood-root .flood-skip-link:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
1062
1115
|
.flood-root .flood-skip-link:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: var(--flood-sys-focus-offset); }
|
|
1063
|
-
.flood-root :is(.flood-navigation-list,.flood-steps,.flood-section,.flood-split,.flood-center,.flood-skip-link)[hidden] { display: none; }
|
|
1064
|
-
@media (pointer: coarse) { .flood-root .flood-
|
|
1065
|
-
@media (forced-colors: active) { .flood-root .flood-
|
|
1116
|
+
.flood-root :is(.flood-navigation-list,.flood-steps,.flood-section,.flood-page-header,.flood-split,.flood-center,.flood-skip-link)[hidden] { display: none; }
|
|
1117
|
+
@media (pointer: coarse) { .flood-root .flood-steps__action { min-block-size: var(--flood-sys-size-touch); } }
|
|
1118
|
+
@media (forced-colors: active) { .flood-root .flood-steps__indicator { border-color: CanvasText; } .flood-root :is(.flood-steps__action,.flood-skip-link):focus-visible { outline-color: Highlight; } }
|
|
1066
1119
|
|
|
1067
1120
|
/* Relationships: labels → controls use .25rem; rows own their compact hit areas. */
|
|
1068
1121
|
.flood-root .flood-form-control__label { display: block; margin: 0 0 var(--flood-sys-space-1); padding: 0; color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-label-size); line-height: var(--flood-sys-type-label-line-height); font-weight: var(--flood-sys-type-label-weight); }
|
|
@@ -1072,7 +1125,7 @@
|
|
|
1072
1125
|
.flood-root .flood-list-box:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
1073
1126
|
.flood-root .flood-list-box-field { position:relative; }
|
|
1074
1127
|
.flood-root .flood-list-box[data-status] { border-color:var(--flood-field-feedback); }
|
|
1075
|
-
.flood-root .flood-list-box[aria-readonly="true"][data-appearance="surface"] { background:var(--flood-sys-color-
|
|
1128
|
+
.flood-root .flood-list-box[aria-readonly="true"][data-appearance="surface"] { background:var(--flood-sys-color-field-readonly); border-style:dashed; }
|
|
1076
1129
|
.flood-root .flood-list-box__feedback { margin-block-start:var(--flood-sys-space-1); }
|
|
1077
1130
|
.flood-root .flood-list-box[data-appearance="plain"] { max-block-size:none; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; }
|
|
1078
1131
|
.flood-root .flood-list-box__option { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-2); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); min-block-size: var(--flood-control-height); box-sizing: border-box; border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); cursor: pointer; font-size: var(--flood-control-text); line-height: var(--flood-control-line); }
|
|
@@ -1087,7 +1140,7 @@
|
|
|
1087
1140
|
.flood-root .flood-pin-input__slot { box-sizing: border-box; flex: 0 1 var(--flood-control-height); min-inline-size: 0; inline-size: var(--flood-control-height); block-size: var(--flood-control-height); display: grid; place-items: center; border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-field-background); font-size: var(--flood-control-text); line-height: var(--flood-control-line); font-variant-numeric: tabular-nums; pointer-events: none; }
|
|
1088
1141
|
.flood-root .flood-pin-input:has(.flood-pin-input__editor:focus-visible) .flood-pin-input__slot[data-active] { border: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); }
|
|
1089
1142
|
.flood-root .flood-pin-input[data-status] .flood-pin-input__slot { border-color: var(--flood-field-feedback); }
|
|
1090
|
-
.flood-root .flood-pin-input[data-readonly] .flood-pin-input__slot { background: var(--flood-sys-color-
|
|
1143
|
+
.flood-root .flood-pin-input[data-readonly] .flood-pin-input__slot { background: var(--flood-sys-color-field-readonly); border-style: dashed; }
|
|
1091
1144
|
.flood-root .flood-pin-input:has(.flood-pin-input__editor:disabled) .flood-pin-input__slot { background: var(--flood-sys-color-field-disabled); color: var(--flood-sys-color-field-disabled-content); }
|
|
1092
1145
|
.flood-root .flood-rating { display: block; min-inline-size: 0; max-inline-size: 100%; border: 0; padding: 0; margin: 0; }
|
|
1093
1146
|
.flood-root .flood-rating__choices { display: flex; align-items: center; flex-wrap: wrap; gap: var(--flood-sys-space-1); }
|
|
@@ -1095,7 +1148,7 @@
|
|
|
1095
1148
|
.flood-root .flood-rating--sm .flood-rating__choice { inline-size: var(--flood-sys-control-xs-height); block-size: var(--flood-sys-control-xs-height); }
|
|
1096
1149
|
.flood-root .flood-rating--lg .flood-rating__choice { inline-size: var(--flood-sys-control-md-height); block-size: var(--flood-sys-control-md-height); }
|
|
1097
1150
|
.flood-root .flood-rating__choice > input { position: absolute; inset: 0; margin: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: inherit; }
|
|
1098
|
-
.flood-root .flood-rating__choice > svg { inline-size: 1.25rem; block-size: 1.25rem; pointer-events: none; }
|
|
1151
|
+
.flood-root .flood-rating__choice > svg { inline-size: 1.25rem; block-size: 1.25rem; pointer-events: none; fill: transparent; }
|
|
1099
1152
|
.flood-root .flood-rating--sm .flood-rating__choice > svg { inline-size: 1rem; block-size: 1rem; }
|
|
1100
1153
|
.flood-root .flood-rating--lg .flood-rating__choice > svg { inline-size: 1.5rem; block-size: 1.5rem; }
|
|
1101
1154
|
.flood-root .flood-rating__choice[data-filled] > svg { fill: currentColor; }
|
|
@@ -1172,7 +1225,7 @@
|
|
|
1172
1225
|
.flood-root .flood-command-list { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); }
|
|
1173
1226
|
.flood-root .flood-command-list[hidden] { display: none; }
|
|
1174
1227
|
.flood-root .flood-command-list > .flood-command-list__surface { border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); }
|
|
1175
|
-
.flood-root .flood-command-list__viewport { border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); }
|
|
1228
|
+
.flood-root .flood-command-list__viewport { max-block-size: 18rem; border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); }
|
|
1176
1229
|
.flood-root .flood-command-list__option { box-sizing: border-box; display: grid; align-content: center; min-inline-size: 0; min-block-size: var(--flood-control-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); gap: calc(var(--flood-sys-space-1) / 2); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); color: var(--flood-sys-color-content-default); font-size: var(--flood-control-text); line-height: var(--flood-control-line); overflow-wrap: break-word; cursor: pointer; }
|
|
1177
1230
|
.flood-root .flood-command-list__option[data-active="true"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1178
1231
|
.flood-root .flood-command-list__description { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); }
|
|
@@ -1188,6 +1241,68 @@
|
|
|
1188
1241
|
.flood-root .flood-command-list__option[aria-disabled="true"], .flood-root .flood-command-list__option[aria-disabled="true"] .flood-command-list__description { color: GrayText; }
|
|
1189
1242
|
}
|
|
1190
1243
|
|
|
1244
|
+
.flood-root .flood-dialog.flood-command-palette {
|
|
1245
|
+
--flood-palette-search-height: 3.5rem;
|
|
1246
|
+
padding: 0;
|
|
1247
|
+
inset-block-start: min(12dvh, 6rem);
|
|
1248
|
+
inset-block-end: auto;
|
|
1249
|
+
margin-block: 0;
|
|
1250
|
+
max-block-size: calc(100dvh - min(12dvh, 6rem) - var(--flood-sys-space-4));
|
|
1251
|
+
}
|
|
1252
|
+
.flood-root .flood-command-palette > .flood-overlay-header {
|
|
1253
|
+
position: absolute;
|
|
1254
|
+
inset-block-start: 0;
|
|
1255
|
+
inset-inline-end: var(--flood-sys-space-3);
|
|
1256
|
+
block-size: var(--flood-palette-search-height);
|
|
1257
|
+
align-items: center;
|
|
1258
|
+
z-index: 1;
|
|
1259
|
+
}
|
|
1260
|
+
.flood-root .flood-command-palette .flood-overlay-title {
|
|
1261
|
+
position: absolute;
|
|
1262
|
+
inline-size: 1px;
|
|
1263
|
+
block-size: 1px;
|
|
1264
|
+
overflow: hidden;
|
|
1265
|
+
clip-path: inset(50%);
|
|
1266
|
+
}
|
|
1267
|
+
.flood-root .flood-command-palette .flood-overlay-close { align-self: center; }
|
|
1268
|
+
.flood-root .flood-dialog.flood-command-palette > .flood-overlay-body { margin: 0; }
|
|
1269
|
+
.flood-root .flood-command-palette__search-icon {
|
|
1270
|
+
position: absolute;
|
|
1271
|
+
z-index: 1;
|
|
1272
|
+
inset-block-start: 0;
|
|
1273
|
+
inset-inline-start: var(--flood-sys-space-4);
|
|
1274
|
+
block-size: var(--flood-palette-search-height);
|
|
1275
|
+
display: grid;
|
|
1276
|
+
place-items: center;
|
|
1277
|
+
color: var(--flood-sys-color-content-subtle);
|
|
1278
|
+
pointer-events: none;
|
|
1279
|
+
}
|
|
1280
|
+
.flood-root .flood-command-palette .flood-command-list { gap: 0; }
|
|
1281
|
+
.flood-root .flood-command-palette .flood-command-list > .flood-input {
|
|
1282
|
+
block-size: var(--flood-palette-search-height);
|
|
1283
|
+
padding-inline: var(--flood-sys-space-12) calc(var(--flood-sys-space-12) + var(--flood-sys-space-2));
|
|
1284
|
+
padding-block: 0;
|
|
1285
|
+
border: 0;
|
|
1286
|
+
border-radius: 0;
|
|
1287
|
+
background: transparent;
|
|
1288
|
+
}
|
|
1289
|
+
.flood-root .flood-command-palette .flood-command-list > .flood-command-list__surface {
|
|
1290
|
+
border: 0;
|
|
1291
|
+
border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative);
|
|
1292
|
+
border-radius: 0;
|
|
1293
|
+
}
|
|
1294
|
+
.flood-root .flood-command-palette .flood-command-list__viewport {
|
|
1295
|
+
min-block-size: 5rem;
|
|
1296
|
+
max-block-size: min(18rem, calc(100dvh - min(12dvh, 6rem) - var(--flood-palette-search-height) - var(--flood-sys-space-8)));
|
|
1297
|
+
}
|
|
1298
|
+
@media (forced-colors: active) {
|
|
1299
|
+
.flood-root .flood-command-palette .flood-command-list > .flood-command-list__surface { border-block-start-color: CanvasText; }
|
|
1300
|
+
.flood-root .flood-command-palette .flood-command-list > .flood-input:focus-visible {
|
|
1301
|
+
outline: var(--flood-sys-focus-width) solid Highlight;
|
|
1302
|
+
outline-offset: calc(-1 * var(--flood-sys-focus-width));
|
|
1303
|
+
}
|
|
1304
|
+
}
|
|
1305
|
+
|
|
1191
1306
|
.flood-root .flood-date-field { display:grid; gap:var(--flood-sys-space-1); min-inline-size:0; inline-size:100%; container-type:inline-size; container-name:flood-date; }
|
|
1192
1307
|
.flood-root .flood-date-field[hidden] { display:none; }
|
|
1193
1308
|
.flood-root .flood-date-field > .flood-label { margin:0; }
|
|
@@ -1206,7 +1321,7 @@
|
|
|
1206
1321
|
.flood-root .flood-date-field__control[data-status="warning"] { --flood-field-feedback:var(--flood-sys-color-feedback-warning); }
|
|
1207
1322
|
.flood-root .flood-date-field__control[data-status="success"] { --flood-field-feedback:var(--flood-sys-color-feedback-success); }
|
|
1208
1323
|
.flood-root .flood-date-field__control[data-status="info"] { --flood-field-feedback:var(--flood-sys-color-feedback-info); }
|
|
1209
|
-
.flood-root .flood-date-field__control[data-readonly] { background:var(--flood-sys-color-
|
|
1324
|
+
.flood-root .flood-date-field__control[data-readonly] { background:var(--flood-sys-color-field-readonly); border-style:dashed; }
|
|
1210
1325
|
.flood-root .flood-date-field__control:has(.flood-date-field__segment:focus-visible) { border-color:var(--flood-sys-color-focus-ring); border-style:solid; }
|
|
1211
1326
|
.flood-root .flood-date-field__control[data-disabled] { background:var(--flood-sys-color-field-disabled); color:var(--flood-sys-color-field-disabled-content); border-color:var(--flood-sys-color-field-border); }
|
|
1212
1327
|
.flood-root .flood-date-field__description,.flood-root .flood-date-field__error { font-size:var(--flood-sys-type-helper-size); line-height:var(--flood-sys-type-helper-line-height); }
|
|
@@ -1235,7 +1350,7 @@
|
|
|
1235
1350
|
.flood-root .flood-time-field__segment::placeholder { color: var(--flood-sys-color-field-placeholder); opacity: 1; }
|
|
1236
1351
|
.flood-root .flood-time-field__separator { padding-inline: var(--flood-sys-space-1); color: var(--flood-sys-color-content-subtle); font-size:var(--flood-control-text); line-height:var(--flood-control-line); }
|
|
1237
1352
|
.flood-root .flood-time-field__control[data-status] { border-color: var(--flood-field-feedback); }
|
|
1238
|
-
.flood-root .flood-time-field__control[data-readonly] { background: var(--flood-sys-color-
|
|
1353
|
+
.flood-root .flood-time-field__control[data-readonly] { background: var(--flood-sys-color-field-readonly); border-style: dashed; }
|
|
1239
1354
|
.flood-root .flood-time-field__control:has(.flood-time-field__segment:focus-visible) { --flood-time-stroke: var(--flood-sys-focus-width); border-color: var(--flood-sys-color-focus-ring); border-style: solid; }
|
|
1240
1355
|
.flood-root .flood-time-field__control[data-disabled] { border-color: var(--flood-sys-color-field-border); background: var(--flood-sys-color-field-disabled); color: var(--flood-sys-color-field-disabled-content); }
|
|
1241
1356
|
.flood-root .flood-time-field__description, .flood-root .flood-time-field__error { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
@@ -1389,27 +1504,26 @@
|
|
|
1389
1504
|
@media(pointer:coarse){.flood-root .flood-tree__row { min-block-size:max(var(--flood-control-height),var(--flood-sys-size-touch)); }}
|
|
1390
1505
|
@media(forced-colors:active){.flood-root .flood-tree__row[data-selected]{background:Highlight;color:HighlightText;forced-color-adjust:none;}.flood-root .flood-tree__item:focus-visible>.flood-tree__row{border-color:Highlight;}.flood-root .flood-tree__item[data-disabled]>.flood-tree__row{color:GrayText;}.flood-root .flood-tree__description,.flood-root .flood-tree__disclosure,.flood-root .flood-tree__icon{color:inherit;}}
|
|
1391
1506
|
|
|
1392
|
-
.flood-root .flood-navigation-tree { min-inline-size:0; --flood-navigation-
|
|
1393
|
-
.flood-root .flood-navigation-tree[data-
|
|
1394
|
-
.flood-root .flood-navigation-tree[data-size="
|
|
1395
|
-
.flood-root .flood-navigation-tree
|
|
1396
|
-
.flood-root .flood-navigation-tree
|
|
1397
|
-
.flood-root .flood-navigation-
|
|
1398
|
-
.flood-root .flood-navigation-
|
|
1399
|
-
.flood-root .flood-navigation-
|
|
1400
|
-
.flood-root .flood-navigation-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
.flood-root .flood-navigation-tree__branch { padding-inline-start:var(--flood-sys-space-4); }
|
|
1507
|
+
.flood-root .flood-navigation-tree { min-inline-size:0; --flood-navigation-icon:var(--flood-sys-control-md-icon-size); --flood-navigation-guide:none; }
|
|
1508
|
+
.flood-root .flood-navigation-tree[data-branch-guides] { --flood-navigation-guide:""; }
|
|
1509
|
+
.flood-root .flood-navigation-tree[data-size="sm"] { --flood-navigation-icon:var(--flood-sys-control-sm-icon-size); }
|
|
1510
|
+
.flood-root .flood-navigation-tree[data-size="lg"] { --flood-navigation-icon:var(--flood-sys-control-lg-icon-size); }
|
|
1511
|
+
.flood-root :is(.flood-navigation-tree,.flood-navigation-tree__branch) > ul { display:grid; row-gap:var(--flood-sys-space-1); list-style:none; padding:0; margin:0; }
|
|
1512
|
+
.flood-root :is(.flood-navigation-tree,.flood-navigation-tree__branch) > ul > li { min-inline-size:0; }
|
|
1513
|
+
.flood-root .flood-navigation-tree__branch { padding-inline-start:calc(var(--flood-navigation-icon) + var(--flood-sys-space-2)); padding-block-start:var(--flood-sys-space-1); }
|
|
1514
|
+
.flood-root .flood-navigation-tree__branch:has(> ul) { position:relative; }
|
|
1515
|
+
.flood-root .flood-navigation-tree__branch:has(> ul)::before {
|
|
1516
|
+
content:var(--flood-navigation-guide);
|
|
1517
|
+
position:absolute;
|
|
1518
|
+
inset-block:0 var(--flood-sys-space-1);
|
|
1519
|
+
inset-inline-start:calc(var(--flood-sys-space-3) + (var(--flood-navigation-icon) - var(--flood-sys-stroke-width)) / 2);
|
|
1520
|
+
border-inline-start:var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
|
|
1521
|
+
pointer-events:none;
|
|
1522
|
+
}
|
|
1409
1523
|
.flood-root .flood-navigation-tree__content { padding:var(--flood-sys-space-2) var(--flood-sys-space-3); color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); line-height:var(--flood-sys-type-helper-line-height); }
|
|
1410
1524
|
.flood-root .flood-navigation-tree:focus-visible { outline:var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset:0; }
|
|
1411
|
-
|
|
1412
|
-
@media(forced-colors:active) { .flood-root .flood-navigation-
|
|
1525
|
+
.flood-root .flood-navigation-tree__flyout { inline-size:16rem; max-inline-size:calc(100vw - 2rem); }
|
|
1526
|
+
@media(forced-colors:active) { .flood-root .flood-navigation-tree:focus-visible { outline-color:Highlight; } }
|
|
1413
1527
|
|
|
1414
1528
|
[data-flood-foundations="neutral"] .flood-date-time-picker { min-inline-size:0; inline-size:100%; }
|
|
1415
1529
|
[data-flood-foundations="neutral"] .flood-date-time-picker__fields { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); align-items:start; gap:var(--flood-sys-space-3); }
|
|
@@ -1444,7 +1558,7 @@
|
|
|
1444
1558
|
.flood-root .flood-tree-select[hidden] { display:none; }
|
|
1445
1559
|
.flood-root .flood-tree-select>.flood-label { margin:0; }
|
|
1446
1560
|
.flood-root .flood-tree-select [data-placeholder] { color:var(--flood-sys-color-field-placeholder); }
|
|
1447
|
-
.flood-root .flood-tree-select [data-readonly]:not(:focus-visible) { background:var(--flood-sys-color-
|
|
1561
|
+
.flood-root .flood-tree-select [data-readonly]:not(:focus-visible) { background:var(--flood-sys-color-field-readonly); border-style:dashed; cursor:default; }
|
|
1448
1562
|
.flood-root .flood-tree-select__panel { inline-size:min(var(--flood-tree-select-width,22rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-1); }
|
|
1449
1563
|
.flood-root .flood-tree-select__panel>.flood-overlay-header { display:none; }
|
|
1450
1564
|
.flood-root .flood-tree-select__panel>.flood-overlay-body { margin-block-start:0; }
|
|
@@ -1485,6 +1599,36 @@
|
|
|
1485
1599
|
@media(max-width:30rem) { .flood-root .flood-data-list-item { flex-wrap:wrap; } .flood-root .flood-data-list-item__trailing { max-inline-size:100%; } }
|
|
1486
1600
|
|
|
1487
1601
|
.flood-root .flood-data-table { min-inline-size:0; inline-size:100%; }
|
|
1602
|
+
.flood-root .flood-data-table[data-inset="roomy"] { --flood-data-table-edge:var(--flood-sys-space-6); }
|
|
1603
|
+
.flood-root .flood-data-table__toolbar {
|
|
1604
|
+
padding:var(--flood-sys-space-4) var(--flood-data-table-edge,var(--flood-sys-space-3));
|
|
1605
|
+
}
|
|
1606
|
+
.flood-root .flood-data-table[data-inset="roomy"] tr > :first-child { padding-inline-start:var(--flood-data-table-edge); }
|
|
1607
|
+
.flood-root .flood-data-table[data-inset="roomy"] tr > :last-child { padding-inline-end:var(--flood-data-table-edge); }
|
|
1608
|
+
.flood-root .flood-data-table[data-inset="roomy"] th[data-sortable]:first-child { padding-inline-start:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
|
|
1609
|
+
.flood-root .flood-data-table[data-inset="roomy"] th[data-sortable]:last-child { padding-inline-end:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
|
|
1610
|
+
.flood-root .flood-data-table[data-inset="roomy"] .flood-data-table__footer { padding-inline:var(--flood-data-table-edge); }
|
|
1611
|
+
.flood-root .flood-data-table .flood-data-table__primary-action {
|
|
1612
|
+
min-block-size:0;
|
|
1613
|
+
padding:0;
|
|
1614
|
+
border:0;
|
|
1615
|
+
border-radius:var(--flood-sys-radius-indicator);
|
|
1616
|
+
background:transparent;
|
|
1617
|
+
color:inherit;
|
|
1618
|
+
text-align:inherit;
|
|
1619
|
+
font-size:inherit;
|
|
1620
|
+
line-height:inherit;
|
|
1621
|
+
white-space:normal;
|
|
1622
|
+
overflow-wrap:anywhere;
|
|
1623
|
+
}
|
|
1624
|
+
.flood-root .flood-data-table .flood-data-table__primary-action:is(:hover,:active) { background:transparent; }
|
|
1625
|
+
.flood-root .flood-data-table .flood-data-table__primary-action:disabled,
|
|
1626
|
+
.flood-root .flood-data-table .flood-data-table__primary-action[aria-disabled="true"] { color:var(--flood-sys-color-field-disabled-content); }
|
|
1627
|
+
.flood-root .flood-data-table tr[data-primary-action] { cursor:pointer; }
|
|
1628
|
+
.flood-root .flood-data-table tr[data-primary-action]:not([data-selected]):focus-within { background:var(--flood-sys-color-action-on-surface-hover); }
|
|
1629
|
+
@media (hover:hover) {
|
|
1630
|
+
.flood-root .flood-data-table tr[data-primary-action]:not([data-selected]):hover { background:var(--flood-sys-color-action-on-surface-hover); }
|
|
1631
|
+
}
|
|
1488
1632
|
.flood-root .flood-data-table[hidden] { display:none; }
|
|
1489
1633
|
.flood-root .flood-data-table thead th { vertical-align:middle; }
|
|
1490
1634
|
.flood-root .flood-data-table thead th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
|
|
@@ -1492,6 +1636,7 @@
|
|
|
1492
1636
|
.flood-root .flood-data-table__choice { inline-size:1%; white-space:nowrap; }
|
|
1493
1637
|
.flood-root .flood-data-table__choice .flood-choice { min-block-size:var(--flood-sys-control-sm-height); }
|
|
1494
1638
|
.flood-root .flood-data-table tr[data-selected] { background:var(--flood-sys-color-selection-background); }
|
|
1639
|
+
.flood-root .flood-data-table th[aria-sort="descending"] .flood-data-table__sort svg { rotate:180deg; }
|
|
1495
1640
|
.flood-root .flood-data-table .flood-data-table__state { padding-block:var(--flood-sys-space-8); text-align:center; }
|
|
1496
1641
|
.flood-root .flood-data-table__state>.flood-stack { align-items:center; }
|
|
1497
1642
|
.flood-root .flood-data-table__footer { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-3); padding:var(--flood-sys-space-3) var(--flood-sys-space-4); border-block-start:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); background:var(--flood-sys-color-surface-default); border-end-start-radius:var(--flood-sys-radius-field); border-end-end-radius:var(--flood-sys-radius-field); }
|
|
@@ -1535,3 +1680,534 @@
|
|
|
1535
1680
|
.flood-root .flood-time-picker__scroll { max-block-size:min(15rem,calc(var(--flood-overlay-available-height,60dvh) - 1rem)); }
|
|
1536
1681
|
|
|
1537
1682
|
.flood-root .flood-date-time-range-picker { min-inline-size:0; inline-size:100%; }
|
|
1683
|
+
|
|
1684
|
+
.flood-root .flood-overflow-actions { position:relative; inline-size:100%; min-inline-size:0; }
|
|
1685
|
+
.flood-root .flood-overflow-actions__bar { display:flex; flex-wrap:nowrap; gap:var(--flood-sys-space-2); inline-size:fit-content; max-inline-size:100%; min-inline-size:0; overflow:auto; }
|
|
1686
|
+
.flood-root .flood-overflow-actions__bar > button { flex:none; }
|
|
1687
|
+
.flood-root :is(.flood-overflow-actions__leading,.flood-overflow-actions__trailing) { display:flex; align-items:center; flex:none; min-inline-size:0; }
|
|
1688
|
+
.flood-root .flood-overflow-actions__trailing { margin-inline-start:auto; }
|
|
1689
|
+
.flood-root .flood-overflow-actions__measure { position:absolute; visibility:hidden; pointer-events:none; inline-size:max-content; block-size:0; overflow:hidden; display:flex; gap:var(--flood-sys-space-2); }
|
|
1690
|
+
.flood-root .flood-menubar { display:flex; align-items:center; gap:var(--flood-sys-space-1); min-inline-size:0; max-inline-size:100%; overflow:auto; }
|
|
1691
|
+
.flood-root .flood-menubar > button { flex:none; }
|
|
1692
|
+
.flood-root .flood-button[data-tone="danger"] { --flood-action-content:var(--flood-sys-color-action-danger-content); }
|
|
1693
|
+
.flood-root .flood-button--solid[data-tone="danger"] {
|
|
1694
|
+
--flood-action-rest:var(--flood-sys-color-action-danger-content);
|
|
1695
|
+
--flood-action-hover:color-mix(in srgb,var(--flood-sys-color-action-danger-content),white 10%);
|
|
1696
|
+
--flood-action-pressed:color-mix(in srgb,var(--flood-sys-color-action-danger-content),black 10%);
|
|
1697
|
+
--flood-action-content:var(--flood-sys-color-surface-canvas);
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
/* BulkActionBar shares Toolbar geometry and adaptive command ownership. */
|
|
1701
|
+
.flood-root .flood-bulk-action-bar { inline-size:100%; max-inline-size:32rem; }
|
|
1702
|
+
.flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar { inline-size:100%; background:var(--flood-sys-color-surface-floating); border-color:var(--flood-sys-color-border-floating); box-shadow:0 var(--flood-sys-effect-floating-shadow-offset) var(--flood-sys-effect-floating-shadow-blur) var(--flood-sys-color-shadow-floating); }
|
|
1703
|
+
.flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar > .flood-overflow-actions__leading { max-inline-size:35%; }
|
|
1704
|
+
.flood-root .flood-bulk-action-bar__selection { box-sizing:border-box; inline-size:7rem; max-inline-size:100%; padding-inline:var(--flood-sys-space-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
|
|
1705
|
+
.flood-root .flood-bulk-action-bar__selection[data-counter="number"] { inline-size:3rem; text-align:center; }
|
|
1706
|
+
@media(forced-colors:active) { .flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar { background:Canvas; border-color:CanvasText; box-shadow:none; } }
|
|
1707
|
+
|
|
1708
|
+
/* Nearest material owners establish their own inherited recipes. Absolute surface
|
|
1709
|
+
palette roles stay unchanged; descendants consume the existing semantic roles. */
|
|
1710
|
+
.flood-root :where(.flood-surface, .flood-dialog, .flood-overlay-panel,
|
|
1711
|
+
.flood-select__menu, .flood-toast, .flood-toolbar:not([data-variant="plain"]), .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar),
|
|
1712
|
+
.flood-file-list, .flood-color-picker__panel, .flood-bulk-action-bar,
|
|
1713
|
+
.flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
|
|
1714
|
+
.flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet),
|
|
1715
|
+
.flood-root :where([data-flood-surface="filled"], [data-flood-surface="floating"]),
|
|
1716
|
+
.flood-root:is([data-flood-surface="filled"], [data-flood-surface="floating"]) {
|
|
1717
|
+
--flood-sys-color-action-subtle-rest: var(--flood-sys-color-context-filled-action-rest);
|
|
1718
|
+
--flood-sys-color-action-subtle-hover: var(--flood-sys-color-context-filled-action-hover);
|
|
1719
|
+
--flood-sys-color-action-subtle-pressed: var(--flood-sys-color-context-filled-action-pressed);
|
|
1720
|
+
--flood-sys-color-action-subtle-disabled: var(--flood-sys-color-context-filled-action-disabled);
|
|
1721
|
+
--flood-sys-color-action-ghost-hover: var(--flood-sys-color-context-filled-action-hover);
|
|
1722
|
+
--flood-sys-color-action-ghost-pressed: var(--flood-sys-color-context-filled-action-pressed);
|
|
1723
|
+
--flood-sys-color-action-on-surface-rest: var(--flood-sys-color-context-filled-action-rest);
|
|
1724
|
+
--flood-sys-color-action-on-surface-hover: var(--flood-sys-color-context-filled-action-hover);
|
|
1725
|
+
--flood-sys-color-action-on-surface-pressed: var(--flood-sys-color-context-filled-action-pressed);
|
|
1726
|
+
--flood-sys-color-action-on-surface-disabled: var(--flood-sys-color-context-filled-action-disabled);
|
|
1727
|
+
--flood-sys-color-field-background: var(--flood-sys-color-context-filled-field-background);
|
|
1728
|
+
--flood-sys-color-field-border: var(--flood-sys-color-context-filled-field-border);
|
|
1729
|
+
--flood-sys-color-field-readonly: var(--flood-sys-color-context-filled-field-readonly);
|
|
1730
|
+
--flood-sys-color-field-disabled: var(--flood-sys-color-context-filled-field-disabled);
|
|
1731
|
+
--flood-sys-color-selection-background: var(--flood-sys-color-context-filled-selection-background);
|
|
1732
|
+
--flood-sys-color-border-decorative: var(--flood-sys-color-context-filled-border-decorative);
|
|
1733
|
+
--flood-sys-color-divider-decorative: var(--flood-sys-color-context-filled-divider-decorative);
|
|
1734
|
+
--flood-sys-color-surface-supporting: var(--flood-sys-color-context-filled-supporting-background);
|
|
1735
|
+
--flood-sys-color-surface-avatar: var(--flood-sys-color-context-filled-avatar-background);
|
|
1736
|
+
--flood-sys-color-surface-muted: var(--flood-sys-color-context-filled-muted-background);
|
|
1737
|
+
--flood-sys-color-indicator-track: var(--flood-sys-color-context-filled-indicator-track);
|
|
1738
|
+
--flood-sys-color-loading-placeholder: var(--flood-sys-color-context-filled-loading-placeholder);
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
.flood-root[data-flood-surface="filled"],
|
|
1742
|
+
.flood-root :where([data-flood-surface="filled"], .flood-surface[data-flood-elevation="default"], .flood-toolbar:not([data-variant="plain"]), .flood-file-list, .flood-color-picker__panel,
|
|
1743
|
+
.flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
|
|
1744
|
+
.flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet) {
|
|
1745
|
+
--flood-sys-color-surface-current: var(--flood-sys-color-surface-default);
|
|
1746
|
+
}
|
|
1747
|
+
.flood-root :where(.flood-surface[data-flood-elevation="raised"], .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar)) {
|
|
1748
|
+
--flood-sys-color-surface-current: var(--flood-sys-color-surface-raised);
|
|
1749
|
+
}
|
|
1750
|
+
.flood-root :where(.flood-surface[data-flood-elevation="overlay"], .flood-dialog) {
|
|
1751
|
+
--flood-sys-color-surface-current: var(--flood-sys-color-surface-overlay);
|
|
1752
|
+
}
|
|
1753
|
+
.flood-root[data-flood-surface="floating"],
|
|
1754
|
+
.flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-toast, .flood-bulk-action-bar,
|
|
1755
|
+
.flood-bulk-action-bar > .flood-overflow-actions__bar, [data-flood-surface="floating"]) {
|
|
1756
|
+
--flood-sys-color-surface-current: var(--flood-sys-color-surface-floating);
|
|
1757
|
+
}
|
|
1758
|
+
/* Picker calendars shed their standalone material; the popup is their owner. */
|
|
1759
|
+
.flood-root :where(.flood-date-picker__panel, .flood-date-range-picker__panel) .flood-calendar {
|
|
1760
|
+
--flood-sys-color-surface-current: inherit;
|
|
1761
|
+
}
|
|
1762
|
+
|
|
1763
|
+
/* Explicit canvas scopes reset every role after automatic material owners. */
|
|
1764
|
+
.flood-root[data-flood-surface="base"],
|
|
1765
|
+
.flood-root :where([data-flood-surface="base"], .flood-dropzone,
|
|
1766
|
+
.flood-tabs:not([data-variant="line"]) > .flood-tabs__scroll) {
|
|
1767
|
+
--flood-sys-color-action-subtle-rest: var(--flood-sys-color-context-base-action-rest);
|
|
1768
|
+
--flood-sys-color-action-subtle-hover: var(--flood-sys-color-context-base-action-hover);
|
|
1769
|
+
--flood-sys-color-action-subtle-pressed: var(--flood-sys-color-context-base-action-pressed);
|
|
1770
|
+
--flood-sys-color-action-subtle-disabled: var(--flood-sys-color-context-base-action-disabled);
|
|
1771
|
+
--flood-sys-color-action-ghost-hover: var(--flood-sys-color-context-base-action-hover);
|
|
1772
|
+
--flood-sys-color-action-ghost-pressed: var(--flood-sys-color-context-base-action-pressed);
|
|
1773
|
+
--flood-sys-color-action-on-surface-rest: var(--flood-sys-color-context-base-on-surface-action-rest);
|
|
1774
|
+
--flood-sys-color-action-on-surface-hover: var(--flood-sys-color-context-base-on-surface-action-hover);
|
|
1775
|
+
--flood-sys-color-action-on-surface-pressed: var(--flood-sys-color-context-base-on-surface-action-pressed);
|
|
1776
|
+
--flood-sys-color-action-on-surface-disabled: var(--flood-sys-color-context-base-on-surface-action-disabled);
|
|
1777
|
+
--flood-sys-color-field-background: var(--flood-sys-color-context-base-field-background);
|
|
1778
|
+
--flood-sys-color-field-border: var(--flood-sys-color-context-base-field-border);
|
|
1779
|
+
--flood-sys-color-field-readonly: var(--flood-sys-color-context-base-field-readonly);
|
|
1780
|
+
--flood-sys-color-field-disabled: var(--flood-sys-color-context-base-field-disabled);
|
|
1781
|
+
--flood-sys-color-selection-background: var(--flood-sys-color-context-base-selection-background);
|
|
1782
|
+
--flood-sys-color-border-decorative: var(--flood-sys-color-context-base-border-decorative);
|
|
1783
|
+
--flood-sys-color-divider-decorative: var(--flood-sys-color-context-base-divider-decorative);
|
|
1784
|
+
--flood-sys-color-surface-supporting: var(--flood-sys-color-context-base-supporting-background);
|
|
1785
|
+
--flood-sys-color-surface-avatar: var(--flood-sys-color-context-base-avatar-background);
|
|
1786
|
+
--flood-sys-color-surface-muted: var(--flood-sys-color-context-base-muted-background);
|
|
1787
|
+
--flood-sys-color-indicator-track: var(--flood-sys-color-context-base-indicator-track);
|
|
1788
|
+
--flood-sys-color-loading-placeholder: var(--flood-sys-color-context-base-loading-placeholder);
|
|
1789
|
+
--flood-sys-color-surface-current: var(--flood-sys-color-surface-canvas);
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1792
|
+
/* Explicit host preference also works in engines without the media feature. */
|
|
1793
|
+
.flood-root[data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
|
|
1794
|
+
.flood-root [data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
|
|
1795
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-flood-transparency="reduced"] {
|
|
1796
|
+
background: var(--flood-sys-color-surface-floating);
|
|
1797
|
+
backdrop-filter: none;
|
|
1798
|
+
}
|
|
1799
|
+
|
|
1800
|
+
@media (forced-colors: active) {
|
|
1801
|
+
.flood-root[data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
|
|
1802
|
+
.flood-root [data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
|
|
1803
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-flood-transparency="reduced"] {
|
|
1804
|
+
background: Canvas;
|
|
1805
|
+
}
|
|
1806
|
+
.flood-root, .flood-root :where(.flood-surface, .flood-dialog, .flood-overlay-panel,
|
|
1807
|
+
.flood-select__menu, .flood-toast, .flood-toolbar:not([data-variant="plain"]), .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar),
|
|
1808
|
+
.flood-file-list, .flood-color-picker__panel, .flood-bulk-action-bar,
|
|
1809
|
+
.flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
|
|
1810
|
+
.flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet,
|
|
1811
|
+
.flood-dropzone, .flood-tabs:not([data-variant="line"]) > .flood-tabs__scroll, [data-flood-surface]) {
|
|
1812
|
+
--flood-sys-color-surface-current: Canvas;
|
|
1813
|
+
--flood-sys-color-surface-supporting: Canvas;
|
|
1814
|
+
--flood-sys-color-surface-avatar: Canvas;
|
|
1815
|
+
--flood-sys-color-surface-muted: Canvas;
|
|
1816
|
+
--flood-sys-color-field-readonly: Canvas;
|
|
1817
|
+
}
|
|
1818
|
+
}
|
|
1819
|
+
|
|
1820
|
+
.flood-root .flood-filter-condition { container: flood-filter-condition / inline-size; min-inline-size:0; }
|
|
1821
|
+
.flood-root .flood-filter-condition__row { grid-template-columns:minmax(7rem,.9fr) minmax(8rem,1fr) minmax(10rem,1.6fr); align-items:center; }
|
|
1822
|
+
.flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(7rem,.9fr) minmax(8rem,1fr) minmax(10rem,1.6fr) auto; }
|
|
1823
|
+
.flood-root .flood-filter-condition__values { min-inline-size:0; }
|
|
1824
|
+
@container flood-filter-condition (max-width:34rem) {
|
|
1825
|
+
.flood-root .flood-filter-condition__row,
|
|
1826
|
+
.flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
|
|
1827
|
+
.flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
|
|
1828
|
+
.flood-root .flood-filter-condition__values { grid-column:1 / -1; }
|
|
1829
|
+
.flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__values { grid-column:1 / 3; }
|
|
1830
|
+
.flood-root .flood-filter-condition__remove { grid-column:3; grid-row:2; }
|
|
1831
|
+
}
|
|
1832
|
+
@container flood-filter-condition (max-width:22rem) {
|
|
1833
|
+
.flood-root .flood-filter-condition__row,
|
|
1834
|
+
.flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr); }
|
|
1835
|
+
.flood-root .flood-filter-condition__row > :is(.flood-field,.flood-filter-condition__values) { grid-column:1 / -1; }
|
|
1836
|
+
.flood-root .flood-filter-condition__remove { grid-column:1; grid-row:auto; justify-self:end; }
|
|
1837
|
+
}
|
|
1838
|
+
.flood-root .flood-filter-group .flood-segmented > .flood-fieldset__body { grid-template-columns: minmax(0, 1fr); }
|
|
1839
|
+
.flood-root .flood-filter-group .flood-segmented .flood-choice-group { max-inline-size: 100%; }
|
|
1840
|
+
.flood-root .flood-filter-group .flood-segmented .flood-choice { flex: 1 1 auto; min-inline-size: 0; }
|
|
1841
|
+
|
|
1842
|
+
.flood-root .flood-collection-toolbar { inline-size:100%; min-inline-size:0; container-type:inline-size; }
|
|
1843
|
+
.flood-root .flood-collection-toolbar__row { min-inline-size:0; display:grid; grid-template-columns:minmax(12rem,24rem) minmax(0,1fr) auto; }
|
|
1844
|
+
.flood-root .flood-collection-toolbar__search { min-inline-size:0; max-inline-size:100%; }
|
|
1845
|
+
.flood-root .flood-collection-toolbar__summaries { min-inline-size:0; max-inline-size:100%; }
|
|
1846
|
+
.flood-root .flood-collection-toolbar__commands { margin-inline-start:auto; max-inline-size:100%; justify-content:flex-end; }
|
|
1847
|
+
.flood-root .flood-collection-toolbar__clear[data-visible="false"] { visibility:hidden; }
|
|
1848
|
+
.flood-root .flood-collection-toolbar__commands { grid-column:3; }
|
|
1849
|
+
@container (max-width:46rem) {
|
|
1850
|
+
.flood-root .flood-collection-toolbar__row { grid-template-columns:minmax(0,1fr) auto; }
|
|
1851
|
+
.flood-root .flood-collection-toolbar__commands { grid-column:2; grid-row:1; }
|
|
1852
|
+
.flood-root .flood-collection-toolbar__summaries { grid-column:1 / -1; grid-row:2; }
|
|
1853
|
+
}
|
|
1854
|
+
@container (max-width:28rem) {
|
|
1855
|
+
.flood-root .flood-collection-toolbar__row { grid-template-columns:minmax(0,1fr); }
|
|
1856
|
+
.flood-root .flood-collection-toolbar__commands { grid-column:1; grid-row:2; }
|
|
1857
|
+
.flood-root .flood-collection-toolbar__summaries { grid-row:3; }
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
.flood-root .flood-collection-view-switcher { min-inline-size:0; }
|
|
1861
|
+
.flood-root .flood-collection-view-switcher__select { flex:0 1 13rem; min-inline-size:0; max-inline-size:100%; }
|
|
1862
|
+
.flood-root .flood-collection-view-switcher__actions { flex:1 1 16rem; min-inline-size:0; max-inline-size:36rem; }
|
|
1863
|
+
.flood-root .flood-collection-view-switcher[hidden] { display:none; }
|
|
1864
|
+
|
|
1865
|
+
.flood-root .flood-sidebar { display:flex; flex-direction:column; box-sizing:border-box; inline-size:var(--flood-sidebar-width,16rem); max-inline-size:100%; block-size:100%; min-block-size:0; min-inline-size:0; flex-shrink:0; padding-block:var(--flood-sys-space-3); padding-inline:0; gap:var(--flood-sys-space-4); background:var(--flood-sys-color-surface-default); border-inline-end:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
|
|
1866
|
+
.flood-root .flood-sidebar { --flood-sidebar-edge:var(--flood-sys-space-3); --flood-sidebar-icon:var(--flood-sys-control-md-icon-size); --flood-sidebar-row:var(--flood-sys-control-md-height); --flood-sidebar-rail-width:4.5rem; }
|
|
1867
|
+
.flood-root .flood-sidebar[data-size="sm"] { --flood-sidebar-icon:var(--flood-sys-control-sm-icon-size); --flood-sidebar-row:var(--flood-sys-control-sm-height); }
|
|
1868
|
+
.flood-root .flood-sidebar[data-size="lg"] { --flood-sidebar-icon:var(--flood-sys-control-lg-icon-size); --flood-sidebar-row:var(--flood-sys-control-lg-height); }
|
|
1869
|
+
.flood-root .flood-sidebar[data-variant="quiet"] { --flood-sys-color-surface-default:var(--flood-sys-color-surface-canvas); }
|
|
1870
|
+
.flood-root .flood-sidebar[data-side="end"] { border-inline-end:0; border-inline-start:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
|
|
1871
|
+
.flood-root .flood-sidebar[data-collapsed="true"] { --flood-sidebar-edge:var(--flood-sys-space-2); inline-size:var(--flood-sidebar-rail-width); }
|
|
1872
|
+
.flood-root .flood-sidebar__header { display:flex; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; min-block-size:var(--flood-sidebar-row); box-sizing:border-box; flex:none; padding-inline:calc(var(--flood-sidebar-edge) + var(--flood-sys-space-3)); }
|
|
1873
|
+
.flood-root .flood-sidebar__identity { flex:1; min-inline-size:0; overflow-wrap:anywhere; }
|
|
1874
|
+
.flood-root .flood-sidebar[data-collapsed="true"] .flood-sidebar__header { flex-direction:column; justify-content:center; padding-inline:var(--flood-sidebar-edge); }
|
|
1875
|
+
.flood-root .flood-sidebar[data-collapsed="true"] > .flood-sidebar__header[data-collapsible="false"] > .flood-sidebar__identity { flex:none; }
|
|
1876
|
+
.flood-root .flood-sidebar__header[data-collapsible="true"] { display:grid; }
|
|
1877
|
+
.flood-root .flood-sidebar[data-header-layout="inline"][data-collapsed="false"] > .flood-sidebar__header[data-collapsible="true"] { grid-template-columns:minmax(0,1fr) auto; padding-inline-end:calc(var(--flood-sidebar-edge) + var(--flood-sys-space-1)); }
|
|
1878
|
+
.flood-root .flood-sidebar[data-header-layout="inline"][data-collapsed="false"] .flood-sidebar__toggle { grid-area:1 / 2; margin-inline-start:0; }
|
|
1879
|
+
.flood-root .flood-sidebar[data-header-layout="inline"][data-collapsed="false"] .flood-sidebar__identity { grid-area:1 / 1; }
|
|
1880
|
+
.flood-root .flood-sidebar[data-collapsed="true"] .flood-sidebar__header[data-collapsible="true"] { justify-items:center; }
|
|
1881
|
+
.flood-root .flood-sidebar:not([data-collapsed="true"]) .flood-sidebar__toggle {
|
|
1882
|
+
justify-self:start;
|
|
1883
|
+
margin-inline-start:calc((var(--flood-sidebar-rail-width) - var(--flood-sys-stroke-width) - var(--flood-sidebar-row)) / 2 - var(--flood-sidebar-edge) - var(--flood-sys-space-3));
|
|
1884
|
+
}
|
|
1885
|
+
@media(pointer:coarse) {
|
|
1886
|
+
.flood-root .flood-sidebar { --flood-sidebar-rail-width:5rem; }
|
|
1887
|
+
.flood-root .flood-sidebar:not([data-collapsed="true"]) .flood-sidebar__toggle {
|
|
1888
|
+
margin-inline-start:calc((var(--flood-sidebar-rail-width) - var(--flood-sys-stroke-width) - max(var(--flood-sidebar-row), var(--flood-sys-size-touch))) / 2 - var(--flood-sidebar-edge) - var(--flood-sys-space-3));
|
|
1889
|
+
}
|
|
1890
|
+
}
|
|
1891
|
+
.flood-root .flood-sidebar > .flood-scroll-area { flex:1; min-block-size:0; min-inline-size:0; }
|
|
1892
|
+
.flood-root .flood-sidebar__body { block-size:100%; min-block-size:0; min-inline-size:0; }
|
|
1893
|
+
.flood-root .flood-sidebar__navigation { padding-inline:var(--flood-sidebar-edge); }
|
|
1894
|
+
.flood-root .flood-sidebar__group-label { padding-inline:var(--flood-sys-space-3); }
|
|
1895
|
+
.flood-root .flood-sidebar__group[data-icon-column] .flood-navigation-group__label { padding-inline-start:calc(var(--flood-sys-space-3) + var(--flood-sidebar-icon) + var(--flood-sys-space-2)); }
|
|
1896
|
+
.flood-root .flood-sidebar__footer { display:flex; flex-direction:column; align-items:stretch; gap:var(--flood-sys-space-1); flex:none; min-inline-size:0; padding-block-start:var(--flood-sys-space-3); padding-inline:var(--flood-sidebar-edge); }
|
|
1897
|
+
.flood-root .flood-sidebar[data-footer-separator="true"] .flood-sidebar__footer { border-block-start:var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
1898
|
+
.flood-root .flood-sidebar[data-collapsed="true"] .flood-sidebar__footer { align-items:center; }
|
|
1899
|
+
.flood-root .flood-sidebar[data-collapsed="true"] .flood-sidebar__navigation { padding-inline:var(--flood-sidebar-edge); }
|
|
1900
|
+
.flood-root .flood-sidebar[hidden] { display:none; }
|
|
1901
|
+
@media(forced-colors:active) { .flood-root .flood-sidebar { background:Canvas; border-color:CanvasText; } }
|
|
1902
|
+
|
|
1903
|
+
.flood-root .flood-sidebar[data-header-separator="true"] .flood-sidebar__header { padding-block-end:var(--flood-sys-space-3); border-block-end:var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
1904
|
+
|
|
1905
|
+
.flood-root .flood-navigation-item { --flood-navigation-item-height:var(--flood-sys-control-md-height); --flood-navigation-item-target:var(--flood-navigation-item-height); --flood-navigation-item-text:var(--flood-sys-control-md-text-size); --flood-navigation-item-line:var(--flood-sys-control-md-line-height); --flood-navigation-item-inset:var(--flood-sys-space-3); display:flex; align-items:center; min-inline-size:0; box-sizing:border-box; border-radius:var(--flood-sys-radius-indicator); color:var(--flood-sys-color-content-subtle); }
|
|
1906
|
+
.flood-root .flood-navigation-item[data-size="sm"] { --flood-navigation-item-height:var(--flood-sys-control-sm-height); --flood-navigation-item-text:var(--flood-sys-control-sm-text-size); --flood-navigation-item-line:var(--flood-sys-control-sm-line-height); }
|
|
1907
|
+
.flood-root .flood-navigation-item[data-size="lg"] { --flood-navigation-item-height:var(--flood-sys-control-lg-height); --flood-navigation-item-text:var(--flood-sys-control-lg-text-size); --flood-navigation-item-line:var(--flood-sys-control-lg-line-height); }
|
|
1908
|
+
.flood-root .flood-navigation-item[data-variant="standard"] { color:var(--flood-sys-color-content-default); border-radius:var(--flood-sys-radius-action); }
|
|
1909
|
+
.flood-root .flood-navigation-item[data-current] { background:var(--flood-sys-color-selection-background); color:var(--flood-sys-color-selection-content); }
|
|
1910
|
+
.flood-root .flood-navigation-item[data-ancestor-current]:not([data-current],[data-disabled]) { color:var(--flood-sys-color-content-default); box-shadow:inset 0 0 0 var(--flood-sys-stroke-width) var(--flood-sys-color-divider-decorative); }
|
|
1911
|
+
@media (hover:hover) {
|
|
1912
|
+
.flood-root .flood-navigation-item:not([data-disabled],[data-current]):hover { background:var(--flood-sys-color-action-on-surface-hover); }
|
|
1913
|
+
}
|
|
1914
|
+
.flood-root .flood-navigation-item:not([data-disabled],[data-current]):has(> :is(a,button).flood-navigation-item__control:active) { background:var(--flood-sys-color-selection-background); }
|
|
1915
|
+
.flood-root .flood-navigation-item[data-disabled] { color:var(--flood-sys-color-field-disabled-content); }
|
|
1916
|
+
.flood-root .flood-navigation-item .flood-navigation-item__control { display:flex; flex:1; justify-content:flex-start; align-items:center; min-inline-size:0; min-block-size:var(--flood-navigation-item-target); box-sizing:border-box; padding:var(--flood-sys-space-1) var(--flood-navigation-item-inset); gap:var(--flood-sys-space-2); border:0; border-radius:inherit; background:transparent; color:inherit; font-size:var(--flood-navigation-item-text); line-height:var(--flood-navigation-item-line); font-weight:var(--flood-sys-type-body-weight); letter-spacing:var(--flood-sys-type-control-tracking); white-space:normal; text-align:start; text-decoration:none; }
|
|
1917
|
+
.flood-root .flood-navigation-item[data-variant="standard"] .flood-navigation-item__control { font-weight:var(--flood-sys-type-control-weight); }
|
|
1918
|
+
.flood-root .flood-navigation-item .flood-navigation-item__control:is(:hover,:active,[aria-current],[disabled]),.flood-root .flood-navigation-item .flood-navigation-item__disclosure:is(:hover,:active,[disabled]) { background:transparent; color:inherit; }
|
|
1919
|
+
.flood-root .flood-navigation-item__content { display:flex; flex:1; flex-direction:column; min-inline-size:0; }
|
|
1920
|
+
.flood-root .flood-navigation-item .flood-navigation-item__label { color:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:inherit; overflow-wrap:anywhere; }
|
|
1921
|
+
.flood-root .flood-navigation-item__description { overflow-wrap:anywhere; }
|
|
1922
|
+
.flood-root .flood-navigation-item__trailing,.flood-root .flood-navigation-item__indicator { display:flex; flex:none; justify-content:center; align-items:center; min-inline-size:var(--flood-navigation-item-target); margin-inline-start:auto; }
|
|
1923
|
+
.flood-root .flood-navigation-item:is([data-disclosure],[data-trailing-action]),
|
|
1924
|
+
.flood-root .flood-navigation-item .flood-navigation-item__control:has(> :is(.flood-navigation-item__trailing,.flood-navigation-item__indicator)) { padding-inline-end:var(--flood-sys-space-1); }
|
|
1925
|
+
.flood-root .flood-navigation-item:is([data-disclosure],[data-trailing-action]) .flood-navigation-item__control { padding-inline-end:0; }
|
|
1926
|
+
.flood-root .flood-navigation-item__accessories { display:grid; grid-auto-flow:column; column-gap:var(--flood-sys-space-1); align-items:center; justify-items:center; flex:none; min-inline-size:var(--flood-navigation-item-target); }
|
|
1927
|
+
.flood-root .flood-navigation-item__action { display:flex; align-items:center; justify-content:center; min-inline-size:var(--flood-navigation-item-target); }
|
|
1928
|
+
.flood-root .flood-navigation-item__action .flood-icon-button:not(:disabled,[aria-disabled="true"]):is(:hover,:active) {
|
|
1929
|
+
background:transparent;
|
|
1930
|
+
color:var(--flood-sys-color-content-default);
|
|
1931
|
+
}
|
|
1932
|
+
.flood-root .flood-navigation-item .flood-navigation-item__disclosure { flex:none; inline-size:var(--flood-navigation-item-target); min-block-size:var(--flood-navigation-item-target); background:transparent; color:inherit; }
|
|
1933
|
+
.flood-root .flood-navigation-item :is(.flood-navigation-item__indicator,.flood-navigation-item__disclosure) svg { rotate:0deg; }
|
|
1934
|
+
.flood-root .flood-navigation-item:dir(rtl) :is(.flood-navigation-item__indicator,.flood-navigation-item__disclosure) svg { rotate:180deg; }
|
|
1935
|
+
.flood-root .flood-navigation-item[data-expanded="true"] :is(.flood-navigation-item__indicator,.flood-navigation-item__disclosure) svg { rotate:90deg; }
|
|
1936
|
+
.flood-root .flood-navigation-item[data-compact] { inline-size:var(--flood-navigation-item-target); margin-inline:auto; }
|
|
1937
|
+
.flood-root .flood-navigation-item[data-compact] .flood-navigation-item__control { flex:none; justify-content:center; inline-size:var(--flood-navigation-item-target); padding-inline:0; }
|
|
1938
|
+
.flood-root .flood-navigation-item[data-compact] .flood-navigation-item__content { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
|
|
1939
|
+
@media(pointer:coarse) { .flood-root .flood-navigation-item { --flood-navigation-item-target:max(var(--flood-navigation-item-height),var(--flood-sys-size-touch)); } }
|
|
1940
|
+
@media(forced-colors:active) { .flood-root .flood-navigation-item[data-current] { outline:1px solid Highlight; color:Highlight; } .flood-root .flood-navigation-item[data-disabled] { color:GrayText; } }
|
|
1941
|
+
.flood-root .flood-navigation-item[hidden] { display:none; }
|
|
1942
|
+
|
|
1943
|
+
.flood-root .flood-navigation-group { display:grid; row-gap:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1944
|
+
.flood-root .flood-navigation-group[data-separator] { padding-block-start:var(--flood-sys-space-3); border-block-start:var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
1945
|
+
.flood-root .flood-navigation-group__heading { display:flex; align-items:center; justify-content:space-between; gap:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1946
|
+
.flood-root .flood-navigation-group__label { padding-inline:var(--flood-sys-space-3); min-inline-size:0; overflow-wrap:anywhere; }
|
|
1947
|
+
.flood-root .flood-navigation-group__action { display:flex; align-items:center; justify-content:center; flex:none; }
|
|
1948
|
+
.flood-root .flood-navigation-group:not([data-compact]) > .flood-navigation-group__heading > .flood-navigation-group__action {
|
|
1949
|
+
margin-inline-start:auto;
|
|
1950
|
+
padding-inline-end:var(--flood-sys-space-1);
|
|
1951
|
+
}
|
|
1952
|
+
.flood-root .flood-navigation-group__body { display:grid; row-gap:var(--flood-sys-space-1); min-inline-size:0; }
|
|
1953
|
+
.flood-root .flood-disclosure__heading:has(> .flood-disclosure__action) { display:flex; align-items:center; gap:var(--flood-sys-space-2); }
|
|
1954
|
+
.flood-root .flood-disclosure__heading:has(> .flood-disclosure__action) > .flood-disclosure__trigger { flex:1; min-inline-size:0; }
|
|
1955
|
+
.flood-root .flood-disclosure__action { display:flex; align-items:center; flex:none; padding-inline-end:var(--flood-sys-space-2); }
|
|
1956
|
+
.flood-root .flood-navigation-group > .flood-navigation-group__disclosure { display:grid; border:0; border-radius:0; background:transparent; }
|
|
1957
|
+
.flood-root .flood-navigation-group__disclosure > .flood-disclosure__heading > .flood-disclosure__trigger { border-radius:var(--flood-sys-radius-indicator); padding-inline:var(--flood-sys-space-3); color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); line-height:var(--flood-sys-type-helper-line-height); font-weight:var(--flood-sys-type-body-weight); }
|
|
1958
|
+
.flood-root .flood-navigation-group__disclosure > .flood-disclosure__heading > .flood-disclosure__action { padding-inline-end:var(--flood-sys-space-1); }
|
|
1959
|
+
.flood-root .flood-navigation-group__disclosure > .flood-disclosure__panel { padding:var(--flood-sys-space-2) 0 0; }
|
|
1960
|
+
.flood-root .flood-navigation-group[data-hide-label] > .flood-navigation-group__disclosure > .flood-disclosure__heading .flood-disclosure__title { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
|
|
1961
|
+
.flood-root .flood-navigation-group[data-hide-label] > .flood-navigation-group__disclosure > .flood-disclosure__heading > .flood-disclosure__trigger { justify-content:flex-end; }
|
|
1962
|
+
.flood-root .flood-navigation-group[data-compact] > .flood-navigation-group__heading { justify-content:center; }
|
|
1963
|
+
.flood-root .flood-navigation-group[data-compact] > .flood-navigation-group__disclosure > .flood-disclosure__heading { display:contents; }
|
|
1964
|
+
.flood-root .flood-navigation-group[data-compact] > .flood-navigation-group__disclosure > .flood-disclosure__heading > .flood-disclosure__trigger { display:none; }
|
|
1965
|
+
.flood-root .flood-navigation-group[data-compact] > .flood-navigation-group__disclosure > .flood-disclosure__heading > .flood-disclosure__action { justify-content:center; padding:0 0 var(--flood-sys-space-2); }
|
|
1966
|
+
.flood-root .flood-navigation-group[data-compact] > .flood-navigation-group__disclosure > .flood-disclosure__panel { display:grid; gap:var(--flood-sys-space-2); padding:0; }
|
|
1967
|
+
.flood-root .flood-navigation-group[hidden] { display:none; }
|
|
1968
|
+
@media(forced-colors:active) { .flood-root .flood-navigation-group[data-separator] { border-color:CanvasText; } }
|
|
1969
|
+
|
|
1970
|
+
/* Shared visual owners keep motion separate from form, focus and layout state. */
|
|
1971
|
+
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
|
|
1972
|
+
.flood-root .flood-sidebar:not(:where([data-flood-motion="reduce"] *)) {
|
|
1973
|
+
transition: inline-size var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing);
|
|
1974
|
+
}
|
|
1975
|
+
|
|
1976
|
+
.flood-root:not([data-flood-motion="reduce"]) :is(
|
|
1977
|
+
.flood-navigation-item,
|
|
1978
|
+
.flood-tree__row,
|
|
1979
|
+
.flood-select__option,
|
|
1980
|
+
.flood-command-list__option,
|
|
1981
|
+
.flood-list-box__option,
|
|
1982
|
+
.flood-calendar__day,
|
|
1983
|
+
.flood-steps__action,
|
|
1984
|
+
.flood-choice-card,
|
|
1985
|
+
.flood-scroll-area__thumb,
|
|
1986
|
+
.flood-data-table tbody > tr,
|
|
1987
|
+
.flood-menu__item,
|
|
1988
|
+
.flood-segmented .flood-choice
|
|
1989
|
+
):not(:where([data-flood-motion="reduce"] *)) {
|
|
1990
|
+
transition: background-color var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing);
|
|
1991
|
+
}
|
|
1992
|
+
|
|
1993
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-check:not(:where([data-flood-motion="reduce"] *))::before {
|
|
1994
|
+
transition: opacity var(--flood-sys-motion-duration-press) var(--flood-sys-motion-easing);
|
|
1995
|
+
}
|
|
1996
|
+
.flood-root .flood-rating__choice > svg:not(:where([data-flood-motion="reduce"] *)) {
|
|
1997
|
+
transition: fill var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing),
|
|
1998
|
+
color var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing);
|
|
1999
|
+
}
|
|
2000
|
+
.flood-root .flood-data-table__sort svg:not(:where([data-flood-motion="reduce"] *)) {
|
|
2001
|
+
transition: rotate var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing);
|
|
2002
|
+
}
|
|
2003
|
+
.flood-root .flood-select--custom .flood-select__control:not(:where([data-flood-motion="reduce"] *))::after {
|
|
2004
|
+
transition: transform var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing);
|
|
2005
|
+
}
|
|
2006
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-switch-input:not(:where([data-flood-motion="reduce"] *))::before {
|
|
2007
|
+
transition: inset-inline-start var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing);
|
|
2008
|
+
}
|
|
2009
|
+
|
|
2010
|
+
.flood-root:not([data-flood-motion="reduce"]) :is(
|
|
2011
|
+
.flood-tree__chevron,
|
|
2012
|
+
.flood-navigation-item__indicator svg,
|
|
2013
|
+
.flood-navigation-item__disclosure svg
|
|
2014
|
+
):not(:where([data-flood-motion="reduce"] *)) {
|
|
2015
|
+
transition: rotate var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing);
|
|
2016
|
+
}
|
|
2017
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-disclosure__indicator:not(:where([data-flood-motion="reduce"] *)) {
|
|
2018
|
+
transition-duration: var(--flood-sys-motion-duration-normal);
|
|
2019
|
+
}
|
|
2020
|
+
.flood-root:not([data-flood-motion="reduce"]) :is(.flood-disclosure__panel, .flood-tabs__panel):not(:where([data-flood-motion="reduce"] *)):not([hidden]) {
|
|
2021
|
+
animation: flood-reveal-content var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing-enter) both;
|
|
2022
|
+
}
|
|
2023
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-navigation-tree__branch:not(:where([data-flood-motion="reduce"] *)) {
|
|
2024
|
+
animation: flood-reveal-navigation-branch var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
|
|
2025
|
+
}
|
|
2026
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-tabs[data-variant="line"] .flood-tab[aria-selected="true"]:not(:where([data-flood-motion="reduce"] *))::after {
|
|
2027
|
+
animation: flood-reveal-mark var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing-enter) both;
|
|
2028
|
+
}
|
|
2029
|
+
|
|
2030
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-copy-button__labels > span[data-visible]:not(:first-child) > .flood-icon:not(:where([data-flood-motion="reduce"] *)) {
|
|
2031
|
+
animation: flood-reveal-mark var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing-enter) both;
|
|
2032
|
+
}
|
|
2033
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-avatar .flood-avatar__image:not(:where([data-flood-motion="reduce"] *)) {
|
|
2034
|
+
transition: opacity var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing-enter);
|
|
2035
|
+
}
|
|
2036
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-spinner:not(:where([data-flood-motion="reduce"] *)) {
|
|
2037
|
+
animation-duration: var(--flood-sys-motion-duration-loop);
|
|
2038
|
+
}
|
|
2039
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-indicator[data-indeterminate="true"] .flood-indicator__fill:not(:where([data-flood-motion="reduce"] *)) {
|
|
2040
|
+
animation-duration: var(--flood-sys-motion-duration-loop);
|
|
2041
|
+
}
|
|
2042
|
+
.flood-root:not([data-flood-motion="reduce"]) .flood-skeleton[data-animate="true"]:not(:where([data-flood-motion="reduce"] *)) {
|
|
2043
|
+
animation-duration: calc(2 * var(--flood-sys-motion-duration-loop));
|
|
2044
|
+
}
|
|
2045
|
+
.flood-root :is(
|
|
2046
|
+
button.flood-button:not(.flood-button-group > .flood-button, .flood-disclosure__trigger, .flood-navigation-item__control),
|
|
2047
|
+
.flood-check:not(.flood-segmented .flood-check),
|
|
2048
|
+
.flood-switch-input,
|
|
2049
|
+
.flood-segmented .flood-choice
|
|
2050
|
+
):not(:where([data-flood-motion="reduce"] *, :disabled, [aria-disabled="true"], [aria-busy="true"], :has(input:disabled))) {
|
|
2051
|
+
transition: scale var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing-enter),
|
|
2052
|
+
background-color var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing);
|
|
2053
|
+
}
|
|
2054
|
+
.flood-root :is(
|
|
2055
|
+
button.flood-button:not(.flood-button-group > .flood-button, .flood-disclosure__trigger, .flood-navigation-item__control):active,
|
|
2056
|
+
.flood-choice:active > :is(.flood-check:not(.flood-segmented .flood-check), .flood-switch-input),
|
|
2057
|
+
.flood-segmented .flood-choice:active
|
|
2058
|
+
):not(:where([data-flood-motion="reduce"] *, :disabled, [aria-disabled="true"], [aria-busy="true"], :has(input:disabled))) {
|
|
2059
|
+
scale: .96;
|
|
2060
|
+
transition-duration: var(--flood-sys-motion-duration-press);
|
|
2061
|
+
}
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2064
|
+
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) and (hover: hover) {
|
|
2065
|
+
.flood-root:not([data-flood-motion="reduce"]) :is(
|
|
2066
|
+
.flood-input,
|
|
2067
|
+
.flood-input-group,
|
|
2068
|
+
.flood-date-field__control,
|
|
2069
|
+
.flood-time-field__control
|
|
2070
|
+
):not(:where([data-flood-motion="reduce"] *)) {
|
|
2071
|
+
transition: background-color var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing);
|
|
2072
|
+
}
|
|
2073
|
+
}
|
|
2074
|
+
|
|
2075
|
+
@media (hover: hover) and (forced-colors: none) {
|
|
2076
|
+
.flood-root :is(
|
|
2077
|
+
.flood-input:not(.flood-input-group > .flood-input, .flood-command-palette .flood-input),
|
|
2078
|
+
.flood-input-group:not(:has(input:disabled)),
|
|
2079
|
+
.flood-date-field__control,
|
|
2080
|
+
.flood-time-field__control
|
|
2081
|
+
):not(:disabled, [readonly], [aria-readonly="true"], [aria-disabled="true"], [data-readonly], [data-disabled]):hover {
|
|
2082
|
+
background-color: color-mix(in srgb, var(--flood-sys-color-field-background) 95%, var(--flood-sys-color-field-content));
|
|
2083
|
+
}
|
|
2084
|
+
.flood-root .flood-segmented .flood-choice:not(:has(input:is(:checked, :disabled))):hover {
|
|
2085
|
+
background-color: var(--flood-sys-color-action-on-surface-hover);
|
|
2086
|
+
}
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
@keyframes flood-reveal-content {
|
|
2090
|
+
from { opacity: .84; }
|
|
2091
|
+
to { opacity: 1; }
|
|
2092
|
+
}
|
|
2093
|
+
@keyframes flood-reveal-mark {
|
|
2094
|
+
from { opacity: .55; }
|
|
2095
|
+
to { opacity: 1; }
|
|
2096
|
+
}
|
|
2097
|
+
@keyframes flood-reveal-navigation-branch {
|
|
2098
|
+
from { opacity:0; translate:0 calc(-1 * var(--flood-sys-motion-distance-small)); }
|
|
2099
|
+
to { opacity:1; translate:0 0; }
|
|
2100
|
+
}
|
|
2101
|
+
|
|
2102
|
+
@keyframes flood-motion-layer-in {
|
|
2103
|
+
from { opacity: .72; }
|
|
2104
|
+
}
|
|
2105
|
+
|
|
2106
|
+
@keyframes flood-motion-hint-in {
|
|
2107
|
+
from { opacity: .85; }
|
|
2108
|
+
}
|
|
2109
|
+
|
|
2110
|
+
@keyframes flood-motion-layer-content-in {
|
|
2111
|
+
from { translate: var(--flood-motion-layer-x, 0) var(--flood-motion-layer-y, 0); }
|
|
2112
|
+
}
|
|
2113
|
+
|
|
2114
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
2115
|
+
/* The native layer owns open state and positioning. Its measured box stays still. */
|
|
2116
|
+
.flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-dialog, .flood-toast__message) {
|
|
2117
|
+
--flood-motion-layer-x: 0;
|
|
2118
|
+
--flood-motion-layer-y: 0;
|
|
2119
|
+
}
|
|
2120
|
+
|
|
2121
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu):not(.flood-tooltip,.flood-menu,[data-chrome="title-only"]):popover-open:not([data-flood-motion="reduce"] *),
|
|
2122
|
+
.flood-root .flood-dialog[open]:not([data-flood-motion="reduce"] *) {
|
|
2123
|
+
--flood-motion-layer-duration: var(--flood-sys-motion-duration-enter);
|
|
2124
|
+
animation: flood-motion-layer-in var(--flood-motion-layer-duration) var(--flood-sys-motion-easing-enter);
|
|
2125
|
+
}
|
|
2126
|
+
|
|
2127
|
+
.flood-root .flood-tooltip:popover-open:not([data-flood-motion="reduce"] *) {
|
|
2128
|
+
animation: flood-motion-hint-in var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing-enter);
|
|
2129
|
+
}
|
|
2130
|
+
|
|
2131
|
+
.flood-root .flood-dialog[open]:not([data-flood-motion="reduce"] *) {
|
|
2132
|
+
--flood-motion-layer-duration: var(--flood-sys-motion-duration-layer);
|
|
2133
|
+
}
|
|
2134
|
+
|
|
2135
|
+
.flood-root .flood-dialog[open]:not([data-flood-motion="reduce"] *)::backdrop {
|
|
2136
|
+
animation: flood-motion-layer-in var(--flood-motion-layer-duration) var(--flood-sys-motion-easing-enter);
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-side="bottom"] { --flood-motion-layer-y: calc(-1 * var(--flood-sys-motion-distance-small)); }
|
|
2140
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-side="top"] { --flood-motion-layer-y: var(--flood-sys-motion-distance-small); }
|
|
2141
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-side="left"] { --flood-motion-layer-x: var(--flood-sys-motion-distance-small); }
|
|
2142
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-side="right"] { --flood-motion-layer-x: calc(-1 * var(--flood-sys-motion-distance-small)); }
|
|
2143
|
+
|
|
2144
|
+
.flood-root .flood-drawer:is([data-side="start"][data-drawer-direction="ltr"], [data-side="end"][data-drawer-direction="rtl"]) { --flood-motion-layer-x: calc(-1 * var(--flood-sys-motion-distance-panel)); }
|
|
2145
|
+
.flood-root .flood-drawer:is([data-side="end"][data-drawer-direction="ltr"], [data-side="start"][data-drawer-direction="rtl"]) { --flood-motion-layer-x: var(--flood-sys-motion-distance-panel); }
|
|
2146
|
+
.flood-root .flood-drawer[data-side="top"] { --flood-motion-layer-y: calc(-1 * var(--flood-sys-motion-distance-panel)); }
|
|
2147
|
+
.flood-root .flood-drawer[data-side="bottom"] { --flood-motion-layer-y: var(--flood-sys-motion-distance-panel); }
|
|
2148
|
+
|
|
2149
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-side]:popover-open > :is(.flood-overlay-body, .flood-hover-card__body, .flood-scroll-area):not([data-flood-motion="reduce"] *),
|
|
2150
|
+
.flood-root .flood-drawer[open] > .flood-drawer__body:not([data-flood-motion="reduce"] *) {
|
|
2151
|
+
animation: flood-motion-layer-content-in var(--flood-motion-layer-duration) var(--flood-sys-motion-easing-enter);
|
|
2152
|
+
}
|
|
2153
|
+
|
|
2154
|
+
.flood-root .flood-bulk-action-bar:not([data-flood-motion="reduce"] *) {
|
|
2155
|
+
animation: flood-motion-hint-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
|
|
2156
|
+
}
|
|
2157
|
+
|
|
2158
|
+
.flood-root .flood-toast-region:not([data-inline]) .flood-toast__message:not([data-flood-motion="reduce"] *) {
|
|
2159
|
+
--flood-motion-layer-y: var(--flood-sys-motion-distance-small);
|
|
2160
|
+
animation: flood-motion-hint-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter),
|
|
2161
|
+
flood-motion-layer-content-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
|
|
2162
|
+
}
|
|
2163
|
+
|
|
2164
|
+
.flood-root .flood-toast-region[data-placement^="top"] .flood-toast__message {
|
|
2165
|
+
--flood-motion-layer-y: calc(-1 * var(--flood-sys-motion-distance-small));
|
|
2166
|
+
}
|
|
2167
|
+
}
|
|
2168
|
+
|
|
2169
|
+
.flood-root :is(.flood-menu,.flood-popover[data-chrome="title-only"])[aria-hidden="true"] { pointer-events:none; }
|
|
2170
|
+
|
|
2171
|
+
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
|
|
2172
|
+
.flood-root :is(.flood-menu,.flood-popover[data-chrome="title-only"]):not([data-flood-motion="reduce"] *) {
|
|
2173
|
+
opacity:0;
|
|
2174
|
+
transition:
|
|
2175
|
+
opacity var(--flood-sys-motion-duration-exit) var(--flood-sys-motion-easing),
|
|
2176
|
+
display var(--flood-sys-motion-duration-exit) allow-discrete,
|
|
2177
|
+
overlay var(--flood-sys-motion-duration-exit) allow-discrete;
|
|
2178
|
+
}
|
|
2179
|
+
.flood-root :is(.flood-menu,.flood-popover[data-chrome="title-only"]):popover-open:not([data-flood-motion="reduce"] *) {
|
|
2180
|
+
opacity:1;
|
|
2181
|
+
transition-duration:var(--flood-sys-motion-duration-enter);
|
|
2182
|
+
}
|
|
2183
|
+
@starting-style {
|
|
2184
|
+
.flood-root .flood-menu:popover-open:not([data-flood-motion="reduce"] *) { opacity:0; }
|
|
2185
|
+
.flood-root .flood-popover[data-chrome="title-only"]:popover-open:not([data-flood-motion="reduce"] *) { opacity:.8; }
|
|
2186
|
+
}
|
|
2187
|
+
.flood-root .flood-navigation-tree[data-compact] > ul:has(> li > .flood-navigation-tree__flyout:popover-open)
|
|
2188
|
+
> li > .flood-navigation-tree__flyout:not(:popover-open) { transition-duration:0s; }
|
|
2189
|
+
}
|
|
2190
|
+
|
|
2191
|
+
/* Application-level reduction composes with the system preference. */
|
|
2192
|
+
.flood-root:is([data-flood-motion="reduce"], [data-flood-motion="reduce"] *) {
|
|
2193
|
+
--flood-sys-motion-duration-press: var(--flood-sys-motion-duration-reduced);
|
|
2194
|
+
--flood-sys-motion-duration-fast: var(--flood-sys-motion-duration-reduced);
|
|
2195
|
+
--flood-sys-motion-duration-normal: var(--flood-sys-motion-duration-reduced);
|
|
2196
|
+
--flood-sys-motion-duration-enter: var(--flood-sys-motion-duration-reduced);
|
|
2197
|
+
--flood-sys-motion-duration-layer: var(--flood-sys-motion-duration-reduced);
|
|
2198
|
+
--flood-sys-motion-duration-exit: var(--flood-sys-motion-duration-reduced);
|
|
2199
|
+
}
|
|
2200
|
+
|
|
2201
|
+
.flood-root[data-flood-motion="reduce"] :is(.flood-spinner, .flood-skeleton[data-animate="true"]),
|
|
2202
|
+
.flood-root[data-flood-motion="reduce"] .flood-indicator[data-indeterminate="true"] .flood-indicator__fill {
|
|
2203
|
+
animation: none;
|
|
2204
|
+
}
|
|
2205
|
+
.flood-root[data-flood-motion="reduce"] .flood-indicator[data-indeterminate="true"] .flood-indicator__fill {
|
|
2206
|
+
background: var(--flood-indicator-color);
|
|
2207
|
+
inline-size: 35%;
|
|
2208
|
+
}
|
|
2209
|
+
@media (forced-colors: active) {
|
|
2210
|
+
.flood-root[data-flood-motion="reduce"] .flood-indicator[data-indeterminate="true"] .flood-indicator__fill {
|
|
2211
|
+
background: Highlight;
|
|
2212
|
+
}
|
|
2213
|
+
}
|