fix(clayui.com): Make Search Bar larger in small screens and search d…

…ropdown highlight should go full width

fix(clayui.com): Scope secondary color to .docs-description, .clay-p so Clay CSS default color isn't overwritten by site styles

fixes liferay#2792

clayui.com/src/components/LayoutNav/LayoutNav.js

@@ -11,15 +11,15 @@ import Search from './Search';
 
 export default () => (
 	<nav className="navbar navbar-clay-site navbar-expand-lg navbar-light">
-		<div className="autofit-padded autofit-row">
+		<div className="autofit-float-sm-down autofit-padded autofit-row">
 			<div className="autofit-col autofit-col-expand">
 				<Search placeholder="Search..." />
 			</div>
 			<div className="autofit-col">
 				<ul className="ml-auto navbar-nav">
 					<li className="nav-item">
 						<Link
-							className="ml-3 nav-link"
+							className="nav-link"
 							to="/docs/get-started/what-is-clay.html"
 						>
 							{'Docs'}

clayui.com/src/styles/_docsearch.scss

@@ -129,4 +129,9 @@
 
 .algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
     background-color: rgba(179, 71, 45, 0.15) !important;
+}
+
+.algolia-docsearch-suggestion--content,
+.algolia-docsearch-suggestion--title {
+    display: block !important;
 }

clayui.com/src/styles/_guide.scss

@@ -1,9 +1,10 @@
 .docs {
-	.clay-blog-content,
-	.clay-docs-content {
+	.docs-description,
+	.clay-p {
 		color: #6B6C7E;
 	}
 
+
 	.nav-clay {
 		.nav-item .nav-link.active:after {
 			background-color: $brand-dark;