Fix no icon fields input and label shift

This commit is contained in:
Alice Gaudon 2021-11-08 01:44:26 +01:00
parent eefb6e0dac
commit 7d2b088635

View File

@ -104,7 +104,7 @@
label { label {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
left: 68px; left: 8px;
top: 22px; top: 22px;
user-select: none; user-select: none;
font-size: 16px; font-size: 16px;
@ -116,6 +116,10 @@
cursor: text; cursor: text;
} }
.has-icon label {
left: 68px;
}
&.disabled { &.disabled {
opacity: 0.5; opacity: 0.5;
@ -150,12 +154,24 @@
.textarea-growing-wrapper, .textarea-growing-wrapper,
.textarea-growing-wrapper:after { .textarea-growing-wrapper:after {
display: block; display: block;
margin-left: -60px; padding: 32px 8px 8px;
padding: 32px 8px 8px 68px;
width: 100%; width: 100%;
height: 60px; height: 60px;
} }
.has-icon {
input,
select,
select,
textarea,
.form-display,
.textarea-growing-wrapper,
.textarea-growing-wrapper:after {
margin-left: -60px;
padding-left: 68px;
}
}
select { select {
position: relative; position: relative;
-webkit-appearance: none; -webkit-appearance: none;
@ -345,7 +361,7 @@
class:file={type === 'file'} class:file={type === 'file'}
class:empty={value === ''} class:empty={value === ''}
class:disabled={Object.keys($$restProps).indexOf('disabled') >= 0}> class:disabled={Object.keys($$restProps).indexOf('disabled') >= 0}>
<div class="control" on:click={focusInput}> <div class="control" class:has-icon={icon} on:click={focusInput}>
{#if icon} {#if icon}
<Icon name={icon}/> <Icon name={icon}/>
{/if} {/if}