chore(site): Fix search not showing on dark theme

beyond-all-reason · Mar 4, 2023 · bee6ffc · bee6ffc
1 parent 731c57d
commit bee6ffc
Showing 1 changed file with 63 additions and 0 deletions.
diff --git a/doc/site/assets/css/just-the-docs-themes.scss b/doc/site/assets/css/just-the-docs-themes.scss
@@ -17,4 +17,67 @@ html[data-theme="dark"] {
 {% include css/callouts.scss.liquid color_scheme = "dark" %}
 }
 
+// fix for search using class in html tag
+html[data-theme="dark"].search-active {
+  .search {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  .search-input-wrap {
+    height: $sp-10;
+    border-radius: 0;
+
+    @include mq(md) {
+      width: $search-results-width;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .search-input {
+    background-color: $grey-dk-250;
+
+    @include mq(md) {
+      padding-left: 2.3rem;
+    }
+  }
+
+  .search-label {
+    @include mq(md) {
+      padding-left: 0.6rem;
+    }
+  }
+
+  .search-results {
+    display: block;
+  }
+
+  .search-overlay {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transition: opacity ease $transition-duration, width 0s, height 0s;
+  }
+
+  @include mq(md) {
+    .main {
+      position: fixed;
+      right: 0;
+      left: 0;
+    }
+  }
+
+  .main-header {
+    padding-top: $sp-10;
+
+    @include mq(md) {
+      padding-top: 0;
+    }
+  }
+}
+
 {% include css/custom.scss.liquid %}