diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts index a797e5fe75c..73794767c84 100644 --- a/aio/src/app/search/search-box/search-box.component.ts +++ b/aio/src/app/search/search-box/search-box.component.ts @@ -24,6 +24,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; (keyup)="doSearch()" (focus)="doFocus()" (click)="doSearch()"> +
/
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss index e0ec15754c3..8298e5f6e73 100644 --- a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss +++ b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss @@ -88,6 +88,11 @@ color: constants.$mediumgray; } } + + .search-box-shortcut { + border-color: constants.$mediumgray; + color: constants.$mediumgray; + } } aio-theme-toggle { diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss index d16f61c9a89..9caeecd9378 100644 --- a/aio/src/styles/1-layouts/top-menu/_top-menu.scss +++ b/aio/src/styles/1-layouts/top-menu/_top-menu.scss @@ -208,6 +208,24 @@ mat-toolbar.app-toolbar { } } + .search-box-shortcut { + display: none; + position: absolute; + right: 16px; + font-size: 1.2rem; + line-height: 2.2rem; + padding: 0 0.8rem; + pointer-events: none; + font-weight: bold; + text-align: center; + border-radius: 4px; + border: 1px solid; + } + + input:not(:focus):placeholder-shown + .search-box-shortcut { + display: block; + } + mat-icon { position: absolute; color: constants.$blue;