ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

Fix Field textarea focus label move

Browse Source
This commit is contained in:
Alice Gaudon 2021-11-09 18:07:31 +01:00
parent 5cea1b866e
commit 6cd98929d3
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/views/utils/Field.svelte
View File

@ -74,6 +74,8 @@
function handleFileInput() { function handleFileInput() {
files = input.files; files = input.files;
} }
let focused = false;
</script> </script>
<style lang="scss"> <style lang="scss">
@ -139,7 +141,7 @@
outline-offset: 0; outline-offset: 0;
} }
&:not(.empty), select ~, [type="file"] ~, [type="color"] ~, :focus ~ { &:not(.empty), select ~, [type="file"] ~, [type="color"] ~, .focused ~, :focus ~ {
.sections label { .sections label {
top: 8px; top: 8px;
font-size: 14px; font-size: 14px;
@ -393,9 +395,11 @@
</select> </select>
<Icon name="chevron-down"/> <Icon name="chevron-down"/>
{:else if type === 'textarea'} {:else if type === 'textarea'}
<div class="textarea-growing-wrapper" data-value={value}> <div class="textarea-growing-wrapper" class:focused={focused} data-value={value}>
<textarea {name} id={fieldId} {value} {...$$restProps} bind:this={input} <textarea {name} id={fieldId} {value} {...$$restProps} bind:this={input}
on:input={handleInput}></textarea> on:input={handleInput}
on:focusin={() => focused = true}
on:focusout={() => focused = false}></textarea>
</div> </div>
{:else if type === 'checkbox'} {:else if type === 'checkbox'}
<input {type} {name} id={fieldId} checked={value === 'on'} {...$$restProps} bind:this={input}> <input {type} {name} id={fieldId} checked={value === 'on'} {...$$restProps} bind:this={input}>