diff options
Diffstat (limited to 'iridescence/src/components/checkout/CheckoutForm.vue')
| -rw-r--r-- | iridescence/src/components/checkout/CheckoutForm.vue | 173 |
1 files changed, 128 insertions, 45 deletions
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue index ee6c898..d64d747 100644 --- a/iridescence/src/components/checkout/CheckoutForm.vue +++ b/iridescence/src/components/checkout/CheckoutForm.vue @@ -10,89 +10,152 @@ <div class="field"> <label for="firstName" class="label">First Name</label> - <div class="control"> - <input id="firstName" class="input" type="text" required /> + <div class="control has-icons-left"> + <input + id="firstName" + class="input is-rounded" + type="text" + required + /> + <span class="icon is-left"> + <span + class="iconify-inline" + data-icon="mdi-card-account-details" + ></span> + </span> </div> </div> <div class="field"> <label class="label">Last Name</label> - <div class="control"> - <input class="input" type="text" required /> + <div class="control has-icons-left"> + <input class="input is-rounded" type="text" required /> + <span class="icon is-left"> + <span + class="iconify-inline" + data-icon="mdi-card-account-details" + ></span> + </span> </div> </div> <div class="field"> <label class="label">Email Address</label> - <div class="control"> - <input class="input" type="email" required /> + <div class="control has-icons-left"> + <input class="input is-rounded" type="email" required /> + <span class="icon is-left"> + <span class="iconify-inline" data-icon="mdi-email"></span> + </span> </div> <p class="help">Example: you@example.com</p> </div> <div class="field"> <label class="label">Phone Number</label> - <div class="control"> - <input class="input" type="tel" pattern="[0-9]{10}" required /> + <div class="control has-icons-left"> + <input + class="input is-rounded" + type="tel" + pattern="[0-9]{10}" + required + /> + <span class="icon is-left"> + <span + class="iconify-inline" + data-icon="mdi-phone-classic" + ></span> + </span> </div> <p class="help">Example: 7571234567</p> </div> <label class="checkbox"> <input type="checkbox" /> + <span class="iconify" data-icon="mdi-cellphone-android"></span> May we text order updates and questions to this number? </label> </div> <div class="column"> - <div class="field"> - <label class="label">Country</label> - - <div class="control"> - <div class="select"> + <label class="label">Location</label> + <div class="field has-addons"> + <div class="control has-icons-left"> + <div class="select is-rounded"> <select required> <option selected>United States</option> </select> </div> + <span class="icon is-left"> + <span + class="iconify-inline" + data-icon="mdi-flag-variant" + ></span> + </span> + </div> + + <div class="control has-icons-left"> + <div class="select is-rounded"> + <select required> + <option selected>Virginia</option> + </select> + </div> + <span class="icon is-left"> + <span class="iconify-inline" data-icon="mdi-map"></span> + </span> </div> </div> <div class="field"> <label class="label">Address</label> - <div class="control"> - <input class="input" type="text" required /> + <div class="control has-icons-left"> + <input class="input is-rounded" type="text" required /> + <span class="icon is-left"> + <span + class="iconify-inline" + data-icon="mdi-road-variant" + ></span> + </span> </div> </div> <div class="field"> <label class="label">Address 2 (Optional)</label> - <div class="control"> - <input class="input" type="text" /> + <div class="control has-icons-left"> + <input class="input is-rounded" type="text" /> + <span class="icon is-left"> + <span + class="iconify-inline" + data-icon="mdi-format-list-numbered" + ></span> + </span> </div> </div> <div class="field"> <label class="label">City</label> - <div class="control"> - <input class="input" type="text" required /> - </div> - </div> - - <div class="field"> - <label class="label">State</label> - - <div class="select"> - <select required> - <option selected>VA</option> - </select> + <div class="control has-icons-left"> + <input class="input is-rounded" type="text" required /> + <span class="icon is-left"> + <span class="iconify-inline" data-icon="mdi-city"></span> + </span> </div> </div> <div class="field"> <label class="label">Zip Code</label> - <input class="input" type="text" pattern="[0-9]{5}" required /> + <div class="control has-icons-left"> + <input + class="input is-rounded" + type="text" + pattern="[0-9]{5}" + required + /> + <span class="icon is-left"> + <span class="iconify-inline" data-icon="mdi-mailbox"></span> + </span> + </div> </div> </div> </div> @@ -101,30 +164,50 @@ <section class="section"> <h1 class="title">Payment</h1> <hr /> - payment option (mailed check, paypal, cash or check on delivery) + + <div class="field"> + <div class="control "> + <label class="radio"> + <input type="radio" name="payment" checked /> + Cash or check upon delivery + </label> + <label class="radio"> + <input type="radio" name="payment" /> + Mail-in cash or check + </label> + <label class="radio"> + <input type="radio" name="payment" /> + PayPal, Square + </label> + </div> + </div> </section> <section class="section"> <h1 class="title">Delivery Options</h1> <hr /> - <div class="control"> - <label class="radio"> - <input type="radio" name="delivery" /> - Pick up at studio - </label> - <label class="radio"> - <input type="radio" name="delivery" /> - Pick up at Simply Vintage Art Gallery - </label> - <label class="radio"> - <input type="radio" name="delivery" /> - Delivery - </label> + <div class="field"> + <div class="control "> + <label class="radio"> + <input type="radio" name="delivery" checked /> + Pick up at studio + </label> + <label class="radio"> + <input type="radio" name="delivery" /> + Pick up at Simply Vintage Art Gallery + </label> + <label class="radio"> + <input type="radio" name="delivery" /> + Delivery + </label> + </div> </div> </section> <section class="section"> - <button class="button is-primary">Continue to Confirmation</button> + <button class="button is-success is-rounded"> + Continue to Confirmation + </button> </section> </form> </div> |