fix(password-input): position visibility toggle for md and lg sizes

carbon-design-system · May 13, 2021 · f055883 · f055883
1 parent 383d109
commit f055883
Showing 1 changed file with 19 additions and 1 deletion.
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;