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

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

Issue 1287713002: [MD settings] merge polymer 1.0.11; hack for settings checkbox (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 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/v1_0/components-chromium/paper-input/paper-input-container.html
diff --git a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html
index 5626014fb2231cdc648c069a1ed6705ee1b778ea..94cda634bbbd97a6c59a5845b1db3b844e7598d1 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html
@@ -32,7 +32,7 @@ the attribute it listens to with the `attr-for-value` attribute.
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.
+`Polymer.IronValidatableBehavior` if it is validatable.
<paper-input-container attr-for-value="ssn-value">
<label>Social security number</label>
@@ -51,6 +51,17 @@ implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe
or validity changes, and may implement functionality such as error messages or character counters.
They appear at the bottom of the input.
+### Prefixes and suffixes
+These are child elements of a `<paper-input-container>` with the `prefix`
+or `suffix` attribute, and are displayed inline with the input, before or after.
+
+ <paper-input-container>
+ <div prefix>$</div>
+ <label>Total</label>
+ <input is="iron-input">
+ <paper-icon-button suffix icon="clear"></paper-icon-button>
+ </paper-input-container>
+
### Styling
The following custom properties and mixins are available for styling:
@@ -59,12 +70,15 @@ 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-invalid-color` | Label and underline color when the input is is invalid | `--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-label-focus` | Mixin applied to the label when the input is focused | `{}`
`--paper-input-container-input` | Mixin applied to the input | `{}`
+`--paper-input-container-input-disabled` | Mixin applied to the input when it's disabled | `{}`
+`--paper-input-container-prefix` | Mixin applied to the input prefix | `{}`
+`--paper-input-container-suffix` | Mixin applied to the input suffix | `{}`
`--paper-input-container-underline` | Mixin applied to the underline | `{}`
`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}`
`--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
@@ -90,6 +104,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
:host([disabled]) {
pointer-events: none;
opacity: 0.33;
+
+ @apply(--paper-input-container-disabled);
}
.floated-label-placeholder {
@@ -148,8 +164,15 @@ This element is `display:block` by default, but you can set the `inline` attribu
@apply(--paper-input-container-underline-disabled);
}
+ .label-and-input-container {
+ @apply(--layout-flex);
+ @apply(--layout-relative);
+ }
+
.input-content {
position: relative;
+ @apply(--layout-horizontal);
+ @apply(--layout-end);
}
.input-content ::content label,
@@ -211,6 +234,16 @@ This element is `display:block` by default, but you can set the `inline` attribu
@apply(--paper-input-container-input);
}
+ ::content [prefix] {
+ @apply(--paper-font-subhead);
+ @apply(--paper-input-prefix);
+ }
+
+ ::content [suffix] {
+ @apply(--paper-font-subhead);
+ @apply(--paper-input-suffix);
+ }
+
/* Firefox sets a min-width on the input, which can cause layout issues */
.input-content ::content input {
min-width: 0;
@@ -237,7 +270,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
</template>
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
- <content select=":not([add-on])"></content>
+ <content select="[prefix]" id="prefix"></content>
+ <div class="label-and-input-container">
+ <content select=":not([add-on]):not([prefix]):not([suffix])"></content>
+ </div>
+ <content select="[suffix]"></content>
</div>
<div class$="[[_computeUnderlineClass(focused,invalid)]]">

Powered by Google App Engine
This is Rietveld 408576698