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

   1 <!--
   2 @license
   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.github.io/LICENSE.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/CONTRIBUTORS.txt
   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/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/paper-styles.html">
  11
  12 <!--
  13 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or
  14 `<iron-autogrow-textarea>` and optional add-on elements such as an error message or character
  15 counter, used to implement Material Design text fields.
  16
  17 For example:
  18
  19     <paper-input-container>
  20       <label>Your name</label>
  21       <input is="iron-input">
  22     </paper-input-container>
  23
  24 ### Listening for input changes
  25
  26 By default, it listens for changes on the `bind-value` attribute on its children nodes and perform
  27 tasks such as auto-validating and label styling when the `bind-value` changes. You can configure
  28 the attribute it listens to with the `attr-for-value` attribute.
  29
  30 ### Using a custom input element
  31
  32 You can use a custom input element in a `<paper-input-container>`, for example to implement a
  33 compound input field like a social security number input. The custom input element should have the
  34 `paper-input-input` class, have a `notify:true` value property and optionally implements
  35 `Polymer.IronValidatableBehavior` if it is validatble.
  36
  37     <paper-input-container attr-for-value="ssn-value">
  38       <label>Social security number</label>
  39       <ssn-input class="paper-input-input"></ssn-input>
  40     </paper-input-container>
  41
  42 ### Validation
  43
  44 If the `auto-validate` attribute is set, the input container will validate the input and update
  45 the container styling when the input value changes.
  46
  47 ### Add-ons
  48
  49 Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and
  50 implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value
  51 or validity changes, and may implement functionality such as error messages or character counters.
  52 They appear at the bottom of the input.
  53
  54 ### Styling
  55
  56 The following custom properties and mixins are available for styling:
  57
  58 Custom property | Description | Default
  59 ----------------|-------------|----------
  60 `--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
  61 `--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
  62 `--paper-input-container-invalid-color` | Label and underline color when the input is focused | `--google-red-500`
  63 `--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
  64 `--paper-input-container` | Mixin applied to the container | `{}`
  65 `--paper-input-container-label` | Mixin applied to the label | `{}`
  66 `--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}`
  67 `--paper-input-container-input` | Mixin applied to the input | `{}`
  68 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
  69 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}`
  70 `--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
  71
  72 This element is `display:block` by default, but you can set the `inline` attribute to make it
  73 `display:inline-block`.
  74 -->
  75 </head><body><dom-module id="paper-input-container">
  76
  77   <style>
  78
  79     :host {
  80       display: block;
  81       padding: 8px 0;
  82
  83       @apply(--paper-input-container);
  84     }
  85
  86     :host[inline] {
  87       display: inline-block;
  88     }
  89
  90     :host([disabled]) {
  91       pointer-events: none;
  92       opacity: 0.33;
  93     }
  94
  95     .floated-label-placeholder {
  96       @apply(--paper-font-caption);
  97     }
  98
  99     .underline {
 100       position: relative;
 101     }
 102
 103     .focused-line {
 104       height: 2px;
 105
 106       -webkit-transform-origin: center center;
 107       transform-origin: center center;
 108       -webkit-transform: scale3d(0,1,1);
 109       transform: scale3d(0,1,1);
 110
 111       background: var(--paper-input-container-focus-color, --default-primary-color);
 112
 113       @apply(--paper-input-container-underline-focus);
 114     }
 115
 116     .underline.is-highlighted .focused-line {
 117       -webkit-transform: none;
 118       transform: none;
 119       -webkit-transition: -webkit-transform 0.25s;
 120       transition: transform 0.25s;
 121
 122       @apply(--paper-transition-easing);
 123     }
 124
 125     .underline.is-invalid .focused-line {
 126       background: var(--paper-input-container-invalid-color, --google-red-500);
 127
 128       -webkit-transform: none;
 129       transform: none;
 130       -webkit-transition: -webkit-transform 0.25s;
 131       transition: transform 0.25s;
 132
 133       @apply(--paper-transition-easing);
 134     }
 135
 136     .unfocused-line {
 137       height: 1px;
 138       background: var(--paper-input-container-color, --secondary-text-color);
 139
 140       @apply(--paper-input-container-underline);
 141     }
 142
 143     :host([disabled]) .unfocused-line {
 144       border-bottom: 1px dashed;
 145       border-color: var(--paper-input-container-color, --secondary-text-color);
 146       background: transparent;
 147
 148       @apply(--paper-input-container-underline-disabled);
 149     }
 150
 151     .input-content {
 152       position: relative;
 153     }
 154
 155     .input-content ::content label,
 156     .input-content ::content .paper-input-label {
 157       position: absolute;
 158       top: 0;
 159       right: 0;
 160       left: 0;
 161       font: inherit;
 162       color: var(--paper-input-container-color, --secondary-text-color);
 163
 164       @apply(--paper-font-subhead);
 165       @apply(--paper-input-container-label);
 166     }
 167
 168     .input-content.label-is-floating ::content label,
 169     .input-content.label-is-floating ::content .paper-input-label {
 170       -webkit-transform: translate3d(0, -75%, 0) scale(0.75);
 171       transform: translate3d(0, -75%, 0) scale(0.75);
 172       -webkit-transform-origin: left top;
 173       transform-origin: left top;
 174       -webkit-transition: -webkit-transform 0.25s;
 175       transition: transform 0.25s;
 176
 177       @apply(--paper-transition-easing);
 178     }
 179
 180     .input-content.label-is-highlighted ::content label,
 181     .input-content.label-is-highlighted ::content .paper-input-label {
 182       color: var(--paper-input-container-focus-color, --default-primary-color);
 183
 184       @apply(--paper-input-container-label-focus);
 185     }
 186
 187     .input-content.is-invalid ::content label,
 188     .input-content.is-invalid ::content .paper-input-label {
 189       color: var(--paper-input-container-invalid-color, --google-red-500);
 190     }
 191
 192     .input-content.label-is-hidden ::content label,
 193     .input-content.label-is-hidden ::content .paper-input-label {
 194       visibility: hidden;
 195     }
 196
 197     .input-content ::content input,
 198     .input-content ::content textarea,
 199     .input-content ::content iron-autogrow-textarea,
 200     .input-content ::content .paper-input-input {
 201       position: relative; /* to make a stacking context */
 202       outline: none;
 203       box-shadow: none;
 204       padding: 0;
 205       width: 100%;
 206       background: transparent;
 207       border: none;
 208       color: var(--paper-input-container-input-color, --primary-text-color);
 209
 210       @apply(--paper-font-subhead);
 211       @apply(--paper-input-container-input);
 212     }
 213
 214     /* Firefox sets a min-width on the input, which can cause layout issues */
 215     .input-content ::content input {
 216       min-width: 0;
 217     }
 218
 219     .input-content ::content textarea {
 220       resize: none;
 221     }
 222
 223     .add-on-content.is-invalid ::content * {
 224       color: var(--paper-input-container-invalid-color, --google-red-500);
 225     }
 226
 227     .add-on-content.is-highlighted ::content * {
 228       color: var(--paper-input-container-focus-color, --default-primary-color);
 229     }
 230
 231   </style>
 232
 233   <template>
 234
 235     <template is="dom-if" if="[[!noLabelFloat]]">
 236       <div class="floated-label-placeholder">&nbsp;</div>
 237     </template>
 238
 239     <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
 240       <content select=":not([add-on])"></content>
 241     </div>
 242
 243     <div class$="[[_computeUnderlineClass(focused,invalid)]]">
 244       <div class="unfocused-line fit"></div>
 245       <div class="focused-line fit"></div>
 246     </div>
 247
 248     <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
 249       <content id="addOnContent" select="[add-on]"></content>
 250     </div>
 251
 252   </template>
 253
 254 </dom-module>
 255
 256 <script src="paper-input-container-extracted.js"></script></body></html>