mirror of
https://github.com/danbulant/Portfolio
synced 2026-05-24 12:35:31 +00:00
feat: add person icon, fix telephone field styles, person icon for id field
This commit is contained in:
parent
9aa2a5aa67
commit
ce02649a06
3 changed files with 25 additions and 12 deletions
15
frontend/src/lib/components/icons/Person.svelte
Normal file
15
frontend/src/lib/components/icons/Person.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M19 21v-1.45c0-.977 0-1.465-.113-1.864a3 3 0 0 0-2.073-2.073c-.399-.113-.887-.113-1.864-.113h-6.9c-.977 0-1.465 0-1.864.113a3 3 0 0 0-2.073 2.073C4 18.085 4 18.573 4 19.55V21M16.2 7.06c0 2.245-1.88 4.065-4.2 4.065S7.8 9.305 7.8 7.06 9.68 2.996 12 2.996s4.2 1.82 4.2 4.064z"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
/></svg
|
||||
>
|
||||
|
||||
<style>
|
||||
path {
|
||||
@apply fill-sspsBlue stroke-sspsBlue;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 525 B |
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import Telephone from '../icons/Telephone.svelte';
|
||||
import Person from '../icons/Person.svelte';
|
||||
import TextField from './TextField.svelte';
|
||||
|
||||
export let placeholder: string = '';
|
||||
|
|
@ -13,17 +13,11 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<TextField
|
||||
bind:error
|
||||
bind:value
|
||||
on:keydown
|
||||
on:keyup
|
||||
on:change
|
||||
type="text"
|
||||
{placeholder}
|
||||
icon
|
||||
>
|
||||
<TextField bind:error bind:value on:keydown on:keyup on:change type="text" {placeholder} icon>
|
||||
<div slot="icon" class="flex items-center justify-center">
|
||||
<Telephone />
|
||||
<Person />
|
||||
</div>
|
||||
</TextField>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,3 +28,7 @@
|
|||
<Telephone />
|
||||
</div>
|
||||
</TextField>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in a new issue