@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/grid/index.css

@@ -1,245 +1,245 @@
-.AfGrid-root {
-	height: 100%;
-}
-
-.AfGrid-loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-}
-
-.AfGrid-toolbar {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--ds-size-1, 0.25rem);
-	align-items: center;
-	padding: var(--ds-size-1, 0.25rem);
-}
-
-.MuiDataGrid-headerFilterRow .MuiDataGrid-columnHeader.AfGrid-headerCell {
-	align-items: center;
-	padding-block: 0;
-	background-color: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
-
-	&:focus-within {
-		background-color: var(--ds-color-neutral-surface-hover, rgb(0 0 0 / 4%));
-	}
-}
-
-.AfGrid-errorOverlay {
-	position: absolute;
-	inset-inline: 0;
-	top: var(--DataGrid-topContainerHeight);
-	z-index: 10;
-	padding: var(--ds-size-1, 0.25rem) var(--ds-size-2, 0.5rem);
-	pointer-events: none;
-}
-
-.AfGrid-errorAlert {
-	display: flex;
-	gap: var(--ds-size-2, 0.5rem);
-	align-items: center;
-	justify-content: space-between;
-	pointer-events: auto;
-}
-
-.AfGrid-snackbar {
-	position: fixed;
-	top: var(--ds-size-4, 1rem);
-	left: 50%;
-	z-index: 1400;
-	transform: translateX(-50%);
-}
-
-.AfGrid-columnsPanelSearch {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-3, 0.75rem);
-}
-
-.AfGrid-columnsPanelList {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-1, 0.25rem);
-	max-height: 50vh;
-	margin: 0;
-	padding: 0;
-	overflow-y: auto;
-	list-style: none;
-}
-
-.AfGrid-columnsPanelItem {
-	padding: var(--ds-size-1, 0.25rem);
-	border-radius: var(--ds-border-radius-md, 4px);
-	cursor: grab;
-}
-
-.AfGrid-columnsPanelItem:hover {
-	background-color: var(--ds-color-neutral-surface-hover, rgb(0 0 0 / 4%));
-}
-
-.AfGrid-columnsPanelActions {
-	display: flex;
-	gap: var(--ds-size-2, 0.5rem);
-	justify-content: flex-end;
-}
-
-/* Header filters */
-
-/*
- * The header filter row is short, so the input drops the border radius and any
- * vertical padding and fills the cell instead.
- *
- * The height has to be clamped to the cell. Designsystemet gives the input a
- * min-height taller than the row MUI reserves, and a cell that grows past that
- * stretches the row without MUI knowing — leaving the cells that hold no input
- * (unfilterable columns such as `actions`) short of the row they sit in.
- */
-.AfGrid-headerFilterInput.ObInputAdornments-root {
-	--obInputAdornments-padding: 0;
-	--obInputAdornments-gap: 0;
-
-	block-size: 100%;
-	min-block-size: 0;
-	background-color: transparent;
-	border-color: transparent;
-	border-radius: 0;
-}
-
-.AfGrid-headerFilterInput .ObInputAdornments-field {
-	min-block-size: 0;
-}
-
-.AfGrid-headerFilterInput.ObInputAdornments-root:hover:not(:focus-within) {
-	border-color: transparent;
-}
-
-.AfGrid-headerFilterInput .ObInputAdornments-field {
-	padding-inline: var(--ds-size-1, 0.25rem);
-	text-overflow: ellipsis;
-}
-
-/* Read-only cells show a summary, so the text cursor would be misleading */
-.AfGrid-headerFilterInput .ObInputAdornments-field:read-only {
-	cursor: pointer;
-	color: var(--ds-color-neutral-text-subtle, #68707c);
-}
-
-/*
- * The header filter row is denser than a normal form row, so the buttons and
- * their icons are stepped down from the default `sm` size.
- */
-.AfGrid-headerFilterInput .ds-button {
-	--dsc-button-size: var(--ds-size-7, 1.5rem);
-	--ds-icon-size: var(--ds-size-4, 1rem);
-
-	min-height: 0;
-	padding: 0;
-}
-
-/* The funnel is highlighted while the column has criteria, as in the toolbar */
-.AfGrid-headerFilterButton[data-active] {
-	--dsc-button-color: var(--ds-color-accent-base-default);
-	--dsc-button-color--hover: var(--ds-color-accent-base-hover);
-}
-
-.AfGrid-headerFilterEmpty {
-	display: block;
-	inline-size: 100%;
-	block-size: 100%;
-}
-
-/*
- * The panel is a native popover, so it renders in the top layer and is not
- * clipped by the grid's own overflow. `display` must stay scoped to
- * `:popover-open`, or it overrides the user agent rule that hides a closed
- * popover and the panel is always visible.
- */
-.AfGrid-headerFilterPanel.ds-popover {
-	--dsc-popover-max-width: none;
-	--dsc-popover-padding: var(--ds-size-3, 0.75rem);
-
-	inline-size: 22rem;
-	max-inline-size: 90vw;
-	max-block-size: 80vh;
-
-	/*
-	 * Tall enough for the criteria, the distinct list at its minimum and the
-	 * truncation hint, without the panel having to scroll. At 26rem the hint and
-	 * the buttons below it did not fit.
-	 */
-	block-size: 30rem;
-}
-
-/*
- * A column with many distinct values needs a taller list than one with a
- * handful, so the panel is resizable and the panel body follows its height.
- * `resize` needs a non-visible overflow to take effect.
- */
-.AfGrid-headerFilterPanel.ds-popover:popover-open {
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-3, 0.75rem);
-	min-inline-size: 18rem;
-	min-block-size: 16rem;
-	overflow: auto;
-	resize: both;
-}
-
-.AfGrid-headerFilterPanel .ObFieldFilterPanel-root {
-	flex: 1 1 auto;
-	min-block-size: 0;
-}
-
-/* New item row */
-
-/*
- * The new item row is a pinned row that shows an overlay text until it is
- * edited. The text comes from the `--AfGrid-newItemRowText` custom property the
- * grid root sets, so it is localized without an extra DOM node. In view mode the
- * cell contents are hidden rather than removed, so keyboard focus still lands
- * on a cell and a double-click or keypress starts editing as on any row.
- */
-.MuiDataGrid-row.AfGrid-newItemRow {
-	position: relative;
-}
-
-.MuiDataGrid-row.AfGrid-newItemRow:not(.MuiDataGrid-row--editing) .MuiDataGrid-cell > * {
-	visibility: hidden;
-}
-
-.MuiDataGrid-row.AfGrid-newItemRow:not(.MuiDataGrid-row--editing)::after {
-	content: var(--AfGrid-newItemRowText, "");
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	padding-inline: var(--ds-size-2, 0.5rem);
-	color: var(--ds-color-neutral-text-subtle, #68707c);
-	font-style: italic;
-	pointer-events: none;
-}
-
-/*
- * Links in a cell.
- *
- * The grid sets its own text colour on the cell, and an anchor inherits it, so a link to another
- * record renders as ordinary text and is only discoverable by hovering it. These give it the
- * brand colour and an underline the way a link anywhere else on the site has, without the app
- * having to style every cell that holds one.
- */
-.AfGrid-root .MuiDataGrid-cell a {
-	color: var(--ds-color-brand-text-default, #0062ba);
-	text-decoration: underline;
-	text-underline-offset: 0.15em;
-}
-
-.AfGrid-root .MuiDataGrid-cell a:hover {
-	color: var(--ds-color-brand-text-subtle, #00417d);
-}
-
-/* Action buttons render as anchors when a column links a row somewhere; they style themselves. */
-.AfGrid-root .MuiDataGrid-cell a.ds-button {
-	text-decoration: none;
-}
+.AfGrid-root {
+	height: 100%;
+}
+
+.AfGrid-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+
+.AfGrid-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--ds-size-1, 0.25rem);
+	align-items: center;
+	padding: var(--ds-size-1, 0.25rem);
+}
+
+.MuiDataGrid-headerFilterRow .MuiDataGrid-columnHeader.AfGrid-headerCell {
+	align-items: center;
+	padding-block: 0;
+	background-color: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));
+
+	&:focus-within {
+		background-color: var(--ds-color-neutral-surface-hover, rgb(0 0 0 / 4%));
+	}
+}
+
+.AfGrid-errorOverlay {
+	position: absolute;
+	inset-inline: 0;
+	top: var(--DataGrid-topContainerHeight);
+	z-index: 10;
+	padding: var(--ds-size-1, 0.25rem) var(--ds-size-2, 0.5rem);
+	pointer-events: none;
+}
+
+.AfGrid-errorAlert {
+	display: flex;
+	gap: var(--ds-size-2, 0.5rem);
+	align-items: center;
+	justify-content: space-between;
+	pointer-events: auto;
+}
+
+.AfGrid-snackbar {
+	position: fixed;
+	top: var(--ds-size-4, 1rem);
+	left: 50%;
+	z-index: 1400;
+	transform: translateX(-50%);
+}
+
+.AfGrid-columnsPanelSearch {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3, 0.75rem);
+}
+
+.AfGrid-columnsPanelList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-1, 0.25rem);
+	max-height: 50vh;
+	margin: 0;
+	padding: 0;
+	overflow-y: auto;
+	list-style: none;
+}
+
+.AfGrid-columnsPanelItem {
+	padding: var(--ds-size-1, 0.25rem);
+	border-radius: var(--ds-border-radius-md, 4px);
+	cursor: grab;
+}
+
+.AfGrid-columnsPanelItem:hover {
+	background-color: var(--ds-color-neutral-surface-hover, rgb(0 0 0 / 4%));
+}
+
+.AfGrid-columnsPanelActions {
+	display: flex;
+	gap: var(--ds-size-2, 0.5rem);
+	justify-content: flex-end;
+}
+
+/* Header filters */
+
+/*
+ * The header filter row is short, so the input drops the border radius and any
+ * vertical padding and fills the cell instead.
+ *
+ * The height has to be clamped to the cell. Designsystemet gives the input a
+ * min-height taller than the row MUI reserves, and a cell that grows past that
+ * stretches the row without MUI knowing — leaving the cells that hold no input
+ * (unfilterable columns such as `actions`) short of the row they sit in.
+ */
+.AfGrid-headerFilterInput.ObInputAdornments-root {
+	--obInputAdornments-padding: 0;
+	--obInputAdornments-gap: 0;
+
+	block-size: 100%;
+	min-block-size: 0;
+	background-color: transparent;
+	border-color: transparent;
+	border-radius: 0;
+}
+
+.AfGrid-headerFilterInput .ObInputAdornments-field {
+	min-block-size: 0;
+}
+
+.AfGrid-headerFilterInput.ObInputAdornments-root:hover:not(:focus-within) {
+	border-color: transparent;
+}
+
+.AfGrid-headerFilterInput .ObInputAdornments-field {
+	padding-inline: var(--ds-size-1, 0.25rem);
+	text-overflow: ellipsis;
+}
+
+/* Read-only cells show a summary, so the text cursor would be misleading */
+.AfGrid-headerFilterInput .ObInputAdornments-field:read-only {
+	cursor: pointer;
+	color: var(--ds-color-neutral-text-subtle, #68707c);
+}
+
+/*
+ * The header filter row is denser than a normal form row, so the buttons and
+ * their icons are stepped down from the default `sm` size.
+ */
+.AfGrid-headerFilterInput .ds-button {
+	--dsc-button-size: var(--ds-size-7, 1.5rem);
+	--ds-icon-size: var(--ds-size-4, 1rem);
+
+	min-height: 0;
+	padding: 0;
+}
+
+/* The funnel is highlighted while the column has criteria, as in the toolbar */
+.AfGrid-headerFilterButton[data-active] {
+	--dsc-button-color: var(--ds-color-accent-base-default);
+	--dsc-button-color--hover: var(--ds-color-accent-base-hover);
+}
+
+.AfGrid-headerFilterEmpty {
+	display: block;
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+/*
+ * The panel is a native popover, so it renders in the top layer and is not
+ * clipped by the grid's own overflow. `display` must stay scoped to
+ * `:popover-open`, or it overrides the user agent rule that hides a closed
+ * popover and the panel is always visible.
+ */
+.AfGrid-headerFilterPanel.ds-popover {
+	--dsc-popover-max-width: none;
+	--dsc-popover-padding: var(--ds-size-3, 0.75rem);
+
+	inline-size: 22rem;
+	max-inline-size: 90vw;
+	max-block-size: 80vh;
+
+	/*
+	 * Tall enough for the criteria, the distinct list at its minimum and the
+	 * truncation hint, without the panel having to scroll. At 26rem the hint and
+	 * the buttons below it did not fit.
+	 */
+	block-size: 30rem;
+}
+
+/*
+ * A column with many distinct values needs a taller list than one with a
+ * handful, so the panel is resizable and the panel body follows its height.
+ * `resize` needs a non-visible overflow to take effect.
+ */
+.AfGrid-headerFilterPanel.ds-popover:popover-open {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3, 0.75rem);
+	min-inline-size: 18rem;
+	min-block-size: 16rem;
+	overflow: auto;
+	resize: both;
+}
+
+.AfGrid-headerFilterPanel .ObFieldFilterPanel-root {
+	flex: 1 1 auto;
+	min-block-size: 0;
+}
+
+/* New item row */
+
+/*
+ * The new item row is a pinned row that shows an overlay text until it is
+ * edited. The text comes from the `--AfGrid-newItemRowText` custom property the
+ * grid root sets, so it is localized without an extra DOM node. In view mode the
+ * cell contents are hidden rather than removed, so keyboard focus still lands
+ * on a cell and a double-click or keypress starts editing as on any row.
+ */
+.MuiDataGrid-row.AfGrid-newItemRow {
+	position: relative;
+}
+
+.MuiDataGrid-row.AfGrid-newItemRow:not(.MuiDataGrid-row--editing) .MuiDataGrid-cell > * {
+	visibility: hidden;
+}
+
+.MuiDataGrid-row.AfGrid-newItemRow:not(.MuiDataGrid-row--editing)::after {
+	content: var(--AfGrid-newItemRowText, "");
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	padding-inline: var(--ds-size-2, 0.5rem);
+	color: var(--ds-color-neutral-text-subtle, #68707c);
+	font-style: italic;
+	pointer-events: none;
+}
+
+/*
+ * Links in a cell.
+ *
+ * The grid sets its own text colour on the cell, and an anchor inherits it, so a link to another
+ * record renders as ordinary text and is only discoverable by hovering it. These give it the
+ * brand colour and an underline the way a link anywhere else on the site has, without the app
+ * having to style every cell that holds one.
+ */
+.AfGrid-root .MuiDataGrid-cell a {
+	color: var(--ds-color-brand-text-default, #0062ba);
+	text-decoration: underline;
+	text-underline-offset: 0.15em;
+}
+
+.AfGrid-root .MuiDataGrid-cell a:hover {
+	color: var(--ds-color-brand-text-subtle, #00417d);
+}
+
+/* Action buttons render as anchors when a column links a row somewhere; they style themselves. */
+.AfGrid-root .MuiDataGrid-cell a.ds-button {
+	text-decoration: none;
+}