From d8aa813405cd89c80d5265cf12ab22d63717847a Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Wed, 6 Feb 2019 15:14:39 -0600
Subject: [PATCH] fix(text-input): style experimental password toggle

---
 src/components/text-input/_text-input.scss | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index 442a40c1b2e4..a05eb6a0dc2a 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -143,6 +143,35 @@
     &:active {
       @include focus-outline('outline');
     }
+
+    &-wrapper svg[hidden] {
+      display: none;
+    }
+
+    &[data-toggle-password-visibility] + .#{$prefix}--text-input--password__visibility {
+      top: rem(-28px);
+      right: rem(12px);
+      display: flex;
+      justify-content: center;
+      align-self: flex-end;
+      align-items: center;
+      height: rem(16px);
+      width: rem(16px);
+      padding: 0;
+      margin-bottom: -1rem;
+      border: 0;
+      background: none;
+      cursor: pointer;
+      outline: inherit;
+
+      svg {
+        fill: $brand-01;
+
+        &:hover {
+          fill: $hover-primary;
+        }
+      }
+    }
   }
 
   .#{$prefix}--text-input::-webkit-input-placeholder {
@@ -161,6 +190,18 @@
     background-position: right 8px bottom 50%;
   }
 
+  .#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility svg {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--text-input:disabled[data-toggle-password-visibility] + .#{$prefix}--text-input--password__visibility,
+  .#{$prefix}--text-input[data-invalid][data-toggle-password-visibility] + .#{$prefix}--text-input--password__visibility,
+  .#{$prefix}--text-input:invalid[data-toggle-password-visibility] + .#{$prefix}--text-input--password__visibility,
+  .#{$prefix}--text-input[data-loading][data-toggle-password-visibility] + .#{$prefix}--text-input--password__visibility {
+    right: rem(32px);
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------