fix DetailRow styling for form controls
This commit is contained in:
parent
f56272c51c
commit
505f209fae
1 changed files with 11 additions and 2 deletions
|
|
@ -16,7 +16,7 @@
|
||||||
let { label, value, children, noHover = false, noPadding = false, compact = false }: Props = $props()
|
let { label, value, children, noHover = false, noPadding = false, compact = false }: Props = $props()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="detail-row" class:no-hover={noHover} class:no-padding={noPadding} class:compact>
|
<div class="detail-row" class:no-hover={noHover} class:no-padding={noPadding} class:compact class:has-control={children}>
|
||||||
<span class="label">{label}</span>
|
<span class="label">{label}</span>
|
||||||
<span class="value">
|
<span class="value">
|
||||||
{#if children}
|
{#if children}
|
||||||
|
|
@ -60,13 +60,22 @@
|
||||||
.value {
|
.value {
|
||||||
font-size: typography.$font-regular;
|
font-size: typography.$font-regular;
|
||||||
color: var(--text-primary, colors.$grey-10);
|
color: var(--text-primary, colors.$grey-10);
|
||||||
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Static value display (no children snippet)
|
||||||
|
&:not(.has-control) .value {
|
||||||
font-weight: typography.$medium;
|
font-weight: typography.$medium;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
min-width: 180px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.compact .value {
|
&.compact .value {
|
||||||
min-width: unset;
|
min-width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Select controls inside DetailRow should have consistent width
|
||||||
|
.value :global([data-select-trigger]) {
|
||||||
|
min-width: 192px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue