third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html - Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0

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

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1

Patch Set: fix a merge mistake Created 5 years, 7 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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-input/paper-input-char-counter-extracted.js ('k') | third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

diff --git a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html b/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

deleted file mode 100644

index 82ff08e08c83f0f016c1ee05384efe08fdf05ff8..0000000000000000000000000000000000000000

--- a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

+++ /dev/null

@@ -1,244 +0,0 @@

-<!--

-@license

-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

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

---><html><head><link rel="import" href="../polymer/polymer.html">

-<link rel="import" href="../paper-styles/paper-styles.html">

-<!--

-`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or

-`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character

-counter, used to implement Material Design text fields.

-For example:

- <paper-input-container>

- <label>Your name</label>

- <input is="iron-input">

- </paper-input-container>

-### Listening for input changes

-By default, it listens for changes on the `bind-value` attribute on its children nodes and perform

-tasks such as auto-validating and label styling when the `bind-value` changes. You can configure

-the attribute it listens to with the `attr-for-value` attribute.

-### Using a custom input element

-You can use a custom input element in a `<paper-input-container>`, for example to implement a

-compound input field like a social security number input. The custom input element should have the

-`paper-input-input` class, have a `notify:true` value property and optionally implements

-`Polymer.IronValidatableBehavior` if it is validatble.

- <paper-input-container attr-for-value="ssn-value">

- <label>Social security number</label>

- <ssn-input class="paper-input-input"></ssn-input>

- </paper-input-container>

-### Validation

-If the `auto-validate` attribute is set, the input container will validate the input and update

-the container styling when the input value changes.

-### Add-ons

-Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and

-implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value

-or validity changes, and may implement functionality such as error messages or character counters.

-They appear at the bottom of the input.

-### Styling

-The following custom properties and mixins are available for styling:

-Custom property | Description | Default

-----------------|-------------|----------

-`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`

-`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`

-`--paper-input-container-invalid-color` | Label and underline color when the input is focused | `--google-red-500`

-`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`

-`--paper-input-container` | Mixin applied to the container | `{}`

-`--paper-input-container-label` | Mixin applied to the label | `{}`

-`--paper-input-container-input` | Mixin applied to the input | `{}`

-This element is `display:block` by default, but you can set the `inline` attribute to make it

-`display:inline-block`.

--->

-</head><body><dom-module id="paper-input-container">

- <style>

- :host {

- display: block;

- padding: 8px 0;

- @apply(--paper-input-container);

- }

- :host[inline] {

- display: inline-block;

- }

- :host([disabled]) {

- pointer-events: none;

- opacity: 0.33;

- }

- .floated-label-placeholder {

- @apply(--paper-font-caption);

- }

- .underline {

- position: relative;

- }

- .focused-line {

- height: 2px;

- -webkit-transform-origin: center center;

- transform-origin: center center;

- -webkit-transform: scale3d(0,1,1);

- transform: scale3d(0,1,1);

- background: var(--paper-input-container-focus-color, --default-primary-color);

- }

- .is-highlighted .focused-line {

- -webkit-transform: none;

- transform: none;

- -webkit-transition: -webkit-transform 0.25s;

- transition: transform 0.25s;

- @apply(--paper-transition-easing);

- }

- .is-invalid .focused-line {

- background: var(--paper-input-container-invalid-color, --google-red-500);

- -webkit-transform: none;

- transform: none;

- -webkit-transition: -webkit-transform 0.25s;

- transition: transform 0.25s;

- @apply(--paper-transition-easing);

- }

- .unfocused-line {

- height: 1px;

- background: var(--paper-input-container-color, --secondary-text-color);

- }

- :host([disabled]) .unfocused-line {

- border-bottom: 1px dashed;

- border-color: var(--paper-input-container-color, --secondary-text-color);

- background: transparent;

- }

- .input-content {

- position: relative;

- }

- .input-content ::content label,

- .input-content ::content .paper-input-label {

- position: absolute;

- top: 0;

- right: 0;

- left: 0;

- font: inherit;

- color: var(--paper-input-container-color, --secondary-text-color);

- @apply(--paper-font-subhead);

- @apply(--paper-input-container-label);

- }

- .input-content.label-is-floating ::content label,

- .input-content.label-is-floating ::content .paper-input-label {

- -webkit-transform: translate3d(0, -75%, 0) scale(0.75);

- transform: translate3d(0, -75%, 0) scale(0.75);

- -webkit-transform-origin: left top;

- transform-origin: left top;

- -webkit-transition: -webkit-transform 0.25s;

- transition: transform 0.25s;

- @apply(--paper-transition-easing);

- }

- .input-content.label-is-highlighted ::content label,

- .input-content.label-is-highlighted ::content .paper-input-label {

- color: var(--paper-input-container-focus-color, --default-primary-color);

- }

- .input-content.is-invalid ::content label,

- .input-content.is-invalid ::content .paper-input-label {

- color: var(--paper-input-container-invalid-color, --google-red-500);

- }

- .input-content.label-is-hidden ::content label,

- .input-content.label-is-hidden ::content .paper-input-label {

- visibility: hidden;

- }

- .input-content ::content input,

- .input-content ::content textarea,

- .input-content ::content iron-autogrow-textarea,

- .input-content ::content .paper-input-input {

- position: relative; /* to make a stacking context */

- outline: none;

- box-shadow: none;

- padding: 0;

- width: 100%;

- background: transparent;

- border: none;

- color: var(--paper-input-container-input-color, --primary-text-color);

- @apply(--paper-font-subhead);

- @apply(--paper-input-container-input);

- }

- /* Firefox sets a min-width on the input, which can cause layout issues */

- .input-content ::content input {

- min-width: 0;

- }

- .input-content ::content textarea {

- resize: none;

- }

- .add-on-content.is-invalid ::content * {

- color: var(--paper-input-container-invalid-color, --google-red-500);

- }

- .add-on-content.is-highlighted ::content * {

- color: var(--paper-input-container-focus-color, --default-primary-color);

- }

- </style>

- <template>

- <template is="dom-if" if="[[!noLabelFloat]]">

- <div class="floated-label-placeholder"> </div>

- </template>

- <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">

- <content select=":not([add-on])"></content>

- </div>

- <div class$="[[_computeUnderlineClass(focused,invalid)]]">

- <div class="unfocused-line fit"></div>

- <div class="focused-line fit"></div>

- </div>

- <div class$="[[_computeAddOnContentClass(focused,invalid)]]">

- <content id="addOnContent" select="[add-on]"></content>

- </div>

- </template>

-</dom-module>

-<script src="paper-input-container-extracted.js"></script></body></html>