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