<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-focus-outline-color: var( | |
--cr-toolbar-icon-button-focus-outline-color, | |
white); | |
--cr-icon-button-fill-color: var( | |
--cr-toolbar-search-field-input-icon-color, | |
white); | |
} | |
:host-context([enable-branding-update]) cr-icon-button { | |
--cr-icon-button-fill-color: var( | |
--cr-toolbar-search-field-input-icon-color, | |
var(--google-grey-700)); | |
} | |
} | |
@media (prefers-color-scheme: dark) { | |
cr-icon-button { | |
--cr-icon-button-fill-color: var( | |
--cr-toolbar-search-field-input-icon-color, | |
var(--google-grey-500)); | |
} | |
} | |
#icon { | |
transition: margin 150ms, opacity 200ms; | |
} | |
#prompt { | |
color: var(--cr-toolbar-search-field-prompt-color, white); | |
opacity: 0; | |
} | |
@media (prefers-color-scheme: light) { | |
:host-context([enable-branding-update]) #prompt { | |
color: var(--cr-toolbar-search-field-prompt-color, | |
var(--google-grey-700)); | |
} | |
} | |
@media (prefers-color-scheme: dark) { | |
#prompt { | |
--cr-toolbar-search-field-prompt-opacity: 1; | |
color: var(--cr-secondary-text-color, white); | |
} | |
} | |
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); | |
} | |
@media (prefers-color-scheme: light) { | |
:host-context([enable-branding-update]) paper-spinner-lite { | |
--paper-spinner-color: var( | |
--cr-toolbar-search-field-input-icon-color, | |
var(--google-grey-700)); | |
} | |
} | |
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%; | |
} | |
@media (prefers-color-scheme: light) { | |
:host-context([enable-branding-update]) input { | |
caret-color: var(--google-blue-700); | |
color: var(--cr-toolbar-search-field-input-text-color, | |
var(--google-grey-900)); | |
} | |
} | |
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); | |
max-width: var(--cr-toolbar-field-max-width, none); | |
padding-inline-end: 0; | |
width: var(--cr-toolbar-field-width, 680px); | |
} | |
:host-context([enable-branding-update]):host(:not([narrow])) { | |
border-radius: | |
var(--cr-toolbar-search-field-border-radius, 46px); | |
} | |
@media (prefers-color-scheme: light) { | |
:host-context([enable-branding-update]):host(:not([narrow])) { | |
background: | |
var(--cr-toolbar-search-field-background, | |
var(--google-grey-100)); | |
} | |
} | |
@media (prefers-color-scheme: dark) { | |
:host-context([enable-branding-update]):host(:not([narrow])) { | |
background: | |
var(--cr-toolbar-search-field-background, | |
rgba(0, 0, 0, 0.22)); | |
} | |
} | |
:host(:not([narrow]):not([showing-search])) #icon { | |
opacity: var(--cr-toolbar-search-field-icon-opacity, .7); | |
} | |
:host(:not([narrow])) #prompt { | |
opacity: var(--cr-toolbar-search-field-prompt-opacity, .7); | |
} | |
@media (prefers-color-scheme: light) { | |
:host-context([enable-branding-update]):host(:not([narrow])) #prompt { | |
opacity: 1; | |
} | |
} | |
:host([narrow]) #prompt { | |
opacity: var(--cr-toolbar-search-field-narrow-mode-prompt-opacity, 0); | |
} | |
: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" | |
autocapitalize="off" | |
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> |