- Add styling for number input (#133)

- Update docs to show styling for more fields

docs/index.html.ejs

@@ -391,15 +391,35 @@
         `) %>
 
         <p>
-          Text boxes can also be disabled and have value with their corresponding HTML attributes. 
+          Text boxes can also be disabled and have value with their corresponding HTML attributes.
         </p>
-  
+
         <%- example(`
           <div class="field-row">
             <label for="text${getNewId()}">Favorite color</label>
             <input id="text${getCurrentId()}" disabled type="text" value="Windows Green"/>
           </div>
         `) %>
+
+        <p>
+          Other types of HTML5 text inputs are also supported.
+        </p>
+
+        <%- example(`
+        <div class="field-row-stacked" style="width: 200px">
+          <label for="text${getNewId()}">Email</label>
+          <input id="text${getCurrentId()}" type="email" value="admin@contoso.com"/>
+        </div>
+        <div class="field-row-stacked" style="width: 200px">
+          <label for="text${getNewId()}">Password</label>
+          <input id="text${getCurrentId()}" type="password" value="hunter2"/>
+        </div>
+        <div class="field-row-stacked" style="width: 200px">
+          <label for="text${getNewId()}">Favorite Number</label>
+          <input id="text${getCurrentId()}" type="number" value="98"/>
+        </div>
+      `) %>
+
       </div>
 
 
@@ -548,7 +568,7 @@
           assistive technologies know the intent of this button. You may also use
           "Minimize", "Maximize", "Restore" and "Help" like so:
         </p>
-        
+
         <%- example(`
           <div class="title-bar">
             <div class="title-bar-text">A Title Bar</div>
@@ -578,7 +598,7 @@
               <button aria-label="Help"></button>
               <button aria-label="Close"></button>
             </div>
-          </div>          
+          </div>
         `) %>
 		<p>
           You can make a title bar "inactive" by adding <code>inactive</code> class,
@@ -663,7 +683,7 @@
         </blockquote>
 
         <p>
-          You can render a status bar with the <code>status-bar</code> class, 
+          You can render a status bar with the <code>status-bar</code> class,
           and <code>status-bar-field</code> for every child text element.
         </p>
 
@@ -688,7 +708,7 @@
         </div>
       `) %>
 
-       
+
     </section>
 
     <section class="component">

style.css

@@ -422,6 +422,7 @@ input[type="checkbox"][disabled]:checked + label::after {
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="number"],
 select,
 textarea {
   padding: 3px 4px;
@@ -441,10 +442,15 @@ input[type="email"],
 select {
   height: 21px;
 }
+input[type="number"] {
+  /* need this 1 pixel to fit the spinner controls in box */
+  height: 22px;
+}
 
 input[type="text"],
 input[type="password"],
-input[type="email"] {
+input[type="email"],
+input[type="number"] {
   /* For some reason descenders are getting cut off without this */
   line-height: 2;
 }
@@ -452,6 +458,7 @@ input[type="email"] {
 input[type="email"]:disabled,
 input[type="password"]:disabled,
 input[type="text"]:disabled,
+input[type="number"]:disabled,
 textarea:disabled {
   background-color: var(--surface);
 }
@@ -472,6 +479,7 @@ select:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
+input[type="number"]:focus,
 textarea:focus {
   outline: none;
 }