mirror of
https://github.com/CoreyGinnivan/system-uicons.git
synced 2024-06-15 20:25:00 +02:00
Style changes
This commit is contained in:
parent
bc905d3ca2
commit
2dfd68e09f
|
@ -38,10 +38,7 @@
|
||||||
property="twitter:image"
|
property="twitter:image"
|
||||||
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
content="https://systemuicons.com/images/ogp/systemuicons_banner.png"
|
||||||
/>
|
/>
|
||||||
<script
|
<script src="//unpkg.com/alpinejs" defer></script>
|
||||||
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"
|
|
||||||
defer
|
|
||||||
></script>
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/images/favicons/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/images/favicons/favicon.svg" />
|
||||||
<link
|
<link
|
||||||
rel="mask-icon"
|
rel="mask-icon"
|
||||||
|
@ -52,7 +49,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
class="flex flex-col min-h-screen font-mono leading-normal tracking-normal bg-white"
|
class="flex flex-col min-h-screen font-mono leading-normal tracking-normal bg-white"
|
||||||
x-data="loadIcons()"
|
x-data="loadIcons(), showBar"
|
||||||
>
|
>
|
||||||
<main class="flex-grow">
|
<main class="flex-grow">
|
||||||
<nav class="flex justify-between p-4 text-sm md:p-6 lg:p-8 md:text-base">
|
<nav class="flex justify-between p-4 text-sm md:p-6 lg:p-8 md:text-base">
|
||||||
|
@ -122,13 +119,15 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-100 md:space-y-0 md:flex-row md:px-6 lg:px-8"
|
class="sticky top-0 z-50 flex flex-col px-4 py-4 space-y-2 bg-white border-t border-gray-100 md:space-y-0 md:flex-row md:px-6 lg:px-8"
|
||||||
|
:class="{ 'shadow-xl duration-100' : showBar }"
|
||||||
|
@scroll.window="showBar = (window.pageYOffset > 20) ? true : false"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col p-1 space-x-0 space-y-1 bg-gray-200 rounded md:flex-row md:space-x-1 md:space-y-0"
|
class="flex flex-col p-1 space-x-0 space-y-1 bg-gray-200 rounded md:flex-row md:space-x-1 md:space-y-0"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm transition duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||||
:class="downloadType === 'copy-svg' ? 'bg-white shadow' : 'text-gray-600'"
|
:class="downloadType === 'copy-svg' ? 'bg-white shadow' : 'text-gray-600'"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
@ -169,7 +168,7 @@
|
||||||
<span class="whitespace-no-wrap">Copy SVG Code</span>
|
<span class="whitespace-no-wrap">Copy SVG Code</span>
|
||||||
</label>
|
</label>
|
||||||
<label
|
<label
|
||||||
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm transition duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
class="inline-flex flex-no-wrap items-center w-full h-full px-2 py-2 text-sm duration-200 rounded cursor-pointer lg:text-base hover:bg-gray-100 hover:text-black md:w-auto md:py-0"
|
||||||
:class="downloadType === 'copy-cdn' ? 'bg-white shadow' : 'text-gray-600'"
|
:class="downloadType === 'copy-cdn' ? 'bg-white shadow' : 'text-gray-600'"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
@ -278,7 +277,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-2 p-4 md:p-6 lg:p-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 divide-x divide-y divide-gray-300"
|
class="grid grid-cols-2 m-4 md:m-6 lg:m-8 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 divide-x divide-y divide-gray-200 border-r border-b border-solid border-gray-200"
|
||||||
>
|
>
|
||||||
<template x-for="(item, index) in filteredIcons" :key="index">
|
<template x-for="(item, index) in filteredIcons" :key="index">
|
||||||
<a
|
<a
|
||||||
|
@ -290,21 +289,20 @@
|
||||||
item.icon_path +
|
item.icon_path +
|
||||||
`.svg`"
|
`.svg`"
|
||||||
x-bind:download="downloadType === 'download-svg' && item.icon_name"
|
x-bind:download="downloadType === 'download-svg' && item.icon_name"
|
||||||
class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 transition duration-150 ease-in-out bg-white cursor-pointer group hover:shadow-xl hover:z-10 md:h-40"
|
class="relative flex flex-col items-center justify-center h-32 p-2 text-gray-700 duration-150 ease-in-out bg-white cursor-pointer group hover:z-10 hover:shadow-xl md:h-40"
|
||||||
@click="handleClick(item, downloadType, $event, $dispatch)"
|
@click="handleClick(item, downloadType, $event, $dispatch)"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<div
|
<div
|
||||||
role="alert"
|
role="alert"
|
||||||
x-show="copied === item.icon_name"
|
x-show="copied === item.icon_name"
|
||||||
x-on:show:toast.document="copied = $event.detail"
|
x-on:show:toast.document="copied = $event.detail"
|
||||||
x-cloak
|
x-cloak
|
||||||
class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded hover:border hover:border-black"
|
class="absolute top-0 left-0 right-0 z-50 px-2 py-1 mx-auto -mt-8 text-sm text-center text-white bg-black rounded hover:border-gray-900"
|
||||||
style="width: fit-content"
|
style="width: fit-content"
|
||||||
x-transition:enter="transition ease-out duration-200"
|
x-transition:enter="ease-out duration-200"
|
||||||
x-transition:enter-start="opacity-0 scale-90"
|
x-transition:enter-start="opacity-0 scale-90"
|
||||||
x-transition:enter-end="opacity-100 scale-100"
|
x-transition:enter-end="opacity-100 scale-100"
|
||||||
x-transition:leave="transition ease-in duration-500 "
|
x-transition:leave="ease-in duration-500 "
|
||||||
x-transition:leave-start="opacity-100 scale-100"
|
x-transition:leave-start="opacity-100 scale-100"
|
||||||
x-transition:leave-end="opacity-0 scale-90"
|
x-transition:leave-end="opacity-0 scale-90"
|
||||||
>
|
>
|
||||||
|
@ -318,27 +316,26 @@
|
||||||
><span>Copied SVG Code</span></template
|
><span>Copied SVG Code</span></template
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<img
|
<img
|
||||||
:src="`images/icons/` + item.icon_path + `.svg`"
|
:src="`images/icons/` + item.icon_path + `.svg`"
|
||||||
:alt="item.icon_name"
|
:alt="item.icon_name"
|
||||||
class="transition duration-200 group-hover:scale-200"
|
class="duration-200 group-hover:scale-200"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
<span class="hidden" x-cloak x-text="item.icon_keywords"></span>
|
||||||
<p
|
<p
|
||||||
class="mt-4 text-xs leading-none tracking-tight text-center text-gray-600 md:mt-8"
|
class=" absolute text-[11px] leading-snug text-left bottom-2 left-2 tracking-tight text-gray-400"
|
||||||
x-text="item.icon_name"
|
x-text="item.icon_name"
|
||||||
></p>
|
></p>
|
||||||
<span class="hidden" x-text="item.icon_keywords"></span>
|
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<div x-show="filteredIcons.length === 0" class="col-span-2">
|
|
||||||
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div x-show="filteredIcons.length === 0" class="w-full m-4 md:m-6 lg:m-8">
|
||||||
|
<h3 class="text-xl text-gray-500">No Matches Found</h3>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer
|
<footer
|
||||||
class="flex flex-col py-8 mx-8 space-y-4 text-gray-700 border-t border-gray-300 md:space-y-0 md:flex-row"
|
class="flex flex-col py-8 mx-8 space-y-4 text-gray-700 md:space-y-0 md:flex-row"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Project by
|
Project by
|
||||||
|
@ -411,6 +408,7 @@
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
var showBar = false;
|
||||||
</script>
|
</script>
|
||||||
<!-- Fathom - beautiful, simple website analytics -->
|
<!-- Fathom - beautiful, simple website analytics -->
|
||||||
<script
|
<script
|
||||||
|
|
Loading…
Reference in a new issue