blob: 4ff84146f3140e662fe32933add3b9d3ef12cfa7 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="cr_search_field_behavior.html">
<dom-module id="cr-search-field">
<template>
<style include="cr-shared-style">
:host {
display: flex;
user-select: none;
}
#searchIcon {
height: 16px;
padding: 4px;
vertical-align: middle;
width: 16px;
}
cr-input {
--cr-input-background-color: white;
--cr-input-row-container: {
height: 100%;
}
--cr-input-container: {
border-radius: 0;
height: 100%;
}
--cr-input-inner-container: {
height: 100%;
}
--cr-input-error-display: none;
--cr-input-input: {
height: 100%;
border-bottom: 1px solid var(--google-grey-900);
}
--cr-input-padding-end: 0;
--cr-input-padding-start: 0;
--cr-input-padding-bottom: 2px;
--cr-input-padding-top: 2px;
display: block;
vertical-align: middle;
width: 160px; /* Special width for search input. */
}
:host([has-search-text]) cr-input {
--cr-input-padding-end: 20px;
}
#searchInput {
font-size: 92.3076923%; /* To 12px from 13px. */
min-height: 24px;
}
#searchInput {
color: var(--cr-primary-text-color);
}
#clearSearchContainer {
/* A 16px icon that fits on the input line. */
background-size: 16px;
height: 24px;
margin-inline-end: -4px;
margin-inline-start: 4px;
position: absolute;
right: 0;
width: 24px;
}
:host-context([dir='rtl']) #clearSearchContainer {
left: 0;
right: auto;
}
</style>
<iron-icon id="searchIcon" icon="cr:search"></iron-icon>
<cr-input id="searchInput" on-search="onSearchTermSearch"
on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
autofocus="[[autofocus]]" placeholder="[[label]]" spellcheck="false">
<paper-icon-button-light id="clearSearchContainer" class="icon-cancel"
hidden$="[[!hasSearchText]]" slot="suffix">
<button id="clearSearch" on-click="onTapClear_" title="[[clearLabel]]">
</button>
</paper-icon-button-light>
</cr-input>
</template>
<script src="cr_search_field.js"></script>
</dom-module>