Input ready to accept visible hint

javivelasco · javivelasco · commit 577feb3d4d5d · 2016-10-22T16:52:48.000+02:00
diff --git a/components/input/theme.css b/components/input/theme.css
@@ -53,12 +53,17 @@
     }
 
     & ~ .hint {
+      display: block;
       opacity: var(--input-hint-opacity);
     }
 
     & ~ .icon {
       color: var(--input-text-highlight-color);
     }
+
+    &.filled ~ .hint {
+      opacity: 0;
+    }
   }
 
   &:focus:not([disabled]):not([readonly]),
@@ -99,7 +104,7 @@
   font-size: var(--input-field-font-size);
   left: 0;
   line-height: var(--input-field-font-size);
-  opacity: 0;
+  opacity: var(--input-hint-opacity);
   pointer-events: none;
   position: absolute;
   top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));

Original file line number	Diff line number	Diff line change
`@@ -53,12 +53,17 @@`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`& ~ .hint {`
	`56`	`+ display: block;`
`56`	`57`	`opacity: var(--input-hint-opacity);`
`57`	`58`	`}`
`58`	`59`
`59`	`60`	`& ~ .icon {`
`60`	`61`	`color: var(--input-text-highlight-color);`
`61`	`62`	`}`
	`63`	`+`
	`64`	`+ &.filled ~ .hint {`
	`65`	`+ opacity: 0;`
	`66`	`+ }`
`62`	`67`	`}`
`63`	`68`
`64`	`69`	`&:focus:not([disabled]):not([readonly]),`
`@@ -99,7 +104,7 @@`
`99`	`104`	`font-size: var(--input-field-font-size);`
`100`	`105`	`left: 0;`
`101`	`106`	`line-height: var(--input-field-font-size);`
`102`		`- opacity: 0;`
	`107`	`+ opacity: var(--input-hint-opacity);`
`103`	`108`	`pointer-events: none;`
`104`	`109`	`position: absolute;`
`105`	`110`	`top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));`