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
1 changed files with 20 additions and 4 deletions

View File

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