| /* |
| * @license |
| * Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| * Code distributed by Google as part of the polymer project is also |
| * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| */ |
| |
| :host { |
| display: inline-block; |
| outline: none; |
| text-align: inherit; |
| color: #757575; |
| padding: 0.75em 0; |
| } |
| |
| :host /deep/ input, |
| :host /deep/ textarea { |
| font: inherit; |
| color: #000; |
| padding: 0; |
| margin: 0; |
| background-color: transparent; |
| border: none; |
| outline: none; |
| /* see comments in template */ |
| width: 100%; |
| height: 100%; |
| } |
| |
| input:invalid, |
| textarea:invalid { |
| box-shadow: none; |
| } |
| |
| textarea { |
| resize: none; |
| } |
| |
| [invisible] { |
| visibility: hidden; |
| } |
| |
| [animated] { |
| visibility: visible !important; |
| -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .floated-label { |
| font-size: 0.75em; |
| background: transparent; |
| white-space: nowrap; |
| } |
| |
| .mirror-text { |
| padding: 0.5em 0 0.25em; |
| max-width: 100%; |
| white-space: nowrap; |
| } |
| |
| :host([multiline]) .mirror-text { |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
| |
| .label { |
| padding: 0.5em 0 0.25em; |
| background: transparent; |
| pointer-events: none; |
| } |
| |
| .label-text { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| display: inline-block; |
| max-width: 100%; |
| -moz-transform-origin: 0% 0%; |
| -webkit-transform-origin: 0% 0%; |
| transform-origin: 0% 0%; |
| } |
| |
| .cursor { |
| position: absolute; |
| top: 0.4em; |
| left: 0; |
| width: 1px; |
| height: 1.4em; |
| opacity: 0.4; |
| -moz-transform-origin: 0%; |
| -webkit-transform-origin: 0%; |
| transform-origin: 0%; |
| -webkit-transform: none; |
| transform: none; |
| } |
| |
| .cursor[invisible] { |
| opacity: 0.75; |
| -webkit-transform: translate3d(3em,0,0) scale3d(50,1,1); |
| transform: translate3d(3em,0,0) scale3d(50,1,1); |
| } |
| |
| .input-container { |
| position: absolute; |
| /* simulate padding so the input/textarea can use 100% width/height */ |
| top: 0.5em; |
| right: 0; |
| bottom: 0.25em; |
| left: 0; |
| } |
| |
| .underline { |
| height: 0px; |
| overflow: visible; |
| } |
| |
| :host([disabled]) .underline { |
| border-bottom: 1px dashed; |
| } |
| |
| .unfocused-underline { |
| height: 1px; |
| background: #757575; |
| border-bottom-color: #757575; |
| } |
| |
| .focused-underline { |
| height: 2px; |
| -webkit-transform: none; |
| transform: none; |
| } |
| |
| .focused-underline[invisible] { |
| -webkit-transform: scale3d(0,1,1); |
| transform: scale3d(0,1,1); |
| } |
| |
| .error-text { |
| font-size: 0.75em; |
| padding: 0.5em 0; |
| } |
| |
| .error-icon { |
| height: 20px; |
| width: 20px; |
| } |