deblan-mirror/system-uicons
1
0
Fork 0
mirror of https://github.com/CoreyGinnivan/system-uicons.git synced 2024-05-07 16:06:32 +02:00
Code Issues Releases Wiki Activity

Got shadow showing on scroll

Browse source
This commit is contained in:
Corey Ginnivan 2022-05-09 20:38:26 +08:00
parent 503f516050
commit a2ceaa46a4
2 changed files with 51 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/index.html
View file

@ -49,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="showBar: false, loadIcons()" x-data="loadIcons()"
> >
<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">
@ -120,8 +120,8 @@
</div> </div>
<div <div
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="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 }" :class="{ 'shadow-md duration-100' : showBar }"
@scroll.window="showBar = (window.pageYOffset > 20) ? true : false" @scroll.window="showBar = (window.pageYOffset > 450) ? 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"
@ -355,6 +355,7 @@
function loadIcons() { function loadIcons() {
return { return {
search: "", search: "",
showBar: false,
downloadType: "copy-svg", downloadType: "copy-svg",
myForData: sourceData, myForData: sourceData,
copied: false, copied: false,

71
src/js/data.js
View file

@ -47,22 +47,26 @@ var sourceData = [
{ {
icon_name: "Phone (Portrait)", icon_name: "Phone (Portrait)",
icon_path: "phone_portrait", icon_path: "phone_portrait",
icon_keywords: "iphone android phone portrait mobile talk device devices electronic tech", icon_keywords:
"iphone android phone portrait mobile talk device devices electronic tech",
}, },
{ {
icon_name: "Phone (Landscape)", icon_name: "Phone (Landscape)",
icon_path: "phone_landscape", icon_path: "phone_landscape",
icon_keywords: "iphone android phone landscape mobile talk device devices electronic tech", icon_keywords:
"iphone android phone landscape mobile talk device devices electronic tech",
}, },
{ {
icon_name: "Phone (Alt - Portrait)", icon_name: "Phone (Alt - Portrait)",
icon_path: "iphone_portrait", icon_path: "iphone_portrait",
icon_keywords: "iphone android phone portrait mobile talk device devices electronic tech", icon_keywords:
"iphone android phone portrait mobile talk device devices electronic tech",
}, },
{ {
icon_name: "Phone (Alt - Landscape)", icon_name: "Phone (Alt - Landscape)",
icon_path: "iphone_landscape", icon_path: "iphone_landscape",
icon_keywords: "iphone android phone landscape mobile talk device devices electronic tech", icon_keywords:
"iphone android phone landscape mobile talk device devices electronic tech",
}, },
{ {
icon_name: "Calendar", icon_name: "Calendar",
@ -87,7 +91,8 @@ var sourceData = [
{ {
icon_name: "Calendar (End)", icon_name: "Calendar (End)",
icon_path: "calendar_last_day", icon_path: "calendar_last_day",
icon_keywords: "calendar day month end last final year month date date time", icon_keywords:
"calendar day month end last final year month date date time",
}, },
{ {
icon_name: "Calendar (Week)", icon_name: "Calendar (Week)",
@ -217,12 +222,14 @@ var sourceData = [
{ {
icon_name: "Coffee", icon_name: "Coffee",
icon_path: "coffee", icon_path: "coffee",
icon_keywords: "coffee caffeine perk mug steam hot tea percolate drink cup wake", icon_keywords:
"coffee caffeine perk mug steam hot tea percolate drink cup wake",
}, },
{ {
icon_name: "Compass", icon_name: "Compass",
icon_path: "compass", icon_path: "compass",
icon_keywords: "compass safari direction wayfind find directions route navigation", icon_keywords:
"compass safari direction wayfind find directions route navigation",
}, },
{ {
icon_name: "Document", icon_name: "Document",
@ -277,7 +284,8 @@ var sourceData = [
{ {
icon_name: "Mail (New)", icon_name: "Mail (New)",
icon_path: "mail_new", icon_path: "mail_new",
icon_keywords: "mail new email add create send receive news communicate communication", icon_keywords:
"mail new email add create send receive news communicate communication",
}, },
{ {
icon_name: "Mail (Delete)", icon_name: "Mail (Delete)",
@ -567,12 +575,14 @@ var sourceData = [
{ {
icon_name: "Enter", icon_name: "Enter",
icon_path: "enter", icon_path: "enter",
icon_keywords: "enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout", icon_keywords:
"enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout",
}, },
{ {
icon_name: "Enter (Alt)", icon_name: "Enter (Alt)",
icon_path: "enter_alt", icon_path: "enter_alt",
icon_keywords: "enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout", icon_keywords:
"enter log in out exit sign sign-in sign-out 'sign out' 'sign in' 'log in' log out' login logout",
}, },
{ {
icon_name: "Inbox", icon_name: "Inbox",
@ -728,7 +738,7 @@ var sourceData = [
icon_name: "Trash (Alt)", icon_name: "Trash (Alt)",
icon_path: "trash_alt", icon_path: "trash_alt",
icon_keywords: "trash bin rubbish", icon_keywords: "trash bin rubbish",
}, },
{ {
icon_name: "Bell", icon_name: "Bell",
icon_path: "bell", icon_path: "bell",
@ -1643,7 +1653,8 @@ var sourceData = [
{ {
icon_name: "Globe", icon_name: "Globe",
icon_path: "globe", icon_path: "globe",
icon_keywords: "globe world countries country foreign nation earth planet global location", icon_keywords:
"globe world countries country foreign nation earth planet global location",
}, },
{ {
icon_name: "GPS", icon_name: "GPS",
@ -1703,7 +1714,8 @@ var sourceData = [
{ {
icon_name: "Heart (Remove)", icon_name: "Heart (Remove)",
icon_path: "heart_remove", icon_path: "heart_remove",
icon_keywords: "heart love connection favourite unfavourite favorite unfavorite like", icon_keywords:
"heart love connection favourite unfavourite favorite unfavorite like",
}, },
{ {
icon_name: "Home", icon_name: "Home",
@ -1748,7 +1760,8 @@ var sourceData = [
{ {
icon_name: "Lineweight", icon_name: "Lineweight",
icon_path: "lineweight", icon_path: "lineweight",
icon_keywords: "lineweight lines stroke weight thick thicc thickness text editing", icon_keywords:
"lineweight lines stroke weight thick thicc thickness text editing",
}, },
{ {
icon_name: "Loader", icon_name: "Loader",
@ -1813,27 +1826,32 @@ var sourceData = [
{ {
icon_name: "Panel (Bottom)", icon_name: "Panel (Bottom)",
icon_path: "panel_bottom", icon_path: "panel_bottom",
icon_keywords: "panel bottom component align view windows windowed window app", icon_keywords:
"panel bottom component align view windows windowed window app",
}, },
{ {
icon_name: "Panel (Center)", icon_name: "Panel (Center)",
icon_path: "panel_center", icon_path: "panel_center",
icon_keywords: "panel center component align view windows windowed window app", icon_keywords:
"panel center component align view windows windowed window app",
}, },
{ {
icon_name: "Panel (Left)", icon_name: "Panel (Left)",
icon_path: "panel_left", icon_path: "panel_left",
icon_keywords: "panel left component align view windows windowed window app", icon_keywords:
"panel left component align view windows windowed window app",
}, },
{ {
icon_name: "Panel (Right)", icon_name: "Panel (Right)",
icon_path: "panel_right", icon_path: "panel_right",
icon_keywords: "panel right component align view windows windowed window app", icon_keywords:
"panel right component align view windows windowed window app",
}, },
{ {
icon_name: "Panel (Sectioned)", icon_name: "Panel (Sectioned)",
icon_path: "panel_sectioned", icon_path: "panel_sectioned",
icon_keywords: "panel sectioned component align view windows windowed window app", icon_keywords:
"panel sectioned component align view windows windowed window app",
}, },
{ {
icon_name: "Paper Plane", icon_name: "Paper Plane",
@ -2023,7 +2041,8 @@ var sourceData = [
{ {
icon_name: "Translate", icon_name: "Translate",
icon_path: "translate", icon_path: "translate",
icon_keywords: "translate translation language support countries country speaking", icon_keywords:
"translate translation language support countries country speaking",
}, },
{ {
icon_name: "Trophy", icon_name: "Trophy",
@ -2073,22 +2092,26 @@ var sourceData = [
{ {
icon_name: "Window Collapse Left", icon_name: "Window Collapse Left",
icon_path: "window_collapse_left", icon_path: "window_collapse_left",
icon_keywords: "window collapse left app view component windows windowed collapse expand push", icon_keywords:
"window collapse left app view component windows windowed collapse expand push",
}, },
{ {
icon_name: "Window Collapse Right", icon_name: "Window Collapse Right",
icon_path: "window_collapse_right", icon_path: "window_collapse_right",
icon_keywords: "window collapse right app view component windows windowed collapse expand push", icon_keywords:
"window collapse right app view component windows windowed collapse expand push",
}, },
{ {
icon_name: "Window Content", icon_name: "Window Content",
icon_path: "window_content", icon_path: "window_content",
icon_keywords: "window collapse app view component windows windowed collapse text browser", icon_keywords:
"window collapse app view component windows windowed collapse text browser",
}, },
{ {
icon_name: "Window", icon_name: "Window",
icon_path: "window", icon_path: "window",
icon_keywords: "window collapse app view component windows windowed browser", icon_keywords:
"window collapse app view component windows windowed browser",
}, },
{ {
icon_name: "Wrap Back", icon_name: "Wrap Back",