Merge pull request #365 from vidhihattar/made-reference-filter-bar-st…

…icky Made reference filter bar sticky and added some styles
jcubic · May 27, 2024 · 594cfdd · 594cfdd
2 parents dca5a98 + 8d31386
commit 594cfdd
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/docs/src/components/Reference/index.module.css b/docs/src/components/Reference/index.module.css
@@ -1,3 +1,7 @@
+:root {
+  --lips-search-height: 80px;
+}
+
 .search {
   display: inline-flex;
   justify-content: center;
@@ -8,19 +12,25 @@
 .input {
   width: 100%;
   position: sticky;
-  top: 0;
+  top: 60px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-grow: 1;
   gap: 10px;
   padding: 5px 5px;
+  height: var(--lips-search-height);
+  background-color: #fff;
 }
 
 .search input {
   flex-grow: 1;
   font-size: 1.2em;
   padding: 0.2em 0.4em;
+  height: 40px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  width: 50px
 }
 .search h2, .search input {
   font-family: monospace;
@@ -34,5 +44,8 @@
 }
 
 .search [id] {
-  scroll-margin-top: calc(var(--ifm-navbar-height) + .5rem);
+  scroll-margin-top: calc(var(--ifm-navbar-height) + var(--lips-search-height));
 }
+html[data-theme=dark] .input {
+  background-color: var(--ifm-background-color);
+}