style pass search input
MODIFY
src/assets/global.pcss
src/assets/global.pcss
@@ -50,6 +50,9 @@ html {
--xx-small: 2.4rem;
--micro: 1.6rem;
--macro: 0.8rem;
+
+ --shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.08);
+
}
body {

MODIFY
src/components/docs/search.svelte
src/components/docs/search.svelte
};
</script>
-<style>
+<style lang="scss">
input {
- background: url("/mag-glass.svg") 10px center / 20px 20px no-repeat
- rgb(255, 255, 255);
+ background: url("/mag-glass.svg") 10px center / 24px 24px no-repeat
+ var(--white);
+ box-shadow: var(--shadow);
+ height: var(--small);
+ font-size: var(--p-medium);
}
:global(.algolia-autocomplete) {
type="search"
placeholder="Search"
id={docSearchInputSelector}
- class="block w-full pl-10 pr-3 py-2 border border-transparent rounded-md leading-5 bg-white text-gray-600 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900 sm:text-sm"
+ class="block w-full pl-16 pr-3 py-4 border border-transparent rounded-3xl leading-5 bg-white text-gray-600 placeholder-gray-500 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900"
/>
</div>
</div>

style pass search input