@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/filter/FieldFilterPanel.css

@@ -1,150 +1,150 @@
-.ObFieldFilterPanel-root {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-3, 0.75rem);
-
-	/*
-	 * The panel is sized by whatever it is put in — a popover, a dialog, a
-	 * sidebar. It fills that container and lets the distinct list take up the
-	 * slack, so the list grows and shrinks with the container instead of
-	 * carrying a height of its own.
-	 */
-	block-size: 100%;
-	min-block-size: 0;
-}
-
-.ObFieldFilterPanel-heading {
-	font-weight: var(--ds-font-weight-medium, 500);
-	color: var(--ds-color-neutral-text-default);
-}
-
-.ObFieldFilterPanel-criteria {
-	display: flex;
-	flex-direction: column;
-	flex: 0 0 auto;
-	gap: var(--ds-size-2, 0.5rem);
-}
-
-.ObFieldFilterPanel-criterion {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-1, 0.25rem);
-}
-
-/*
- * The filter editor's value cell is written for the filter builder's horizontal
- * rows, where growing is what makes it fill the row. Stacked vertically that
- * same `flex-grow` makes it stretch to fill the whole panel instead.
- */
-.ObFieldFilterPanel-criterion > .ObFilterEditor-valueCell {
-	flex: 0 0 auto;
-}
-
-.ObFieldFilterPanel-distinct {
-	/*
-	 * The parts the section cannot usefully shrink past, named so the floor below
-	 * and the list's own minimum cannot drift apart.
-	 */
-	--obFieldFilterPanel-list-min-size: 8rem;
-	--obFieldFilterPanel-toolbar-size: 2.75rem; /* a `sm` search field */
-	--obFieldFilterPanel-hint-size: 1.25rem; /* one line of truncation hint */
-
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	gap: var(--ds-size-2, 0.5rem);
-	padding-block-start: var(--ds-size-2, 0.5rem);
-	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
-
-	/*
-	 * The section follows the panel's height, but only down to the toolbar, the
-	 * hint and the list's own minimum. Without a floor it kept shrinking while
-	 * the list held its minimum, and since the overflow here is visible the list
-	 * spilled out and painted over the buttons the panel puts after it.
-	 *
-	 * The floor has to be an explicit length. `auto` resolves to min-content, and
-	 * the list is the scroll container, so its min-content height is the whole
-	 * unscrolled list — that would stretch the section to fit every distinct
-	 * value. Once the panel is too short for this, it scrolls instead.
-	 */
-	min-block-size: calc(
-		var(--obFieldFilterPanel-list-min-size) + var(--obFieldFilterPanel-toolbar-size) +
-			var(--obFieldFilterPanel-hint-size) + 2 * var(--ds-size-2, 0.5rem)
-	);
-}
-
-.ObFieldFilterPanel-distinctToolbar {
-	display: flex;
-	flex: 0 0 auto;
-	gap: var(--ds-size-1, 0.25rem);
-	align-items: center;
-}
-
-.ObFieldFilterPanel-distinctToolbar .ds-search {
-	flex: 1;
-	min-inline-size: 0;
-}
-
-/*
- * The active sort is held down, so it is clear which of the two is in effect.
- * Neutral tokens rather than accent ones: the accent scale is only defined
- * inside a `data-color` scope, and the panel can be dropped anywhere.
- */
-.ObFieldFilterPanel-distinctToolbar .ds-button[aria-pressed="true"] {
-	color: var(--ds-color-neutral-text-default, #292c30);
-	background: var(--ds-color-neutral-surface-active, #c9cacb);
-	box-shadow: inset 0 0 0 var(--ds-border-width-default, 1px) var(--ds-color-neutral-border-subtle, #e7e7e7);
-}
-
-/*
- * Both the list and the spinner that replaces it while loading use this box, so
- * the panel does not jump when the values arrive. It is the part that takes up
- * whatever room the container has left, and it never collapses to nothing.
- */
-.ObFieldFilterPanel-valuesBox {
-	flex: 1 1 auto;
-	min-block-size: var(--obFieldFilterPanel-list-min-size, 8rem);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
-	border-radius: var(--ds-border-radius-md, 0.25rem);
-	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
-}
-
-.ObFieldFilterPanel-values {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-1, 0.25rem);
-	margin: 0;
-	padding: var(--ds-size-1, 0.25rem);
-	overflow-y: auto;
-	list-style: none;
-}
-
-.ObFieldFilterPanel-value {
-	padding-inline: var(--ds-size-1, 0.25rem);
-}
-
-.ObFieldFilterPanel-loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--ds-size-4, 1rem);
-}
-
-.ObFieldFilterPanel-error {
-	margin: 0;
-	color: var(--ds-color-danger-text-default);
-}
-
-.ObFieldFilterPanel-hint {
-	margin: 0;
-	flex: 0 0 auto;
-	font-size: var(--ds-font-size-1, 0.75rem);
-	color: var(--ds-color-neutral-text-subtle, #68707c);
-}
-
-.ObFieldFilterPanel-actions {
-	display: flex;
-	flex: 0 0 auto;
-	gap: var(--ds-size-2, 0.5rem);
-	justify-content: flex-end;
-}
+.ObFieldFilterPanel-root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3, 0.75rem);
+
+	/*
+	 * The panel is sized by whatever it is put in — a popover, a dialog, a
+	 * sidebar. It fills that container and lets the distinct list take up the
+	 * slack, so the list grows and shrinks with the container instead of
+	 * carrying a height of its own.
+	 */
+	block-size: 100%;
+	min-block-size: 0;
+}
+
+.ObFieldFilterPanel-heading {
+	font-weight: var(--ds-font-weight-medium, 500);
+	color: var(--ds-color-neutral-text-default);
+}
+
+.ObFieldFilterPanel-criteria {
+	display: flex;
+	flex-direction: column;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+}
+
+.ObFieldFilterPanel-criterion {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+}
+
+/*
+ * The filter editor's value cell is written for the filter builder's horizontal
+ * rows, where growing is what makes it fill the row. Stacked vertically that
+ * same `flex-grow` makes it stretch to fill the whole panel instead.
+ */
+.ObFieldFilterPanel-criterion > .ObFilterEditor-valueCell {
+	flex: 0 0 auto;
+}
+
+.ObFieldFilterPanel-distinct {
+	/*
+	 * The parts the section cannot usefully shrink past, named so the floor below
+	 * and the list's own minimum cannot drift apart.
+	 */
+	--obFieldFilterPanel-list-min-size: 8rem;
+	--obFieldFilterPanel-toolbar-size: 2.75rem; /* a `sm` search field */
+	--obFieldFilterPanel-hint-size: 1.25rem; /* one line of truncation hint */
+
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	padding-block-start: var(--ds-size-2, 0.5rem);
+	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+
+	/*
+	 * The section follows the panel's height, but only down to the toolbar, the
+	 * hint and the list's own minimum. Without a floor it kept shrinking while
+	 * the list held its minimum, and since the overflow here is visible the list
+	 * spilled out and painted over the buttons the panel puts after it.
+	 *
+	 * The floor has to be an explicit length. `auto` resolves to min-content, and
+	 * the list is the scroll container, so its min-content height is the whole
+	 * unscrolled list — that would stretch the section to fit every distinct
+	 * value. Once the panel is too short for this, it scrolls instead.
+	 */
+	min-block-size: calc(
+		var(--obFieldFilterPanel-list-min-size) + var(--obFieldFilterPanel-toolbar-size) +
+			var(--obFieldFilterPanel-hint-size) + 2 * var(--ds-size-2, 0.5rem)
+	);
+}
+
+.ObFieldFilterPanel-distinctToolbar {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-1, 0.25rem);
+	align-items: center;
+}
+
+.ObFieldFilterPanel-distinctToolbar .ds-search {
+	flex: 1;
+	min-inline-size: 0;
+}
+
+/*
+ * The active sort is held down, so it is clear which of the two is in effect.
+ * Neutral tokens rather than accent ones: the accent scale is only defined
+ * inside a `data-color` scope, and the panel can be dropped anywhere.
+ */
+.ObFieldFilterPanel-distinctToolbar .ds-button[aria-pressed="true"] {
+	color: var(--ds-color-neutral-text-default, #292c30);
+	background: var(--ds-color-neutral-surface-active, #c9cacb);
+	box-shadow: inset 0 0 0 var(--ds-border-width-default, 1px) var(--ds-color-neutral-border-subtle, #e7e7e7);
+}
+
+/*
+ * Both the list and the spinner that replaces it while loading use this box, so
+ * the panel does not jump when the values arrive. It is the part that takes up
+ * whatever room the container has left, and it never collapses to nothing.
+ */
+.ObFieldFilterPanel-valuesBox {
+	flex: 1 1 auto;
+	min-block-size: var(--obFieldFilterPanel-list-min-size, 8rem);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+	border-radius: var(--ds-border-radius-md, 0.25rem);
+	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
+}
+
+.ObFieldFilterPanel-values {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+	margin: 0;
+	padding: var(--ds-size-1, 0.25rem);
+	overflow-y: auto;
+	list-style: none;
+}
+
+.ObFieldFilterPanel-value {
+	padding-inline: var(--ds-size-1, 0.25rem);
+}
+
+.ObFieldFilterPanel-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--ds-size-4, 1rem);
+}
+
+.ObFieldFilterPanel-error {
+	margin: 0;
+	color: var(--ds-color-danger-text-default);
+}
+
+.ObFieldFilterPanel-hint {
+	margin: 0;
+	flex: 0 0 auto;
+	font-size: var(--ds-font-size-1, 0.75rem);
+	color: var(--ds-color-neutral-text-subtle, #68707c);
+}
+
+.ObFieldFilterPanel-actions {
+	display: flex;
+	flex: 0 0 auto;
+	gap: var(--ds-size-2, 0.5rem);
+	justify-content: flex-end;
+}