| <link rel="import" href="../../html/polymer.html"> |
| |
| <link rel="import" href="../cr_icon_button/cr_icon_button.html"> |
| <link rel="import" href="../cr_icons_css.html"> |
| <link rel="import" href="../cr_search_field/cr_search_field_behavior.html"> |
| <link rel="import" href="../icons.html"> |
| <link rel="import" href="../shared_style_css.html"> |
| <link rel="import" href="../shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html"> |
| |
| <dom-module id="cr-toolbar-search-field"> |
| <template> |
| <style include="cr-shared-style cr-icons"> |
| :host { |
| align-items: center; |
| display: flex; |
| height: 40px; |
| transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), |
| width 150ms cubic-bezier(0.4, 0, 0.2, 1); |
| width: 44px; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| cr-icon-button { |
| --cr-icon-button-size: var(--cr-toolbar-icon-container-size, 32px); |
| margin: var(--cr-toolbar-icon-margin, 6px); |
| } |
| |
| @media (prefers-color-scheme: light) { |
| cr-icon-button { |
| --cr-icon-button-fill-color: var( |
| --cr-toolbar-search-field-input-icon-color, |
| white); |
| } |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| cr-icon-button { |
| --cr-icon-button-fill-color: var( |
| --cr-toolbar-search-field-input-icon-color, |
| var(--google-grey-refresh-500)); |
| } |
| } |
| |
| #icon { |
| transition: margin 150ms, opacity 200ms; |
| } |
| |
| #prompt { |
| --cr-toolbar-search-field-prompt-opacity: .7; |
| opacity: 0; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| #prompt { |
| --cr-toolbar-search-field-prompt-opacity: 1; |
| } |
| } |
| |
| paper-spinner-lite { |
| --paper-spinner-color: |
| var(--cr-toolbar-search-field-input-icon-color, white); |
| height: var(--cr-icon-size); |
| margin: var(--cr-toolbar-search-field-paper-spinner-margin, 0 6px); |
| opacity: 0; |
| padding: 6px; |
| position: absolute; |
| width: var(--cr-icon-size); |
| } |
| |
| paper-spinner-lite[active] { |
| opacity: 1; |
| } |
| |
| #prompt, |
| paper-spinner-lite { |
| transition: opacity 200ms; |
| } |
| |
| /* Input field. */ |
| #searchTerm { |
| -webkit-font-smoothing: antialiased; |
| flex: 1; |
| line-height: 185%; |
| margin: var(--cr-toolbar-search-field-term-margin, 0 2px); |
| position: relative; |
| } |
| |
| label { |
| bottom: 0; |
| cursor: var(--cr-toolbar-search-field-cursor, text); |
| left: 0; |
| overflow: hidden; |
| position: absolute; |
| right: 0; |
| top: 0; |
| white-space: nowrap; |
| } |
| |
| :host([has-search-text]) label { |
| visibility: hidden; |
| } |
| |
| input { |
| -webkit-appearance: none; |
| background: transparent; |
| border: none; |
| color: var(--cr-toolbar-search-field-input-text-color, white); |
| cursor: var(--cr-toolbar-search-field-cursor, text); |
| font: inherit; |
| outline: none; |
| padding: 0; |
| position: relative; |
| width: 100%; |
| } |
| |
| input[type='search']::-webkit-search-cancel-button { |
| display: none; |
| } |
| |
| :host([narrow]) { |
| border-radius: |
| var(--cr-toolbar-search-field-border-radius, 0); |
| } |
| |
| /** Wide layout. */ |
| :host(:not([narrow])) { |
| background: |
| var(--cr-toolbar-search-field-background, rgba(0, 0, 0, 0.22)); |
| border-radius: |
| var(--cr-toolbar-search-field-border-radius, 2px); |
| cursor: var(--cr-toolbar-search-field-cursor, text); |
| padding-inline-end: 0; |
| width: var(--cr-toolbar-field-width, 680px); |
| } |
| |
| :host(:not([narrow]):not([showing-search])) #icon { |
| opacity: .7; |
| } |
| |
| :host(:not([narrow])) #prompt { |
| margin-inline-start: |
| var(--cr-toolbar-search-field-prompt-margin-inline-start); |
| opacity: var(--cr-toolbar-search-field-prompt-opacity); |
| } |
| |
| :host([narrow]:not([showing-search])) #searchTerm { |
| display: none; |
| } |
| |
| /* Search open. */ |
| :host([showing-search][spinner-active]) #icon { |
| opacity: 0; |
| } |
| |
| :host([narrow][showing-search]) { |
| width: 100%; |
| } |
| |
| :host([narrow][showing-search]) #icon, |
| :host([narrow][showing-search]) paper-spinner-lite { |
| /* 18px to line up with the Menu icon by default. */ |
| margin-inline-start: |
| var(--cr-toolbar-search-icon-margin-inline-start, 18px); |
| } |
| </style> |
| <template is="dom-if" id="spinnerTemplate"> |
| <paper-spinner-lite active="[[isSpinnerShown_]]"> |
| </paper-spinner-lite> |
| </template> |
| <cr-icon-button id="icon" iron-icon="cr:search" title="[[label]]" dir="ltr" |
| tabindex$="[[computeIconTabIndex_(narrow, hasSearchText)]]" |
| aria-hidden$="[[computeIconAriaHidden_(narrow, hasSearchText)]]" |
| on-click="onSearchIconClicked_"> |
| </cr-icon-button> |
| <div id="searchTerm"> |
| <label id="prompt" for="searchInput" aria-hidden="true">[[label]]</label> |
| <input id="searchInput" |
| aria-labelledby="prompt" |
| autocomplete="off" |
| type="search" |
| on-input="onSearchTermInput" |
| on-search="onSearchTermSearch" |
| on-keydown="onSearchTermKeydown_" |
| on-focus="onInputFocus_" |
| on-blur="onInputBlur_" |
| autofocus$="[[autofocus]]" |
| spellcheck="false"> |
| </div> |
| <template is="dom-if" if="[[hasSearchText]]"> |
| <cr-icon-button id="clearSearch" iron-icon="cr:cancel" |
| title="[[clearLabel]]" on-click="clearSearch_"></cr-icon-button> |
| </template> |
| </template> |
| <script src="cr_toolbar_search_field.js"></script> |
| </dom-module> |