feat: use slashed zeroes for password inputs when the font supports it

should make it easier to distinguish O from 0
nl-design-system · Oct 14, 2021 · ea93a38 · ea93a38
1 parent ee758f9
commit ea93a38
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/components/textbox/bem.scss b/components/textbox/bem.scss
@@ -119,6 +119,10 @@
   opacity: 100%;
 }
 
+.utrecht-textbox--password {
+  font-variant-numeric: slashed-zero;
+}
+
 .utrecht-textbox--html-input {
   &:disabled {
     @extend .utrecht-textbox--disabled;

diff --git a/components/textbox/html.scss b/components/textbox/html.scss
@@ -17,4 +17,9 @@
     @extend .utrecht-textbox;
     @extend .utrecht-textbox--html-input;
   }
+
+  input[autocomplete="current-password" i],
+  input[autocomplete="new-password" i] {
+    @extend .utrecht-textbox--password;
+  }
 }