added styling for contrast

estelle · estelle · commit a32a8666f671 · 2015-07-10T17:45:30.000-07:00
diff --git a/css/masking-input.css b/css/masking-input.css
diff --git a/index.html b/index.html
@@ -3,13 +3,20 @@
 <head>
   <title>Masking</title>
   <link rel="stylesheet" href="css/masking-input.css"/>
+  <style>
+  /* additional styles */
+  li {line-height: 2; clear: both;}
+  label {display: inline-block; width: 200px;}
+  .shell span {color: pink;}
+  li {font-family: helvetica; font-size: 0.93rem;}
+  </style>
 </head>
 <body>
 
 <ul>
   <li>
     <label for="expiration">Credit Card Expiration Month</label>
-    <input id="expiration" type="tel" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/\d\d)" data-valid-example="11/18" title="2-digit month and 2-digit year greater than 01/15">
+    <input id="expiration" type="tel" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/\d\d" data-valid-example="11/18" title="2-digit month and 2-digit year greater than 01/15">
   </li>
 
 <li>
diff --git a/sass/_mask.scss b/sass/_mask.scss
@@ -8,11 +8,10 @@
   color: #ccc;
   pointer-events: none;
   z-index: -1;
-    i {
+    i { /* any of these 3 will work */
         color: transparent;
-    }
-    &.inactive {
-        display: none;
+        opacity: 0;
+        visibility: hidden;
     }
   }
 }
