owlboard-svelte/src/lib/islands/input-island.svelte

41 lines
1.2 KiB
Svelte
Raw Normal View History

2023-06-15 18:19:23 +01:00
<script>
import Island from "$lib/islands/island.svelte";
export let variables = {
title: "Uninitialised",
action: "/",
placeholder: "Uninitialised",
queryName: "uninitiailsed"
};
</script>
<form action={variables.action}>
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
<br>
<button class="form-button" type="submit">Submit</button>
</form>
<style>
.form-input {
width: 75%;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50px;
border: none;
text-align: center;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.form-button {
width: 50%;
margin-bottom: 5px;
margin-top: 5px;
border: none;
border-radius: 20px;
padding: 5px;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
background-color: var(--main-bg-color);
color: var(--link-color);
}
</style>