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