summaryrefslogtreecommitdiff
path: root/iridescence/src/components/checkout
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components/checkout')
-rw-r--r--iridescence/src/components/checkout/CheckoutForm.vue173
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>