third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

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

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

2 @license	2 @license

3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

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

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

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also	7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

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

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

11	11

12 <style is="x-style">

13

14 * {

15

16 --paper-input-container-font: var(--paper-font-subhead);

17 --paper-input-container-floating-label-font: var(--paper-font-caption);

18 --paper-input-container-add-on-font: var(--paper-font-caption);

19

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

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

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

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

24

25 }

26

27 </style>

28

29 <!--	12 <!--

30 `<paper-input-container>` wraps an `<input>` and `<label>` element, decorating	13 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in put">` or

31 them following the [Material Design spec](http://www.google.com/design/spec/comp onents/text-fields.html#text-fields-single-line-text-field)	14 `<iron-autogrow-textarea>` and optional add-on elements such as an error message or character

	15 counter, used to implement Material Design text fields.

32	16

33 For example:	17 For example:

34	18

35 <paper-input-container>	19 <paper-input-container>

36 <label>email address</label>	20 <label>Your name</label>

37 <input type="email">	21 <input is="iron-input">

38 </paper-input-container>	22 </paper-input-container>

39	23

	24 ### Listening for input changes

	25

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

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

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

	29

	30 ### Using a custom input element

	31

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

	33 compound input field like a social security number input. The custom input eleme nt should have the

	34 `paper-input-input` class, have a `notify:true` value property and optionally im plements

	35 `Polymer.IronValidatableBehavior` if it is validatble.

	36

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

	38 <label>Social security number</label>

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

	40 </paper-input-container>

	41

	42 ### Validation

	43

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

	45 the container styling when the input value changes.

	46

	47 ### Add-ons

	48

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

	50 implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe n the input value

	51 or validity changes, and may implement functionality such as error messages or c haracter counters.

	52 They appear at the bottom of the input.

	53

	54 ### Styling

	55

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

	57

	58 Custom property \| Description \| Default

	59 ----------------\|-------------\|----------

	60 `--paper-input-container-color` \| Label and underline color when the input is no t focused \| `--secondary-text-color`

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

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

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

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

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

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

	67

	68 This element is `display:block` by default, but you can set the `inline` attribu te to make it

	69 `display:inline-block`.

40 -->	70 -->

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

42	72

43 <style>	73 <style>

44	74

45 :host {	75 :host {

46 display: block;	76 display: block;

47 padding: 8px 0;	77 padding: 8px 0;

48	78

49 --mixin(--paper-input-container);	79 @apply(--paper-input-container);

	80 }

	81

	82 :host[inline] {

	83 display: inline-block;

50 }	84 }

51	85

52 :host([disabled]) {	86 :host([disabled]) {

53 pointer-events: none;	87 pointer-events: none;

54 opacity: 0.33;	88 opacity: 0.33;

55 }	89 }

56	90

57 .floated-label-placeholder {	91 .floated-label-placeholder {

58 mixin(--paper-input-container-label-font);	92 @apply(--paper-font-caption);

	93 }

	94

	95 .underline {

	96 position: relative;

59 }	97 }

60	98

61 .focused-line {	99 .focused-line {

62 height: 2px;	100 height: 2px;

63	101

64 -webkit-transform-origin: center center;	102 -webkit-transform-origin: center center;

65 transform-origin: center center;	103 transform-origin: center center;

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

67 transform: scale3d(0,1,1);	105 transform: scale3d(0,1,1);

68	106

69 background: var(--paper-input-container-focus-color);	107 background: var(--paper-input-container-focus-color, --default-primary-col or);

70 }	108 }

71	109

72 .is-highlighted .focused-line {	110 .is-highlighted .focused-line {

73 -webkit-transform: none;	111 -webkit-transform: none;

74 transform: none;	112 transform: none;

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

76 transition: transform 0.25s;	114 transition: transform 0.25s;

77	115

78 mixin(--paper-transition-easing);	116 @apply(--paper-transition-easing);

79 }	117 }

80	118

81 .is-invalid .focused-line {	119 .is-invalid .focused-line {

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

83	121

84 -webkit-transform: none;	122 -webkit-transform: none;

85 transform: none;	123 transform: none;

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

87 transition: transform 0.25s;	125 transition: transform 0.25s;

88	126

89 mixin(--paper-transition-easing);	127 @apply(--paper-transition-easing);

90 }	128 }

91	129

92 .unfocused-line {	130 .unfocused-line {

93 height: 1px;	131 height: 1px;

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

95 }	133 }

96	134

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

98 border-bottom: 1px dashed;	136 border-bottom: 1px dashed;

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

100 background: transparent;	138 background: transparent;

101 }	139 }

