| 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 --><html><head><link rel="import" href="../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | 10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
| (...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 89 | 89 |
| 90 @group Paper Elements | 90 @group Paper Elements |
| 91 @element paper-dropdown-menu-light | 91 @element paper-dropdown-menu-light |
| 92 @hero hero.svg | 92 @hero hero.svg |
| 93 @demo demo/index.html | 93 @demo demo/index.html |
| 94 --> | 94 --> |
| 95 | 95 |
| 96 </head><body><dom-module id="paper-dropdown-menu-light"> | 96 </head><body><dom-module id="paper-dropdown-menu-light"> |
| 97 <template> | 97 <template> |
| 98 <style include="paper-dropdown-menu-shared-styles"> | 98 <style include="paper-dropdown-menu-shared-styles"> |
| 99 :host(:focus) { |
| 100 outline: none; |
| 101 } |
| 102 |
| 99 /** | 103 /** |
| 100 * All of these styles below are for styling the fake-input display | 104 * All of these styles below are for styling the fake-input display |
| 101 */ | 105 */ |
| 102 .dropdown-trigger { | 106 .dropdown-trigger { |
| 103 box-sizing: border-box; | 107 box-sizing: border-box; |
| 104 position: relative; | 108 position: relative; |
| 105 width: 100%; | 109 width: 100%; |
| 106 padding: 16px 0 8px 0; | 110 padding: 16px 0 8px 0; |
| 107 } | 111 } |
| 108 | 112 |
| (...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 193 :host([invalid]) label.label-is-floating { | 197 :host([invalid]) label.label-is-floating { |
| 194 color: var(--paper-dropdown-error-color, --error-color); | 198 color: var(--paper-dropdown-error-color, --error-color); |
| 195 } | 199 } |
| 196 | 200 |
| 197 /** | 201 /** |
| 198 * Sets up the focused underline. It's initially hidden, and becomes | 202 * Sets up the focused underline. It's initially hidden, and becomes |
| 199 * visible when it's focused. | 203 * visible when it's focused. |
| 200 */ | 204 */ |
| 201 label:after { | 205 label:after { |
| 202 background-color: var(--paper-dropdown-menu-focus-color, --primary-color
); | 206 background-color: var(--paper-dropdown-menu-focus-color, --primary-color
); |
| 203 bottom: 8px; /* The container has an 8px bottom padding */ | 207 bottom: 7px; /* The container has an 8px bottom padding */ |
| 204 content: ''; | 208 content: ''; |
| 205 height: 2px; | 209 height: 2px; |
| 206 left: 45%; | 210 left: 45%; |
| 207 position: absolute; | 211 position: absolute; |
| 208 transition-duration: .2s; | 212 transition-duration: .2s; |
| 209 transition-timing-function: cubic-bezier(.4,0,.2,1); | 213 transition-timing-function: cubic-bezier(.4,0,.2,1); |
| 210 visibility: hidden; | 214 visibility: hidden; |
| 211 width: 8px; | 215 width: 8px; |
| 212 z-index: 10; | 216 z-index: 10; |
| 213 } | 217 } |
| 214 | 218 |
| 215 :host([invalid]) label:after { | 219 :host([invalid]) label:after { |
| 216 background-color: var(--paper-dropdown-error-color, --error-color); | 220 background-color: var(--paper-dropdown-error-color, --error-color); |
| 217 } | 221 } |
| 218 | 222 |
| 219 :host([no-label-float]) label:after { | 223 :host([no-label-float]) label:after { |
| 220 bottom: 8px; /* The container has a 8px bottom padding */ | 224 bottom: 7px; /* The container has a 8px bottom padding */ |
| 221 } | 225 } |
| 222 | 226 |
| 223 :host([focused]:not([disabled])) label:after { | 227 :host([focused]:not([disabled])) label:after { |
| 224 left: 0; | 228 left: 0; |
| 225 visibility: visible; | 229 visibility: visible; |
| 226 width: 100%; | 230 width: 100%; |
| 227 } | 231 } |
| 228 | 232 |
| 229 iron-icon { | 233 iron-icon { |
| 230 position: absolute; | 234 position: absolute; |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 269 <div id="input" tabindex="-1"> </div> | 273 <div id="input" tabindex="-1"> </div> |
| 270 <iron-icon icon="paper-dropdown-menu:arrow-drop-down"></iron-icon> | 274 <iron-icon icon="paper-dropdown-menu:arrow-drop-down"></iron-icon> |
| 271 <span class="error">[[errorMessage]]</span> | 275 <span class="error">[[errorMessage]]</span> |
| 272 </div> | 276 </div> |
| 273 <content id="content" select=".dropdown-content"></content> | 277 <content id="content" select=".dropdown-content"></content> |
| 274 </paper-menu-button> | 278 </paper-menu-button> |
| 275 </template> | 279 </template> |
| 276 | 280 |
| 277 </dom-module> | 281 </dom-module> |
| 278 <script src="paper-dropdown-menu-light-extracted.js"></script></body></html> | 282 <script src="paper-dropdown-menu-light-extracted.js"></script></body></html> |
| OLD | NEW |