rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add search input

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-15 07:54:53 +01:00
parent 6816650ea5
commit f7be64dbba
11 changed files with 394 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
js/components/horizontal-scroll-nav.js
View File

@@ -59,11 +59,13 @@ class HorizontalScrollNav extends HTMLElement {
.nav-container {
display: flex;
gap: var(--spacing-sm, 0.5rem);
align-items: center;
height: 80px;
gap: 24px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
padding: 0 16px;
}
.nav-container::-webkit-scrollbar {
@@ -72,29 +74,37 @@ class HorizontalScrollNav extends HTMLElement {
.nav-pill {
flex-shrink: 0;
padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
font-size: var(--font-size-sm, 0.875rem);
height: 32px;
padding: 0;
font-size: 16px;
font-weight: var(--font-weight-medium, 500);
color: var(--color-text-light, #64748b);
background-color: var(--color-background-tertiary, #f1f5f9);
line-height: 1.5;
color: #000000;
background-color: transparent;
border: none;
border-radius: var(--radius-full, 9999px);
border-radius: 0;
cursor: pointer;
transition: all var(--transition-fast, 150ms ease);
white-space: nowrap;
text-decoration: underline;
display: flex;
align-items: center;
}
.nav-pill:hover {
background-color: var(--color-border, #e2e8f0);
color: #333333;
}
.nav-pill.active {
color: var(--color-text-inverse, #ffffff);
background-color: var(--color-primary, #2563eb);
color: #ffffff;
background-color: #951D51;
text-decoration: none;
border-radius: 9999px;
padding: 0 16px;
}
.nav-pill.active:hover {
background-color: var(--color-primary-dark, #1d4ed8);
background-color: #7a1843;
}
</style>
<nav class="nav-container" role="navigation" aria-label="Book categories">