diff --git a/src/components/search-box/search-box.scss b/src/core/search/components/search-box/search-box.scss
similarity index 56%
rename from src/components/search-box/search-box.scss
rename to src/core/search/components/search-box/search-box.scss
index 1e80c19f2..58eab7287 100644
--- a/src/components/search-box/search-box.scss
+++ b/src/core/search/components/search-box/search-box.scss
@@ -1,4 +1,12 @@
ion-app.app-root core-search-box {
+ height: 65px;
+ display: block;
+
+ ion-card {
+ position: absolute;
+ z-index: 4;
+ }
+
.button.item-button[icon-only] {
margin: 0;
padding: ($content-padding / 2) $content-padding;
@@ -18,4 +26,17 @@ ion-app.app-root core-search-box {
border: 0;
margin: 0;
}
+
+ .core-search-history {
+ max-height: calc(-120px + 80vh);
+ overflow-y: auto;
+
+ .item:hover {
+ background-color: $gray-lighter;
+ }
+
+ .list .item.item-block:last-child > .item-inner {
+ border-bottom: 0;
+ }
+ }
}
diff --git a/src/core/search/components/search-box/search-box.ts b/src/core/search/components/search-box/search-box.ts
new file mode 100644
index 000000000..da5223e37
--- /dev/null
+++ b/src/core/search/components/search-box/search-box.ts
@@ -0,0 +1,211 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { CoreUtilsProvider } from '@providers/utils/utils';
+import { CoreSearchHistoryProvider, CoreSearchHistoryItem } from '../../providers/search-history';
+
+/**
+ * Component to display a "search box".
+ *
+ * @description
+ * This component will display a standalone search box with its search button in order to have a better UX.
+ *
+ * Example usage:
+ *