| 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="../iron-flex-layout/iron-flex-layout.html"> | 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| 11 <link rel="import" href="../paper-styles/color.html"> | |
| 12 <link rel="import" href="../paper-styles/default-theme.html"> | 11 <link rel="import" href="../paper-styles/default-theme.html"> |
| 13 <link rel="import" href="../paper-styles/typography.html"> | 12 <link rel="import" href="../paper-styles/typography.html"> |
| 14 | 13 |
| 15 <!-- | 14 <!-- |
| 16 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in
put">` or | 15 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in
put">` or |
| 17 `<iron-autogrow-textarea>` and optional add-on elements such as an error message
or character | 16 `<iron-autogrow-textarea>` and optional add-on elements such as an error message
or character |
| 18 counter, used to implement Material Design text fields. | 17 counter, used to implement Material Design text fields. |
| 19 | 18 |
| 20 For example: | 19 For example: |
| 21 | 20 |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 65 <paper-icon-button suffix icon="clear"></paper-icon-button> | 64 <paper-icon-button suffix icon="clear"></paper-icon-button> |
| 66 </paper-input-container> | 65 </paper-input-container> |
| 67 | 66 |
| 68 ### Styling | 67 ### Styling |
| 69 | 68 |
| 70 The following custom properties and mixins are available for styling: | 69 The following custom properties and mixins are available for styling: |
| 71 | 70 |
| 72 Custom property | Description | Default | 71 Custom property | Description | Default |
| 73 ----------------|-------------|---------- | 72 ----------------|-------------|---------- |
| 74 `--paper-input-container-color` | Label and underline color when the input is no
t focused | `--secondary-text-color` | 73 `--paper-input-container-color` | Label and underline color when the input is no
t focused | `--secondary-text-color` |
| 75 `--paper-input-container-focus-color` | Label and underline color when the input
is focused | `--default-primary-color` | 74 `--paper-input-container-focus-color` | Label and underline color when the input
is focused | `--primary-color` |
| 76 `--paper-input-container-invalid-color` | Label and underline color when the inp
ut is is invalid | `--google-red-500` | 75 `--paper-input-container-invalid-color` | Label and underline color when the inp
ut is is invalid | `--error-color` |
| 77 `--paper-input-container-input-color` | Input foreground color | `--primary-text
-color` | 76 `--paper-input-container-input-color` | Input foreground color | `--primary-text
-color` |
| 78 `--paper-input-container` | Mixin applied to the container | `{}` | 77 `--paper-input-container` | Mixin applied to the container | `{}` |
| 79 `--paper-input-container-disabled` | Mixin applied to the container when it's di
sabled | `{}` | 78 `--paper-input-container-disabled` | Mixin applied to the container when it's di
sabled | `{}` |
| 80 `--paper-input-container-label` | Mixin applied to the label | `{}` | 79 `--paper-input-container-label` | Mixin applied to the label | `{}` |
| 81 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu
t is focused | `{}` | 80 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu
t is focused | `{}` |
| 82 `--paper-input-container-label-floating` | Mixin applied to the label when float
ing | `{}` | 81 `--paper-input-container-label-floating` | Mixin applied to the label when float
ing | `{}` |
| 83 `--paper-input-container-input` | Mixin applied to the input | `{}` | 82 `--paper-input-container-input` | Mixin applied to the input | `{}` |
| 84 `--paper-input-container-underline` | Mixin applied to the underline | `{}` | 83 `--paper-input-container-underline` | Mixin applied to the underline | `{}` |
| 85 `--paper-input-container-underline-focus` | Mixin applied to the underline when
the input is focused | `{}` | 84 `--paper-input-container-underline-focus` | Mixin applied to the underline when
the input is focused | `{}` |
| 86 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh
en the input is disabled | `{}` | 85 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh
en the input is disabled | `{}` |
| (...skipping 29 matching lines...) Expand all Loading... |
| 116 @apply(--paper-font-caption); | 115 @apply(--paper-font-caption); |
| 117 } | 116 } |
| 118 | 117 |
| 119 .underline { | 118 .underline { |
| 120 position: relative; | 119 position: relative; |
| 121 } | 120 } |
| 122 | 121 |
| 123 .focused-line { | 122 .focused-line { |
| 124 @apply(--layout-fit); | 123 @apply(--layout-fit); |
| 125 | 124 |
| 126 background: var(--paper-input-container-focus-color, --default-primary-c
olor); | 125 background: var(--paper-input-container-focus-color, --primary-color); |
| 127 height: 2px; | 126 height: 2px; |
| 127 |
| 128 -webkit-transform-origin: center center; | 128 -webkit-transform-origin: center center; |
| 129 transform-origin: center center; | 129 transform-origin: center center; |
| 130 -webkit-transform: scale3d(0,1,1); | 130 -webkit-transform: scale3d(0,1,1); |
| 131 transform: scale3d(0,1,1); | 131 transform: scale3d(0,1,1); |
| 132 | 132 |
| 133 @apply(--paper-input-container-underline-focus); | 133 @apply(--paper-input-container-underline-focus); |
| 134 } | 134 } |
| 135 | 135 |
| 136 .underline.is-highlighted .focused-line { | 136 .underline.is-highlighted .focused-line { |
| 137 -webkit-transform: none; | 137 -webkit-transform: none; |
| 138 transform: none; | 138 transform: none; |
| 139 -webkit-transition: -webkit-transform 0.25s; | 139 -webkit-transition: -webkit-transform 0.25s; |
| 140 transition: transform 0.25s; | 140 transition: transform 0.25s; |
| 141 | 141 |
| 142 @apply(--paper-transition-easing); | 142 @apply(--paper-transition-easing); |
| 143 } | 143 } |
| 144 | 144 |
| 145 .underline.is-invalid .focused-line { | 145 .underline.is-invalid .focused-line { |
| 146 background: var(--paper-input-container-invalid-color, --google-red-500)
; | 146 background: var(--paper-input-container-invalid-color, --error-color); |
| 147 -webkit-transform: none; | 147 -webkit-transform: none; |
| 148 transform: none; | 148 transform: none; |
| 149 -webkit-transition: -webkit-transform 0.25s; | 149 -webkit-transition: -webkit-transform 0.25s; |
| 150 transition: transform 0.25s; | 150 transition: transform 0.25s; |
| 151 | 151 |
| 152 @apply(--paper-transition-easing); | 152 @apply(--paper-transition-easing); |
| 153 } | 153 } |
| 154 | 154 |
| 155 .unfocused-line { | 155 .unfocused-line { |
| 156 @apply(--layout-fit); | 156 @apply(--layout-fit); |
| 157 | 157 |
| 158 background: var(--paper-input-container-color, --secondary-text-color); |
| 158 height: 1px; | 159 height: 1px; |
| 159 background: var(--paper-input-container-color, --secondary-text-color); | |
| 160 | 160 |
| 161 @apply(--paper-input-container-underline); | 161 @apply(--paper-input-container-underline); |
| 162 } | 162 } |
| 163 | 163 |
| 164 :host([disabled]) .unfocused-line { | 164 :host([disabled]) .unfocused-line { |
| 165 border-bottom: 1px dashed; | 165 border-bottom: 1px dashed; |
| 166 border-color: var(--paper-input-container-color, --secondary-text-color)
; | 166 border-color: var(--paper-input-container-color, --secondary-text-color)
; |
| 167 background: transparent; | 167 background: transparent; |
| 168 | 168 |
| 169 @apply(--paper-input-container-underline-disabled); | 169 @apply(--paper-input-container-underline-disabled); |
| 170 } | 170 } |
| 171 | 171 |
| 172 .label-and-input-container { | 172 .label-and-input-container { |
| 173 @apply(--layout-flex-auto); | 173 @apply(--layout-flex-auto); |
| 174 @apply(--layout-relative); | 174 @apply(--layout-relative); |
| 175 |
| 175 width: 100%; | 176 width: 100%; |
| 176 max-width: 100%; | 177 max-width: 100%; |
| 177 } | 178 } |
| 178 | 179 |
| 179 .input-content { | 180 .input-content { |
| 180 @apply(--layout-horizontal); | 181 @apply(--layout-horizontal); |
| 181 @apply(--layout-center); | 182 @apply(--layout-center); |
| 182 | 183 |
| 183 position: relative; | 184 position: relative; |
| 184 } | 185 } |
| 185 | 186 |
| 186 .input-content ::content label, | 187 .input-content ::content label, |
| 187 .input-content ::content .paper-input-label { | 188 .input-content ::content .paper-input-label { |
| 188 position: absolute; | 189 position: absolute; |
| 189 top: 0; | 190 top: 0; |
| 190 right: 0; | 191 right: 0; |
| 191 left: 0; | 192 left: 0; |
| 192 width: 100%; | 193 width: 100%; |
| 193 font: inherit; | 194 font: inherit; |
| 194 color: var(--paper-input-container-color, --secondary-text-color); | 195 color: var(--paper-input-container-color, --secondary-text-color); |
| 196 -webkit-transition: -webkit-transform 0.25s, width 0.25s; |
| 197 transition: transform 0.25s, width 0.25s; |
| 198 -webkit-transform-origin: left top; |
| 199 transform-origin: left top; |
| 195 | 200 |
| 196 @apply(--paper-font-common-nowrap); | 201 @apply(--paper-font-common-nowrap); |
| 197 @apply(--paper-font-subhead); | 202 @apply(--paper-font-subhead); |
| 198 @apply(--paper-input-container-label); | 203 @apply(--paper-input-container-label); |
| 204 @apply(--paper-transition-easing); |
| 199 } | 205 } |
| 200 | 206 |
| 201 .input-content.label-is-floating ::content label, | 207 .input-content.label-is-floating ::content label, |
| 202 .input-content.label-is-floating ::content .paper-input-label { | 208 .input-content.label-is-floating ::content .paper-input-label { |
| 203 -webkit-transform: translateY(-75%) scale(0.75); | 209 -webkit-transform: translateY(-75%) scale(0.75); |
| 204 transform: translateY(-75%) scale(0.75); | 210 transform: translateY(-75%) scale(0.75); |
| 205 -webkit-transition: -webkit-transform 0.25s, width 0.25s; | |
| 206 transition: transform 0.25s, width 0.25s; | |
| 207 -webkit-transform-origin: left top; | |
| 208 transform-origin: left top; | |
| 209 | 211 |
| 210 /* Since we scale to 75/100 of the size, we actually have 100/75 of the | 212 /* Since we scale to 75/100 of the size, we actually have 100/75 of the |
| 211 original space now available */ | 213 original space now available */ |
| 212 width: 133%; | 214 width: 133%; |
| 213 | 215 |
| 214 @apply(--paper-transition-easing); | |
| 215 @apply(--paper-input-container-label-floating); | 216 @apply(--paper-input-container-label-floating); |
| 216 } | 217 } |
| 217 | 218 |
| 218 :host-context([dir="rtl"]) .input-content.label-is-floating ::content labe
l, | 219 :host-context([dir="rtl"]) .input-content.label-is-floating ::content labe
l, |
| 219 :host-context([dir="rtl"]) .input-content.label-is-floating ::content .pap
er-input-label { | 220 :host-context([dir="rtl"]) .input-content.label-is-floating ::content .pap
er-input-label { |
| 220 /* TODO(noms): Figure out why leaving the width at 133% before the anima
tion | 221 /* TODO(noms): Figure out why leaving the width at 133% before the anima
tion |
| 221 * actually makes | 222 * actually makes |
| 222 * it wider on the right side, not left side, as you would expect in RTL
*/ | 223 * it wider on the right side, not left side, as you would expect in RTL
*/ |
| 223 width: 100%; | 224 width: 100%; |
| 224 -webkit-transform-origin: right top; | 225 -webkit-transform-origin: right top; |
| 225 transform-origin: right top; | 226 transform-origin: right top; |
| 226 } | 227 } |
| 227 | 228 |
| 228 .input-content.label-is-highlighted ::content label, | 229 .input-content.label-is-highlighted ::content label, |
| 229 .input-content.label-is-highlighted ::content .paper-input-label { | 230 .input-content.label-is-highlighted ::content .paper-input-label { |
| 230 color: var(--paper-input-container-focus-color, --default-primary-color)
; | 231 color: var(--paper-input-container-focus-color, --primary-color); |
| 231 | 232 |
| 232 @apply(--paper-input-container-label-focus); | 233 @apply(--paper-input-container-label-focus); |
| 233 } | 234 } |
| 234 | 235 |
| 235 .input-content.is-invalid ::content label, | 236 .input-content.is-invalid ::content label, |
| 236 .input-content.is-invalid ::content .paper-input-label { | 237 .input-content.is-invalid ::content .paper-input-label { |
| 237 color: var(--paper-input-container-invalid-color, --google-red-500); | 238 color: var(--paper-input-container-invalid-color, --error-color); |
| 238 } | 239 } |
| 239 | 240 |
| 240 .input-content.label-is-hidden ::content label, | 241 .input-content.label-is-hidden ::content label, |
| 241 .input-content.label-is-hidden ::content .paper-input-label { | 242 .input-content.label-is-hidden ::content .paper-input-label { |
| 242 visibility: hidden; | 243 visibility: hidden; |
| 243 } | 244 } |
| 244 | 245 |
| 245 .input-content ::content input, | 246 .input-content ::content input, |
| 246 .input-content ::content textarea, | 247 .input-content ::content textarea, |
| 247 .input-content ::content iron-autogrow-textarea, | 248 .input-content ::content iron-autogrow-textarea, |
| 248 .input-content ::content .paper-input-input { | 249 .input-content ::content .paper-input-input { |
| 249 position: relative; /* to make a stacking context */ | 250 position: relative; /* to make a stacking context */ |
| 250 outline: none; | 251 outline: none; |
| 251 box-shadow: none; | 252 box-shadow: none; |
| 252 padding: 0; | 253 padding: 0; |
| 253 width: 100%; | 254 width: 100%; |
| 254 max-width: 100%; | 255 max-width: 100%; |
| 255 background: transparent; | 256 background: transparent; |
| 256 border: none; | 257 border: none; |
| 257 color: var(--paper-input-container-input-color, --primary-text-color); | 258 color: var(--paper-input-container-input-color, --primary-text-color); |
| 258 -webkit-appearance: none; | 259 -webkit-appearance: none; |
| 259 text-align: inherit; | 260 text-align: inherit; |
| 260 | 261 |
| 261 @apply(--paper-font-subhead); | 262 @apply(--paper-font-subhead); |
| 262 @apply(--paper-input-container-input); | 263 @apply(--paper-input-container-input); |
| 263 } | 264 } |
| 264 | 265 |
| 265 ::content [prefix] { | 266 ::content [prefix] { |
| 266 @apply(--paper-font-subhead); | 267 @apply(--paper-font-subhead); |
| 268 |
| 267 @apply(--paper-input-prefix); | 269 @apply(--paper-input-prefix); |
| 268 @apply(--layout-flex-none); | 270 @apply(--layout-flex-none); |
| 269 } | 271 } |
| 270 | 272 |
| 271 ::content [suffix] { | 273 ::content [suffix] { |
| 272 @apply(--paper-font-subhead); | 274 @apply(--paper-font-subhead); |
| 275 |
| 273 @apply(--paper-input-suffix); | 276 @apply(--paper-input-suffix); |
| 274 @apply(--layout-flex-none); | 277 @apply(--layout-flex-none); |
| 275 } | 278 } |
| 276 | 279 |
| 277 /* Firefox sets a min-width on the input, which can cause layout issues */ | 280 /* Firefox sets a min-width on the input, which can cause layout issues */ |
| 278 .input-content ::content input { | 281 .input-content ::content input { |
| 279 min-width: 0; | 282 min-width: 0; |
| 280 } | 283 } |
| 281 | 284 |
| 282 .input-content ::content textarea { | 285 .input-content ::content textarea { |
| 283 resize: none; | 286 resize: none; |
| 284 } | 287 } |
| 285 | 288 |
| 286 .add-on-content { | 289 .add-on-content { |
| 287 position: relative; | 290 position: relative; |
| 288 } | 291 } |
| 289 | 292 |
| 290 .add-on-content.is-invalid ::content * { | 293 .add-on-content.is-invalid ::content * { |
| 291 color: var(--paper-input-container-invalid-color, --google-red-500); | 294 color: var(--paper-input-container-invalid-color, --error-color); |
| 292 } | 295 } |
| 293 | 296 |
| 294 .add-on-content.is-highlighted ::content * { | 297 .add-on-content.is-highlighted ::content * { |
| 295 color: var(--paper-input-container-focus-color, --default-primary-color)
; | 298 color: var(--paper-input-container-focus-color, --primary-color); |
| 296 } | 299 } |
| 297 </style> | 300 </style> |
| 298 | 301 |
| 299 <template is="dom-if" if="[[!noLabelFloat]]"> | 302 <template is="dom-if" if="[[!noLabelFloat]]"> |
| 300 <div class="floated-label-placeholder"> </div> | 303 <div class="floated-label-placeholder"> </div> |
| 301 </template> | 304 </template> |
| 302 | 305 |
| 303 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus
ed,invalid,_inputHasContent)]]"> | 306 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus
ed,invalid,_inputHasContent)]]"> |
| 304 <content select="[prefix]" id="prefix"></content> | 307 <content select="[prefix]" id="prefix"></content> |
| 305 | 308 |
| 306 <div class="label-and-input-container" id="labelAndInputContainer"> | 309 <div class="label-and-input-container" id="labelAndInputContainer"> |
| 307 <content select=":not([add-on]):not([prefix]):not([suffix])"></content> | 310 <content select=":not([add-on]):not([prefix]):not([suffix])"></content> |
| 308 </div> | 311 </div> |
| 309 | 312 |
| 310 <content select="[suffix]"></content> | 313 <content select="[suffix]"></content> |
| 311 </div> | 314 </div> |
| 312 | 315 |
| 313 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> | 316 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> |
| 314 <div class="unfocused-line"></div> | 317 <div class="unfocused-line"></div> |
| 315 <div class="focused-line"></div> | 318 <div class="focused-line"></div> |
| 316 </div> | 319 </div> |
| 317 | 320 |
| 318 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> | 321 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> |
| 319 <content id="addOnContent" select="[add-on]"></content> | 322 <content id="addOnContent" select="[add-on]"></content> |
| 320 </div> | 323 </div> |
| 321 </template> | 324 </template> |
| 322 </dom-module> | 325 </dom-module> |
| 323 | 326 |
| 324 <script src="paper-input-container-extracted.js"></script></body></html> | 327 <script src="paper-input-container-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1766433002:
Roll Polymer to 1.3.1 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master