mirror of
https://github.com/CoreyGinnivan/system-uicons.git
synced 2024-06-15 20:25:00 +02:00
Made header sticky
This commit is contained in:
parent
9ce75f728f
commit
f5383e47e2
125
src/index.html
125
src/index.html
|
@ -37,73 +37,68 @@
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
|
class="flex flex-1 w-full py-4 focus:outline-none placeholder-gray-400 appearance-none text-black focus:text-black tracking-tighter text-xl lg:text-3xl xl:text-5xl"
|
||||||
/>
|
/>
|
||||||
<div
|
</div>
|
||||||
class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white pt-4"
|
<div
|
||||||
|
class="flex flex-col space-y-4 md:space-y-0 md:flex-row border-t border-gray-300 bg-white pt-4 px-8 sticky top-0"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="inline-flex items-center cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
|
||||||
>
|
>
|
||||||
<label
|
<input
|
||||||
class="inline-flex items-center cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
|
type="radio"
|
||||||
>
|
class="form-radio"
|
||||||
<input
|
name="clickType"
|
||||||
type="radio"
|
value="copy"
|
||||||
class="form-radio"
|
checked
|
||||||
name="clickType"
|
/>
|
||||||
value="copy"
|
<span class="ml-2">Copy SVG Code</span>
|
||||||
checked
|
</label>
|
||||||
/>
|
<label
|
||||||
<span class="ml-2">Copy SVG Code</span>
|
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
|
||||||
</label>
|
>
|
||||||
<label
|
<input type="radio" class="form-radio" name="clickType" value="link" />
|
||||||
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
|
<span class="ml-2"><img/> Link</span>
|
||||||
>
|
</label>
|
||||||
<input
|
<label
|
||||||
type="radio"
|
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
|
||||||
class="form-radio"
|
>
|
||||||
name="clickType"
|
<input
|
||||||
value="link"
|
type="radio"
|
||||||
/>
|
class="form-radio"
|
||||||
<span class="ml-2"><img/> Link</span>
|
name="clickType"
|
||||||
</label>
|
value="download"
|
||||||
<label
|
/>
|
||||||
class="inline-flex items-center md:ml-6 cursor-pointer rounded px-2 hover:bg-gray-900 hover:text-white"
|
<span class="ml-2">Download SVGs</span>
|
||||||
>
|
</label>
|
||||||
<input
|
<button
|
||||||
type="radio"
|
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full md:w-auto"
|
||||||
class="form-radio"
|
>
|
||||||
name="clickType"
|
<span class="mr-4">
|
||||||
value="download"
|
<svg
|
||||||
/>
|
height="21"
|
||||||
<span class="ml-2">Download SVGs</span>
|
viewBox="0 0 21 21"
|
||||||
</label>
|
width="21"
|
||||||
<button
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="flex flex-row items-center ml-auto p-3 rounded bg-black text-white hover:bg-gray-900 w-full md:w-auto"
|
>
|
||||||
>
|
<g
|
||||||
<span class="mr-4">
|
fill="none"
|
||||||
<svg
|
fill-rule="evenodd"
|
||||||
height="21"
|
stroke="currentcolor"
|
||||||
viewBox="0 0 21 21"
|
stroke-linecap="round"
|
||||||
width="21"
|
stroke-linejoin="round"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
transform="translate(4 3)"
|
||||||
>
|
>
|
||||||
<g
|
<path
|
||||||
fill="none"
|
d="m9.221 4.716.165 5.821-5.792-.135"
|
||||||
fill-rule="evenodd"
|
transform="matrix(-.70710678 .70710678 .70710678 .70710678 5.685139 -2.354861)"
|
||||||
stroke="currentcolor"
|
/>
|
||||||
stroke-linecap="round"
|
<path d="m6.5.5v11" />
|
||||||
stroke-linejoin="round"
|
<path d="m.5 14.5h12" />
|
||||||
transform="translate(4 3)"
|
</g>
|
||||||
>
|
</svg>
|
||||||
<path
|
</span>
|
||||||
d="m9.221 4.716.165 5.821-5.792-.135"
|
Download All SVGs
|
||||||
transform="matrix(-.70710678 .70710678 .70710678 .70710678 5.685139 -2.354861)"
|
</button>
|
||||||
/>
|
|
||||||
<path d="m6.5.5v11" />
|
|
||||||
<path d="m.5 14.5h12" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
Download All SVGs
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-4"
|
class="p-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-4"
|
||||||
|
|
Loading…
Reference in a new issue