diff --git a/doc/templates/uno/layout/_master.tmpl b/doc/templates/uno/layout/_master.tmpl
index 60d3ec4b3e4b..29a545a485d2 100644
--- a/doc/templates/uno/layout/_master.tmpl
+++ b/doc/templates/uno/layout/_master.tmpl
@@ -19,12 +19,7 @@
         {{>partials/breadcrumb}}
         {{/_disableBreadcrumb}}
       </header>
-      {{#_enableSearch}}
-      <div class="container body-content">
-        {{>partials/searchResults}}
-      </div>
-      {{/_enableSearch}}
-      <div role="main" class="container body-content hide-when-search">
+      <div role="main" class="container body-content">
       {{^_disableToc}}
         {{>partials/toc}}
         <div class="article row grid-right">
diff --git a/doc/templates/uno/styles/docfx.js b/doc/templates/uno/styles/docfx.js
index 5326339d60f5..e284e4040f1f 100644
--- a/doc/templates/uno/styles/docfx.js
+++ b/doc/templates/uno/styles/docfx.js
@@ -133,7 +133,6 @@ $(function () {
       } else {
         webWorkerSearch();
       }
-
       renderSearchBox();
       highlightKeywords();
       addSearchEvent();
@@ -192,7 +191,7 @@ $(function () {
         searchDataRequest.send();
       }
 
-      $("body").bind("queryReady", function () {
+      $("body").on("queryReady", function () {
         var hits = lunrIndex.search(query);
         var results = [];
         hits.forEach(function (hit) {
@@ -204,7 +203,6 @@ $(function () {
     }
 
     function webWorkerSearch() {
-      console.log("using Web Worker");
       var indexReady = $.Deferred();
 
       worker.onmessage = function (oEvent) {
@@ -218,9 +216,8 @@ $(function () {
             break;
         }
       }
-
       indexReady.promise().done(function () {
-        $("body").bind("queryReady", function () {
+        $("body").on("query-ready", function () {
           worker.postMessage({ q: query });
         });
         if (query && (query.length >= 3)) {
@@ -244,34 +241,19 @@ $(function () {
     }
 
     function addSearchEvent() {
-      $('body').bind("searchEvent", function () {
+      $('body').on("searchEvent", function () {
         $('#search-query').keypress(function (e) {
           return e.which !== 13;
         });
 
-        $('#search-query').keyup(function () {
+        $('#search-query').on("keyup", function () {
           query = $(this).val();
-          if (query.length < 0) {
-            flipContents("show");
-          } else {
-            flipContents("hide");
-            $("body").trigger("queryReady");
+            $("body").trigger("query-ready");
             $('#search-results>.search-list').text('Search Results for "' + query + '"');
-          }
         }).off("keydown");
       });
     }
 
-    function flipContents(action) {
-      if (action === "show") {
-        $('.hide-when-search').show();
-        $('#search-results').hide();
-      } else {
-        $('.hide-when-search').hide();
-        $('#search-results').show();
-      }
-    }
-
     function relativeUrlToAbsoluteUrl(currentUrl, relativeUrl) {
       var currentItems = currentUrl.split(/\/+/);
       var relativeItems = relativeUrl.split(/\/+/);
@@ -288,7 +270,7 @@ $(function () {
     }
 
     function extractContentBrief(content) {
-      var briefOffset = 512;
+      var briefOffset = 50;
       var words = query.split(/\s+/g);
       var queryIndex = content.indexOf(words[0]);
       var briefContent;
@@ -300,40 +282,29 @@ $(function () {
     }
 
     function handleSearchResults(hits) {
-      console.log(hits);
-      var numPerPage = 9999;
-      $('#pagination').empty();
-      $('#pagination').removeData("twbs-pagination");
       if (hits.length === 0) {
         $('#search-results>.sr-items').html('<p>No results found</p>');
       } else {
-        $('#pagination').twbsPagination({
-          totalPages: Math.ceil(hits.length / numPerPage),
-          visiblePages: 5,
-          onPageClick: function (event, page) {
-            var start = (page - 1) * numPerPage;
-            var curHits = hits.slice(start, start + numPerPage);
-            $('#search-results>.sr-items').empty().append(
-              curHits.map(function (hit) {
-                var currentUrl = window.location.href;
-                var itemRawHref = relativeUrlToAbsoluteUrl(currentUrl, relHref + hit.href);
-                var itemHref = relHref + hit.href + "?q=" + query;
-                var itemTitle = hit.title;
-                var itemBrief = extractContentBrief(hit.keywords);
-
-                var itemNode = $('<div>').attr('class', 'sr-item');
-                var itemTitleNode = $('<div>').attr('class', 'item-title').append($('<a>').attr('href', itemHref).attr("target", "_blank").text(itemTitle));
-                var itemHrefNode = $('<div>').attr('class', 'item-href').text(itemRawHref);
-                var itemBriefNode = $('<div>').attr('class', 'item-brief').text(itemBrief);
-                itemNode.append(itemTitleNode).append(itemHrefNode).append(itemBriefNode);
-                return itemNode;
-              })
-            );
-            query.split(/\s+/).forEach(function (word) {
-              if (word !== '') {
-                //$('#search-results>.sr-items *').mark(word);
-              }
-            });
+        $('#search-results>.sr-items').empty().append(
+          hits.slice(0,5).map(function (hit) {
+            var currentUrl = window.location.href;
+            var itemRawHref = relativeUrlToAbsoluteUrl(currentUrl, relHref + hit.href);
+            var itemHref = relHref + hit.href + "?q=" + query;
+            var itemTitle = hit.title;
+            var itemBrief = extractContentBrief(hit.keywords);
+
+            var itemNode = $('<a>').attr('class', 'sr-item').attr('href', itemHref);
+            var itemTitleNode = $('<div>').attr('class', 'item-title').text(itemTitle);
+            var itemBriefNode = $('<div>').attr('class', 'item-brief').text(itemBrief);
+            itemNode.append(itemTitleNode).append(itemBriefNode);
+
+            return itemNode;
+          })
+        );
+        $('#search-results').show();
+        query.split(/\s+/).forEach(function (word) {
+          if (word !== '') {
+            $('#search-results>.sr-items *').mark(word);
           }
         });
       }
@@ -360,10 +331,6 @@ $(function () {
       if (tocPath) tocPath = tocPath.replace(/\\/g, '/');
       $.get(navbarPath, function (data) {
         $(data).find("#toc>ul").appendTo("#navbar");
-        if ($('#search-results').length !== 0) {
-          $('#search').show();
-          $('body').trigger("searchEvent");
-        }
         var index = navbarPath.lastIndexOf('/');
         var navrel = '';
         if (index > -1) {
@@ -515,6 +482,18 @@ $(function () {
         });
 
         renderSidebar();
+        if ($('#search-results').length !== 0) {
+          $('#search').show();
+          $('body').trigger("searchEvent");
+        }
+          // if the target of the click isn't the container nor a descendant of the container
+          $('body').mouseup(function (e) {
+              if (!$('#search-results').is(e.target) && $('#search-results').has(e.target).length === 0)
+              {
+                  $('#search-results').hide();
+              }
+          });
+
       });
     }
   }
diff --git a/doc/templates/uno/styles/main.css b/doc/templates/uno/styles/main.css
index 5eeca410d7ca..ac1f1a359f2f 100644
--- a/doc/templates/uno/styles/main.css
+++ b/doc/templates/uno/styles/main.css
@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:500,600,700,800,400italic,700italic,400");@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css");body{font-family:'Open Sans', sans-serif;color:#242424}.row:before{content:none}.row:after{content:''}a{color:#159bff}a:hover,a:active{color:#242424}h1{font-size:44px;font-weight:600;text-transform:none}h2{font-size:36px;font-weight:600;text-transform:none}h3{font-size:30px;font-weight:600;text-transform:none}@media screen{pre{overflow:auto}pre>code{white-space:pre}}.body-content .article{margin-top:120px;margin-right:0}@media only screen and (max-width: 767px){.body-content .article{margin-top:180px !important}}.sidefilter{top:116px}.sidetoc{top:178px}.sidetoc .nav>li.active>a{color:#7a67f8}.sidetoc .nav>li.active>a:hover{color:#000}@media only screen and (max-width: 768px){.sidetoc .toc{margin-left:0}.sidetoc .toc ul{margin:0}.sidetoc .toc ul li a{margin:0}}@media only screen and (max-width: 767px){.sidenav{position:fixed;top:116px;width:100%;z-index:999}}@media screen and (min-width: 980px){.navbar-header{-ms-flex-item-align:center;align-self:center}}.navbar-header .navbar-toggle{border:none;height:18px;background:none;padding:0;margin:0}.navbar-header .navbar-toggle:hover,.navbar-header .navbar-toggle:focus{background:none}.navbar-header .navbar-toggle .icon-bar{background:#242424;width:20px}.navbar-header .navbar-toggle .icon-bar+.icon-bar{margin-top:3px}.navbar-header .navbar-toggle[aria-expanded='true'] .icon-bar{background:#7a67f8}@media (max-width: 979px){.navbar-header .navbar-toggle{margin-top:10px;display:block}}@media (max-width: 979px){.navbar-header{display:inline-block;vertical-align:middle;width:100%;line-height:auto}}.navbar:first-child{padding:10px 15px;vertical-align:middle;background:#ffffff;position:fixed;border-bottom:1px solid #f4f2f3;top:0;width:100%;z-index:9999}@media screen and (min-width: 980px){.navbar:first-child{height:75px;line-height:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 30px}}.navbar:first-child #logo{width:36px;margin-top:0;vertical-align:middle}@media screen and (min-width: 980px){.navbar:first-child #logo{width:43px}}.navbar:first-child .navbar-brand{height:auto}.subnav{position:fixed;top:75px;width:100%;z-index:999}#navbar{margin:0;margin-left:auto;padding:15px 0 0}#navbar>.navbar-nav{display:block}#navbar>.navbar-nav.hidden{display:none}#navbar .menu,#navbar .level1{-webkit-box-align:center;-ms-flex-align:center;align-items:center}#navbar .menu li,#navbar .level1 li{padding:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;float:none}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{display:inline-block;content:"\f107";font-family:'FontAwesome';font-style:normal;font-size:11.2px;font-weight:400;margin:0 0 0 8px}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{text-align:left}@media screen and (min-width: 980px){#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{visibility:hidden;display:block;position:absolute;top:100%;left:0;z-index:778;padding:15px;-webkit-box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);background-color:#fff}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{text-transform:none}}#navbar .menu li.has-children:hover ul,#navbar .level1 li.has-children:hover ul{visibility:visible}#navbar .menu a,#navbar .level1 a{padding:0 16px;font-weight:600;height:28px;line-height:28px;font-size:14px;text-transform:uppercase;color:#3a3a3a;border-bottom:2px solid transparent;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out}#navbar .menu a:hover,#navbar .menu .docs a,#navbar .level1 a:hover,#navbar .level1 .docs a{background:none;border-color:#7a67f8}#navbar .menu .get-started-btn a,#navbar .menu a[title="Get Started"],#navbar .level1 .get-started-btn a,#navbar .level1 a[title="Get Started"]{background-color:#7a67f8;border:0;border-radius:8px;-webkit-box-sizing:content-box;box-sizing:content-box;color:#fff;cursor:pointer;display:inline-block;font-family:'Open Sans', sans-serif;font-size:18px;font-weight:700;height:27px;letter-spacing:0.3px;line-height:27px;margin-bottom:0px;margin-left:44px;padding-bottom:8px;padding-left:32px;padding-right:32px;padding-top:8px;text-align:center;text-transform:none;-webkit-transition-delay:0s, 0s, 0s;transition-delay:0s, 0s, 0s;-webkit-transition-duration:0.2s, 0.2s, 0.2s;transition-duration:0.2s, 0.2s, 0.2s;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;transition-timing-function:ease-in-out, ease-in-out, ease-in-out;width:auto}#navbar .menu .get-started-btn a:hover,#navbar .menu a[title="Get Started"]:hover,#navbar .level1 .get-started-btn a:hover,#navbar .level1 a[title="Get Started"]:hover{background:#654ff7}@media screen and (min-width: 980px){#navbar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}}@media (max-width: 979px){#navbar{position:fixed;top:57px;left:0;background:#ffffff;width:100%;margin:0;border:none;padding:0;text-align:left;-webkit-box-shadow:none;box-shadow:none}#navbar.collapse{display:none !important}#navbar.collapse.in{display:block !important}#navbar .menu,#navbar .level1{display:block;margin:0;padding:0 0 10px 0}#navbar .menu li,#navbar .level1 li{display:block;padding:0}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{font-size:16px;font-weight:700;float:right}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{max-height:0;overflow:hidden;visibility:visible;position:relative;padding:0;-webkit-transition:all .5s ease;transition:all .5s ease}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{padding-left:40px}#navbar .menu li.has-children ul a::before,#navbar .level1 li.has-children ul a::before{content:"-";margin-right:5px}#navbar .menu li.has-children.open>a::after,#navbar .level1 li.has-children.open>a::after{display:inline-block;content:"\f106"}#navbar .menu li.has-children.open ul,#navbar .level1 li.has-children.open ul{max-height:500px}#navbar .menu .get-started-btn,#navbar .level1 .get-started-btn{padding:10px 25px}#navbar .menu .get-started-btn a,#navbar .level1 .get-started-btn a{margin:0}#navbar .menu a[title="Get Started"],#navbar .level1 a[title="Get Started"]{margin:10px 25px}#navbar .menu a,#navbar .level1 a{display:block;padding:10px 25px;border:none;text-transform:none;height:auto;line-height:1.4;font-size:16px;font-weight:700}}.front-page article section{margin-left:auto}.front-page p{margin:20px auto}.front-page .subnav,.front-page .sideaffix,.front-page .footer{display:none}.front-page .body-content{width:100%;padding:0;overflow:hidden}.front-page .body-content .article{margin:0 !important}.front-page .body-content .article>[class*='col']{width:auto;padding:0;float:none}.front-page .button{display:inline-block}.front-page .button a{display:inline-block;padding:7px 17px;font-size:20px;font-weight:bold;-webkit-box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);border-radius:8px;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out}.front-page .button.white a{background:#fff;color:#242424}.front-page .button.white a:hover{background:#7a67f8;color:#fff}.front-page .button.turquoise a{background:#7a67f8;color:#fff}.front-page .button.turquoise a:hover{background:#654ff7}.front-page .intro{padding:100px 15px 60px;text-align:center;font-size:18px;position:relative}@media screen and (min-width: 768px){.front-page .intro{padding:200px 15px 120px}}.front-page .intro h1{font-size:36px;text-transform:none;font-weight:600;width:auto;max-width:100%;margin:0 auto;letter-spacing:normal}@media screen and (min-width: 768px){.front-page .intro h1{font-size:44px}}.front-page .intro p{width:100%;font-size:22px}.front-page .intro strong{font-weight:bold}.front-page .intro .button a{margin-top:20px}.front-page .headerboxes{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:40px 15px;background-color:#f4f2f3}@media screen and (min-width: 768px){.front-page .headerboxes{padding:80px 15px}}.front-page .headerboxes .headerbox{margin:40px auto}.front-page .headerboxes .headerbox-inner{padding:0;height:100%}.front-page .headerboxes h2{font-size:30px;font-weight:600;text-transform:none}.front-page .headerboxes h2 .anchorjs-link{display:none}.front-page .headerboxes p{font-size:16px;font-weight:600}.front-page .headerboxes .icon{margin:0}
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:500,600,700,800,400italic,700italic,400");@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css");body{font-family:'Open Sans', sans-serif;color:#242424}body mark{background:rgba(21,155,255,0.25)}.row:before{content:none}.row:after{content:''}a{color:#159bff}a:hover,a:active{color:#242424}h1{font-size:44px;font-weight:600;text-transform:none}h2{font-size:36px;font-weight:600;text-transform:none}h3{font-size:30px;font-weight:600;text-transform:none}@media screen{pre{overflow:auto}pre>code{white-space:pre}}.body-content .article{margin-top:120px;margin-right:0}@media only screen and (max-width: 767px){.body-content .article{margin-top:180px !important}}.sidefilter{top:116px;z-index:2;padding:10px}.sidefilter #search{display:block;border-radius:10px}.sidefilter #search input:focus{outline:none;border:2px solid #159bff}.sidefilter #search-query{border-radius:6px;height:45px;width:100%}.sidefilter #search-results{background:white;position:absolute;margin:5px 0 0 0;width:560px;border:1px solid rgba(0,0,0,0.15);border-radius:10px;-webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0 5px 10px 0 rgba(0,0,0,0.2)}.sidefilter #search-results .sr-items a{color:black}.sidefilter #search-results .sr-items a:first-child{border-radius:10px 10px 0 0}.sidefilter #search-results .sr-items a:last-child{border-radius:0 0 10px 10px;margin-bottom:0}.sidefilter #search-results .sr-items p{margin:10px}.sidefilter #search-results .sr-items .sr-item{display:block;padding:15px;margin-bottom:10px}.sidefilter #search-results .sr-items .sr-item:hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(21,155,255,0.11)), to(rgba(21,155,255,0.11))),-webkit-gradient(linear, left top, left bottom, from(rgba(21,155,255,0.11)), to(rgba(21,155,255,0.11)));background-image:linear-gradient(to bottom, rgba(21,155,255,0.11) 0%, rgba(21,155,255,0.11) 100%),linear-gradient(to bottom, rgba(21,155,255,0.11) 0%, rgba(21,155,255,0.11) 100%)}.sidefilter #search-results .sr-items .item-title{font-size:16px;font-weight:bold}.sidefilter #search-results .sr-items .item-brief{font-size:16px;color:black}.sidetoc{top:180px}.sidetoc .nav>li.active>a{color:#7a67f8}.sidetoc .nav>li.active>a:hover{color:#000}@media only screen and (max-width: 768px){.sidetoc .toc{margin-left:0}.sidetoc .toc ul{margin:0}.sidetoc .toc ul li a{margin:0}}@media only screen and (max-width: 767px){.sidenav{position:fixed;top:116px;width:100%;z-index:999}}@media screen and (min-width: 980px){.navbar-header{-ms-flex-item-align:center;align-self:center}}.navbar-header .navbar-toggle{border:none;height:18px;background:none;padding:0;margin:0}.navbar-header .navbar-toggle:hover,.navbar-header .navbar-toggle:focus{background:none}.navbar-header .navbar-toggle .icon-bar{background:#242424;width:20px}.navbar-header .navbar-toggle .icon-bar+.icon-bar{margin-top:3px}.navbar-header .navbar-toggle[aria-expanded='true'] .icon-bar{background:#7a67f8}@media (max-width: 979px){.navbar-header .navbar-toggle{margin-top:10px;display:block}}@media (max-width: 979px){.navbar-header{display:inline-block;vertical-align:middle;width:100%;line-height:auto}}.navbar:first-child{padding:10px 15px;vertical-align:middle;background:#ffffff;position:fixed;border-bottom:1px solid #f4f2f3;top:0;width:100%;z-index:9999}@media screen and (min-width: 980px){.navbar:first-child{height:75px;line-height:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 30px}}.navbar:first-child #logo{width:36px;margin-top:0;vertical-align:middle}@media screen and (min-width: 980px){.navbar:first-child #logo{width:43px}}.navbar:first-child .navbar-brand{height:auto}.subnav{position:fixed;top:75px;width:100%;z-index:999}#navbar{margin:0;margin-left:auto;padding:15px 0 0}#navbar>.navbar-nav{display:block}#navbar>.navbar-nav.hidden{display:none}#navbar .menu,#navbar .level1{-webkit-box-align:center;-ms-flex-align:center;align-items:center}#navbar .menu li,#navbar .level1 li{padding:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;float:none}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{display:inline-block;content:"\f107";font-family:'FontAwesome';font-style:normal;font-size:11.2px;font-weight:400;margin:0 0 0 8px}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{text-align:left}@media screen and (min-width: 980px){#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{visibility:hidden;display:block;position:absolute;top:100%;left:0;z-index:778;padding:15px;-webkit-box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);background-color:#fff}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{text-transform:none}}#navbar .menu li.has-children:hover ul,#navbar .level1 li.has-children:hover ul{visibility:visible}#navbar .menu a,#navbar .level1 a{padding:0 16px;font-weight:600;height:28px;line-height:28px;font-size:14px;text-transform:uppercase;color:#3a3a3a;border-bottom:2px solid transparent;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out}#navbar .menu a:hover,#navbar .menu .docs a,#navbar .level1 a:hover,#navbar .level1 .docs a{background:none;border-color:#7a67f8}#navbar .menu .get-started-btn a,#navbar .menu a[title="Get Started"],#navbar .level1 .get-started-btn a,#navbar .level1 a[title="Get Started"]{background-color:#7a67f8;border:0;border-radius:8px;-webkit-box-sizing:content-box;box-sizing:content-box;color:#fff;cursor:pointer;display:inline-block;font-family:'Open Sans', sans-serif;font-size:18px;font-weight:700;height:27px;letter-spacing:0.3px;line-height:27px;margin-bottom:0px;margin-left:44px;padding-bottom:8px;padding-left:32px;padding-right:32px;padding-top:8px;text-align:center;text-transform:none;-webkit-transition-delay:0s, 0s, 0s;transition-delay:0s, 0s, 0s;-webkit-transition-duration:0.2s, 0.2s, 0.2s;transition-duration:0.2s, 0.2s, 0.2s;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;transition-timing-function:ease-in-out, ease-in-out, ease-in-out;width:auto}#navbar .menu .get-started-btn a:hover,#navbar .menu a[title="Get Started"]:hover,#navbar .level1 .get-started-btn a:hover,#navbar .level1 a[title="Get Started"]:hover{background:#654ff7}@media screen and (min-width: 980px){#navbar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}}@media (max-width: 979px){#navbar{position:fixed;top:57px;left:0;background:#ffffff;width:100%;margin:0;border:none;padding:0;text-align:left;-webkit-box-shadow:none;box-shadow:none}#navbar.collapse{display:none !important}#navbar.collapse.in{display:block !important}#navbar .menu,#navbar .level1{display:block;margin:0;padding:0 0 10px 0}#navbar .menu li,#navbar .level1 li{display:block;padding:0}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{font-size:16px;font-weight:700;float:right}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{max-height:0;overflow:hidden;visibility:visible;position:relative;padding:0;-webkit-transition:all .5s ease;transition:all .5s ease}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{padding-left:40px}#navbar .menu li.has-children ul a::before,#navbar .level1 li.has-children ul a::before{content:"-";margin-right:5px}#navbar .menu li.has-children.open>a::after,#navbar .level1 li.has-children.open>a::after{display:inline-block;content:"\f106"}#navbar .menu li.has-children.open ul,#navbar .level1 li.has-children.open ul{max-height:500px}#navbar .menu .get-started-btn,#navbar .level1 .get-started-btn{padding:10px 25px}#navbar .menu .get-started-btn a,#navbar .level1 .get-started-btn a{margin:0}#navbar .menu a[title="Get Started"],#navbar .level1 a[title="Get Started"]{margin:10px 25px}#navbar .menu a,#navbar .level1 a{display:block;padding:10px 25px;border:none;text-transform:none;height:auto;line-height:1.4;font-size:16px;font-weight:700}}.front-page article section{margin-left:auto}.front-page p{margin:20px auto}.front-page .subnav,.front-page .sideaffix,.front-page .footer{display:none}.front-page .body-content{width:100%;padding:0;overflow:hidden}.front-page .body-content .article{margin:0 !important}.front-page .body-content .article>[class*='col']{width:auto;padding:0;float:none}.front-page .button{display:inline-block}.front-page .button a{display:inline-block;padding:7px 17px;font-size:20px;font-weight:bold;-webkit-box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);border-radius:8px;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out}.front-page .button.white a{background:#fff;color:#242424}.front-page .button.white a:hover{background:#7a67f8;color:#fff}.front-page .button.turquoise a{background:#7a67f8;color:#fff}.front-page .button.turquoise a:hover{background:#654ff7}.front-page .intro{padding:100px 15px 60px;text-align:center;font-size:18px;position:relative}@media screen and (min-width: 768px){.front-page .intro{padding:200px 15px 120px}}.front-page .intro h1{font-size:36px;text-transform:none;font-weight:600;width:auto;max-width:100%;margin:0 auto;letter-spacing:normal}@media screen and (min-width: 768px){.front-page .intro h1{font-size:44px}}.front-page .intro p{width:100%;font-size:22px}.front-page .intro strong{font-weight:bold}.front-page .intro .button a{margin-top:20px}.front-page .headerboxes{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:40px 15px;background-color:#f4f2f3}@media screen and (min-width: 768px){.front-page .headerboxes{padding:80px 15px}}.front-page .headerboxes .headerbox{margin:40px auto}.front-page .headerboxes .headerbox-inner{padding:0;height:100%}.front-page .headerboxes h2{font-size:30px;font-weight:600;text-transform:none}.front-page .headerboxes h2 .anchorjs-link{display:none}.front-page .headerboxes p{font-size:16px;font-weight:600}.front-page .headerboxes .icon{margin:0}
diff --git a/doc/templates/uno/styles/scss/main.scss b/doc/templates/uno/styles/scss/main.scss
index 11c0fc4d639a..e1f1d01765ef 100644
--- a/doc/templates/uno/styles/scss/main.scss
+++ b/doc/templates/uno/styles/scss/main.scss
@@ -9,6 +9,9 @@ $dgray: #242424;
 body {
     font-family: 'Open Sans', sans-serif;
     color: $dgray;
+    mark {
+      background: rgba(21,155,255, 0.25);
+    }
 }
 
 .row {
@@ -68,11 +71,75 @@ h3 {
 }
 
 .sidefilter {
-    top: 116px;
+  top: 116px;
+  z-index: 2;
+  padding: 10px;
+
+  #search {
+    display: block;
+    border-radius: 10px;
+    input:focus {
+      outline: none;
+      border:2px solid #159bff;
+    }
+
+  }
+
+  #search-query {
+    border-radius: 6px;
+    height: 45px;
+    width: 100%;
+
+  }
+
+  #search-results {
+    background: white;
+    position: absolute;
+    margin:5px 0 0 0;
+    width:560px;
+    border: 1px solid rgba(0,0,0,0.15);
+    border-radius: 10px;
+    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
+
+    .sr-items {
+      a {
+        color: black;
+        &:first-child {
+          border-radius: 10px 10px 0 0;
+        }
+        &:last-child {
+          border-radius: 0 0 10px 10px;
+          margin-bottom: 0;
+        }
+      }
+      p {
+        margin: 10px;
+      }
+
+      .sr-item {
+        display: block;
+        padding: 15px;
+        margin-bottom: 10px;
+        &:hover{
+          background-image:linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%), linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%);
+        }
+      }
+
+      .item-title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .item-brief {
+        font-size: 16px;
+        color: black;
+      }
+    }
+  }
 }
 
 .sidetoc {
-    top: 178px;
+    top: 180px;
 
     .nav > li.active > a {
         color: $purple;
diff --git a/doc/templates/uno/toc.html.tmpl b/doc/templates/uno/toc.html.tmpl
index 26cb8ad6f7fd..94844bb170e6 100644
--- a/doc/templates/uno/toc.html.tmpl
+++ b/doc/templates/uno/toc.html.tmpl
@@ -2,14 +2,14 @@
 
 <div id="sidetoggle">
   <div>
-    {{^_disableSideFilter}}
     <div class="sidefilter">
-      <form class="toc-filter">
-        <span class="glyphicon glyphicon-filter filter-icon"></span>
-        <input type="text" id="toc_filter_input" placeholder="Enter here to filter..." onkeypress="if(event.keyCode==13) {return false;}">
+      <form role="search" id="search" >
+          <input type="text" id="search-query" autocomplete="off"  placeholder="Search Docs..." onsubmit="if(event.keyCode==13) {return false;}">
       </form>
+          <div id="search-results">
+              <div class="sr-items"></div>
+          </div>
     </div>
-    {{/_disableSideFilter}}
     <div class="sidetoc">
       <div class="toc" id="toc">
         {{^leaf}}
@@ -18,4 +18,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>