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

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

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: 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/v1_0/components-chromium/paper-input/paper-input-char-counter-extracted.js ('k') | third_party/polymer/v1_0/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
	(Empty)
1 <!--

2 @license

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

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

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

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

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

11

12 <!--

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

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.

16

17 For example:

18

19 <paper-input-container>

20 <label>Your name</label>

21 <input is="iron-input">

22 </paper-input-container>

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

70 -->

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

72

73 <style>

74

75 :host {

76 display: block;

77 padding: 8px 0;

78

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

80 }

81

82 :host[inline] {

83 display: inline-block;

84 }

85

86 :host([disabled]) {

87 pointer-events: none;

88 opacity: 0.33;

89 }

90

91 .floated-label-placeholder {

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

93 }

94

95 .underline {

96 position: relative;

97 }

98

99 .focused-line {

100 height: 2px;

101

102 -webkit-transform-origin: center center;

103 transform-origin: center center;

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

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

106

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

108 }

109

110 .is-highlighted .focused-line {

111 -webkit-transform: none;

112 transform: none;

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

114 transition: transform 0.25s;

115

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

117 }

118

119 .is-invalid .focused-line {

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

121

122 -webkit-transform: none;

123 transform: none;

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

125 transition: transform 0.25s;

126

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

128 }

129

130 .unfocused-line {

131 height: 1px;

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

133 }

134

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

136 border-bottom: 1px dashed;

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

138 background: transparent;

139 }

140

141 .input-content {

142 position: relative;

143 }

144

145 .input-content ::content label,

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

147 position: absolute;

148 top: 0;

149 right: 0;

150 left: 0;

151 font: inherit;

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

153

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

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

156 }

157

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

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

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

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

162 -webkit-transform-origin: left top;

163 transform-origin: left top;

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

165 transition: transform 0.25s;

166

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

168 }

169

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

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

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

173 }

174

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

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

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

178 }

179

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

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

182 visibility: hidden;

183 }

184

185 .input-content ::content input,

186 .input-content ::content textarea,

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

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

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

190 outline: none;

191 box-shadow: none;

192 padding: 0;

193 width: 100%;

194 background: transparent;

195 border: none;

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

197

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

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

200 }

201

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

203 .input-content ::content input {

204 min-width: 0;

205 }

206

207 .input-content ::content textarea {

208 resize: none;

209 }

210

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

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

213 }

214

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

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

217 }

218

219 </style>

220

221 <template>

222

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

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

225 </template>

226

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

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

229 </div>

230

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

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

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

234 </div>

235

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

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

238 </div>

239

240 </template>

241

242 </dom-module>

243

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

OLD	NEW