@healthcatalyst/catalyst-docfx-template 1.0.149 → 1.0.151

package/styles/main.css

@@ -739,6 +739,7 @@ output {
 
 #search {
     border: none;
+    display:block;
 }
 
 
@@ -1158,8 +1159,8 @@ output {
     border: 1px lightgray solid;
     display: flex;
     align-items: center;
-    width: 180px;
-    padding: 2px 2px 2px 10px;
+    width: 100%;
+    /*padding: 2px 2px 2px 10px;*/
     margin: 6px 5px 6px auto;
 }
 
@@ -2098,4 +2099,75 @@ article .tabGroup > ul > li {
 }
 #faqTable tr.header, #faqTable tr:hover {
   background-color: #f1f1f1;
-}
+}
+
+/* Side search styling */
+.sidefilter .docs-search {
+  padding: 10px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.sidefilter .side-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.sidefilter #search-query {
+  width: 100%;
+  padding: 8px 12px 8px 35px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+  background-color: #fff;
+  outline: none;
+}
+
+.sidefilter #search-query:focus {
+  border-color: #00aeff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
+}
+
+.sidefilter #search-query::placeholder {
+  color: #a1a1a1;
+  opacity: 1;
+}
+
+/* Search icon */
+.sidefilter .side-search::before {
+  content: "\f002"; /* FontAwesome search icon */
+  font-family: "FontAwesome", "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  left: 12px;
+  color: #6c757d;
+  pointer-events: none;
+  z-index: 1;
+}
+
+#search-results {
+  max-width: 935px;
+  margin: 0;
+  padding: 0 0 32px;
+  position: relative;
+  z-index: 1;
+}
+
+#search { position:relative; }
+#search-clear {
+  position:absolute;
+  top:50%;
+  right:8px;
+  transform:translateY(-50%);
+  background:none;
+  border:0;
+  padding:0;
+  font-size:18px;
+  line-height:1;
+  cursor:pointer;
+  color:#666;
+}
+#search-clear:hover { color:#000; }