OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
91 | 91 |
92 @group Paper Elements | 92 @group Paper Elements |
93 @element paper-dropdown-menu-light | 93 @element paper-dropdown-menu-light |
94 @hero hero.svg | 94 @hero hero.svg |
95 @demo demo/index.html | 95 @demo demo/index.html |
96 --> | 96 --> |
97 | 97 |
98 <dom-module id="paper-dropdown-menu-light"> | 98 <dom-module id="paper-dropdown-menu-light"> |
99 <template> | 99 <template> |
100 <style include="paper-dropdown-menu-shared-styles"> | 100 <style include="paper-dropdown-menu-shared-styles"> |
| 101 :host(:focus) { |
| 102 outline: none; |
| 103 } |
| 104 |
101 /** | 105 /** |
102 * All of these styles below are for styling the fake-input display | 106 * All of these styles below are for styling the fake-input display |
103 */ | 107 */ |
104 .dropdown-trigger { | 108 .dropdown-trigger { |
105 box-sizing: border-box; | 109 box-sizing: border-box; |
106 position: relative; | 110 position: relative; |
107 width: 100%; | 111 width: 100%; |
108 padding: 16px 0 8px 0; | 112 padding: 16px 0 8px 0; |
109 } | 113 } |
110 | 114 |
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
195 :host([invalid]) label.label-is-floating { | 199 :host([invalid]) label.label-is-floating { |
196 color: var(--paper-dropdown-error-color, --error-color); | 200 color: var(--paper-dropdown-error-color, --error-color); |
197 } | 201 } |
198 | 202 |
199 /** | 203 /** |
200 * Sets up the focused underline. It's initially hidden, and becomes | 204 * Sets up the focused underline. It's initially hidden, and becomes |
201 * visible when it's focused. | 205 * visible when it's focused. |
202 */ | 206 */ |
203 label:after { | 207 label:after { |
204 background-color: var(--paper-dropdown-menu-focus-color, --primary-color
); | 208 background-color: var(--paper-dropdown-menu-focus-color, --primary-color
); |
205 bottom: 8px; /* The container has an 8px bottom padding */ | 209 bottom: 7px; /* The container has an 8px bottom padding */ |
206 content: ''; | 210 content: ''; |
207 height: 2px; | 211 height: 2px; |
208 left: 45%; | 212 left: 45%; |
209 position: absolute; | 213 position: absolute; |
210 transition-duration: .2s; | 214 transition-duration: .2s; |
211 transition-timing-function: cubic-bezier(.4,0,.2,1); | 215 transition-timing-function: cubic-bezier(.4,0,.2,1); |
212 visibility: hidden; | 216 visibility: hidden; |
213 width: 8px; | 217 width: 8px; |
214 z-index: 10; | 218 z-index: 10; |
215 } | 219 } |
216 | 220 |
217 :host([invalid]) label:after { | 221 :host([invalid]) label:after { |
218 background-color: var(--paper-dropdown-error-color, --error-color); | 222 background-color: var(--paper-dropdown-error-color, --error-color); |
219 } | 223 } |
220 | 224 |
221 :host([no-label-float]) label:after { | 225 :host([no-label-float]) label:after { |
222 bottom: 8px; /* The container has a 8px bottom padding */ | 226 bottom: 7px; /* The container has a 8px bottom padding */ |
223 } | 227 } |
224 | 228 |
225 :host([focused]:not([disabled])) label:after { | 229 :host([focused]:not([disabled])) label:after { |
226 left: 0; | 230 left: 0; |
227 visibility: visible; | 231 visibility: visible; |
228 width: 100%; | 232 width: 100%; |
229 } | 233 } |
230 | 234 |
231 iron-icon { | 235 iron-icon { |
232 position: absolute; | 236 position: absolute; |
(...skipping 184 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
417 listeners: { | 421 listeners: { |
418 'tap': '_onTap' | 422 'tap': '_onTap' |
419 }, | 423 }, |
420 | 424 |
421 keyBindings: { | 425 keyBindings: { |
422 'up down': 'open', | 426 'up down': 'open', |
423 'esc': 'close' | 427 'esc': 'close' |
424 }, | 428 }, |
425 | 429 |
426 hostAttributes: { | 430 hostAttributes: { |
| 431 tabindex: 0, |
427 role: 'combobox', | 432 role: 'combobox', |
428 'aria-autocomplete': 'none', | 433 'aria-autocomplete': 'none', |
429 'aria-haspopup': 'true' | 434 'aria-haspopup': 'true' |
430 }, | 435 }, |
431 | 436 |
432 observers: [ | 437 observers: [ |
433 '_selectedItemChanged(selectedItem)' | 438 '_selectedItemChanged(selectedItem)' |
434 ], | 439 ], |
435 | 440 |
436 attached: function() { | 441 attached: function() { |
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
562 // Only update if it's actually different. | 567 // Only update if it's actually different. |
563 if (this.$.input && this.$.input.textContent !== this.value) { | 568 if (this.$.input && this.$.input.textContent !== this.value) { |
564 this.$.input.textContent = this.value; | 569 this.$.input.textContent = this.value; |
565 } | 570 } |
566 this._setHasContent(!!this.value); | 571 this._setHasContent(!!this.value); |
567 }, | 572 }, |
568 }); | 573 }); |
569 })(); | 574 })(); |
570 </script> | 575 </script> |
571 </dom-module> | 576 </dom-module> |
OLD | NEW |