rewrite, avoiding measurements

googlearchive · Aug 12, 2014 · 75d78d9 · 75d78d9
1 parent aa7d9c3
commit 75d78d9
Show file tree

Hide file tree

Showing 4 changed files with 274 additions and 401 deletions.
diff --git a/bower.json b/bower.json
@@ -3,7 +3,9 @@
   "private": true,
   "dependencies": {
     "polymer": "Polymer/polymer#master",
+    "core-icon": "Polymer/core-icon#master",
+    "core-icons": "Polymer/core-icons#master",
     "core-input": "Polymer/core-input#master",
     "core-style": "Polymer/core-style#master"
   }
-}
+}
diff --git a/demo.html b/demo.html
@@ -24,22 +24,34 @@
       -webkit-tap-highlight-color: rgba(0,0,0,0);
       -webkit-touch-callout: none;
     }
+
+    paper-input.narrow {
+      width: 150px;
+    }
 
   </style>
 
 </head>
 <body unresolved>
   <section>
 
-    <paper-input label="Type something..."></paper-input>
+    <paper-input label="Type something"></paper-input>
+
+    <br>
+
+    <paper-input label="Type something" value="Prefilled value"></paper-input>
+
+    <br>
+
+    <paper-input class="narrow" label="Long labels get truncated"></paper-input>
 
     <br>
 
-    <paper-input label="Type only numbers..." type="number" error="Input is not a number!"></paper-input>
+    <paper-input label="Type only numbers" type="number" error="Input is not a number!"></paper-input>
 
     <br>
 
-    <paper-input label="Type something..." required error="This input requires a value!"></paper-input>
+    <paper-input label="Type something" required error="This input requires a value!"></paper-input>
 
     <br>
 
@@ -51,11 +63,15 @@
 
     <br>
 
-    <paper-input floatingLabel label="Type only numbers... (floating)" type="number" error="Input is not a number!"></paper-input>
+    <paper-input floatingLabel label="Type only numbers (floating)" type="number" error="Input is not a number!"></paper-input>
+
+    <br>
+
+    <paper-input multiline label="Type multiple lines here"></paper-input>
 
     <br>
 
-    <paper-input multiline label="Type multiple lines here..."></paper-input>
+    <paper-input floatingLabel multiline label="Type multiple lines here" value="Prefilled multiline input value"></paper-input>
 
     <br>
 
@@ -67,7 +83,29 @@
 
     <br>
 
+    <paper-input multiline label="Sized with CSS, height: 150px;" style="height: 150px;"></paper-input>
+
+    <br>
+
     <paper-input multiline floatingLabel label="Multiple lines and a floating label"></paper-input>
 
+    <br>
+
+    <paper-input multiline floatingLabel rows="2" label="Becomes visible after polymer-ready, min 2 rows" value="Some prefilled value" hidden></paper-input>
+
+    <br>
+
   </section>
+
+  <script>
+
+    document.addEventListener('polymer-ready', function() {
+
+      setTimeout(function() {
+        document.querySelector('paper-input[hidden]').removeAttribute('hidden');
+      }, 500);
+
+    });
+
+  </script>
 </body>
diff --git a/paper-input.css b/paper-input.css
@@ -4,28 +4,17 @@
   text-align: inherit;
   color: #757575;
 }
-:host(:hover) {
-  cursor: text;
-}
-
-#container {
-  position: relative;
-}
-
-#inputClone,
-#minInputHeight,
-#maxInputHeight {
-  position: absolute;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  padding: 0.5em 0;
-}
 
 :host /deep/ input,
 :host /deep/ textarea {
   font: inherit;
   color: #000;
+  /* fit to the container for auto-resizing */
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
   padding: 0;
   /* Important to use margin here so the margin remains visible
    * when textarea scrolls internally. */
@@ -36,147 +25,120 @@
   width: 100%;
 }
 
