third_party/polymer/v1_0/components-chromium/paper-input/paper-input-error.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 <link rel="import" href="paper-input-addon-behavior.html">
  12
  13 <!--
  14 `<paper-input-error>` is an error message for use with `<paper-input-container>`. The error is
  15 displayed when the `<paper-input-container>` is `invalid`.
  16
  17     <paper-input-container>
  18       <input is="iron-input" pattern="[0-9]*">
  19       <paper-input-error>Only numbers are allowed!</paper-input-error>
  20     </paper-input-container>
  21
  22 ### Styling
  23
  24 The following custom properties and mixins are available for styling:
  25
  26 Custom property | Description | Default
  27 ----------------|-------------|----------
  28 `--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
  29 `--paper-input-error`                   | Mixin applied to the error        | `{}`
  30 -->
  31 </head><body><dom-module id="paper-input-error">
  32
  33   <style>
  34
  35     :host {
  36       display: inline-block;
  37       visibility: hidden;
  38       float: left;
  39
  40       color: var(--paper-input-container-invalid-color, --google-red-500);
  41
  42       @apply(--paper-font-caption);
  43       @apply(--paper-input-error);
  44     }
  45
  46     :host([invalid]) {
  47       visibility: visible;
  48     };
  49
  50   </style>
  51
  52   <template>
  53
  54     <content></content>
  55
  56   </template>
  57
  58 </dom-module>
  59
  60 <script src="paper-input-error-extracted.js"></script></body></html>