fix(search): search input and results outline (#761)

This commit is contained in:
Ludovic Fernandez
2025-08-17 15:24:15 +02:00
committed by GitHub
parent 6613f94b75
commit 48bae073cb
5 changed files with 8 additions and 3 deletions

File diff suppressed because one or more lines are too long

View File

@@ -2,7 +2,7 @@
li { li {
@apply hx:mx-2.5 hx:break-words hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300; @apply hx:mx-2.5 hx:break-words hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300;
a { a {
@apply hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2; @apply hx:focus-visible:outline-none hx:focus:outline-none hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2;
} }
.hextra-search-title { .hextra-search-title {

View File

@@ -38,6 +38,10 @@ body {
--primary-lightness: 50%; --primary-lightness: 50%;
} }
@utility hextra-focus {
@apply hx:outline-none hx:ring-2 hx:ring-primary-200 hx:ring-offset-1 hx:ring-offset-primary-300 hx:dark:ring-primary-800 hx:dark:ring-offset-primary-700;
}
@import "./typography.css"; @import "./typography.css";
@import "./highlight.css"; @import "./highlight.css";
@import "./components/cards.css"; @import "./components/cards.css";

View File

@@ -334,6 +334,7 @@
"hx:flex-col", "hx:flex-col",
"hx:flex-wrap", "hx:flex-wrap",
"hx:focus:bg-white", "hx:focus:bg-white",
"hx:focus:hextra-focus",
"hx:focus:outline-hidden", "hx:focus:outline-hidden",
"hx:focus:ring-4", "hx:focus:ring-4",
"hx:focus:ring-primary-300", "hx:focus:ring-primary-300",

View File

@@ -5,7 +5,7 @@
<div class="hx:relative hx:flex hx:items-center hx:text-gray-900 hx:contrast-more:text-gray-800 hx:dark:text-gray-300 hx:contrast-more:dark:text-gray-300"> <div class="hx:relative hx:flex hx:items-center hx:text-gray-900 hx:contrast-more:text-gray-800 hx:dark:text-gray-300 hx:contrast-more:dark:text-gray-300">
<input <input
placeholder="{{ $placeholder }}" placeholder="{{ $placeholder }}"
class="hextra-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 hx:md:text-sm hx:bg-black/[.05] hx:dark:bg-gray-50/10 hx:focus:bg-white hx:dark:focus:bg-dark hx:placeholder:text-gray-500 hx:dark:placeholder:text-gray-400 hx:contrast-more:border hx:contrast-more:border-current" class="hextra-search-input hx:focus:hextra-focus 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 hx:md:text-sm hx:bg-black/[.05] hx:dark:bg-gray-50/10 hx:focus:bg-white hx:dark:focus:bg-dark hx:placeholder:text-gray-500 hx:dark:placeholder:text-gray-400 hx:contrast-more:border hx:contrast-more:border-current"
type="search" type="search"
value="" value=""
spellcheck="false" spellcheck="false"