Input ready to accept visible hint

react-toolbox · Oct 22, 2016 · 577feb3 · 577feb3
1 parent 22a8f43
commit 577feb3
Showing 1 changed file with 6 additions and 1 deletion.
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));