| 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 }; |
| 28 } | 39 } |
| 29 | 40 |
| 30 paper-icon-button { | 41 paper-icon-button { |
| 31 /* A 16px icon that fits on the input line. */ | 42 /* A 16px icon that fits on the input line. */ |
| 32 height: 24px; | 43 height: 24px; |
| 33 padding: 4px; | 44 padding: 4px; |
| 34 width: 24px; | 45 width: 24px; |
| 35 } | 46 } |
| 36 | 47 |
| 37 #searchIcon { | 48 #searchIcon { |
| 38 height: 16px; | 49 height: 16px; |
| 39 padding: 4px; | 50 padding: 4px; |
| 51 vertical-align: middle; |
| 40 width: 16px; | 52 width: 16px; |
| 41 } | 53 } |
| 42 | 54 |
| 43 paper-input-container { | 55 paper-input-container { |
| 44 display: inline-block; | 56 display: inline-block; |
| 57 vertical-align: middle; |
| 45 width: 160px; /* Special width for search input. */ | 58 width: 160px; /* Special width for search input. */ |
| 46 } | 59 } |
| 47 | 60 |
| 48 input[type='search']::-webkit-search-cancel-button { | 61 input[type='search']::-webkit-search-cancel-button { |
| 49 -webkit-appearance: none; | 62 -webkit-appearance: none; |
| 50 } | 63 } |
| 51 | 64 |
| 52 #prompt, | 65 #prompt, |
| 53 #searchInput { | 66 #searchInput { |
| 54 font-size: 92.3076923%; /* To 12px from 13px. */ | 67 font-size: 92.3076923%; /* To 12px from 13px. */ |
| (...skipping 23 matching lines...) Expand all Loading... |
| 78 on-input="onSearchTermInput" aria-labelledby="prompt" incremental> | 91 on-input="onSearchTermInput" aria-labelledby="prompt" incremental> |
| 79 </input> | 92 </input> |
| 80 <paper-icon-button suffix icon="cr:cancel" id="clearSearch" | 93 <paper-icon-button suffix icon="cr:cancel" id="clearSearch" |
| 81 on-tap="onTapClear_" title="[[clearLabel]]" | 94 on-tap="onTapClear_" title="[[clearLabel]]" |
| 82 hidden$="[[!hasSearchText]]"> | 95 hidden$="[[!hasSearchText]]"> |
| 83 </paper-icon-button> | 96 </paper-icon-button> |
| 84 </paper-input-container> | 97 </paper-input-container> |
| 85 </template> | 98 </template> |
| 86 <script src="settings_subpage_search.js"></script> | 99 <script src="settings_subpage_search.js"></script> |
| 87 </dom-module> | 100 </dom-module> |
| OLD | NEW |