OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 | 2 |
3 <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/cr_search_field/cr_searc
h_field_behavior.html"> |
4 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> | |
5 <link rel="import" href="chrome://resources/cr_elements/icons.html"> | 4 <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| 5 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button-light.html"> |
8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input
-container.html"> | 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input
-container.html"> |
9 | 9 |
10 <dom-module id="settings-subpage-search"> | 10 <dom-module id="settings-subpage-search"> |
11 <template> | 11 <template> |
12 <style include="cr-hidden-style"> | 12 <style include="cr-shared-style"> |
13 :host { | 13 :host { |
14 --subpage-search-underline: { | 14 --subpage-search-underline: { |
15 margin-bottom: -2px; | 15 margin-bottom: -2px; |
16 margin-top: -2px; | 16 margin-top: -2px; |
17 } | 17 } |
18 } | 18 } |
19 | 19 |
20 :host { | 20 :host { |
21 --paper-input-container-underline: var(--subpage-search-underline); | 21 --paper-input-container-underline: var(--subpage-search-underline); |
22 --paper-input-container-underline-focus: | 22 --paper-input-container-underline-focus: |
23 var(--subpage-search-underline); | 23 var(--subpage-search-underline); |
24 --paper-input-container-underline-disabled: | 24 --paper-input-container-underline-disabled: |
25 var(--subpage-search-underline); | 25 var(--subpage-search-underline); |
26 --paper-input-suffix: { | 26 --paper-input-suffix: { |
27 /* Required to align the icon in |clearSearch| vertically. */ | 27 /* Required to align the icon in |clearSearch| vertically. */ |
28 line-height: 0; | 28 line-height: 0; |
29 }; | 29 }; |
30 } | 30 } |
31 | 31 |
32 paper-icon-button { | |
33 /* A 16px icon that fits on the input line. */ | |
34 height: 24px; | |
35 padding: 4px; | |
36 width: 24px; | |
37 } | |
38 | |
39 #searchIcon { | 32 #searchIcon { |
40 height: 16px; | 33 height: 16px; |
41 padding: 4px; | 34 padding: 4px; |
42 vertical-align: middle; | 35 vertical-align: middle; |
43 width: 16px; | 36 width: 16px; |
44 } | 37 } |
45 | 38 |
46 paper-input-container { | 39 paper-input-container { |
47 display: inline-block; | 40 display: inline-block; |
48 vertical-align: middle; | 41 vertical-align: middle; |
49 width: 160px; /* Special width for search input. */ | 42 width: 160px; /* Special width for search input. */ |
50 } | 43 } |
51 | 44 |
52 input[type='search']::-webkit-search-cancel-button { | 45 input[type='search']::-webkit-search-cancel-button { |
53 -webkit-appearance: none; | 46 -webkit-appearance: none; |
54 } | 47 } |
55 | 48 |
56 #searchInput { | 49 #searchInput { |
57 font-size: 92.3076923%; /* To 12px from 13px. */ | 50 font-size: 92.3076923%; /* To 12px from 13px. */ |
58 min-height: 24px; | 51 min-height: 24px; |
59 } | 52 } |
60 | 53 |
61 #searchInput { | 54 #searchInput { |
62 color: var(--paper-grey-800); | 55 color: var(--paper-grey-800); |
63 } | 56 } |
64 | 57 |
65 #clearSearch { | 58 #clearSearch { |
66 -webkit-margin-end: -4px; | 59 -webkit-margin-end: -4px; |
67 -webkit-margin-start: 4px; | 60 -webkit-margin-start: 4px; |
| 61 |
| 62 /* A 16px icon that fits on the input line. */ |
| 63 background-size: 16px; |
| 64 height: 24px; |
| 65 width: 24px; |
68 } | 66 } |
69 </style> | 67 </style> |
70 <iron-icon id="searchIcon" icon="cr:search"></iron-icon> | 68 <iron-icon id="searchIcon" icon="cr:search"></iron-icon> |
71 <paper-input-container no-label-float> | 69 <paper-input-container no-label-float> |
72 <input id="searchInput" type="search" on-search="onSearchTermSearch" | 70 <input id="searchInput" type="search" on-search="onSearchTermSearch" |
73 on-input="onSearchTermInput" aria-labelledby="prompt" incremental | 71 on-input="onSearchTermInput" aria-labelledby="prompt" incremental |
74 autofocus$="[[autofocus]]" placeholder="[[label]]"> | 72 autofocus$="[[autofocus]]" placeholder="[[label]]"> |
75 <paper-icon-button suffix icon="cr:cancel" id="clearSearch" | 73 <button suffix is="paper-icon-button-light" id="clearSearch" |
76 on-tap="onTapClear_" title="[[clearLabel]]" | 74 class="icon-cancel" on-tap="onTapClear_" title="[[clearLabel]]" |
77 hidden$="[[!hasSearchText]]"> | 75 hidden$="[[!hasSearchText]]"> |
78 </paper-icon-button> | 76 </button> |
79 </paper-input-container> | 77 </paper-input-container> |
80 </template> | 78 </template> |
81 <script src="settings_subpage_search.js"></script> | 79 <script src="settings_subpage_search.js"></script> |
82 </dom-module> | 80 </dom-module> |
OLD | NEW |