@flood-md/react 0.2.9 → 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 +256 -2
- 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 +3 -3
- 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 +805 -120
- package/dist/index.d.ts +403 -3
- package/dist/index.js +65 -11
- 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
|
@@ -8,15 +8,16 @@
|
|
|
8
8
|
.flood-root .flood-aspect-ratio__content > :is(img, video, iframe) { display: block; inline-size: 100%; block-size: 100%; }
|
|
9
9
|
.flood-root .flood-image { display: block; max-inline-size: 100%; block-size: auto; object-fit: cover; }
|
|
10
10
|
.flood-root .flood-image[data-fit="contain"] { object-fit: contain; }
|
|
11
|
-
.flood-root .flood-list { display: grid; gap: var(--flood-layout-gap); margin: 0; padding-inline-start: var(--flood-sys-space-6); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
11
|
+
.flood-root .flood-list { display: grid; gap: var(--flood-layout-gap); margin: 0; padding-inline-start: var(--flood-sys-space-6); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
12
|
+
.flood-root .flood-list > li { min-inline-size: 0; }
|
|
12
13
|
.flood-root .flood-list[data-marker="false"] { list-style: none; padding: 0; }
|
|
13
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%); }
|
|
14
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%); }
|
|
15
|
-
.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); }
|
|
16
17
|
.flood-root .flood-empty-state__actions { justify-content: center; }
|
|
17
18
|
.flood-root :is(.flood-container, .flood-grid, .flood-aspect-ratio, .flood-list, .flood-image, .flood-empty-state)[hidden] { display: none; }
|
|
18
19
|
|
|
19
|
-
.flood-root .flood-card { display: flex; flex-direction: column; gap: var(--flood-sys-space-4); overflow-wrap:
|
|
20
|
+
.flood-root .flood-card { display: flex; flex-direction: column; gap: var(--flood-sys-space-4); overflow-wrap: break-word; }
|
|
20
21
|
.flood-root .flood-card[data-density="compact"] { gap: var(--flood-sys-space-3); }
|
|
21
22
|
.flood-root .flood-card__header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--flood-sys-space-3); min-inline-size: 0; }
|
|
22
23
|
.flood-root .flood-card__intro { display: grid; gap: var(--flood-sys-space-1); flex: 1 1 12rem; min-inline-size: 0; }
|
|
@@ -28,11 +29,14 @@
|
|
|
28
29
|
.flood-root .flood-card[hidden] { display: none; }
|
|
29
30
|
@media (forced-colors: active) { .flood-root .flood-card { border: var(--flood-sys-stroke-width) solid CanvasText; background: Canvas !important; color: CanvasText; } }
|
|
30
31
|
|
|
31
|
-
.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; }
|
|
32
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); }
|
|
33
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); }
|
|
34
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); }
|
|
35
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; }
|
|
36
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)); }
|
|
37
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); }
|
|
38
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); }
|
|
@@ -48,7 +52,7 @@
|
|
|
48
52
|
.flood-root .flood-menu .flood-menu__item[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
49
53
|
.flood-root .flood-menu__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--flood-control-icon); block-size: var(--flood-control-icon); }
|
|
50
54
|
.flood-root .flood-menu__icon > svg { inline-size: 100%; block-size: 100%; }
|
|
51
|
-
.flood-root .flood-menu__label { min-inline-size: 0; overflow-wrap:
|
|
55
|
+
.flood-root .flood-menu__label { min-inline-size: 0; overflow-wrap: break-word; }
|
|
52
56
|
.flood-root .flood-menu__indicator { margin-inline-start: auto; }
|
|
53
57
|
.flood-root .flood-menu__group-label { padding: var(--flood-sys-space-2) var(--flood-sys-space-3) var(--flood-sys-space-1); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
54
58
|
.flood-root .flood-menu__shortcut { margin-inline-start: auto; flex: none; color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); white-space: nowrap; }
|
|
@@ -68,7 +72,7 @@
|
|
|
68
72
|
.flood-root .flood-description-list__item:first-child { padding-block-start: 0; }
|
|
69
73
|
.flood-root .flood-description-list__item:last-child { padding-block-end: 0; }
|
|
70
74
|
.flood-root .flood-description-list[data-dividers="true"] > .flood-description-list__item + .flood-description-list__item { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
71
|
-
.flood-root .flood-description-list :is(dt, dd) { margin: 0; min-inline-size: 0; overflow-wrap:
|
|
75
|
+
.flood-root .flood-description-list :is(dt, dd) { margin: 0; min-inline-size: 0; overflow-wrap: break-word; }
|
|
72
76
|
.flood-root .flood-description-list dt { color: var(--flood-sys-color-content-subtle); }
|
|
73
77
|
.flood-root .flood-description-list[data-layout="stacked"] > .flood-description-list__item { grid-template-columns: minmax(0, 1fr); }
|
|
74
78
|
@container flood-description (max-width: 22rem) { .flood-root .flood-description-list__item { grid-template-columns: minmax(0, 1fr); } }
|
|
@@ -76,7 +80,11 @@
|
|
|
76
80
|
.flood-root .flood-table { --flood-data-padding: var(--flood-sys-space-3); inline-size: 100%; border-collapse: collapse; border-spacing: 0; text-align: start; color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
77
81
|
.flood-root .flood-table[data-density="compact"] { --flood-data-padding: var(--flood-sys-space-2); }
|
|
78
82
|
.flood-root .flood-table caption { text-align: start; padding-block-end: var(--flood-sys-space-3); font-weight: var(--flood-sys-type-label-weight); color: var(--flood-sys-color-content-default); }
|
|
79
|
-
.flood-root .flood-table :is(th, td) { text-align: start; vertical-align:
|
|
83
|
+
.flood-root .flood-table :is(th, td) { text-align: start; vertical-align: middle; padding: var(--flood-data-padding) var(--flood-sys-space-3); overflow-wrap: break-word; }
|
|
84
|
+
.flood-root .flood-table :is(th, td)[data-wrap="anywhere"] { overflow-wrap: anywhere; }
|
|
85
|
+
.flood-root .flood-table[data-cell-vertical-align="top"] :is(th, td) { vertical-align: top; }
|
|
86
|
+
.flood-root .flood-table[data-cell-vertical-align="middle"] :is(th, td) { vertical-align: middle; }
|
|
87
|
+
.flood-root .flood-table[data-cell-vertical-align="bottom"] :is(th, td) { vertical-align: bottom; }
|
|
80
88
|
.flood-root .flood-table th { font-weight: var(--flood-sys-type-label-weight); }
|
|
81
89
|
.flood-root .flood-table thead th { color: var(--flood-sys-color-content-subtle); border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
82
90
|
.flood-root .flood-table tbody > tr:not(:last-child) > :is(th, td) { border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
@@ -103,20 +111,20 @@
|
|
|
103
111
|
.flood-root .flood-indicator[data-tone="warning"] { --flood-indicator-color: var(--flood-sys-color-feedback-warning); }
|
|
104
112
|
.flood-root .flood-indicator[data-tone="success"] { --flood-indicator-color: var(--flood-sys-color-feedback-success); }
|
|
105
113
|
.flood-root .flood-indicator[data-tone="info"] { --flood-indicator-color: var(--flood-sys-color-feedback-info); }
|
|
106
|
-
.flood-root .flood-indicator__caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--flood-sys-space-3); margin-block-end: var(--flood-sys-space-2); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
114
|
+
.flood-root .flood-indicator__caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--flood-sys-space-3); margin-block-end: var(--flood-sys-space-2); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
107
115
|
.flood-root .flood-indicator__value { color: var(--flood-sys-color-content-subtle); text-align: end; font-variant-numeric: tabular-nums; }
|
|
108
116
|
.flood-root .flood-indicator__track { display: flex; block-size: var(--flood-indicator-size); overflow: hidden; border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-indicator-track); }
|
|
109
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); }
|
|
110
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; }
|
|
111
119
|
@keyframes flood-indeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } }
|
|
112
|
-
.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); }
|
|
113
121
|
.flood-root .flood-alert[data-tone="info"] { --flood-alert-color: var(--flood-sys-color-feedback-info); }
|
|
114
122
|
.flood-root .flood-alert[data-tone="success"] { --flood-alert-color: var(--flood-sys-color-feedback-success); }
|
|
115
123
|
.flood-root .flood-alert[data-tone="warning"] { --flood-alert-color: var(--flood-sys-color-feedback-warning); }
|
|
116
124
|
.flood-root .flood-alert[data-tone="error"] { --flood-alert-color: var(--flood-sys-color-feedback-error); }
|
|
117
125
|
.flood-root .flood-alert__icon { display: inline-flex; flex: none; inline-size: var(--flood-sys-control-md-icon-size); block-size: var(--flood-sys-control-md-icon-size); color: var(--flood-alert-color); }
|
|
118
126
|
.flood-root .flood-alert__icon > svg { inline-size: 100%; block-size: 100%; }
|
|
119
|
-
.flood-root .flood-alert__content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap:
|
|
127
|
+
.flood-root .flood-alert__content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: break-word; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
120
128
|
.flood-root .flood-alert__title { margin: 0; font: inherit; font-weight: var(--flood-sys-type-label-weight); }
|
|
121
129
|
.flood-root .flood-alert__title + .flood-alert__body { margin-block-start: var(--flood-sys-space-1); }
|
|
122
130
|
.flood-root .flood-alert__body { color: var(--flood-sys-color-content-subtle); }
|
|
@@ -135,7 +143,7 @@
|
|
|
135
143
|
.flood-root :is(.flood-alert__icon, .flood-alert__body) { color: CanvasText; }
|
|
136
144
|
}
|
|
137
145
|
|
|
138
|
-
.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; }
|
|
139
147
|
.flood-root .flood-badge[data-size="sm"] { padding-block: 0; }
|
|
140
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); }
|
|
141
149
|
.flood-root .flood-badge[data-tone="accent"] { --flood-badge-color: var(--flood-sys-color-accent-content); }
|
|
@@ -150,7 +158,7 @@
|
|
|
150
158
|
.flood-root .flood-skeleton[data-shape="circle"] { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--flood-sys-radius-action); }
|
|
151
159
|
.flood-root .flood-skeleton[data-animate="true"] { animation: flood-skeleton-pulse 1.8s ease-in-out infinite; }
|
|
152
160
|
@keyframes flood-skeleton-pulse { 50% { opacity: .5; } }
|
|
153
|
-
.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; }
|
|
154
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); }
|
|
155
163
|
.flood-root .flood-avatar[data-size="lg"] { --flood-avatar-size: var(--flood-sys-control-xl-height); }
|
|
156
164
|
.flood-root .flood-avatar[data-shape="rounded"] { border-radius: var(--flood-sys-radius-field); }
|
|
@@ -178,13 +186,38 @@
|
|
|
178
186
|
.flood-root .flood-tabs .flood-tab:focus-visible { outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
179
187
|
.flood-root .flood-tabs .flood-tab:disabled { color: var(--flood-sys-color-field-disabled-content); }
|
|
180
188
|
.flood-root .flood-tabs[data-orientation="vertical"] .flood-tab { inline-size: 100%; white-space: normal; justify-content: flex-start; text-align: start; border-radius: 0; border-start-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); border-end-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
|
|
181
|
-
.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:
|
|
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; }
|
|
182
190
|
.flood-root .flood-tabs__panel[hidden] { display: none; }
|
|
183
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
|
+
}
|
|
184
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); }
|
|
185
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); }
|
|
186
219
|
.flood-root .flood-breadcrumb { inline-size: max-content; }
|
|
187
|
-
.flood-root .flood-breadcrumb li { display: inline-flex; align-items: center; flex: 0 0 auto; inline-size: max-content; gap: var(--flood-sys-space-2); min-inline-size: 0; max-inline-size: 100%; overflow-wrap:
|
|
220
|
+
.flood-root .flood-breadcrumb li { display: inline-flex; align-items: center; flex: 0 0 auto; inline-size: max-content; gap: var(--flood-sys-space-2); min-inline-size: 0; max-inline-size: 100%; overflow-wrap: break-word; }
|
|
188
221
|
.flood-root .flood-breadcrumb li > :not(.flood-breadcrumb__separator) { min-inline-size: 0; }
|
|
189
222
|
.flood-root .flood-breadcrumb a { display: inline-flex; align-items: center; min-block-size: var(--flood-sys-control-sm-height); color: var(--flood-sys-color-content-subtle); text-decoration: none; }
|
|
190
223
|
.flood-root .flood-breadcrumb a:hover { text-decoration: underline; }
|
|
@@ -205,15 +238,17 @@
|
|
|
205
238
|
.flood-root :is(.flood-overlay-panel, .flood-dialog) { box-sizing: border-box; color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-overlay); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); font: inherit; text-align: start; }
|
|
206
239
|
.flood-root .flood-overlay-panel { position: fixed; inset: auto; margin: 0; max-inline-size: var(--flood-overlay-available-width, calc(100vw - 1rem)); max-block-size: var(--flood-overlay-available-height, calc(100dvh - 1rem)); padding: var(--flood-sys-space-4); gap: var(--flood-sys-space-2); overflow: auto; }
|
|
207
240
|
.flood-root .flood-overlay-panel[popover]:not(:popover-open) { display: none; }
|
|
208
|
-
.flood-root .flood-tooltip { inline-size: max-content; max-inline-size: min(20rem, var(--flood-overlay-available-width, calc(100vw - 1rem))); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-field); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap:
|
|
241
|
+
.flood-root .flood-tooltip { inline-size: max-content; max-inline-size: min(20rem, var(--flood-overlay-available-width, calc(100vw - 1rem))); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-field); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap: break-word; }
|
|
209
242
|
.flood-root .flood-popover { inline-size: 20rem; }
|
|
210
243
|
.flood-root .flood-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-4); }
|
|
211
244
|
.flood-root .flood-overlay-close { flex: none; align-self: flex-start; }
|
|
212
|
-
.flood-root .flood-overlay-title { margin: 0; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap:
|
|
245
|
+
.flood-root .flood-overlay-title { margin: 0; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap: break-word; }
|
|
213
246
|
.flood-root .flood-overlay-body { margin-block-start: var(--flood-sys-space-3); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
214
247
|
.flood-root .flood-popover[data-chrome="minimal"] > .flood-overlay-body { margin-block-start:0; }
|
|
215
248
|
.flood-root .flood-overlay-description { margin: var(--flood-sys-space-2) 0 0; color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
216
249
|
.flood-root .flood-dialog { padding: var(--flood-sys-space-6); inline-size: min(32rem, calc(100% - var(--flood-sys-space-8))); max-inline-size: calc(100% - var(--flood-sys-space-8)); max-block-size: calc(100dvh - var(--flood-sys-space-8)); overflow: auto; }
|
|
250
|
+
.flood-root .flood-dialog > .flood-overlay-header > .flood-overlay-title { font-size: var(--flood-sys-type-dialog-title-size); line-height: var(--flood-sys-type-dialog-title-line-height); font-weight: var(--flood-sys-type-dialog-title-weight); letter-spacing: var(--flood-sys-type-dialog-title-tracking); }
|
|
251
|
+
.flood-root .flood-dialog > .flood-overlay-body { margin-block-start: var(--flood-sys-space-6); }
|
|
217
252
|
.flood-root .flood-dialog:not([open]) { display: none; }
|
|
218
253
|
.flood-root .flood-dialog::backdrop { background: color-mix(in srgb, var(--flood-sys-color-surface-canvas) 72%, transparent); }
|
|
219
254
|
.flood-root .flood-popover:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: 0; }
|
|
@@ -222,9 +257,9 @@
|
|
|
222
257
|
.flood-root .flood-disclosure__heading { margin: 0; padding: 0; font: inherit; }
|
|
223
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)); }
|
|
224
259
|
.flood-root .flood-disclosure__title { min-inline-size: 0; }
|
|
225
|
-
.flood-root .flood-disclosure__indicator {
|
|
226
|
-
.flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading .flood-disclosure__indicator { transform: rotate(
|
|
227
|
-
.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:
|
|
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); }
|
|
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; }
|
|
228
263
|
.flood-root .flood-disclosure__panel[hidden] { display: none; }
|
|
229
264
|
.flood-root .flood-accordion > .flood-disclosure { border: 0; border-radius: 0; background: transparent; }
|
|
230
265
|
.flood-root .flood-accordion > .flood-disclosure + .flood-disclosure { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
@@ -259,7 +294,7 @@
|
|
|
259
294
|
box-sizing: border-box;
|
|
260
295
|
font-family: inherit;
|
|
261
296
|
min-inline-size: 0;
|
|
262
|
-
overflow-wrap:
|
|
297
|
+
overflow-wrap: break-word;
|
|
263
298
|
}
|
|
264
299
|
.flood-root :where(.flood-text, .flood-heading) {
|
|
265
300
|
margin: 0;
|
|
@@ -319,8 +354,6 @@
|
|
|
319
354
|
box-sizing: border-box;
|
|
320
355
|
border-radius: var(--flood-sys-radius-block);
|
|
321
356
|
min-inline-size: 0;
|
|
322
|
-
--flood-surface-action-rest: var(--flood-sys-color-action-on-surface-rest);
|
|
323
|
-
--flood-surface-action-hover: var(--flood-sys-color-action-on-surface-hover);
|
|
324
357
|
}
|
|
325
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%; }
|
|
326
359
|
.flood-root .flood-button {
|
|
@@ -347,18 +380,6 @@
|
|
|
347
380
|
.flood-root .flood-button:active:not(:disabled) { background: var(--flood-action-pressed); }
|
|
348
381
|
.flood-root .flood-button:disabled { background: var(--flood-action-disabled); color: var(--flood-action-disabled-content); opacity: 1; }
|
|
349
382
|
.flood-root .flood-button[aria-pressed="true"]:not(:disabled) { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
350
|
-
.flood-root .flood-surface .flood-button--subtle {
|
|
351
|
-
--flood-action-rest: var(--flood-surface-action-rest);
|
|
352
|
-
--flood-action-hover: var(--flood-surface-action-hover);
|
|
353
|
-
--flood-action-pressed: var(--flood-sys-color-action-on-surface-pressed);
|
|
354
|
-
--flood-action-content: var(--flood-sys-color-action-on-surface-content);
|
|
355
|
-
--flood-action-disabled: var(--flood-sys-color-action-on-surface-disabled);
|
|
356
|
-
--flood-action-disabled-content: var(--flood-sys-color-action-on-surface-disabled-content);
|
|
357
|
-
}
|
|
358
|
-
.flood-root .flood-surface[data-flood-elevation="overlay"] {
|
|
359
|
-
--flood-surface-action-rest: var(--flood-sys-color-action-on-surface-hover);
|
|
360
|
-
--flood-surface-action-hover: var(--flood-sys-color-action-on-surface-pressed);
|
|
361
|
-
}
|
|
362
383
|
.flood-root .flood-button--outline { border-color: var(--flood-sys-color-field-border); }
|
|
363
384
|
.flood-root .flood-icon-button { min-inline-size: var(--flood-control-height); padding: var(--flood-sys-space-1); }
|
|
364
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; }
|
|
@@ -380,6 +401,8 @@
|
|
|
380
401
|
font-weight: var(--flood-sys-type-compact-weight);
|
|
381
402
|
}
|
|
382
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; }
|
|
383
406
|
.flood-root .flood-number-input > .flood-input::-webkit-inner-spin-button,
|
|
384
407
|
.flood-root .flood-number-input > .flood-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
|
|
385
408
|
.flood-root .flood-slider { --flood-slider-thumb: var(--flood-control-icon); min-inline-size: 0; inline-size: 100%; }
|
|
@@ -412,7 +435,7 @@
|
|
|
412
435
|
.flood-root .flood-input::placeholder { color: var(--flood-sys-color-field-placeholder); opacity: 1; }
|
|
413
436
|
.flood-root .flood-input[aria-invalid="true"] { border-color: var(--flood-sys-color-feedback-error); }
|
|
414
437
|
.flood-root .flood-input[readonly] { cursor: text; }
|
|
415
|
-
.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); }
|
|
416
439
|
.flood-root .flood-input[readonly]:not(:disabled):not(:focus-visible) { border-style: dashed; }
|
|
417
440
|
.flood-root [data-status="error"] { --flood-field-feedback: var(--flood-sys-color-feedback-error); }
|
|
418
441
|
.flood-root [data-status="warning"] { --flood-field-feedback: var(--flood-sys-color-feedback-warning); }
|
|
@@ -452,6 +475,7 @@
|
|
|
452
475
|
.flood-root .flood-select[hidden] { display: none; }
|
|
453
476
|
.flood-root .flood-select--custom .flood-select__control { position: relative; text-align: start; font-family: inherit; }
|
|
454
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); }
|
|
455
479
|
.flood-root .flood-select__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
456
480
|
.flood-root .flood-select__native[hidden] { display: none; }
|
|
457
481
|
.flood-root .flood-select__menu {
|
|
@@ -478,16 +502,17 @@
|
|
|
478
502
|
}
|
|
479
503
|
.flood-root .flood-select__menu::backdrop { background: transparent; pointer-events: none; }
|
|
480
504
|
.flood-root .flood-select__viewport { max-block-size: calc(var(--flood-sys-control-md-height) * 8 - var(--flood-sys-space-1) * 2 - var(--flood-sys-stroke-width) * 2); }
|
|
481
|
-
.flood-root .flood-select__option { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: max(0px, calc(var(--flood-menu-radius) - var(--flood-menu-padding) - var(--flood-menu-stroke))); cursor: pointer; box-sizing: border-box; overflow-wrap:
|
|
505
|
+
.flood-root .flood-select__option { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: max(0px, calc(var(--flood-menu-radius) - var(--flood-menu-padding) - var(--flood-menu-stroke))); cursor: pointer; box-sizing: border-box; overflow-wrap: break-word; }
|
|
482
506
|
.flood-root .flood-select__option[data-active="true"] { background: var(--flood-sys-color-selection-background); }
|
|
483
507
|
.flood-root .flood-select__option[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
484
508
|
.flood-root .flood-select__selected { flex: none; inline-size: var(--flood-sys-control-sm-icon-size); text-align: center; }
|
|
485
509
|
.flood-root .flood-select__group, .flood-root .flood-select__empty { padding: var(--flood-sys-space-2) var(--flood-sys-space-3); font-size: var(--flood-sys-type-label-size); color: var(--flood-sys-color-content-helper); }
|
|
486
510
|
.flood-root .flood-select__validation { display: block; margin-block-start: var(--flood-sys-space-2); color: var(--flood-sys-color-content-helper); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
487
511
|
.flood-root .flood-textarea { min-block-size: calc(var(--flood-control-height) * 3); resize: none; overflow: auto; }
|
|
488
|
-
.flood-root .flood-field { display: grid; gap: var(--flood-sys-space-
|
|
512
|
+
.flood-root .flood-field { display: grid; gap: var(--flood-sys-space-1); }
|
|
489
513
|
.flood-root .flood-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; inline-size: 100%; }
|
|
490
514
|
.flood-root .flood-legend { float: inline-start; inline-size: 100%; padding: 0; margin-block-end: var(--flood-sys-space-3); 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); letter-spacing: var(--flood-sys-type-label-tracking); }
|
|
515
|
+
.flood-root .flood-fieldset[data-legend-size="section"] > .flood-legend { font-size: var(--flood-sys-type-group-title-size); line-height: var(--flood-sys-type-group-title-line-height); font-weight: var(--flood-sys-type-group-title-weight); letter-spacing: var(--flood-sys-type-group-title-tracking); margin-block-end: var(--flood-sys-space-4); }
|
|
491
516
|
.flood-root .flood-fieldset__body { clear: both; display: grid; gap: var(--flood-sys-space-3); min-inline-size: 0; }
|
|
492
517
|
.flood-root .flood-choice-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-inline-size: 0; }
|
|
493
518
|
.flood-root .flood-choice-group > .flood-choice { min-block-size: var(--flood-sys-control-sm-height); }
|
|
@@ -500,7 +525,7 @@
|
|
|
500
525
|
The real legend and its React children remain mounted for group semantics. */
|
|
501
526
|
.flood-root .flood-fieldset[data-hide-label="true"] > .flood-legend.flood-visually-hidden--focusable:not(:focus-within):not([data-flood-focus-held]) { float: none; inline-size: 1px; block-size: 1px; margin: 0; min-inline-size: 0; min-block-size: 0; max-inline-size: 1px; max-block-size: 1px; line-height: 1px; }
|
|
502
527
|
.flood-root .flood-fieldset:disabled :is(.flood-legend, .flood-label) { color: var(--flood-sys-color-field-disabled-content); }
|
|
503
|
-
.flood-root .flood-label { color: var(--flood-sys-color-content-
|
|
528
|
+
.flood-root .flood-label { color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-field-label-size); line-height: var(--flood-sys-type-field-label-line-height); font-weight: var(--flood-sys-type-field-label-weight); letter-spacing: var(--flood-sys-type-field-label-tracking); }
|
|
504
529
|
.flood-root :where(.flood-hint, .flood-error) { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); font-weight: var(--flood-sys-type-helper-weight); letter-spacing: var(--flood-sys-type-helper-tracking); }
|
|
505
530
|
.flood-root .flood-hint { color: var(--flood-sys-color-content-helper); }
|
|
506
531
|
.flood-root .flood-error { color: var(--flood-sys-color-content-helper); }
|
|
@@ -542,7 +567,7 @@
|
|
|
542
567
|
.flood-root .flood-switch-input:disabled::before { background: var(--flood-sys-color-field-disabled-content); }
|
|
543
568
|
.flood-root .flood-link { font-size: inherit; color: var(--flood-sys-color-content-default); text-underline-offset: var(--flood-sys-space-1); }
|
|
544
569
|
.flood-root .flood-link--button { font-size: var(--flood-control-text); color: var(--flood-action-content); text-decoration: none; }
|
|
545
|
-
.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); }
|
|
546
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); }
|
|
547
572
|
.flood-root .flood-spinner { inline-size: var(--flood-control-icon); block-size: var(--flood-control-icon); border-width: var(--flood-sys-focus-width); }
|
|
548
573
|
@media (pointer: coarse) {
|
|
@@ -755,7 +780,7 @@
|
|
|
755
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); }
|
|
756
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); }
|
|
757
782
|
.flood-root .flood-input-group[data-status] { border-color: var(--flood-field-feedback); }
|
|
758
|
-
.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; }
|
|
759
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); }
|
|
760
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; }
|
|
761
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))); }
|
|
@@ -786,6 +811,8 @@
|
|
|
786
811
|
.flood-root .flood-segmented .flood-choice-group[data-orientation="vertical"] > .flood-choice { inline-size: 100%; }
|
|
787
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)); }
|
|
788
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; }
|
|
789
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; }
|
|
790
817
|
.flood-root .flood-segmented .flood-choice > .flood-check::before { display: none; }
|
|
791
818
|
.flood-root .flood-segmented .flood-choice:has(input:checked) { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
@@ -823,20 +850,24 @@
|
|
|
823
850
|
.flood-root .flood-combobox__control > .flood-input-group__addon--end { flex: none; max-inline-size: 100%; margin-inline-start: auto; }
|
|
824
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)); }
|
|
825
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)); }
|
|
826
855
|
.flood-root .flood-combobox__clear-empty { visibility: hidden; }
|
|
827
856
|
.flood-root .flood-combobox__option-text { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; }
|
|
828
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); }
|
|
829
858
|
@media (forced-colors: active) { .flood-root .flood-combobox__description { color: inherit; } }
|
|
830
|
-
.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; }
|
|
831
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); }
|
|
832
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); }
|
|
833
|
-
.flood-root .flood-tag__label { min-inline-size: 0; overflow-wrap:
|
|
862
|
+
.flood-root .flood-tag__label { min-inline-size: 0; overflow-wrap: break-word; }
|
|
834
863
|
.flood-root .flood-tag:has(> .flood-tag__remove) { padding-inline-end: calc(var(--flood-sys-space-1) / 2); }
|
|
835
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); }
|
|
836
865
|
.flood-root .flood-tag[data-disabled="true"] { color: var(--flood-sys-color-content-subtle); }
|
|
837
866
|
.flood-root .flood-tag[hidden] { display: none; }
|
|
838
|
-
.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); }
|
|
839
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))); }
|
|
840
871
|
@media (pointer: coarse) {
|
|
841
872
|
.flood-root .flood-tag:has(> .flood-tag__remove) { padding-block: 0; }
|
|
842
873
|
.flood-root .flood-tag > .flood-tag__remove { min-block-size: var(--flood-sys-size-touch); min-inline-size: var(--flood-sys-size-touch); }
|
|
@@ -848,6 +879,10 @@
|
|
|
848
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%; }
|
|
849
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); }
|
|
850
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; }
|
|
851
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; }
|
|
852
887
|
|
|
853
888
|
/* Flood owns the single clear action; suppress duplicate browser decoration. */
|
|
@@ -886,7 +921,7 @@
|
|
|
886
921
|
|
|
887
922
|
.flood-root .flood-alert-dialog { inline-size: min(26rem, calc(100% - var(--flood-sys-space-8))); }
|
|
888
923
|
.flood-root .flood-alert-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--flood-sys-space-2); margin-block-start: var(--flood-sys-space-6); }
|
|
889
|
-
.flood-root .flood-alert-dialog__actions > .flood-button { max-inline-size: 100%; overflow-wrap:
|
|
924
|
+
.flood-root .flood-alert-dialog__actions > .flood-button { max-inline-size: 100%; overflow-wrap: break-word; }
|
|
890
925
|
@media (max-width: 32rem) {
|
|
891
926
|
.flood-root .flood-alert-dialog__actions > .flood-button { inline-size: 100%; }
|
|
892
927
|
}
|
|
@@ -905,11 +940,10 @@
|
|
|
905
940
|
.flood-root .flood-drawer > .flood-overlay-header { grid-area: header; }
|
|
906
941
|
.flood-root .flood-drawer > .flood-overlay-description { grid-area: description; }
|
|
907
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); }
|
|
908
944
|
.flood-root .flood-drawer .flood-overlay-body { margin: 0; }
|
|
909
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); }
|
|
910
946
|
.flood-root .flood-drawer__footer > * { max-inline-size: 100%; }
|
|
911
|
-
@keyframes flood-drawer-enter { from { transform: translate(var(--flood-drawer-x), var(--flood-drawer-y)); } to { transform: translate(0, 0); } }
|
|
912
|
-
@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); } }
|
|
913
947
|
|
|
914
948
|
.flood-root .flood-drawer__body > .flood-scroll-area { block-size: 100%; }
|
|
915
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; }
|
|
@@ -937,9 +971,9 @@
|
|
|
937
971
|
.flood-root .flood-avatar-group { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; list-style: none; gap: 0; }
|
|
938
972
|
.flood-root .flood-avatar-group > li { display: flex; min-inline-size: 0; }
|
|
939
973
|
.flood-root .flood-avatar-group > li + li { margin-inline-start: calc(-1 * var(--flood-sys-space-2)); }
|
|
940
|
-
.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-
|
|
941
|
-
.flood-root .flood-avatar-group__overflow { color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-
|
|
942
|
-
.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:
|
|
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; }
|
|
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; }
|
|
943
977
|
.flood-root .flood-status-indicator[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
944
978
|
.flood-root .flood-status-indicator[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
945
979
|
.flood-root .flood-status-indicator[data-tone="accent"] { --flood-status-color: var(--flood-sys-color-accent-content); }
|
|
@@ -950,18 +984,18 @@
|
|
|
950
984
|
.flood-root .flood-status-indicator__dot { inline-size: .5em; block-size: .5em; flex: none; border-radius: var(--flood-sys-radius-action); background: var(--flood-status-color); }
|
|
951
985
|
.flood-root .flood-figure { display: grid; gap: var(--flood-sys-space-2); margin: 0; min-inline-size: 0; }
|
|
952
986
|
.flood-root .flood-figure > * { max-inline-size: 100%; min-inline-size: 0; }
|
|
953
|
-
.flood-root .flood-figure__caption { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); overflow-wrap:
|
|
987
|
+
.flood-root .flood-figure__caption { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); overflow-wrap: break-word; }
|
|
954
988
|
.flood-root .flood-blockquote { margin: 0; border-inline-start: calc(var(--flood-sys-stroke-width) * 2) solid var(--flood-sys-color-border-decorative); padding-inline-start: var(--flood-sys-space-4); min-inline-size: 0; }
|
|
955
|
-
.flood-root .flood-blockquote__quote { font-size: var(--flood-sys-type-body-size); line-height: var(--flood-sys-type-body-line-height); overflow-wrap:
|
|
989
|
+
.flood-root .flood-blockquote__quote { font-size: var(--flood-sys-type-body-size); line-height: var(--flood-sys-type-body-line-height); overflow-wrap: break-word; }
|
|
956
990
|
.flood-root .flood-blockquote__quote > :first-child { margin-block-start: 0; }
|
|
957
991
|
.flood-root .flood-blockquote__quote > :last-child { margin-block-end: 0; }
|
|
958
|
-
.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:
|
|
959
|
-
.flood-root .flood-inline-code { border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-surface-
|
|
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; }
|
|
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; }
|
|
960
994
|
.flood-root .flood-inline-code[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
961
995
|
.flood-root .flood-inline-code[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
962
996
|
.flood-root .flood-inline-code[data-wrap="false"] { white-space: pre; overflow-wrap: normal; }
|
|
963
997
|
.flood-root .flood-metric { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; margin: 0; }
|
|
964
|
-
.flood-root .flood-metric > dd { margin: 0; min-inline-size: 0; overflow-wrap:
|
|
998
|
+
.flood-root .flood-metric > dd { margin: 0; min-inline-size: 0; overflow-wrap: break-word; }
|
|
965
999
|
.flood-root .flood-metric__label { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-label-size); line-height: var(--flood-sys-type-label-line-height); }
|
|
966
1000
|
.flood-root .flood-metric__value { font-size: var(--flood-sys-type-large-size); line-height: var(--flood-sys-type-large-line-height); font-weight: var(--flood-sys-type-large-weight); letter-spacing: var(--flood-sys-type-large-tracking); font-variant-numeric: tabular-nums; }
|
|
967
1001
|
.flood-root .flood-metric[data-size="sm"] .flood-metric__value { font-size: var(--flood-sys-type-page-size); line-height: var(--flood-sys-type-page-line-height); }
|
|
@@ -977,14 +1011,14 @@
|
|
|
977
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); }
|
|
978
1012
|
.flood-root .flood-timeline__item:last-child { padding-block-end: 0; }
|
|
979
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); }
|
|
980
|
-
.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); }
|
|
981
1015
|
.flood-root .flood-timeline__marker > svg { inline-size: 100%; block-size: 100%; }
|
|
982
1016
|
.flood-root .flood-timeline__item[data-state="current"] .flood-timeline__marker { color: var(--flood-sys-color-accent-content); }
|
|
983
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); }
|
|
984
1018
|
.flood-root .flood-timeline__item[data-state="complete"] .flood-timeline__marker { color: var(--flood-sys-color-feedback-success); }
|
|
985
1019
|
.flood-root .flood-timeline__content { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; }
|
|
986
|
-
.flood-root .flood-timeline__title { font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap:
|
|
987
|
-
.flood-root .flood-timeline__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
1020
|
+
.flood-root .flood-timeline__title { font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap: break-word; }
|
|
1021
|
+
.flood-root .flood-timeline__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
988
1022
|
.flood-root .flood-timeline__time { color: var(--flood-sys-color-content-helper); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
989
1023
|
.flood-root :is(.flood-avatar-group, .flood-status-indicator, .flood-figure, .flood-blockquote, .flood-inline-code, .flood-metric, .flood-timeline)[hidden] { display: none; }
|
|
990
1024
|
@media (forced-colors: active) {
|
|
@@ -994,26 +1028,20 @@
|
|
|
994
1028
|
.flood-root .flood-timeline__marker { color: CanvasText; background: Canvas; border-color: CanvasText; }
|
|
995
1029
|
}
|
|
996
1030
|
|
|
997
|
-
.flood-root .flood-navigation-list { min-inline-size:
|
|
998
|
-
.flood-root .flood-navigation-list :is(ul,
|
|
999
|
-
.flood-root .flood-navigation-
|
|
1000
|
-
.flood-root .flood-navigation-list__group
|
|
1001
|
-
.flood-root .flood-
|
|
1002
|
-
.flood-root .flood-
|
|
1003
|
-
.flood-root .flood-
|
|
1004
|
-
.flood-root .flood-
|
|
1005
|
-
.flood-root .flood-navigation-list__link[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1006
|
-
.flood-root :is(.flood-navigation-list__text,.flood-steps__text) { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); }
|
|
1007
|
-
.flood-root :is(.flood-navigation-list__label,.flood-steps__title) { overflow-wrap: anywhere; }
|
|
1008
|
-
.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: anywhere; }
|
|
1009
|
-
.flood-root .flood-navigation-list__link > .flood-icon { flex: none; }
|
|
1010
|
-
.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); }
|
|
1011
1039
|
|
|
1012
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; }
|
|
1013
1041
|
.flood-root .flood-steps > li { flex: 1 1 0; min-inline-size: 0; }
|
|
1014
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; }
|
|
1015
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; }
|
|
1016
|
-
.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); }
|
|
1017
1045
|
.flood-root .flood-steps__action:disabled { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
1018
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); }
|
|
1019
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); }
|
|
@@ -1028,11 +1056,44 @@
|
|
|
1028
1056
|
.flood-root .flood-section { min-inline-size: 0; }
|
|
1029
1057
|
.flood-root .flood-section__header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--flood-sys-space-4); }
|
|
1030
1058
|
.flood-root .flood-section__heading { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; flex: 1 1 12rem; }
|
|
1031
|
-
.flood-root .flood-section__title { margin: 0; overflow-wrap:
|
|
1032
|
-
.flood-root .flood-section__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
1059
|
+
.flood-root .flood-section__title { margin: 0; overflow-wrap: break-word; }
|
|
1060
|
+
.flood-root .flood-section__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
1033
1061
|
.flood-root .flood-section__description > :first-child { margin-block-start: 0; }
|
|
1034
1062
|
.flood-root .flood-section__description > :last-child { margin-block-end: 0; }
|
|
1035
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; }
|
|
1036
1097
|
.flood-root .flood-section__body { margin-block-start: var(--flood-sys-space-4); min-inline-size: 0; }
|
|
1037
1098
|
|
|
1038
1099
|
.flood-root .flood-split { container: flood-split / inline-size; min-inline-size: 0; inline-size: 100%; }
|
|
@@ -1040,7 +1101,7 @@
|
|
|
1040
1101
|
.flood-root .flood-split__layout[data-side="start"], .flood-root .flood-split__layout[data-ratio="aside"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
|
|
1041
1102
|
.flood-root .flood-split__layout[data-side="start"][data-ratio="aside"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
|
|
1042
1103
|
.flood-root .flood-split__layout[data-ratio="balanced"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1043
|
-
.flood-root :is(.flood-split__main,.flood-split__aside) { min-inline-size: 0; overflow-wrap:
|
|
1104
|
+
.flood-root :is(.flood-split__main,.flood-split__aside) { min-inline-size: 0; overflow-wrap: break-word; }
|
|
1044
1105
|
@container flood-split (max-width: 30rem) { .flood-root .flood-split__layout[data-collapse="sm"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1045
1106
|
@container flood-split (max-width: 48rem) { .flood-root .flood-split__layout[data-collapse="md"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1046
1107
|
@container flood-split (max-width: 64rem) { .flood-root .flood-split__layout[data-collapse="lg"] { grid-template-columns: minmax(0, 1fr); } }
|
|
@@ -1052,9 +1113,9 @@
|
|
|
1052
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); }
|
|
1053
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; }
|
|
1054
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); }
|
|
1055
|
-
.flood-root :is(.flood-navigation-list,.flood-steps,.flood-section,.flood-split,.flood-center,.flood-skip-link)[hidden] { display: none; }
|
|
1056
|
-
@media (pointer: coarse) { .flood-root .flood-
|
|
1057
|
-
@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; } }
|
|
1058
1119
|
|
|
1059
1120
|
/* Relationships: labels → controls use .25rem; rows own their compact hit areas. */
|
|
1060
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); }
|
|
@@ -1064,11 +1125,11 @@
|
|
|
1064
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)); }
|
|
1065
1126
|
.flood-root .flood-list-box-field { position:relative; }
|
|
1066
1127
|
.flood-root .flood-list-box[data-status] { border-color:var(--flood-field-feedback); }
|
|
1067
|
-
.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; }
|
|
1068
1129
|
.flood-root .flood-list-box__feedback { margin-block-start:var(--flood-sys-space-1); }
|
|
1069
1130
|
.flood-root .flood-list-box[data-appearance="plain"] { max-block-size:none; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; }
|
|
1070
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); }
|
|
1071
|
-
.flood-root .flood-list-box__copy { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); overflow-wrap:
|
|
1132
|
+
.flood-root .flood-list-box__copy { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); overflow-wrap: break-word; }
|
|
1072
1133
|
.flood-root .flood-list-box__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); }
|
|
1073
1134
|
.flood-root .flood-list-box__check { flex: none; inline-size: var(--flood-control-icon); text-align: center; }
|
|
1074
1135
|
.flood-root .flood-list-box__option[aria-selected="true"] { background: var(--flood-sys-color-selection-background); }
|
|
@@ -1079,7 +1140,7 @@
|
|
|
1079
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; }
|
|
1080
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); }
|
|
1081
1142
|
.flood-root .flood-pin-input[data-status] .flood-pin-input__slot { border-color: var(--flood-field-feedback); }
|
|
1082
|
-
.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; }
|
|
1083
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); }
|
|
1084
1145
|
.flood-root .flood-rating { display: block; min-inline-size: 0; max-inline-size: 100%; border: 0; padding: 0; margin: 0; }
|
|
1085
1146
|
.flood-root .flood-rating__choices { display: flex; align-items: center; flex-wrap: wrap; gap: var(--flood-sys-space-1); }
|
|
@@ -1087,7 +1148,7 @@
|
|
|
1087
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); }
|
|
1088
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); }
|
|
1089
1150
|
.flood-root .flood-rating__choice > input { position: absolute; inset: 0; margin: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: inherit; }
|
|
1090
|
-
.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; }
|
|
1091
1152
|
.flood-root .flood-rating--sm .flood-rating__choice > svg { inline-size: 1rem; block-size: 1rem; }
|
|
1092
1153
|
.flood-root .flood-rating--lg .flood-rating__choice > svg { inline-size: 1.5rem; block-size: 1.5rem; }
|
|
1093
1154
|
.flood-root .flood-rating__choice[data-filled] > svg { fill: currentColor; }
|
|
@@ -1129,7 +1190,7 @@
|
|
|
1129
1190
|
.flood-root .flood-toast-region[hidden] { display: none; }
|
|
1130
1191
|
.flood-root .flood-toast-region__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--flood-sys-space-2); }
|
|
1131
1192
|
.flood-root .flood-toast { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: var(--flood-sys-space-2); padding: var(--flood-sys-space-3); background: var(--flood-sys-color-surface-floating); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-floating); border-radius: var(--flood-sys-radius-field); box-shadow: 0 var(--flood-sys-effect-floating-shadow-offset) var(--flood-sys-effect-floating-shadow-blur) var(--flood-sys-color-shadow-floating); }
|
|
1132
|
-
.flood-root .flood-toast__message { min-inline-size: 0; align-self: center; overflow-wrap:
|
|
1193
|
+
.flood-root .flood-toast__message { min-inline-size: 0; align-self: center; overflow-wrap: break-word; }
|
|
1133
1194
|
.flood-root .flood-toast__title { font-size: var(--flood-sys-type-compact-size); font-weight: var(--flood-sys-type-label-weight); }
|
|
1134
1195
|
.flood-root .flood-toast__description { margin-block-start: var(--flood-sys-space-1); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); }
|
|
1135
1196
|
.flood-root .flood-toast__title::before { content: ""; display: inline-block; vertical-align: middle; inline-size: .375rem; block-size: .375rem; border-radius: var(--flood-sys-radius-action); margin-inline-end: var(--flood-sys-space-2); background: var(--flood-sys-color-content-subtle); }
|
|
@@ -1144,7 +1205,7 @@
|
|
|
1144
1205
|
.flood-root .flood-editable[hidden] { display: none; }
|
|
1145
1206
|
.flood-root .flood-editable > .flood-label { margin: 0; }
|
|
1146
1207
|
.flood-root .flood-editable__preview { justify-content: space-between; min-inline-size: 0; inline-size: 100%; text-align: start; gap: var(--flood-sys-space-2); }
|
|
1147
|
-
.flood-root .flood-editable__value { flex: 1 1 0; min-inline-size: 0; overflow-wrap:
|
|
1208
|
+
.flood-root .flood-editable__value { flex: 1 1 0; min-inline-size: 0; overflow-wrap: break-word; }
|
|
1148
1209
|
.flood-root .flood-editable__value[data-empty] { color: var(--flood-sys-color-content-subtle); }
|
|
1149
1210
|
.flood-root .flood-editable__preview > .flood-icon { flex: none; color: var(--flood-sys-color-content-subtle); }
|
|
1150
1211
|
.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
|
|
@@ -1164,8 +1225,8 @@
|
|
|
1164
1225
|
.flood-root .flood-command-list { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); }
|
|
1165
1226
|
.flood-root .flood-command-list[hidden] { display: none; }
|
|
1166
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); }
|
|
1167
|
-
.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))); }
|
|
1168
|
-
.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:
|
|
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))); }
|
|
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; }
|
|
1169
1230
|
.flood-root .flood-command-list__option[data-active="true"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1170
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); }
|
|
1171
1232
|
.flood-root .flood-command-list__option[aria-disabled="true"], .flood-root .flood-command-list__option[aria-disabled="true"] .flood-command-list__description { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
@@ -1180,6 +1241,68 @@
|
|
|
1180
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; }
|
|
1181
1242
|
}
|
|
1182
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
|
+
|
|
1183
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; }
|
|
1184
1307
|
.flood-root .flood-date-field[hidden] { display:none; }
|
|
1185
1308
|
.flood-root .flood-date-field > .flood-label { margin:0; }
|
|
@@ -1198,7 +1321,7 @@
|
|
|
1198
1321
|
.flood-root .flood-date-field__control[data-status="warning"] { --flood-field-feedback:var(--flood-sys-color-feedback-warning); }
|
|
1199
1322
|
.flood-root .flood-date-field__control[data-status="success"] { --flood-field-feedback:var(--flood-sys-color-feedback-success); }
|
|
1200
1323
|
.flood-root .flood-date-field__control[data-status="info"] { --flood-field-feedback:var(--flood-sys-color-feedback-info); }
|
|
1201
|
-
.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; }
|
|
1202
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; }
|
|
1203
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); }
|
|
1204
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); }
|
|
@@ -1227,7 +1350,7 @@
|
|
|
1227
1350
|
.flood-root .flood-time-field__segment::placeholder { color: var(--flood-sys-color-field-placeholder); opacity: 1; }
|
|
1228
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); }
|
|
1229
1352
|
.flood-root .flood-time-field__control[data-status] { border-color: var(--flood-field-feedback); }
|
|
1230
|
-
.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; }
|
|
1231
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; }
|
|
1232
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); }
|
|
1233
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); }
|
|
@@ -1252,7 +1375,7 @@
|
|
|
1252
1375
|
.flood-root .flood-calendar { box-sizing:border-box; display:grid; gap:var(--flood-sys-space-2); inline-size:min(100%,22rem); min-inline-size:0; padding:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius:var(--flood-sys-radius-surface); background:var(--flood-sys-color-surface-raised); color:var(--flood-sys-color-content-default); container-type:inline-size; container-name:flood-calendar; }
|
|
1253
1376
|
.flood-root .flood-calendar[hidden] { display:none; }
|
|
1254
1377
|
.flood-root .flood-calendar__header { display:flex; align-items:center; justify-content:space-between; gap:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1255
|
-
.flood-root .flood-calendar__month { 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); overflow-wrap:
|
|
1378
|
+
.flood-root .flood-calendar__month { 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); overflow-wrap: break-word; }
|
|
1256
1379
|
.flood-root .flood-calendar__month { display:flex; align-items:center; min-inline-size:0; gap:0; }
|
|
1257
1380
|
.flood-root .flood-calendar__month > .flood-button { --flood-action-rest:transparent; padding-inline:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1258
1381
|
.flood-root .flood-calendar__body { --flood-calendar-cell-height:var(--flood-sys-control-sm-height); min-block-size:calc(6 * var(--flood-calendar-cell-height) + 6 * var(--flood-sys-space-1) + 1.5rem); display:grid; }
|
|
@@ -1285,7 +1408,7 @@
|
|
|
1285
1408
|
}
|
|
1286
1409
|
@media(forced-colors:active) { .flood-root .flood-calendar { background:Canvas; color:CanvasText; border-color:CanvasText; } .flood-root .flood-calendar__day[data-selected] { background:Highlight; color:HighlightText; forced-color-adjust:none; } .flood-root .flood-calendar__day:focus-visible { border-color:Highlight; } .flood-root .flood-calendar__day[data-selected]:focus-visible { border-color:CanvasText; } .flood-root .flood-calendar__day[aria-disabled="true"],.flood-root .flood-calendar__day:disabled { color:GrayText; } }
|
|
1287
1410
|
|
|
1288
|
-
.flood-root .flood-date-picker__panel { inline-size:min(var(--flood-date-picker-width,22rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-3); }
|
|
1411
|
+
.flood-root .flood-date-picker__panel { inline-size:min(max(var(--flood-date-picker-width,22rem),20rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-3); }
|
|
1289
1412
|
.flood-root .flood-date-picker__panel > .flood-overlay-header { display:none; }
|
|
1290
1413
|
.flood-root .flood-date-picker__panel > .flood-overlay-body { margin-block-start:0; }
|
|
1291
1414
|
.flood-root .flood-date-picker__panel .flood-calendar { inline-size:100%; padding:0; border:0; border-radius:0; background:transparent; }
|
|
@@ -1295,7 +1418,7 @@
|
|
|
1295
1418
|
.flood-root .flood-error-summary__title { font-weight:var(--flood-sys-type-label-weight); }
|
|
1296
1419
|
.flood-root .flood-error-summary__description { margin-block-start:var(--flood-sys-space-1); }
|
|
1297
1420
|
.flood-root .flood-error-summary .flood-error-summary__list { margin-block-start:var(--flood-sys-space-2); margin-block-end:0; }
|
|
1298
|
-
.flood-root .flood-error-summary__list .flood-link { overflow-wrap:
|
|
1421
|
+
.flood-root .flood-error-summary__list .flood-link { overflow-wrap: break-word; }
|
|
1299
1422
|
@media(forced-colors:active) { .flood-root .flood-error-summary:focus { outline-color:Highlight; } }
|
|
1300
1423
|
|
|
1301
1424
|
.flood-root .flood-resizable-panels { --flood-resize-track: var(--flood-sys-space-3); box-sizing: border-box; display: grid; min-inline-size: 0; min-block-size: 0; inline-size: 100%; grid-template-columns: minmax(0, var(--flood-main-weight)) var(--flood-resize-track) minmax(0, var(--flood-secondary-weight)); }
|
|
@@ -1371,8 +1494,8 @@
|
|
|
1371
1494
|
.flood-root .flood-tree__chevron[data-expanded] { rotate:90deg; }
|
|
1372
1495
|
.flood-root .flood-tree[data-tree-direction="rtl"] .flood-tree__chevron:not([data-expanded]) { rotate:180deg; }
|
|
1373
1496
|
.flood-root .flood-tree__text { display:grid; gap:var(--flood-sys-space-1); min-inline-size:0; }
|
|
1374
|
-
.flood-root .flood-tree__label { min-inline-size:0; overflow-wrap:
|
|
1375
|
-
.flood-root .flood-tree__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:
|
|
1497
|
+
.flood-root .flood-tree__label { min-inline-size:0; overflow-wrap: break-word; }
|
|
1498
|
+
.flood-root .flood-tree__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; }
|
|
1376
1499
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row { color:var(--flood-sys-color-field-disabled-content); }
|
|
1377
1500
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row:hover { background:transparent; }
|
|
1378
1501
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row .flood-tree__disclosure { cursor:default; }
|
|
@@ -1381,27 +1504,26 @@
|
|
|
1381
1504
|
@media(pointer:coarse){.flood-root .flood-tree__row { min-block-size:max(var(--flood-control-height),var(--flood-sys-size-touch)); }}
|
|
1382
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;}}
|
|
1383
1506
|
|
|
1384
|
-
.flood-root .flood-navigation-tree { min-inline-size:0; --flood-navigation-
|
|
1385
|
-
.flood-root .flood-navigation-tree[data-
|
|
1386
|
-
.flood-root .flood-navigation-tree[data-size="
|
|
1387
|
-
.flood-root .flood-navigation-tree
|
|
1388
|
-
.flood-root .flood-navigation-tree
|
|
1389
|
-
.flood-root .flood-navigation-
|
|
1390
|
-
.flood-root .flood-navigation-
|
|
1391
|
-
.flood-root .flood-navigation-
|
|
1392
|
-
.flood-root .flood-navigation-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
.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
|
+
}
|
|
1401
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); }
|
|
1402
1524
|
.flood-root .flood-navigation-tree:focus-visible { outline:var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset:0; }
|
|
1403
|
-
|
|
1404
|
-
@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; } }
|
|
1405
1527
|
|
|
1406
1528
|
[data-flood-foundations="neutral"] .flood-date-time-picker { min-inline-size:0; inline-size:100%; }
|
|
1407
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); }
|
|
@@ -1436,7 +1558,7 @@
|
|
|
1436
1558
|
.flood-root .flood-tree-select[hidden] { display:none; }
|
|
1437
1559
|
.flood-root .flood-tree-select>.flood-label { margin:0; }
|
|
1438
1560
|
.flood-root .flood-tree-select [data-placeholder] { color:var(--flood-sys-color-field-placeholder); }
|
|
1439
|
-
.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; }
|
|
1440
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); }
|
|
1441
1563
|
.flood-root .flood-tree-select__panel>.flood-overlay-header { display:none; }
|
|
1442
1564
|
.flood-root .flood-tree-select__panel>.flood-overlay-body { margin-block-start:0; }
|
|
@@ -1451,10 +1573,10 @@
|
|
|
1451
1573
|
.flood-root .flood-data-list[hidden],.flood-root .flood-data-list-item[hidden] { display:none; }
|
|
1452
1574
|
.flood-root .flood-data-list-item__media { flex:none; display:flex; align-items:center; }
|
|
1453
1575
|
.flood-root .flood-data-list-item__copy { flex:1; min-inline-size:0; display:grid; gap:var(--flood-sys-space-1); }
|
|
1454
|
-
.flood-root .flood-data-list-item__title { font-weight:500; overflow-wrap:
|
|
1455
|
-
.flood-root .flood-data-list-item__description { color:var(--flood-sys-color-content-subtle); overflow-wrap:
|
|
1576
|
+
.flood-root .flood-data-list-item__title { font-weight:500; overflow-wrap: break-word; }
|
|
1577
|
+
.flood-root .flood-data-list-item__description { color:var(--flood-sys-color-content-subtle); overflow-wrap: break-word; }
|
|
1456
1578
|
.flood-root .flood-data-list-item__trailing { display:flex; align-items:center; gap:var(--flood-sys-space-3); flex-wrap:wrap; justify-content:flex-end; min-inline-size:0; max-inline-size:50%; }
|
|
1457
|
-
.flood-root .flood-data-list-item__metadata { color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); overflow-wrap:
|
|
1579
|
+
.flood-root .flood-data-list-item__metadata { color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); overflow-wrap: break-word; }
|
|
1458
1580
|
.flood-root .flood-data-list-item__actions { display:flex; align-items:center; gap:var(--flood-sys-space-1); }
|
|
1459
1581
|
.flood-root .flood-choice-card { box-sizing:border-box; display:flex; align-items:flex-start; inline-size:100%; min-inline-size:0; gap:var(--flood-sys-space-3); padding:var(--flood-sys-space-4); 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); cursor:pointer; }
|
|
1460
1582
|
.flood-root .flood-choice-card--compact { padding:var(--flood-sys-space-3); }
|
|
@@ -1462,8 +1584,8 @@
|
|
|
1462
1584
|
.flood-root .flood-choice-card>span { flex:1; }
|
|
1463
1585
|
.flood-root .flood-choice-card__content { display:flex; align-items:flex-start; gap:var(--flood-sys-space-3); min-inline-size:0; }
|
|
1464
1586
|
.flood-root .flood-choice-card__copy { flex:1; min-inline-size:0; display:grid; gap:var(--flood-sys-space-1); }
|
|
1465
|
-
.flood-root .flood-choice-card__title { font-weight:500; overflow-wrap:
|
|
1466
|
-
.flood-root .flood-choice-card__description,.flood-root .flood-choice-card__metadata { color:var(--flood-sys-color-content-subtle); font-weight:400; overflow-wrap:
|
|
1587
|
+
.flood-root .flood-choice-card__title { font-weight:500; overflow-wrap: break-word; }
|
|
1588
|
+
.flood-root .flood-choice-card__description,.flood-root .flood-choice-card__metadata { color:var(--flood-sys-color-content-subtle); font-weight:400; overflow-wrap: break-word; }
|
|
1467
1589
|
.flood-root .flood-choice-card__metadata { flex:none; max-inline-size:35%; }
|
|
1468
1590
|
.flood-root .flood-choice-card__icon { display:flex; align-items:center; color:var(--flood-sys-color-content-subtle); }
|
|
1469
1591
|
.flood-root .flood-choice-card:has(input:checked),.flood-root .flood-choice-card:has(input:indeterminate) { background:var(--flood-sys-color-selection-background); }
|
|
@@ -1477,12 +1599,44 @@
|
|
|
1477
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%; } }
|
|
1478
1600
|
|
|
1479
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
|
+
}
|
|
1480
1632
|
.flood-root .flood-data-table[hidden] { display:none; }
|
|
1633
|
+
.flood-root .flood-data-table thead th { vertical-align:middle; }
|
|
1481
1634
|
.flood-root .flood-data-table thead th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
|
|
1482
1635
|
.flood-root .flood-data-table__sort { gap:var(--flood-sys-space-2); min-block-size:var(--flood-sys-control-sm-height); padding-inline:calc(var(--flood-sys-space-2) - var(--flood-sys-stroke-width)); color:inherit; font:inherit; font-weight:500; }
|
|
1483
1636
|
.flood-root .flood-data-table__choice { inline-size:1%; white-space:nowrap; }
|
|
1484
1637
|
.flood-root .flood-data-table__choice .flood-choice { min-block-size:var(--flood-sys-control-sm-height); }
|
|
1485
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; }
|
|
1486
1640
|
.flood-root .flood-data-table .flood-data-table__state { padding-block:var(--flood-sys-space-8); text-align:center; }
|
|
1487
1641
|
.flood-root .flood-data-table__state>.flood-stack { align-items:center; }
|
|
1488
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); }
|
|
@@ -1496,14 +1650,14 @@
|
|
|
1496
1650
|
.flood-root .flood-file-item__name { overflow-wrap:anywhere; }
|
|
1497
1651
|
.flood-root .flood-file-item__heading { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-1) var(--flood-sys-space-2); min-inline-size:0; }
|
|
1498
1652
|
.flood-root .flood-file-item__heading>.flood-file-item__name { min-inline-size:0; }
|
|
1499
|
-
.flood-root .flood-file-meta { flex:0 1 auto; max-inline-size:100%; flex-wrap:wrap; white-space:normal; overflow-wrap:
|
|
1653
|
+
.flood-root .flood-file-meta { flex:0 1 auto; max-inline-size:100%; flex-wrap:wrap; white-space:normal; overflow-wrap: break-word; color:var(--flood-sys-color-content-subtle); font-weight:400; }
|
|
1500
1654
|
.flood-root .flood-file-meta>span { min-inline-size:0; }
|
|
1501
1655
|
.flood-root .flood-file-item .flood-data-list-item__trailing { flex:none; max-inline-size:none; }
|
|
1502
1656
|
.flood-root .flood-upload-item .flood-data-list-item__copy { align-self:center; }
|
|
1503
1657
|
.flood-root .flood-upload-item__status-row { display:flex; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1504
1658
|
.flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:none; white-space:nowrap; }
|
|
1505
1659
|
.flood-root .flood-upload-item .flood-indicator { flex:1; min-inline-size:0; }
|
|
1506
|
-
.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:
|
|
1660
|
+
.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:break-word; }
|
|
1507
1661
|
.flood-root .flood-image-preview { inline-size:min(56rem,calc(100% - var(--flood-sys-space-8))); }
|
|
1508
1662
|
.flood-root .flood-image-preview__figure { margin:0; }
|
|
1509
1663
|
.flood-root .flood-image-preview__media { display:grid; place-items:center; min-block-size:12rem; max-inline-size:100%; background:var(--flood-sys-color-surface-canvas); border-radius:var(--flood-sys-radius-field); overflow:hidden; }
|
|
@@ -1526,3 +1680,534 @@
|
|
|
1526
1680
|
.flood-root .flood-time-picker__scroll { max-block-size:min(15rem,calc(var(--flood-overlay-available-height,60dvh) - 1rem)); }
|
|
1527
1681
|
|
|
1528
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
|
+
}
|