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 |