Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit 75d78d9

Browse files
author
Yvonne Yip
committed
rewrite, avoiding measurements
1 parent aa7d9c3 commit 75d78d9

File tree

4 files changed

+274
-401
lines changed

4 files changed

+274
-401
lines changed

‎bower.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"private": true,
44
"dependencies": {
55
"polymer": "Polymer/polymer#master",
6+
"core-icon": "Polymer/core-icon#master",
7+
"core-icons": "Polymer/core-icons#master",
68
"core-input": "Polymer/core-input#master",
79
"core-style": "Polymer/core-style#master"
810
}
9-
}
11+
}

‎demo.html

+43-5
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,34 @@
2424
-webkit-tap-highlight-color: rgba(0,0,0,0);
2525
-webkit-touch-callout: none;
2626
}
27+
28+
paper-input.narrow {
29+
width: 150px;
30+
}
2731

2832
</style>
2933

3034
</head>
3135
<body unresolved>
3236
<section>
3337

34-
<paper-input label="Type something..."></paper-input>
38+
<paper-input label="Type something"></paper-input>
39+
40+
<br>
41+
42+
<paper-input label="Type something" value="Prefilled value"></paper-input>
43+
44+
<br>
45+
46+
<paper-input class="narrow" label="Long labels get truncated"></paper-input>
3547

3648
<br>
3749

38-
<paper-input label="Type only numbers..." type="number" error="Input is not a number!"></paper-input>
50+
<paper-input label="Type only numbers" type="number" error="Input is not a number!"></paper-input>
3951

4052
<br>
4153

42-
<paper-input label="Type something..." required error="This input requires a value!"></paper-input>
54+
<paper-input label="Type something" required error="This input requires a value!"></paper-input>
4355

4456
<br>
4557

@@ -51,11 +63,15 @@
5163

5264
<br>
5365

54-
<paper-input floatingLabel label="Type only numbers... (floating)" type="number" error="Input is not a number!"></paper-input>
66+
<paper-input floatingLabel label="Type only numbers (floating)" type="number" error="Input is not a number!"></paper-input>
67+
68+
<br>
69+
70+
<paper-input multiline label="Type multiple lines here"></paper-input>
5571

5672
<br>
5773

58-
<paper-input multiline label="Type multiple lines here..."></paper-input>
74+
<paper-input floatingLabel multiline label="Type multiple lines here" value="Prefilled multiline input value"></paper-input>
5975

6076
<br>
6177

@@ -67,7 +83,29 @@
6783

6884
<br>
6985

86+
<paper-input multiline label="Sized with CSS, height: 150px;" style="height: 150px;"></paper-input>
87+
88+
<br>
89+
7090
<paper-input multiline floatingLabel label="Multiple lines and a floating label"></paper-input>
7191

92+
<br>
93+
94+
<paper-input multiline floatingLabel rows="2" label="Becomes visible after polymer-ready, min 2 rows" value="Some prefilled value" hidden></paper-input>
95+
96+
<br>
97+
7298
</section>
99+
100+
<script>
101+
102+
document.addEventListener('polymer-ready', function() {
103+
104+
setTimeout(function() {
105+
document.querySelector('paper-input[hidden]').removeAttribute('hidden');
106+
}, 500);
107+
108+
});
109+
110+
</script>
73111
</body>

‎paper-input.css

+76-113
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,17 @@
44
text-align: inherit;
55
color: #757575;
66
}
7-
:host(:hover) {
8-
cursor: text;
9-
}
10-
11-
#container {
12-
position: relative;
13-
}
14-
15-
#inputClone,
16-
#minInputHeight,
17-
#maxInputHeight {
18-
position: absolute;
19-
top: 0;
20-
left: 0;
21-
visibility: hidden;
22-
padding: 0.5em 0;
23-
}
247

258
:host /deep/ input,
269
:host /deep/ textarea {
2710
font: inherit;
2811
color: #000;
12+
/* fit to the container for auto-resizing */
13+
position: absolute;
14+
top: 0;
15+
left: 0;
16+
bottom: 0;
17+
right: 0;
2918
padding: 0;
3019
/* Important to use margin here so the margin remains visible
3120
* when textarea scrolls internally. */
@@ -36,147 +25,120 @@
3625
width: 100%;
3726
}
3827

39-
:host /deep/ input:invalid,
40-
:host /deep/ textarea:invalid {
28+
:host /deep/ input::hover,
29+
:host /deep/ textarea::hover {
30+
cursor: text;
31+
}
32+
33+
input:invalid,
34+
textarea:invalid {
4135
box-shadow: none;
4236
}
4337

44-
.host /deep/ textarea {
38+
textarea {
4539
resize: none;
40+
overflow: hidden;
4641
}
4742

48-
#floatedLabel {
43+
[invisible] {
44+
visibility: hidden;
45+
}
46+
47+
[animated] {
48+
visibility: visible !important;
49+
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
50+
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
51+
}
52+
53+
.floated-label {
4954
font-size: 0.75em;
5055
background: transparent;
5156
white-space: nowrap;
5257
}
53-
#floatedLabel.hidden {
54-
visibility: hidden;
58+
59+
.mirror-text {
60+
display: inline-block;
61+
padding: 0.5em 0;
62+
max-width: 100%;
63+
white-space: nowrap;
5564
}
56-
#floatedLabel.focused {
57-
visibility: visible;
65+
66+
:host([multiline]) .mirror-text {
67+
white-space: pre-wrap;
68+
word-wrap: break-word;
5869
}
5970

60-
#label {
61-
position: absolute;
62-
top: 0;
63-
left: 0;
64-
right: 0;
65-
bottom: 0;
66-
width: 100%;
71+
.label {
6772
padding: 0.5em 0;
6873
background: transparent;
69-
-moz-transform-origin: 0% 0%;
70-
-webkit-transform-origin: 0% 0%;
71-
transform-origin: 0% 0%;
7274
pointer-events: none;
7375
}
74-
#label.hidden {
75-
display: none;
76-
}
77-
#label.animating {
78-
/* TODO: transforms are unprefixed in M36/ Remove when stable. */
79-
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
80-
transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
81-
}
8276

