fix(inputs): fix placeholders styles

core-ds · Apr 6, 2020 · e404483 · e404483
1 parent 2b75eb0
commit e404483
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/src/input/src/index.module.css b/src/input/src/index.module.css
@@ -51,22 +51,17 @@
     border: none;
     margin: 0;
     outline: none;
-    transition: background 0.2s ease;
     font-size: 16px;
     line-height: 20px;
     padding: var(--input-paddings);
+    text-overflow: ellipsis;
     box-sizing: border-box;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.input::placeholder,
-.input[placeholder] {
-    text-overflow: ellipsis;
-    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
-}
-
 .input::placeholder {
+    transition: opacity 0.2s ease, color 0.2s ease;
     color: var(--color-dark-indigo-60-flat);
 }
 
@@ -118,6 +113,7 @@
 
 .hasLabel .input::placeholder {
     opacity: 0;
+    color: var(--color-dark-indigo-30-flat);
 }
 
 .block {
@@ -182,6 +178,10 @@
     transform: translateY(-10px);
 }
 
+.focused .input::placeholder {
+    color: var(--color-dark-indigo-30-flat);
+}
+
 /* HOVER STATE */
 
 .component:not(.disabled):hover .inner {

diff --git a/src/pure-input/src/index.module.css b/src/pure-input/src/index.module.css
@@ -30,23 +30,20 @@
     color: var(--color-dark-indigo);
     background-color: var(--pure-input-bg-color);
     border-radius: var(--pure-input-border-radius);
-    transition: background 0.2s ease, box-shadow 0.2s ease, border 0.2s ease,
-        opacity 0.2s ease-in-out, color 0.2s ease-in-out;
+    transition: background 0.2s ease, box-shadow 0.2s ease, border 0.2s ease, opacity 0.2s ease,
+        color 0.2s ease;
     border: none;
     margin: 0;
     padding: var(--pure-input-paddings);
     border-bottom: var(--pure-input-border-bottom);
     outline: none;
+    text-overflow: ellipsis;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.component::placeholder,
-.component[placeholder] {
-    text-overflow: ellipsis;
-}
-
 .component::placeholder {
+    text-overflow: ellipsis;
     color: var(--color-dark-indigo-60-flat);
 }
 
@@ -83,6 +80,10 @@
 .component:not(:disabled):focus {
     border-bottom: var(--pure-input-focus-border-bottom);
     box-shadow: var(--pure-input-focus-shadow);
+
+    &::placeholder {
+        color: var(--color-dark-indigo-30-flat);
+    }
 }
 
 /* HOVER STATE */