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)]]"> |