diff --git a/lib/components/Search/redoc-search.html b/lib/components/Search/redoc-search.html index 5c7becf689..aef24371a7 100644 --- a/lib/components/Search/redoc-search.html +++ b/lib/components/Search/redoc-search.html @@ -1,4 +1,5 @@
+
×
diff --git a/lib/components/Search/redoc-search.scss b/lib/components/Search/redoc-search.scss index 8b25e5c7a8..601917af58 100644 --- a/lib/components/Search/redoc-search.scss +++ b/lib/components/Search/redoc-search.scss @@ -18,12 +18,24 @@ fill: lighten($text-color, 20%); } } + + .clear-button { + position: absolute; + display: inline-block; + width: 13px; + text-align: center; + right: 20px; + height: 28px; + line-height: 28px; + vertical-align: middle; + cursor: pointer; + } } input { width: 100%; box-sizing: border-box; - padding: 5px 5px 5px 20px; + padding: 5px 20px 5px 20px; border: 0; border-bottom: 1px solid darken($side-bar-bg-color, 10%); diff --git a/lib/components/Search/redoc-search.ts b/lib/components/Search/redoc-search.ts index 5cf8b28603..96b85ea28d 100644 --- a/lib/components/Search/redoc-search.ts +++ b/lib/components/Search/redoc-search.ts @@ -38,6 +38,11 @@ export class RedocSearch implements OnInit { this.search.indexAll(); } + clearSearch() { + this.searchTerm = ''; + this.updateSearch(); + } + update(event:KeyboardEvent, val) { if (event && event.keyCode === 27) { // escape this.searchTerm = '';