fix(Label): Apply correct colors given active state

heydoctor · Sep 18, 2019 · 1aee5fe · 1aee5fe
1 parent b1d139f
commit 1aee5fe
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 11 deletions.
diff --git a/src/Form/Input.js b/src/Form/Input.js
@@ -12,7 +12,6 @@ const InputContainer = createComponent({
   name: 'InputContainer',
   style: css`
     position: relative;
-    color: ${p => p.theme.colors.greyDarker};
 
     & + ${StyledFormError} {
       margin-left: 4px;

diff --git a/src/Form/Label.js b/src/Form/Label.js
@@ -14,23 +14,17 @@ const Label = createComponent({
       css`
         position: absolute;
         margin: 0;
-        font-size: 16px;
         line-height: 14px;
         left: 9px;
-        top: 50%;
-        transform: translateY(-50%);
+        font-size: ${isFloating ? 12 : 16}px;
+        top: ${isFloating ? '6px' : '50%'};
+        transform: ${isFloating ? 'none' : 'translateY(-50%)'};
+        color: ${theme.colors.greyDarker};
         user-select: none;
 
         &:hover {
           cursor: text;
         }
-
-        ${isFloating &&
-          css`
-            font-size: 12px;
-            top: 6px;
-            transform: none;
-          `}
       `};
 
     ${isFocused &&