fix(PasswordInput): resolve visibility toggle style issues (#8673)

* fix(password-input): increase visibility toggle focus specificity * fix(password-input): position visibility toggle for md and lg sizes
carbon-design-system · May 13, 2021 · ed86983 · ed86983
1 parent b00113e
commit ed86983
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
@@ -59,6 +59,14 @@
     padding-right: $carbon--spacing-08;
   }
 
+  .#{$prefix}--text-input--sm.#{$prefix}--password-input {
+    padding-right: $carbon--spacing-07;
+  }
+
+  .#{$prefix}--text-input--lg.#{$prefix}--password-input {
+    padding-right: $carbon--spacing-09;
+  }
+
   .#{$prefix}--text-input::placeholder {
     @include placeholder-colors;
   }
@@ -110,7 +118,7 @@
     right: 0;
     display: flex;
     width: rem(40px);
-    height: rem(40px);
+    height: 100%;
     min-height: auto;
     align-items: center;
     justify-content: center;
@@ -121,6 +129,16 @@
     transition: outline $duration--fast-01 motion(standard, productive);
   }
 
+  .#{$prefix}--text-input--sm
+    + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
+    width: rem(32px);
+  }
+
+  .#{$prefix}--text-input--lg
+    + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
+    width: rem(48px);
+  }
+
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg {
     fill: $icon-secondary;
@@ -134,7 +152,7 @@
     }
   }
 
-  .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus {
+  .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus {
     @include focus-outline('outline');
   }