From a868c3255ab4c44a96611dd72efa6c626f75484f Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Wed, 22 Sep 2021 14:52:20 -0400
Subject: [PATCH] form input fields

---
 index.html | 102 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 81 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
index a119a47..c4a11cf 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 
-    <!-- radio controls -->
+    <!-- blocks -->
     <style>
         .block
         {
@@ -11,7 +11,7 @@
             align-items: flex-start;
 
             margin: 0;
-            padding: 12px 20px;
+            padding: 0;
             border: 0;
 
             border-radius: 4px;
@@ -28,15 +28,34 @@
         {
             width:100%;
         }
-        .block--bordered
+        .block--empty, input:checked + .block--empty-active
         {
-
+            border:1px solid #f1f1ee;
         }
-        .block--tan
+        .block--warm, input:checked + .block--warm-active
         {
-
+            border:1px solid #f1f1ee;
+            background:#F8F8F6;
         }
-        .block--cool
+        .block--cool, input:checked + .block--cool-active
+        {
+            border: 1px solid #ccd7de;
+            background:#e6ebee;
+        }
+        .block--gray, input:checked + .block--gray-active
+        {
+            border: 1px solid #E1DFDF;
+            background:#F8F8F6;
+        }
+        .block--green, input:checked + .block--green-active
+        {
+            border: 1px solid #5E7D65;
+            background:#5E7D65;
+        }
+    </style>
+
+    <!-- form controls -->
+    <style>
 
         input[type='radio']
         {
@@ -75,7 +94,7 @@
             background:#1565C0;
             border:2px solid #1565C0;
             opacity:0;
-            transform:scale(1);
+            transform:scale(0);
             transition: opacity 0.4s, transform 0.4s;
         }
         input[type='radio']:checked + * label::after
@@ -141,6 +160,32 @@
             top: 5px;
         }
 
+
+        input[type='text'], input[type='number'], input[type='email'], select
+        {
+            position:relative;
+            height:44px;
+            box-sizing: border-box;
+            margin:0;
+            padding:10px 13px;
+            border: 1px solid #DBDCD4;
+
+            appearance: none;
+            border-radius: 4px;
+            box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
+
+            color:#000000;
+            font-weight:500;
+            font-size:16px;
+            line-height:24px;
+        }
+        select
+        {
+            top:1.5px;
+            padding-right:50px;
+            background:url();
+        }
+
     </style>
 
     <!-- progress bar -->
@@ -192,13 +237,19 @@
             content:" ";
             display: block;
             position:absolute;
-            top:0;
+            top:-18px;
             left:50%;
              width:36px;
             height:36px;
             border-radius:50px;
             background:#5E7D65;
-            transform:translate(-50%, -50%);
+            transform:translateX(-50%);
+        }
+        .progress--stage-5 > *:nth-child(5)::before
+        {
+            left:auto;
+            right:0;
+            transform:none;
         }
         .progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5) 
         {
@@ -301,6 +352,13 @@
 </head>
 <body>
 
+    <ul class="progress progress--stage-2">
+        <li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
+        <li class="txt--wgt-normal txt--size-copy">Payment Options</li>
+        <li class="txt--wgt-normal txt--size-copy">Shipping Method</li>
+        <li class="txt--wgt-normal txt--size-copy">Confirmation</li>
+        <li class="txt--wgt-normal txt--size-copy">Print Receipt</li>
+    </ul>
 
     <div class="giving">
         <label for="amount">$</label>
@@ -311,13 +369,15 @@
         <button>$100</button>
     </div>
 
-    <ul class="progress progress--stage-2">
-        <li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
-        <li class="txt--wgt-normal txt--size-copy">Payment Options</li>
-        <li class="txt--wgt-normal txt--size-copy">Shipping Method</li>
-        <li class="txt--wgt-normal txt--size-copy">Confirmation</li>
-        <li class="txt--wgt-normal txt--size-copy">Print Receipt</li>
-    </ul>
+    <input type="text" value="text"/>
+    <select>
+        <option>select</option>
+        <option>select</option>
+        <option>select</option>
+        <option>select</option>
+    </select>
+    <input type="email" value="email"/>
+    <input type="number" value="123"/>
 
     <form>
 
@@ -329,13 +389,13 @@
         <div class="txt--size-h2 txt--wgt-black gap--lg">Review Your Order</div>
         <div class="txt--size-copy txt--wgt-black txt--uppercase gap--sm">Payment Method</div>
 
-        <div class="block block--bordered gap--xs">
+        <div class="block block--empty gap--xs">
             <div class="txt--size-copy txt--wgt-bold">Credit Card</div>
             <a class="txt--green-darken-01" href="/">Change</a>
         </div>
 
         <input id="check-1" type="radio" name="slot-1" value="option-1"/>
-        <div class="block">
+        <div class="block block--empty block--warm-active gap--xs">
             <label class="block__hit-area" for="check-1">
                 <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br>
                 <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
@@ -347,7 +407,7 @@
         </div>
 
         <input id="check-2" type="radio" name="slot-1" value="option-2"/>
-        <div class="block">
+        <div class="block block--empty gap--xs">
             <label class="block__hit-area" for="check-2">
                 <strong>Paypal</strong><br>
                 <span>also good</span>
@@ -357,7 +417,7 @@
 
         <div class="txt--size-h2 txt--wgt-black">Shipping Information</div>
         <div class="txt--size-copy txt--wgt-black txt--uppercase">Shipping Information</div>
-        <div class="block block--bordered">
+        <div class="block block--empty">
             <div class="block__hit-area">
                 <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
                 <div class="txt--size-copy txt--wgt-normal">
