| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 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="../paper-styles/paper-styles.html"> | 10 <link rel="import" href="../paper-styles/color.html"> |
| 11 <link rel="import" href="../paper-styles/typography.html"> |
| 12 <link rel="import" href="../paper-styles/default-theme.html"> |
| 13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| 11 | 14 |
| 12 <!-- | 15 <!-- |
| 13 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in
put">` or | 16 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in
put">` or |
| 14 `<iron-autogrow-textarea>` and optional add-on elements such as an error message
or character | 17 `<iron-autogrow-textarea>` and optional add-on elements such as an error message
or character |
| 15 counter, used to implement Material Design text fields. | 18 counter, used to implement Material Design text fields. |
| 16 | 19 |
| 17 For example: | 20 For example: |
| 18 | 21 |
| 19 <paper-input-container> | 22 <paper-input-container> |
| 20 <label>Your name</label> | 23 <label>Your name</label> |
| (...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 111 .floated-label-placeholder { | 114 .floated-label-placeholder { |
| 112 @apply(--paper-font-caption); | 115 @apply(--paper-font-caption); |
| 113 } | 116 } |
| 114 | 117 |
| 115 .underline { | 118 .underline { |
| 116 position: relative; | 119 position: relative; |
| 117 } | 120 } |
| 118 | 121 |
| 119 .focused-line { | 122 .focused-line { |
| 120 height: 2px; | 123 height: 2px; |
| 124 @apply(--layout-fit); |
| 121 | 125 |
| 122 -webkit-transform-origin: center center; | 126 -webkit-transform-origin: center center; |
| 123 transform-origin: center center; | 127 transform-origin: center center; |
| 124 -webkit-transform: scale3d(0,1,1); | 128 -webkit-transform: scale3d(0,1,1); |
| 125 transform: scale3d(0,1,1); | 129 transform: scale3d(0,1,1); |
| 126 | 130 |
| 127 background: var(--paper-input-container-focus-color, --default-primary-c
olor); | 131 background: var(--paper-input-container-focus-color, --default-primary-c
olor); |
| 128 | 132 |
| 129 @apply(--paper-input-container-underline-focus); | 133 @apply(--paper-input-container-underline-focus); |
| 130 } | 134 } |
| (...skipping 13 matching lines...) Expand all Loading... |
| 144 -webkit-transform: none; | 148 -webkit-transform: none; |
| 145 transform: none; | 149 transform: none; |
| 146 -webkit-transition: -webkit-transform 0.25s; | 150 -webkit-transition: -webkit-transform 0.25s; |
| 147 transition: transform 0.25s; | 151 transition: transform 0.25s; |
| 148 | 152 |
| 149 @apply(--paper-transition-easing); | 153 @apply(--paper-transition-easing); |
| 150 } | 154 } |
| 151 | 155 |
| 152 .unfocused-line { | 156 .unfocused-line { |
| 153 height: 1px; | 157 height: 1px; |
| 158 @apply(--layout-fit); |
| 154 background: var(--paper-input-container-color, --secondary-text-color); | 159 background: var(--paper-input-container-color, --secondary-text-color); |
| 155 | 160 |
| 156 @apply(--paper-input-container-underline); | 161 @apply(--paper-input-container-underline); |
| 157 } | 162 } |
| 158 | 163 |
| 159 :host([disabled]) .unfocused-line { | 164 :host([disabled]) .unfocused-line { |
| 160 border-bottom: 1px dashed; | 165 border-bottom: 1px dashed; |
| 161 border-color: var(--paper-input-container-color, --secondary-text-color)
; | 166 border-color: var(--paper-input-container-color, --secondary-text-color)
; |
| 162 background: transparent; | 167 background: transparent; |
| 163 | 168 |
| (...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 291 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus
ed,invalid,_inputHasContent)]]"> | 296 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus
ed,invalid,_inputHasContent)]]"> |
| 292 <content select="[prefix]" id="prefix"></content> | 297 <content select="[prefix]" id="prefix"></content> |
| 293 | 298 |
| 294 <div class="label-and-input-container" id="labelAndInputContainer"> | 299 <div class="label-and-input-container" id="labelAndInputContainer"> |
| 295 <content select=":not([add-on]):not([prefix]):not([suffix])"></content> | 300 <content select=":not([add-on]):not([prefix]):not([suffix])"></content> |
| 296 </div> | 301 </div> |
| 297 <content select="[suffix]"></content> | 302 <content select="[suffix]"></content> |
| 298 </div> | 303 </div> |
| 299 | 304 |
| 300 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> | 305 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> |
| 301 <div class="unfocused-line fit"></div> | 306 <div class="unfocused-line"></div> |
| 302 <div class="focused-line fit"></div> | 307 <div class="focused-line"></div> |
| 303 </div> | 308 </div> |
| 304 | 309 |
| 305 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> | 310 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> |
| 306 <content id="addOnContent" select="[add-on]"></content> | 311 <content id="addOnContent" select="[add-on]"></content> |
| 307 </div> | 312 </div> |
| 308 | 313 |
| 309 </template> | 314 </template> |
| 310 </dom-module> | 315 </dom-module> |
| 311 | 316 |
| 312 <script src="paper-input-container-extracted.js"></script></body></html> | 317 <script src="paper-input-container-extracted.js"></script></body></html> |
| OLD | NEW |