fix(docs): fixed styling of search input (#66)

patternfly · Nov 1, 2019 · 7dbddd6 · 7dbddd6
1 parent 579208d
commit 7dbddd6
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/gatsby-theme-patternfly-org/layouts/sideNavLayout.css b/gatsby-theme-patternfly-org/layouts/sideNavLayout.css
@@ -77,3 +77,43 @@
 .ws-page-sidebar  .pf-c-nav {
   margin-top: 16px;
 }
+
+.pf-site-search {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 2px;
+  padding-left: 0;
+  width: 150px;
+  background: transparent;
+  transition: 250ms;
+}
+@media (max-width: 768px) {
+  .pf-site-search {
+    width: 100px;
+  }
+}
+.pf-site-search:focus-within {
+  background: #fff;
+}
+.pf-site-search:focus-within svg path {
+  fill: #aaacb0;
+}
+.pf-site-search .pf-c-form__label {
+  --pf-c-form__label--FontSize: var(--pf-global--FontSize--lg);
+}
+.pf-site-search #global-search-input {
+  background: #151515;
+  border: 0;
+  color: #fff;
+  padding-left: 25px;
+}
+.pf-site-search #global-search-input:focus {
+  outline-offset: 2px;
+}
+.pf-site-search #global-search-input::placeholder,
+.pf-site-search #global-search-input::-webkit-input-placeholder,
+.pf-site-search #global-search-input::-moz-placeholder,
+.pf-site-search #global-search-input:-ms-input-placeholder,
+.pf-site-search #global-search-input:-ms-input-placeholder {
+  color: #d2d3d5;
+}
diff --git a/gatsby-theme-patternfly-org/layouts/sideNavLayout.js b/gatsby-theme-patternfly-org/layouts/sideNavLayout.js
@@ -129,6 +129,7 @@ const SideNavLayout = ({ children, location, context, hideSideNav = false, parit
               style={{
                 position: 'relative',
               }}
+              className="pf-site-search"
             >
               <TextInput
                 type="text"