48 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			Svelte
		
	
	
	
	
	
			
		
		
	
	
			48 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			Svelte
		
	
	
	
	
	
| <script lang="ts">
 | |
|   import Island from '$lib/islands/island.svelte';
 | |
|   export let variables = {
 | |
|     title: 'Uninitialised',
 | |
|     action: '/',
 | |
|     placeholder: 'Uninitialised',
 | |
|     queryName: 'uninitiailsed'
 | |
|   };
 | |
| </script>
 | |
| 
 | |
| <Island {variables}>
 | |
|   <form action={variables.action}>
 | |
|     <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off" />
 | |
|     <br />
 | |
|     <button type="submit">Submit</button>
 | |
|   </form>
 | |
| </Island>
 | |
| 
 | |
| <style>
 | |
|   .form-input {
 | |
|     width: 75%;
 | |
|     height: 32px;
 | |
|     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;
 | |
|     text-transform: uppercase;
 | |
|     font-size: 15px;
 | |
|     box-shadow: var(--box-shadow);
 | |
|   }
 | |
|   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(--island-button-color);
 | |
|     color: var(--island-link-color);
 | |
|     box-shadow: var(--box-shadow);
 | |
|   }
 | |
| </style>
 |