102	140

	141 .input-content {

	142 position: relative;

	143 }

	144

103 .input-content ::content label,	145 .input-content ::content label,

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

105 position: absolute;	147 position: absolute;

106 top: 0;	148 top: 0;

107 right: 0;	149 right: 0;

108 left: 0;	150 left: 0;

109 font: inherit;	151 font: inherit;

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

111	153

112 mixin(--paper-input-container-font);	154 @apply(--paper-font-subhead);

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

114 mixin(--paper-input-container-label);

115 }	156 }

116	157

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

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

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

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

121 -webkit-transform-origin: left top;	162 -webkit-transform-origin: left top;

122 transform-origin: left top;	163 transform-origin: left top;

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

124 transition: transform 0.25s;	165 transition: transform 0.25s;

125	166

126 mixin(--paper-transition-easing);	167 @apply(--paper-transition-easing);

127 }	168 }

128	169

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

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

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

132 }	173 }

133	174

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

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

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

137 }	178 }

138	179

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

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

141 visibility: hidden;	182 visibility: hidden;

142 }	183 }

143	184

144 .input-content ::content input,	185 .input-content ::content input,

145 .input-content ::content textarea,	186 .input-content ::content textarea,

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

146 .input-content ::content .paper-input-input {	188 .input-content ::content .paper-input-input {

147 position: relative; /* to make a stacking context */	189 position: relative; /* to make a stacking context */

148 outline: none;	190 outline: none;

149 color: var(--paper-input-container-input-color);	191 box-shadow: none;

150

151 mixin(--paper-input-container-floating-label-font);

152 }

153

154 .input-content ::content input,

155 .input-content ::content textarea {

156 padding: 0;	192 padding: 0;

157 width: 100%;	193 width: 100%;

158 background: transparent;	194 background: transparent;

159 border: none;	195 border: none;

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

160	197

161 mixin(--paper-input-container-font);	198 @apply(--paper-font-subhead);

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

	200 }

162	201

163 mixin(--paper-input-container-input);	202 /* Firefox sets a min-width on the input, which can cause layout issues */

	203 .input-content ::content input {

	204 min-width: 0;

164 }	205 }

165	206

166 .input-content ::content textarea {	207 .input-content ::content textarea {

167 resize: none;	208 resize: none;

168 }	209 }

169	210

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

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

172 }	213 }

173	214

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

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

176 }

177

178 .input-content,

179 .underline {

180 position: relative;

181 }	217 }

182	218

183 </style>	219 </style>

184	220

185 <template>	221 <template>

186	222

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

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

189 </template>	225 </template>

190	226

191 <div class$="[[_computeInputContentClass(noLabelFloat,focused,_inputHasConte nt,_inputIsInvalid)]]">	227 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus ed,invalid,_inputHasContent)]]">

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

193 </div>	229 </div>

194	230

195 <div class$="[[_computeUnderlineClass(focused,_inputIsInvalid)]]">	231 <div class$="[[_computeUnderlineClass(focused,invalid)]]">

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

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

198 </div>	234 </div>

199	235

200 <div class$="[[_computeAddOnContentClass(focused,_inputIsInvalid)]]">	236 <div class$="[[_computeAddOnContentClass(focused,invalid)]]">

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

202 </div>	238 </div>

203	239

204 </template>	240 </template>

205	241

206 </dom-module>	242 </dom-module>

207	243

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

OLD	NEW