| 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 |