83-
#labelSpan {
77+
.label-text {
8478
overflow: hidden;
8579
text-overflow: ellipsis;
8680
white-space: nowrap;
8781
display: inline-block;
8882
max-width: 100%;
83+
-moz-transform-origin: 0% 0%;
84+
-webkit-transform-origin: 0% 0%;
85+
transform-origin: 0% 0%;
8986
}
9087

91-
#errorContainer {
92-
visibility: hidden;
93-
display: -webkit-flex;
94-
display: flex;
95-
-webkit-align-items: center;
96-
align-items: center;
97-
}
98-
99-
:host(.invalid) #errorContainer {
100-
visibility: visible;
101-
}
102-
103-
#error {
104-
-webkit-flex: 1;
105-
flex: 1;
106-
font-size: 0.75em;
107-
padding: 0.5em 0;
108-
}
109-
110-
#errorIcon {
111-
background-image: url(error-100.png);
112-
background-size: 24px 24px;
113-
height: 24px;
114-
width: 24px;
115-
}
116-
117-
118-
@media (min-resolution: 2dppx) {
119-
#errorIcon {
120-
background-image: url(error-200.png);
121-
background-size: 24px 24px;
122-
}
123-
}
124-
125-
#underlineContainer {
88+
.cursor {
12689
position: absolute;
90+
top: 0.4em;
12791
left: 0;
128-
right: 0;
129-
bottom: -1px;
130-
}
131-
132-
:host([multiline]) #underlineContainer {
133-
bottom: auto;
92+
width: 1px;
93+
height: 1.4em;
94+
opacity: 0.4;
95+
-moz-transform-origin: 0%;
96+
-webkit-transform-origin: 0%;
97+
transform-origin: 0%;
98+
-webkit-transform: none;
99+
transform: none;
134100
}
135101

136-
:host([multiline]) #underlineContainer.animating {
137-
-webkit-transition: top 0.2s ease-in;
138-
transition: top 0.2s ease-in;
102+
.cursor[invisible] {
103+
opacity: 0.75;
104+
-webkit-transform: translate3d(3em,0,0) scale3d(50,1,1);
105+
transform: translate3d(3em,0,0) scale3d(50,1,1);
139106
}
140107

141-
#underline {
108+
.underline {
142109
height: 1px;
143110
background: #757575;
144111
border-bottom-color: #757575;
145112
}
146113

147-
:host([disabled]) #underline {
114+
:host([disabled]) .underline {
148115
border-bottom: 1px dashed;
149116
height: 0px;
150117
background: transparent;
151118
}
152119

153-
#underlineHighlight {
154-
position: absolute;
155-
left: 0;
156-
right: 0;
157-
bottom: 0;
120+
.focused-underline {
158121
height: 2px;
159-
-webkit-transform: scale(0,2);
160-
transform: scale(0,2);
161-
}
162-
#underlineHighlight.pressed {
163-
-webkit-transform: scale(0.1,2);
164-
transform: scale(0.1,2);
165-
/* TODO: transforms are unprefixed in M36/ Remove when stable. */
166-
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.2, 0, 0.03, 1);
167-
transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
122+
-webkit-transform: none;
123+
transform: none;
168124
}
169-
#underlineHighlight.animating {
170-
/* TODO: transforms are unprefixed in M36/ Remove when stable. */
171-
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
172-
transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
125+
126+
.focused-underline[invisible] {
127+
-webkit-transform: scaleX(0);
128+
transform: scaleX(0);
173129
}
174-
#underlineHighlight.focused {
175-
-webkit-transform: scale(1);
176-
transform: scale(1);
130+
131+
.error-text {
132+
font-size: 0.75em;
133+
padding: 0.5em 0;
134+
}
135+
136+
.error-icon {
137+
height: 20px;
138+
width: 20px;
177139
}
178140

179-
#caret {
141+
/*#caret {
180142
display: none;
181143
position: absolute;
182144
top: 0;
@@ -192,7 +154,7 @@
192154
}
193155
#caret.animating {
194156
display: block;
195-
/* TODO: transforms are unprefixed in M36/ Remove when stable. */
157+
TODO: transforms are unprefixed in M36/ Remove when stable.
196158
-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
197159
transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
198160
}
@@ -209,3 +171,4 @@
209171
height: 1.2em;
210172
width: 25%;
211173
}
174+
*/

0 commit comments

Comments
 (0)