mirror of
https://github.com/imfing/hextra.git
synced 2025-05-13 04:06:31 -04:00
5c7303bee7
* feat: add prefix to tailwind css classes * fix: remove unnecessary prefixes * fix: add missing prefix in other places * chore: regenerate hugo_stats.json * chore: run `npm run build:css` * chore: add `hx-` prefix to _index.fa.md * fix: lang switcher display issue * fix: add `hx-` prefix to showcase/index.fa.md * fix: lang switch param mistake
27 lines
1.9 KiB
HTML
27 lines
1.9 KiB
HTML
{{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
|
|
|
|
|
|
<div class="search-wrapper hx-relative md:hx-w-64">
|
|
<div class="hx-relative hx-flex hx-items-center hx-text-gray-900 contrast-more:hx-text-gray-800 dark:hx-text-gray-300 contrast-more:dark:hx-text-gray-300">
|
|
<input
|
|
placeholder="{{ $placeholder }}"
|
|
class="search-input hx-block hx-w-full hx-appearance-none hx-rounded-lg hx-px-3 hx-py-2 hx-transition-colors hx-text-base hx-leading-tight md:hx-text-sm hx-bg-black/[.05] dark:hx-bg-gray-50/10 focus:hx-bg-white dark:focus:hx-bg-dark placeholder:hx-text-gray-500 dark:placeholder:hx-text-gray-400 contrast-more:hx-border contrast-more:hx-border-current"
|
|
type="search"
|
|
value=""
|
|
spellcheck="false"
|
|
/>
|
|
<kbd
|
|
class="hx-absolute hx-my-1.5 hx-select-none ltr:hx-right-1.5 rtl:hx-left-1.5 hx-h-5 hx-rounded hx-bg-white hx-px-1.5 hx-font-mono hx-text-[10px] hx-font-medium hx-text-gray-500 hx-border dark:hx-border-gray-100/20 dark:hx-bg-dark/50 contrast-more:hx-border-current contrast-more:hx-text-current contrast-more:dark:hx-border-current hx-items-center hx-gap-1 hx-transition-opacity hx-pointer-events-none hx-hidden sm:hx-flex"
|
|
>
|
|
CTRL K
|
|
</kbd>
|
|
</div>
|
|
|
|
<div>
|
|
<ul
|
|
class="search-results hextra-scrollbar hx-hidden hx-border hx-border-gray-200 hx-bg-white hx-text-gray-100 dark:hx-border-neutral-800 dark:hx-bg-neutral-900 hx-absolute hx-top-full hx-z-20 hx-mt-2 hx-overflow-auto hx-overscroll-contain hx-rounded-xl hx-py-2.5 hx-shadow-xl hx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:hx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx-inset-x-0 ltr:md:hx-left-auto rtl:md:hx-right-auto contrast-more:hx-border contrast-more:hx-border-gray-900 contrast-more:dark:hx-border-gray-50 hx-w-screen hx-min-h-[100px] hx-max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
|
|
style="transition: max-height 0.2s ease 0s;"
|
|
></ul>
|
|
</div>
|
|
</div>
|