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