Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(298)

Unified Diff: third_party/polymer/components-chromium/paper-input/paper-input-decorator.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix unit test Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698