| Index: third_party/polymer/components-chromium/paper-input/paper-input-decorator.html
|
| diff --git a/third_party/polymer/components-chromium/paper-input/paper-input-decorator.html b/third_party/polymer/components-chromium/paper-input/paper-input-decorator.html
|
| deleted file mode 100644
|
| index a9aeb6d175eaa17a740eeb99e6955908fd693141..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components-chromium/paper-input/paper-input-decorator.html
|
| +++ /dev/null
|
| @@ -1,210 +0,0 @@
|
| -<!--
|
| -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
|
| -The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
| -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
| -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
|
| ---><!--
|
| -
|
| -Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html">Text fields</a>
|
| -
|
| -`paper-input-decorator` adds Material Design input field styling and animations to an element.
|
| -
|
| -Example:
|
| -
|
| - <paper-input-decorator label="Your Name">
|
| - <input is="core-input">
|
| - </paper-input-decorator>
|
| -
|
| - <paper-input-decorator floatingLabel label="Your address">
|
| - <textarea></textarea>
|
| - </paper-input-decorator>
|
| -
|
| -Theming
|
| --------
|
| -
|
| -`paper-input-decorator` uses `core-style` for global theming. The following options are available:
|
| -
|
| -- `CoreStyle.g.paperInput.labelColor` - The inline label, floating label, error message and error icon color when the input does not have focus.
|
| -- `CoreStyle.g.paperInput.focusedColor` - The floating label and the underline color when the input has focus.
|
| -- `CoreStyle.g.paperInput.invalidColor` - The error message, the error icon, the floating label and the underline's color when the input is invalid and has focus.
|
| -
|
| -To add custom styling to only some elements, use these selectors:
|
| -
|
| - paper-input-decorator /deep/ .label-text,
|
| - paper-input-decorator /deep/ .error {
|
| - /* inline label, floating label, error message and error icon color when the input is unfocused */
|
| - color: green;
|
| - }
|
| -
|
| - paper-input-decorator /deep/ ::-webkit-input-placeholder {
|
| - /* platform specific rules for placeholder text */
|
| - color: green;
|
| - }
|
| - paper-input-decorator /deep/ ::-moz-placeholder {
|
| - color: green;
|
| - }
|
| - paper-input-decorator /deep/ :-ms-input-placeholder {
|
| - color: green;
|
| - }
|
| -
|
| - paper-input-decorator /deep/ .unfocused-underline {
|
| - /* line color when the input is unfocused */
|
| - background-color: green;
|
| - }
|
| -
|
| - paper-input-decorator[focused] /deep/ .floating-label .label-text {
|
| - /* floating label color when the input is focused */
|
| - color: orange;
|
| - }
|
| -
|
| - paper-input-decorator /deep/ .focused-underline {
|
| - /* line color when the input is focused */
|
| - background-color: orange;
|
| - }
|
| -
|
| - paper-input-decorator.invalid[focused] /deep/ .floated-label .label-text,
|
| - paper-input-decorator[focused] /deep/ .error {
|
| - /* floating label, error message nad error icon color when the input is invalid and focused */
|
| - color: salmon;
|
| - }
|
| -
|
| - paper-input-decorator.invalid /deep/ .focused-underline {
|
| - /* line and color when the input is invalid and focused */
|
| - background-color: salmon;
|
| - }
|
| -
|
| -Form submission
|
| ----------------
|
| -
|
| -You can use inputs decorated with this element in a `form` as usual.
|
| -
|
| -Validation
|
| -----------
|
| -
|
| -Because you provide the `input` element to `paper-input-decorator`, you can use any validation library
|
| -or the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">HTML5 Constraints Validation API</a>
|
| -to implement validation. Set the `isInvalid` attribute when the input is validated, and provide an
|
| -error message in the `error` attribute.
|
| -
|
| -Example:
|
| -
|
| - <paper-input-decorator id="paper1" error="Value must start with a number!">
|
| - <input id="input1" is="core-input" pattern="^[0-9].*">
|
| - </paper-input-decorator>
|
| - <button onclick="validate()"></button>
|
| - <script>
|
| - function validate() {
|
| - var decorator = document.getElementById('paper1');
|
| - var input = document.getElementById('input1');
|
| - decorator.isInvalid = !input.validity.valid;
|
| - }
|
| - </script>
|
| -
|
| -Example to validate as the user types:
|
| -
|
| - <template is="auto-binding">
|
| - <paper-input-decorator id="paper2" error="Value must start with a number!" isInvalid="{{!$.input2.validity.valid}}">
|
| - <input id="input2" is="core-input" pattern="^[0-9].*">
|
| - </paper-input-decorator>
|
| - </template>
|
| -
|
| -Accessibility
|
| --------------
|
| -
|
| -`paper-input-decorator` will automatically set the `aria-label` attribute on the nested input
|
| -to the value of `label`. Do not set the `placeholder` attribute on the nested input, as it will
|
| -conflict with this element.
|
| -
|
| -@group Paper Elements
|
| -@element paper-input-decorator
|
| -@homepage github.io
|
| ---><html><head><link href="../polymer/polymer.html" rel="import">
|
| -<link href="../core-icon/core-icon.html" rel="import">
|
| -<link href="../core-icons/core-icons.html" rel="import">
|
| -<link href="../core-input/core-input.html" rel="import">
|
| -<link href="../core-style/core-style.html" rel="import">
|
| -
|
| -</head><body><core-style id="paper-input-decorator">
|
| -
|
| -.label-text,
|
| -.error {
|
| - color: {{g.paperInput.labelColor}};
|
| -}
|
| -
|
| -::-webkit-input-placeholder {
|
| - color: {{g.paperInput.labelColor}};
|
| -}
|
| -
|
| -::-moz-placeholder {
|
| - color: {{g.paperInput.labelColor}};
|
| -}
|
| -
|
| -:-ms-input-placeholder {
|
| - color: {{g.paperInput.labelColor}};
|
| -}
|
| -
|
| -.unfocused-underline {
|
| - background-color: {{g.paperInput.labelColor}};
|
| -}
|
| -
|
| -:host([focused]) .floated-label .label-text {
|
| - color: {{g.paperInput.focusedColor}};
|
| -}
|
| -
|
| -.focused-underline {
|
| - background-color: {{g.paperInput.focusedColor}};
|
| -}
|
| -
|
| -:host(.invalid) .floated-label .label-text,
|
| -.error {
|
| - color: {{g.paperInput.invalidColor}};
|
| -}
|
| -
|
| -:host(.invalid) .unfocused-underline,
|
| -:host(.invalid) .focused-underline {
|
| - background-color: {{g.paperInput.invalidColor}};
|
| -}
|
| -
|
| -</core-style>
|
| -
|
| -<polymer-element name="paper-input-decorator" layout="" vertical="" on-transitionend="{{transitionEndAction}}" on-webkittransitionend="{{transitionEndAction}}" on-input="{{inputAction}}" on-down="{{downAction}}" assetpath="">
|
| -
|
| - <template>
|
| -
|
| - <link href="paper-input-decorator.css" rel="stylesheet">
|
| - <core-style ref="paper-input-decorator"></core-style>
|
| -
|
| - <div class="floated-label" aria-hidden="true" hidden?="{{!floatingLabel}}" invisible?="{{!floatingLabelVisible || labelAnimated}}">
|
| - <!-- needed for floating label animation measurement -->
|
| - <span id="floatedLabelText" class="label-text">{{label}}</span>
|
| - </div>
|
| -
|
| - <div class="input-body" flex="" auto="" relative="">
|
| -
|
| - <div class="label" fit="" invisible="" aria-hidden="true">
|
| - <!-- needed for floating label animation measurement -->
|
| - <span id="labelText" class="label-text" invisible?="{{!_labelVisible}}" animated?="{{labelAnimated}}">{{label}}</span>
|
| - </div>
|
| -
|
| - <content></content>
|
| -
|
| - </div>
|
| -
|
| - <div id="underline" class="underline" relative="">
|
| - <div class="unfocused-underline" fit="" invisible?="{{disabled}}"></div>
|
| - <div id="focusedUnderline" class="focused-underline" fit="" invisible?="{{!focused}}" animated?="{{underlineAnimated}}"></div>
|
| - </div>
|
| -
|
| - <div class="error" layout="" horizontal="" center="" hidden?="{{!isInvalid}}">
|
| - <div class="error-text" flex="" auto="" role="alert" aria-hidden="{{!isInvalid}}">{{error}}</div>
|
| - <core-icon class="error-icon" icon="warning"></core-icon>
|
| - </div>
|
| -
|
| - </template>
|
| -
|
| -
|
| -
|
| -</polymer-element>
|
| -<script charset="utf-8" src="paper-input-decorator-extracted.js"></script></body></html>
|
|
|