third_party/polymer/components-chromium/paper-input/paper-input.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
   8 -->
   9
  10 <!--
  11 `paper-input` is a single- or multi-line text field where user can enter input.
  12 It can optionally have a label.
  13
  14 Example:
  15
  16     <paper-input label="Your Name"></paper-input>
  17     <paper-input multiline label="Enter multiple lines here"></paper-input>
  18
  19 Theming
  20 --------
  21
  22 Set `CoreStyle.g.paperInput.focusedColor` and `CoreStyle.g.paperInput.invalidColor` to theme
  23 the focused and invalid states.
  24
  25 @group Paper Elements
  26 @element paper-input
  27 @extends core-input
  28 @homepage github.io
  29 -->
  30 <link href="../polymer/polymer.html" rel="import">
  31 <link href="../core-input/core-input.html" rel="import">
  32 <link href="../core-style/core-style.html" rel="import">
  33
  34 <core-style id="paper-input">
  35
  36 #label.focused,
  37 #floatedLabel.focused {
  38   color: {{g.paperInput.focusedColor}};
  39 }
  40
  41 #underlineHighlight.focused,
  42 #caretInner {
  43   background-color: {{g.paperInput.focusedColor}};
  44 }
  45
  46 #error,
  47 :host(.invalid) #label.focused,
  48 :host(.invalid) #floatedLabel.focused {
  49   color: {{g.paperInput.invalidColor}};
  50 }
  51 :host(.invalid) #underlineHighlight.focused,
  52 :host(.invalid) #caretInner {
  53   background-color: {{g.paperInput.invalidColor}};
  54 }
  55
  56 </core-style>
  57
  58 <polymer-element name="paper-input" extends="core-input" attributes="label floatingLabel maxRows error" on-down="{{downAction}}" on-up="{{upAction}}" assetpath="">
  59
  60   <template>
  61
  62     <link href="paper-input.css" rel="stylesheet">
  63
  64     <core-style ref="paper-input"></core-style>
  65
  66     <div id="floatedLabel" class="hidden" hidden?="{{!floatingLabel}}"><span id="floatedLabelSpan">{{label}}</span></div>
  67
  68     <div id="container" on-transitionend="{{transitionEndAction}}" on-webkittransitionend="{{transitionEndAction}}">
  69
  70       <div id="label"><span id="labelSpan">{{label}}</span></div>
  71
  72       <div id="inputContainer">
  73
  74         <div id="inputClone">
  75           <span id="inputCloneSpan" aria-hidden="true">&#xA0;</span>
  76         </div>
  77
  78         <template if="{{multiline}}">
  79           <div id="minInputHeight"></div>
  80           <div id="maxInputHeight"></div>
  81         </template>
  82
  83         <shadow></shadow>
  84
  85       </div>
  86
  87       <div id="underlineContainer">
  88         <div id="underline"></div>
  89         <div id="underlineHighlight" class="focusedColor"></div>
  90       </div>
  91
  92       <div id="caret">
  93         <div id="caretInner" class="focusedColor"></div>
  94       </div>
  95
  96     </div>
  97
  98     <div id="errorContainer">
  99       <div id="error" role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div>
 100       <div id="errorIcon"></div>
 101     </div>
 102
 103   </template>
 104
 105
 106
 107 </polymer-element>
 108 <script src="paper-input-extracted.js"></script>