Update readonly and disabled date pickers to not show calendar icons
This commit is contained in:
parent
ed23d08a13
commit
5960a37128
|
@ -23,8 +23,8 @@
|
||||||
bind:this={anchor}
|
bind:this={anchor}
|
||||||
class:is-disabled={disabled || readonly}
|
class:is-disabled={disabled || readonly}
|
||||||
class:is-invalid={!!error}
|
class:is-invalid={!!error}
|
||||||
class="spectrum-InputGroup spectrum-Datepicker"
|
|
||||||
class:is-focused={focused}
|
class:is-focused={focused}
|
||||||
|
class="spectrum-InputGroup spectrum-Datepicker"
|
||||||
aria-readonly={readonly}
|
aria-readonly={readonly}
|
||||||
aria-required="false"
|
aria-required="false"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
|
@ -56,15 +56,16 @@
|
||||||
value={displayValue}
|
value={displayValue}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{#if !disabled && !readonly}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
|
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
class:is-disabled={disabled}
|
|
||||||
class:is-invalid={!!error}
|
class:is-invalid={!!error}
|
||||||
>
|
>
|
||||||
<Icon name={icon} />
|
<Icon name={icon} />
|
||||||
</button>
|
</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -85,4 +86,9 @@
|
||||||
.is-disabled {
|
.is-disabled {
|
||||||
pointer-events: none !important;
|
pointer-events: none !important;
|
||||||
}
|
}
|
||||||
|
input:read-only {
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-top-right-radius: var(--spectrum-textfield-border-radius);
|
||||||
|
border-bottom-right-radius: var(--spectrum-textfield-border-radius);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue