hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add fading on top/bottom of the search results container

Browse Source
This commit is contained in:
daudix
2024-09-11 14:31:26 +03:00
parent e1febd5265
commit 91911cf4d2
3 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
sass/_nav.scss
View File

@ -411,23 +411,29 @@
}
}
#search-results {
#search-results-container {
-webkit-backdrop-filter: var(--blur);
display: none;
display: flex;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
flex-direction: column;
gap: 0.5rem;
backdrop-filter: var(--blur);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
border-radius: calc(var(--rounded-corner) + 0.5rem);
background-color: var(--nav-bg);
padding: 0.5rem;
width: 100%;
max-height: 50vh;
}
#search-results {
--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
-webkit-mask-image: var(--mask);
display: none;
flex: 1;
flex-direction: column;
gap: 0.5rem;
mask-image: var(--mask);
padding: 0.5rem;
overflow: auto;
.item {