-:host /deep/ input:invalid,
-:host /deep/ textarea:invalid {
+:host /deep/ input::hover,
+:host /deep/ textarea::hover {
+  cursor: text;
+}
+
+input:invalid,
+textarea:invalid {
   box-shadow: none;
 }
 
-.host /deep/ textarea {
+textarea {
   resize: none;
+  overflow: hidden;
 }
 
-#floatedLabel {
+[invisible] {
+  visibility: hidden;
+}
+
+[animated] {
+  visibility: visible !important;
+  -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);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.floated-label {
   font-size: 0.75em;
   background: transparent;
   white-space: nowrap;
 }
-#floatedLabel.hidden {
-  visibility: hidden;
+
+.mirror-text {
+  display: inline-block;
+  padding: 0.5em 0;
+  max-width: 100%;
+  white-space: nowrap;
 }
-#floatedLabel.focused {
-  visibility: visible;
+
+:host([multiline]) .mirror-text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
-#label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
+.label {
   padding: 0.5em 0;
   background: transparent;
-  -moz-transform-origin: 0% 0%;
-  -webkit-transform-origin: 0% 0%;
-  transform-origin: 0% 0%;
   pointer-events: none;
 }
-#label.hidden {
-  display: none;
-}
-#label.animating {
-  /* TODO: transforms are unprefixed in M36/ Remove when stable. */
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
-  transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
-}
 
-#labelSpan {
+.label-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
   max-width: 100%;
+  -moz-transform-origin: 0% 0%;
+  -webkit-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
 }
 
-#errorContainer {
-  visibility: hidden;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
-:host(.invalid) #errorContainer {
-  visibility: visible;
-}
-
-#error {
-  -webkit-flex: 1;
-  flex: 1;
-  font-size: 0.75em;
-  padding: 0.5em 0;
-}
-
-#errorIcon {
-  background-image: url(error-100.png);
-  background-size: 24px 24px;
-  height: 24px;
-  width: 24px;
-}
-
-
-@media (min-resolution: 2dppx) {
-  #errorIcon {
-    background-image: url(error-200.png);
-    background-size: 24px 24px;
-  }
-}
-
-#underlineContainer {
+.cursor {
   position: absolute;
+  top: 0.4em;
   left: 0;
-  right: 0;
-  bottom: -1px;
-}
-
-:host([multiline]) #underlineContainer {
-  bottom: auto;
+  width: 1px;
+  height: 1.4em;
+  opacity: 0.4;
+  -moz-transform-origin: 0%;
+  -webkit-transform-origin: 0%;
+  transform-origin: 0%;
+  -webkit-transform: none;
+  transform: none;
 }
 
-:host([multiline]) #underlineContainer.animating {
-  -webkit-transition: top 0.2s ease-in;
-  transition: top 0.2s ease-in;
+.cursor[invisible] {
+  opacity: 0.75;
+  -webkit-transform: translate3d(3em,0,0) scale3d(50,1,1);
+  transform: translate3d(3em,0,0) scale3d(50,1,1);
 }
 
-#underline {
+.underline {
   height: 1px;
   background: #757575;
   border-bottom-color: #757575;
 }
 
-:host([disabled]) #underline {
+:host([disabled]) .underline {
   border-bottom: 1px dashed;
   height: 0px;
   background: transparent;
 }
 
-#underlineHighlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
+.focused-underline {
   height: 2px;
-  -webkit-transform: scale(0,2);
-  transform: scale(0,2);
-}
-#underlineHighlight.pressed {
-  -webkit-transform: scale(0.1,2);
-  transform: scale(0.1,2);
-  /* TODO: transforms are unprefixed in M36/ Remove when stable. */
-  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.2, 0, 0.03, 1);
-  transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+  -webkit-transform: none;
+  transform: none;
 }
-#underlineHighlight.animating {
-  /* TODO: transforms are unprefixed in M36/ Remove when stable. */
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
-  transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+
+.focused-underline[invisible] {
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
 }
-#underlineHighlight.focused {
-  -webkit-transform: scale(1);
-  transform: scale(1);
+
+.error-text {
+  font-size: 0.75em;
+  padding: 0.5em 0;
+}
+
+.error-icon {
+  height: 20px;
+  width: 20px;
 }
 
-#caret {
+/*#caret {
   display: none;
   position: absolute;
   top: 0;
@@ -192,7 +154,7 @@
 }
 #caret.animating {
   display: block;
-   /* TODO: transforms are unprefixed in M36/ Remove when stable. */
+    TODO: transforms are unprefixed in M36/ Remove when stable. 
   -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
   transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
 }
@@ -209,3 +171,4 @@
   height: 1.2em;
   width: 25%;
 }
+*/