fix(text-input): style experimental password toggle

carbon-design-system · Feb 6, 2019 · d8aa813 · d8aa813
1 parent 0edf18b
commit d8aa813
Showing 1 changed file with 41 additions and 0 deletions.
diff --git 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
   //-----------------------------