opdavies/rebuilding-platformsh
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Highlight magnifying glass when searching

Browse source
This commit is contained in:
Oliver Davies 2019-04-24 00:33:52 +01:00
parent 82137cf464
commit 92824499c8
2 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -24,7 +24,7 @@
<div class="max-w-6xl mx-auto px-4 bg-charade py-3 px-5 -mt-8"> <div class="max-w-6xl mx-auto px-4 bg-charade py-3 px-5 -mt-8">
<div class="flex justify-between items-center -mx-4"> <div class="flex justify-between items-center -mx-4">
<div class="px-4 flex-1"> <div class="px-4 flex-1">
<form action="" class="flex flex-row-reverse items-center"> <form action="" class="search-form flex flex-row-reverse items-center">
<input class="w-full text-sm bg-inherit text-white focus:outline-none" type="text" placeholder="Search projects"> <input class="w-full text-sm bg-inherit text-white focus:outline-none" type="text" placeholder="Search projects">
<svg class="fill-current text-white h-4 w-4 mr-3 opacity-50" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><mask id="project-search-input-mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8 10.3L15.7 14.2C16 14.6 16 15.2 15.6 15.6C15.2 16 14.6 16 14.2 15.6L10.3 11.7C9.3 12.5 7.9 13 6.5 13C2.9 13 0 10.1 0 6.50005C0 2.90005 2.9 4.57764e-05 6.5 4.57764e-05C10.1 4.57764e-05 13 2.90005 13.1 6.50005C13.1 7.90005 12.6 9.20005 11.8 10.3ZM2 6.50005C2 9.00005 4 11 6.5 11C9 11 11 9.00005 11 6.50005C11 4.00005 9 2.00005 6.5 2.00005C4 2.00005 2 4.00005 2 6.50005Z" fill="#32324c"></path></mask><g mask="url(#project-search-input-mask0)"><rect x="-4" y="-3.99995" width="24" height="24"></rect></g></svg> <svg class="fill-current text-white h-4 w-4 mr-3 opacity-50" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><mask id="project-search-input-mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8 10.3L15.7 14.2C16 14.6 16 15.2 15.6 15.6C15.2 16 14.6 16 14.2 15.6L10.3 11.7C9.3 12.5 7.9 13 6.5 13C2.9 13 0 10.1 0 6.50005C0 2.90005 2.9 4.57764e-05 6.5 4.57764e-05C10.1 4.57764e-05 13 2.90005 13.1 6.50005C13.1 7.90005 12.6 9.20005 11.8 10.3ZM2 6.50005C2 9.00005 4 11 6.5 11C9 11 11 9.00005 11 6.50005C11 4.00005 9 2.00005 6.5 2.00005C4 2.00005 2 4.00005 2 6.50005Z" fill="#32324c"></path></mask><g mask="url(#project-search-input-mask0)"><rect x="-4" y="-3.99995" width="24" height="24"></rect></g></svg>
</form> </form>

6
src/css/app.css
View file

@ -2,4 +2,10 @@
@tailwind components; @tailwind components;
.search-form {
> input:focus + svg {
@apply opacity-100
}
}
@tailwind utilities; @tailwind utilities;