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> |