@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/filter/FilterEditor.css

@@ -1,231 +1,231 @@
-.ObFilterEditor-root {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-2);
-	min-block-size: 0;
-}
-
-/*
- * The conditions scroll, the generated filter string does not, so it stays in
- * view at the foot of the editor. The flex basis keeps the scroll area usable
- * when the editor is short, as on a phone, but — unlike a minimum height — it
- * still lets the editor shrink when it shares a fixed height with content below
- * it, which would otherwise overflow and overlap that content.
- */
-.ObFilterEditor-body {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-2);
-	flex: 1 1 min(16rem, 50dvh);
-	min-block-size: 0;
-	overflow: auto;
-}
-
-.ObFilterEditor-filterString {
-	flex: 0 0 auto;
-}
-
-.ObFilterEditor-intro {
-	margin: 0;
-	color: var(--ds-color-neutral-text-subtle);
-	font-size: var(--ds-font-size-2);
-}
-
-.ObFilterEditor-groups {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-3);
-}
-
-.ObFilterEditor-group {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-2);
-}
-
-/*
- * The border is drawn around the conditions only, not the group header, and the
- * whole box is indented so the header reads as owning the conditions below it
- * rather than as a sibling of the first one.
- */
-.ObFilterEditor-groupItems {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-2);
-
-	margin-inline-start: var(--ds-size-4);
-	padding: var(--ds-size-2);
-	border: 1px solid var(--ds-color-neutral-border-subtle);
-	border-radius: var(--ds-border-radius-md);
-}
-
-/* Nested groups are tinted so the tree structure is readable. */
-.ObFilterEditor-groupItems .ObFilterEditor-groupItems {
-	background-color: var(--ds-color-neutral-surface-tinted);
-}
-
-.ObFilterEditor-groupHeader {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-	flex-wrap: wrap;
-}
-
-.ObFilterEditor-groupButton svg {
-	flex: 0 0 auto;
-}
-
-/*
- * The group buttons do not fit next to the operator select on a phone, so only
- * their icon is shown. `aria-label` carries the name either way.
- */
-@media (width < 40rem) {
-	.ObFilterEditor-groupButtonLabel {
-		display: none;
-	}
-
-	.ObFilterEditor-groupItems {
-		margin-inline-start: var(--ds-size-2);
-	}
-}
-
-.ObFilterEditor-groupMode {
-	flex: 0 0 auto;
-	width: auto;
-	min-width: 6rem;
-}
-
-.ObFilterEditor-groupLabel {
-	font-weight: 600;
-	font-size: var(--ds-font-size-2);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--ds-color-neutral-text-subtle);
-}
-
-.ObFilterEditor-row {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-	flex-wrap: wrap;
-}
-
-/*
- * On narrow viewports the parts of a condition wrap onto several lines, which
- * makes neighbouring conditions run together. Separate them with extra spacing
- * and a rule so it stays obvious where one condition ends and the next begins.
- */
-@media (width < 40rem) {
-	.ObFilterEditor-row {
-		gap: var(--ds-size-3);
-		padding-block-end: var(--ds-size-3);
-	}
-
-	.ObFilterEditor-row:not(:last-child) {
-		border-block-end: 1px solid var(--ds-color-neutral-border-subtle);
-	}
-}
-
-.ObFilterEditor-field {
-	flex: 1 1 12rem;
-	min-width: 10rem;
-}
-
-.ObFilterEditor-operator {
-	flex: 0 1 12rem;
-	min-width: 8rem;
-}
-
-.ObFilterEditor-valueCell {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-1);
-	flex: 2 1 14rem;
-	min-width: 10rem;
-}
-
-.ObFilterEditor-value {
-	flex: 1 1 auto;
-	min-width: 0;
-}
-
-.ObFilterEditor-pair {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-	flex: 1 1 auto;
-	min-width: 0;
-}
-
-.ObFilterEditor-pairSeparator {
-	flex: 0 0 auto;
-	color: var(--ds-color-neutral-text-subtle);
-	font-size: var(--ds-font-size-2);
-}
-
-.ObFilterEditor-chipList {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--ds-size-1);
-	flex: 1 1 auto;
-	min-width: 0;
-}
-
-.ObFilterEditor-chipListInput {
-	flex: 1 1 6rem;
-	min-width: 6rem;
-}
-
-.ObFilterEditor-iconButton {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex: 0 0 auto;
-
-	width: 2rem;
-	height: 2rem;
-	padding: 0;
-
-	background: none;
-	border: none;
-	border-radius: var(--ds-border-radius-md);
-	color: var(--ds-color-neutral-text-subtle);
-	cursor: pointer;
-
-	&:hover {
-		background-color: var(--ds-color-neutral-surface-hover);
-		color: var(--ds-color-neutral-text-default);
-	}
-
-	&[aria-pressed="true"] {
-		background-color: var(--ds-color-neutral-surface-active);
-		color: var(--ds-color-neutral-text-default);
-	}
-
-	svg {
-		width: 1.25rem;
-		height: 1.25rem;
-	}
-}
-
-.ObFilterEditor-filterString {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-1);
-}
-
-.ObFilterEditor-hint {
-	color: var(--ds-color-neutral-text-subtle);
-	font-size: var(--ds-font-size-1);
-}
-
-/*
- * The converting hint sits on the label row rather than under the input, so that
- * it appearing and disappearing does not shift the layout.
- */
-.ObFilterEditor-filterStringLabel {
-	display: flex;
-	align-items: baseline;
-	gap: var(--ds-size-2);
-}
+.ObFilterEditor-root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-2);
+	min-block-size: 0;
+}
+
+/*
+ * The conditions scroll, the generated filter string does not, so it stays in
+ * view at the foot of the editor. The flex basis keeps the scroll area usable
+ * when the editor is short, as on a phone, but — unlike a minimum height — it
+ * still lets the editor shrink when it shares a fixed height with content below
+ * it, which would otherwise overflow and overlap that content.
+ */
+.ObFilterEditor-body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-2);
+	flex: 1 1 min(16rem, 50dvh);
+	min-block-size: 0;
+	overflow: auto;
+}
+
+.ObFilterEditor-filterString {
+	flex: 0 0 auto;
+}
+
+.ObFilterEditor-intro {
+	margin: 0;
+	color: var(--ds-color-neutral-text-subtle);
+	font-size: var(--ds-font-size-2);
+}
+
+.ObFilterEditor-groups {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3);
+}
+
+.ObFilterEditor-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-2);
+}
+
+/*
+ * The border is drawn around the conditions only, not the group header, and the
+ * whole box is indented so the header reads as owning the conditions below it
+ * rather than as a sibling of the first one.
+ */
+.ObFilterEditor-groupItems {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-2);
+
+	margin-inline-start: var(--ds-size-4);
+	padding: var(--ds-size-2);
+	border: 1px solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+}
+
+/* Nested groups are tinted so the tree structure is readable. */
+.ObFilterEditor-groupItems .ObFilterEditor-groupItems {
+	background-color: var(--ds-color-neutral-surface-tinted);
+}
+
+.ObFilterEditor-groupHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	flex-wrap: wrap;
+}
+
+.ObFilterEditor-groupButton svg {
+	flex: 0 0 auto;
+}
+
+/*
+ * The group buttons do not fit next to the operator select on a phone, so only
+ * their icon is shown. `aria-label` carries the name either way.
+ */
+@media (width < 40rem) {
+	.ObFilterEditor-groupButtonLabel {
+		display: none;
+	}
+
+	.ObFilterEditor-groupItems {
+		margin-inline-start: var(--ds-size-2);
+	}
+}
+
+.ObFilterEditor-groupMode {
+	flex: 0 0 auto;
+	width: auto;
+	min-width: 6rem;
+}
+
+.ObFilterEditor-groupLabel {
+	font-weight: 600;
+	font-size: var(--ds-font-size-2);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--ds-color-neutral-text-subtle);
+}
+
+.ObFilterEditor-row {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	flex-wrap: wrap;
+}
+
+/*
+ * On narrow viewports the parts of a condition wrap onto several lines, which
+ * makes neighbouring conditions run together. Separate them with extra spacing
+ * and a rule so it stays obvious where one condition ends and the next begins.
+ */
+@media (width < 40rem) {
+	.ObFilterEditor-row {
+		gap: var(--ds-size-3);
+		padding-block-end: var(--ds-size-3);
+	}
+
+	.ObFilterEditor-row:not(:last-child) {
+		border-block-end: 1px solid var(--ds-color-neutral-border-subtle);
+	}
+}
+
+.ObFilterEditor-field {
+	flex: 1 1 12rem;
+	min-width: 10rem;
+}
+
+.ObFilterEditor-operator {
+	flex: 0 1 12rem;
+	min-width: 8rem;
+}
+
+.ObFilterEditor-valueCell {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1);
+	flex: 2 1 14rem;
+	min-width: 10rem;
+}
+
+.ObFilterEditor-value {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.ObFilterEditor-pair {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.ObFilterEditor-pairSeparator {
+	flex: 0 0 auto;
+	color: var(--ds-color-neutral-text-subtle);
+	font-size: var(--ds-font-size-2);
+}
+
+.ObFilterEditor-chipList {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--ds-size-1);
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.ObFilterEditor-chipListInput {
+	flex: 1 1 6rem;
+	min-width: 6rem;
+}
+
+.ObFilterEditor-iconButton {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 0 0 auto;
+
+	width: 2rem;
+	height: 2rem;
+	padding: 0;
+
+	background: none;
+	border: none;
+	border-radius: var(--ds-border-radius-md);
+	color: var(--ds-color-neutral-text-subtle);
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--ds-color-neutral-surface-hover);
+		color: var(--ds-color-neutral-text-default);
+	}
+
+	&[aria-pressed="true"] {
+		background-color: var(--ds-color-neutral-surface-active);
+		color: var(--ds-color-neutral-text-default);
+	}
+
+	svg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+}
+
+.ObFilterEditor-filterString {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1);
+}
+
+.ObFilterEditor-hint {
+	color: var(--ds-color-neutral-text-subtle);
+	font-size: var(--ds-font-size-1);
+}
+
+/*
+ * The converting hint sits on the label row rather than under the input, so that
+ * it appearing and disappearing does not shift the layout.
+ */
+.ObFilterEditor-filterStringLabel {
+	display: flex;
+	align-items: baseline;
+	gap: var(--ds-size-2);
+}