OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
| 2 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_searc
h_field_behavior.html"> |
| 3 <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| 4 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button-light.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spi
nner-lite.html"> | 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spi
nner-lite.html"> |
4 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_searc
h_field_behavior.html"> | |
5 <link rel="import" href="chrome://resources/cr_elements/icons.html"> | |
6 | 8 |
7 <dom-module id="cr-toolbar-search-field"> | 9 <dom-module id="cr-toolbar-search-field"> |
8 <template> | 10 <template> |
9 <style> | 11 <style include="cr-shared-style"> |
10 :host { | 12 :host { |
11 align-items: center; | 13 align-items: center; |
12 display: flex; | 14 display: flex; |
13 height: 40px; | 15 height: 40px; |
14 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), | 16 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), |
15 width 150ms cubic-bezier(0.4, 0, 0.2, 1); | 17 width 150ms cubic-bezier(0.4, 0, 0.2, 1); |
16 width: 44px; | 18 width: 44px; |
17 } | 19 } |
18 | 20 |
19 [hidden] { | 21 [hidden] { |
20 display: none !important; | 22 display: none !important; |
21 } | 23 } |
22 | 24 |
| 25 button[is='paper-icon-button-light'], |
23 paper-icon-button { | 26 paper-icon-button { |
24 height: 32px; | 27 height: 32px; |
25 margin: 6px; | 28 margin: 6px; |
26 min-width: 32px; | 29 min-width: 32px; |
27 padding: 6px; | 30 padding: 6px; |
28 width: 32px; | 31 width: 32px; |
29 } | 32 } |
30 | 33 |
31 #icon { | 34 #icon { |
32 transition: margin 150ms, opacity 200ms; | 35 transition: margin 150ms, opacity 200ms; |
(...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
143 on-input="onSearchTermInput" | 146 on-input="onSearchTermInput" |
144 on-search="onSearchTermSearch" | 147 on-search="onSearchTermSearch" |
145 on-keydown="onSearchTermKeydown_" | 148 on-keydown="onSearchTermKeydown_" |
146 on-focus="onInputFocus_" | 149 on-focus="onInputFocus_" |
147 on-blur="onInputBlur_" | 150 on-blur="onInputBlur_" |
148 incremental | 151 incremental |
149 autofocus> | 152 autofocus> |
150 </input> | 153 </input> |
151 </div> | 154 </div> |
152 <template is="dom-if" if="[[hasSearchText]]"> | 155 <template is="dom-if" if="[[hasSearchText]]"> |
153 <paper-icon-button icon="cr:cancel" id="clearSearch" | 156 <button is="paper-icon-button-light" class="icon-cancel-toolbar" |
154 title="[[clearLabel]]" on-tap="clearSearch_"> | 157 id="clearSearch" title="[[clearLabel]]" on-tap="clearSearch_"> |
155 </paper-icon-button> | 158 </button> |
156 </template> | 159 </template> |
157 </template> | 160 </template> |
158 <script src="cr_toolbar_search_field.js"></script> | 161 <script src="cr_toolbar_search_field.js"></script> |
159 </dom-module> | 162 </dom-module> |
OLD | NEW |