mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-02 23:54:26 +02:00
101 lines
1.6 KiB
Svelte
101 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
export let title: string;
|
|
export let searchTerm: string | null;
|
|
export let searchTermFiltered: string | null;
|
|
import { fade } from 'svelte/transition';
|
|
import { quintOut } from 'svelte/easing';
|
|
|
|
function clear() {
|
|
searchTerm = null;
|
|
searchTermFiltered = null;
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<img src="../icons/search.svg" id="search" alt="Search" />
|
|
{#if searchTerm}
|
|
<img
|
|
src="../icons/close.svg"
|
|
id="clear"
|
|
alt="Clear"
|
|
on:click={clear}
|
|
on:keypress={clear}
|
|
transition:fade|local={{ easing: quintOut, duration: 250 }}
|
|
/>
|
|
{/if}
|
|
<input
|
|
type="text"
|
|
class:clear={searchTerm}
|
|
placeholder={title}
|
|
bind:value={searchTerm}
|
|
on:keyup
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
#search {
|
|
/* umm dont ask */
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 23px;
|
|
top: 52px;
|
|
height: 24px;
|
|
}
|
|
|
|
#clear {
|
|
position: absolute;
|
|
right: 42px;
|
|
top: 52px;
|
|
z-index: 1;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.clear {
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
input {
|
|
position: relative;
|
|
display: flex;
|
|
padding: 1rem 3rem;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--grey-three);
|
|
background-color: transparent;
|
|
color: var(--grey-five);
|
|
width: 100%;
|
|
}
|
|
input::placeholder {
|
|
color: var(--grey-eight);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
input:focus {
|
|
outline: 1px solid var(--accent-color);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#search {
|
|
left: 26px;
|
|
top: 38px;
|
|
}
|
|
|
|
#clear {
|
|
right: 26px;
|
|
top: 38px;
|
|
}
|
|
|
|
|
|
input {
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--grey-one);
|
|
}
|
|
|
|
input:focus {
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
</style>
|