mirror of
https://github.com/KevinMidboe/planetposen-frontend.git
synced 2025-10-29 13:10:12 +00:00
Kevin
8bb65dfc2e
* Increased padding on input elements * Increased max layout width from 1500 to 1800 * Address input should take 2 column of space * Updated order section with new design * Checkout gets a new layout with sidebar * Express checkout section * Increase font size at larger screen width * Environment example file * Resolved linting issues
62 lines
1.2 KiB
Svelte
62 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
export let id: string | null = null;
|
|
export let label: string;
|
|
export let value: string | number;
|
|
export let type = 'text';
|
|
export let name: string | null = null;
|
|
export let required = true;
|
|
export let autocomplete: string | null = null;
|
|
export let autocapitalize: string | null = null;
|
|
|
|
function typeAction(node: HTMLInputElement) {
|
|
node.type = type;
|
|
}
|
|
</script>
|
|
|
|
<label id="{id}" class="{required ? 'required' : null}">
|
|
<span>{label}</span>
|
|
<input
|
|
bind:value="{value}"
|
|
name="{name || id}"
|
|
use:typeAction
|
|
required="{required}"
|
|
autocomplete="{autocomplete}"
|
|
autocapitalize="{autocapitalize}"
|
|
enterkeyhint="next"
|
|
/>
|
|
</label>
|
|
|
|
<style lang="scss" module="scoped">
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
span {
|
|
margin-left: 2px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
&.required span::after {
|
|
content: '*';
|
|
color: #e02b27;
|
|
font-size: 1rem;
|
|
margin-left: 0.3rem;
|
|
}
|
|
}
|
|
|
|
input {
|
|
border: 2px solid grey;
|
|
border-radius: 0px;
|
|
padding: 0.7em;
|
|
font-size: 1em;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:valid {
|
|
border-color: var(--text-color);
|
|
}
|
|
}
|
|
</style>
|