Fix some issues with dropzone height and ensure field alignment settings are ignored unless used inside a form block
This commit is contained in:
parent
77cd723315
commit
e2c2f5e2a6
|
@ -384,7 +384,7 @@
|
||||||
}
|
}
|
||||||
.compact .placeholder,
|
.compact .placeholder,
|
||||||
.compact img {
|
.compact img {
|
||||||
margin: 10px 16px;
|
margin: 8px 16px;
|
||||||
}
|
}
|
||||||
.compact img {
|
.compact img {
|
||||||
height: 90px;
|
height: 90px;
|
||||||
|
@ -454,6 +454,12 @@
|
||||||
color: var(--red);
|
color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spectrum-Dropzone {
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
.compact .spectrum-Dropzone {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
.spectrum-Dropzone.disabled {
|
.spectrum-Dropzone.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: var(--spectrum-global-color-gray-200);
|
background-color: var(--spectrum-global-color-gray-200);
|
||||||
|
@ -461,10 +467,6 @@
|
||||||
.disabled .spectrum-Heading--sizeL {
|
.disabled .spectrum-Heading--sizeL {
|
||||||
color: var(--spectrum-alias-text-color-disabled);
|
color: var(--spectrum-alias-text-color-disabled);
|
||||||
}
|
}
|
||||||
.compact .spectrum-Dropzone {
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
.compact .spectrum-IllustratedMessage-description {
|
.compact .spectrum-IllustratedMessage-description {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -475,7 +477,6 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -233,7 +233,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#key fields}
|
{#key fields}
|
||||||
<BlockComponent type="container">
|
<BlockComponent type="container">
|
||||||
<div class="fields" class:mobile={$context.device.mobile}>
|
<div class="form-block fields" class:mobile={$context.device.mobile}>
|
||||||
{#each fields as field, idx}
|
{#each fields as field, idx}
|
||||||
{#if getComponentForField(field) && field.active}
|
{#if getComponentForField(field) && field.active}
|
||||||
<BlockComponent
|
<BlockComponent
|
||||||
|
|
|
@ -79,7 +79,6 @@
|
||||||
bind:fieldApi
|
bind:fieldApi
|
||||||
defaultValue={[]}
|
defaultValue={[]}
|
||||||
>
|
>
|
||||||
<div class="minHeightWrapper">
|
|
||||||
{#if fieldState}
|
{#if fieldState}
|
||||||
<CoreDropzone
|
<CoreDropzone
|
||||||
value={fieldState.value}
|
value={fieldState.value}
|
||||||
|
@ -95,11 +94,4 @@
|
||||||
{compact}
|
{compact}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<style>
|
|
||||||
.minHeightWrapper {
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -102,13 +102,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.spectrum-Form-item.span-2 {
|
:global(.form-block .spectrum-Form-item.span-2) {
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
.spectrum-Form-item.span-3 {
|
:global(.form-block .spectrum-Form-item.span-3) {
|
||||||
grid-column: span 3;
|
grid-column: span 3;
|
||||||
}
|
}
|
||||||
.spectrum-Form-item.span-6 {
|
:global(.form-block .spectrum-Form-item.span-6) {
|
||||||
grid-column: span 6;
|
grid-column: span 6;
|
||||||
}
|
}
|
||||||
.spectrum-Form-item.above {
|
.spectrum-Form-item.above {
|
||||||
|
|
Loading…
Reference in New Issue