| <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> |