<section class="warning">
<div class="wrap">
<h1>Deprecated</h1>
<p>
This version is deprecated, I'll be working on a newer version that uses more modern practices and cleaner code. This has been kept for reference (mostly to see how far I've come 😅). Visit the new one <a href="https://codepen.io/mejiaj/pen/BgJxgK"><strong>here</strong></a>
</p>
</div>
</section>
<div class="wrap">
<section class="cart">
<header class="cart-header">
<div class="pure-g">
<div class="pure-u-md-2-3 pure-u-1">
<h1 class="cart-headline">Your Shopping Cart</h1>
</div>
<div class="pure-u-md-1-3 pure-u-1">
<div class="cart-secure-badge">Your shopping experience is secure.</div>
</div>
</div>
</header>
<div class="cart-body">
<div class="cart-items-header">
<div class="pure-g">
<div class="pure-u-1-4 pure-u-md-1-2">
<div class="cart-item-title">Product</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-price">Price</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-qty">Qty</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-subtotal">Subtotal</div>
</div>
</div>
</div>
<ul class="cart-items-body">
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Smooth and Silky Brazilian Formula Wax (refill)</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$24.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty1" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Style Therapy: Shine Therapy Grooming Brush</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$9.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty2" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Battery Operated Rotary Nose & Ear Trimmer</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$19.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty3" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Studio Style 30 Piece Professional Haircut Kit</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$31.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty4" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
</ul><!--/Cart Items Body-->
</div><!--/Cart Body-->
<footer class="cart-footer">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-5">
<div class="field-wrap inline-field promo is-valid">
<label for="promo">Promo Code:</label>
<input type="text" name="promo" id="promo" placeholder="Promo Code" value="Dinosaur"/>
<a href="" class="btn btn-tertiary">Submit Code</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-3-5">
<div class="cart-total">
<div class="pure-g">
<div class="pure-u-1-2 pure-u-sm-4-5 h2">Total<span class="tooltip-trigger">♦<span class="tooltip">Doesn't include shipping & handling or tax</span></span>:</div>
<div class="pure-u-1-2 pure-u-sm-1-5 h2" id="cartTotalVal">$1,199.52</div>
</div>
</div>
</div>
</div>
<div class="cart-controls">
<a href="#login" class="btn btn-primary">Begin Checkout</a>
<a href="" class="btn btn-secondary">Back to Browsing</a>
</div>
</footer>
</section><!--/Cart-->
<section class="checkout is-hidden" id="login">
<header class="checkout-header">
<h1 class="checkout-headline">Sign In</h1>
</header>
<div class="checkout-body">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="login">
<a href="" class="btn btn-facebook">Login with Facebook</a>
<span class="hr-text">or</span>
<h5>Use existing account:</h5>
<form action="">
<div class="field-wrap">
<label for="accEmail">Email</label>
<input type="email" name="accEmail" id="accEmail" placeholder="Email" required />
</div>
<div class="field-wrap">
<label for="accPwd">Password</label>
<input type="password" name="" id="accPwd" placeholder="Password" required />
</div>
<div class="field-wrap input-checkbox">
<label for="rememberMe">Remember Me</label>
<input type="checkbox" name="rememberMe" id="rememberMe" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><!--/Login-->
</div>
<div class="pure-u-1 pure-u-md-1-2 is-centered">
<div class="login-alt">
<a href="#checkout" class="btn btn-tertiary">Guest Checkout</a>
<a href="" class="btn btn-secondary">Create Account</a>
</div>
</div>
</div>
</div><!--/Checkout Body-->
</section><!--/Checkout-->
<section class="checkout is-hidden" id="checkout">
<header class="checkout-header">
<h1 class="checkout-headline">Checkout</h1>
<div class="progress">
<div class="pure-g">
<div class="pure-u-1-3 h3 progress-step is-active">
<a href="">Billing</a>
</div>
<div class="pure-u-1-3 h3 progress-step">
<a href="">Shipping</a>
</div>
<div class="pure-u-1-3 h3 progress-step">
<a href="">Payment</a>
</div>
</div>
</div>
</header>
<div class="checkout-body">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3 push-u-2-3">
<section class="checkout-items">
<h3 class="checkout-items-headline">Your Items</h3>
<ul class="checkout-items-body">
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Smooth and Silky Brazilian Formula Wax (refill)
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Style Therapy: Shine Therapy Grooming Brush
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Battery Operated Rotary Nose & Ear Trimmer
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Studio Style 30 Piece Professional Haircut Kit
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-total">
<span class="h4 checkout-total-val">$1,199.52</span>
<span class="h5">total</span>
</li>
</ul><!--/Cart Items Body-->
</section>
</div>
<div class="pure-u-1 pure-u-md-2-3 pull-u-1-3">
<section class="checkout-billing checkout-step checkout-step-1" id="step1">
<h2 class="billing-header">Billing Info</h2>
<form action="">
<fieldset class="billing-name">
<legend>Name</legend>
<div class="field-wrap">
<label for="gAccEmail">Email</label>
<input type="email" name="" id="gAccEmail" placeholder="Email" required />
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<div class="field-wrap">
<label for="firstName">First Name</label>
<input type="text" name="" id="firstName" placeholder="First Name" required class="pure-u-1 pure-u-sm-23-24"/>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<div class="field-wrap">
<label for="lastName">Last Name</label>
<input type="text" name="" id="lastName" placeholder="Last Name" required/>
</div>
</div>
</div>
</fieldset>
<fieldset class="billing-address">
<legend>Address</legend>
<div class="field-wrap">
<label for="street">Street</label>
<input type="text" name="" id="street" placeholder="Street" required/>
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="field-wrap">
<label for="city">City</label>
<input type="text" name="" id="city" placeholder="City" required value="Madison" class="pure-u-1 pure-u-md-23-24"/>
</div>
</div>
<div class="pure-u-1 pure-u-sm-2-3 pure-u-md-1-5">
<div class="field-wrap">
<label for="state">State</label>
<select name='options' id="state" require class="pure-u-1 pure-u-sm-22-24">
<option value='option-1'>Arizona</option>
<option value='option-2' selected>Wisconsin</option>
<option value='option-6'>Florida</option>
</select>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-3 pure-u-md-7-24">
<div class="field-wrap">
<label for="zipcode">Zipcode</label>
<input type="text" name="zipcode" id="zipcode" placeholder="Zip Code" required value="53713"/>
</div>
</div>
</div>
<div class="field-wrap input-checkbox">
<label for="shipAddress">My shipping address is the same as my billing address.</label>
<input type="checkbox" name="shipCheck" id="shipAddress" checked/>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Continue</button>
<a href="" class="btn btn-secondary">Back</a>
</form>
</section><!--/Checkout Step 1-->
<section class="checkout-step checkout-step-2 shipping-info is-hidden" id="step2">
<h2 class="shipping-info-header">Shipping Info</h2>
<form action="">
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<fieldset>
<legend class="">Fedex</legend>
<div class="field-wrap input-radio">
<label for="shipOp1">Standard - Free</label>
<input type="radio" name="shipOp" id="shipOp1" required />
</div>
<div class="field-wrap input-radio">
<label for="shipOp2">Priority - $46.96</label>
<input type="radio" name="shipOp" id="shipOp2" required />
</div>
</fieldset>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<fieldset>
<legend>UPS</legend>
<div class="field-wrap input-radio">
<label for="shipOp3">Standard - Free</label>
<input type="radio" name="shipOp" id="shipOp3" required />
</div>
<div class="field-wrap input-radio">
<label for="shipOp4">Priority - $17.26</label>
<input type="radio" name="shipOp" id="shipOp4" required />
</div>
</fieldset>
</div>
</div>
<button type="submit" class="btn btn-primary">Continue</button>
<a href="" class="btn btn-secondary">Back</a>
</form>
</section><!--/Checkout Step 2-->
<section class="checkout-step checkout-step-3 payment-info is-hidden" id="step3">
<h2 class="payment-info-header">Payment Info</h2>
<form action="" class="payment-form">
<div class="field-wrap">
<label for="ccNum">Credit Card Number</label>
<input type="text" id="ccNum" placeholder="Credit Card Number" maxlength="15" required/>
</div>
<div class="field-wrap">
<label for="ccName">Name on Card</label>
<input type="text" id="ccName" placeholder="Name on Card" required />
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-3-5">
<div class="field-wrap">
<label for="ccExpDate">Expires</label>
<input type="month" name="ccExpDate" id="ccExpDate" class="cc-exp pure-u-sm-22-24" />
</div>
</div>
<div class="pure-u-1 pure-u-sm-2-5">
<div class="field-wrap">
<label for="ccCode" class="ccCode">Security Code</label>
<input type="text" name="ccCode" id="ccCode" placeholder="Security Code" class="cc-code" required maxlength="6"/>
<span class="tooltip-trigger">♦
<span class="tooltip">
The security code is the 3 digit number on the back of your card.
</span>
</span>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Complete Purchase</button>
<a href="" class="btn btn-secondary">Back</a>
</form>
</section><!--/Checkout Step 3-->
<div class="checkout-footer">
<div class="nl-signup">
<h3 class="nl-signup-header">Checkout Our Newsletter</h3>
<div class="nl-signup-body">
<p>
Once a month you get an email with the latest products, exclusive deals, the hottest tips and style guides.
</p>
<a href="" class="btn btn-tertiary" id="nl-signup">Sign Me Up!</a>
<a href="" class="btn btn-secondary" id="nl-noThanks">No Thanks</a>
</div>
</div>
</div><!--/Checkout Footer-->
</div><!--/Pure 2 of 3-->
</div><!--/Pure G-->
</div><!--/Checkout Body-->
</section><!--/Checkout-->
<section class="checkout-receipt is-hidden" id="checkout-receipt">
<h1>Thanks for shopping with us</h1>
<h4 class="checkout-ordernum">Order No. 12111320</h4>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<div class="shipped-info">
<h5>Shipped To:</h5>
<ul>
<li>B. Rodriguez</li>
<li>3001 Deming Way,</li>
<li>Middleton WI, 53713</li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<div class="paid-info">
<h5>Paid With:</h5>
<ul>
<li>Mastercard</li>
<li>**** **** **** 2916</li>
<li>Billing Address same as Shipping</li>
</ul>
</div>
</div>
</div>
<div class="cart-items-header">
<div class="pure-g">
<div class="pure-u-1-4 pure-u-md-1-2">
<div class="cart-item-title">Product</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-price">Price</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-qty">Qty</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-subtotal">Subtotal</div>
</div>
</div>
</div>
<ul class="cart-items-body">
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Smooth and Silky Brazilian Formula Wax (refill)</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$24.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$299.88</div>
</div>
</div>
</li>
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Style Therapy: Shine Therapy Grooming Brush</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$9.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$119.88</div>
</div>
</div>
</li>
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Battery Operated Rotary Nose & Ear Trimmer</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$19.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$239.88</div>
</div>
</div>
</li>
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Studio Style 30 Piece Professional Haircut Kit</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$31.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$383.88</div>
</div>
</div>
</li>
</ul>
<div class="cart-total">
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-4-5 h4">Promo Code:</div>
<div class="pure-u-1-2 pure-u-md-1-5 h4" id="cartTotalVal">-$5.00</div>
<div class="pure-u-1-2 pure-u-md-4-5 h4">Shipping:</div>
<div class="pure-u-1-2 pure-u-md-1-5 h4" id="cartTotalVal">$12.00</div>
<div class="pure-u-1-2 pure-u-md-4-5 h2">Total:</div>
<div class="pure-u-1-2 pure-u-md-1-5 h2" id="cartTotalVal">$1,199.52</div>
</div>
</div>
<h4>Style Guides</h4>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<div class="receipt-rp">
<a href="">
<img src="http://placeimg.com/559/200/people">
<div class="receipt-rp-header">
<h5 class="h3">3 Ways to Style a Floral Kimono</h5>
</div>
</a>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<div class="receipt-rp">
<!-- Only to get different image -->
<a href="">
<img src="http://placeimg.com/560/200/people">
<div class="receipt-rp-header">
<h5 class="h3">Swimsuit Season</h5>
</div>
</a>
</div>
</div>
</div>
</section><!--/Checkout Receipt-->
</div>
/* ================================================
$Table of Contents
================================================ */
/**
* $Variables
* $Colors
* $Partials
* $Mixins
* $Shared
* $Forms
* $Animations
* $Typography
* $Alerts
* $Buttons
* $Tooltip
* $Cart
* $Checkout
* $Newsletter
* $Receipt
*/
// ================================================
// $Variables
// ================================================
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
$font-size: 16px;
$baseline: 1.5;
$space: ($baseline * ($font-size/$font-size) + 0em);
$half-space: $space/2;
$double-space: $space * 2;
// $Media Queries
// ================================================
@mixin bp($point) {
//Based on Pure CSS MQ's
$sm: "(min-width: 35.5em)";
$md: "(min-width: 48em)";
$lg: "(min-width: 64em)";
$xl: "(min-width: 80em)";
@if $point == sm {
@media #{$sm} { @content; }
}
@if $point == md {
@media #{$md} { @content; }
}
@if $point == lg {
@media #{$lg} { @content; }
}
}
// $Colors
// ================================================
$black: #121212;
$gray: #f6f5f4;
$dark-gray: #babab9;
$purple: #5600ff;
$yellow: #ffab00;
$red: #ff0015;
$blue: #007fff;
$green: #00cc66;
$brand: #121212;
$facebook: #3b5998;
$alert: $red;
$deals: $purple;
$signup: $blue;
$warning: $yellow;
$text: tint($black, 5%);
$success: $green;
/* ================================================
$Partials
================================================ */
%clear {
*zoom: 1;
&:before,
&:after {
content: ' ';
display: table;
}
&:after { clear: both; }
}
%reset-list {
padding: 0;
list-style: none;
}
%l-box {
border: 1px solid $dark-gray;
box-shadow: 3px 3px shade($dark-gray, 40%);
margin-bottom: $space;
padding: $space $space $half-space;
}
/* ================================================
$Mixins
================================================ */
@function em($px, $context: 16) {
@return #{$px/$context}em;
}
/* ================================================
$Shared
================================================ */
*,
*:before,
*:after { box-sizing: border-box; }
html {
font: 400 #{$font-size}/#{$baseline} 'Source Sans Pro', sans-serif;
}
.pure-g [class*="pure-u"] { font-family: 'Source Sans Pro'; }
body {
color: #000;
margin: 0;
padding: 0;
transition: all .4s ease;
}
.wrap {
margin: 0 auto;
max-width: 1140px;
width: 80%;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
border-bottom: 1px dotted currentColor;
text-decoration: none;
}
[class*="push-"],
[class*="pull-"] { position: relative; }
.pull-u-1-3 { left: -33.3333%; }
.push-u-2-3 { left: 66.6667%; }
@media only screen and (max-width: 767px) {
.pull-u-1-3,
.push-u-2-3 { left: auto; }
}
.is-centered { text-align: center; }
.is-hidden {
visibility: hidden;
max-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
/* $Forms
================================================ */
fieldset {
border: none;
margin-bottom: $half-space;
padding: 0;
}
legend { padding: 0; }
input,
select,
textarea {
border: 2px solid $dark-gray;
border-radius: 0;
box-sizing: border-box;
box-shadow: none;
color: tint($black, 32%);
display: inline-block;
font-family: inherit;
margin: 0 0 $half-space;
width: 100%;
transition: border .4s, color .6s;
&:focus {
color: $text;
outline: none;
border-color: $brand !important;
}
@include bp(sm) {
.inline-field & { width: auto; }
}
}
select,
textarea,
[type="tel"],
[type="url"],
[type="number"],
[type="month"],
[type="text"],
[type="email"],
[type="password"] {
height: em(39);
padding: .4rem .5rem;
}
label {
color: $dark-gray;
display: block;
font-size: .74em;
font-weight: 600;
transition: color .6s;
text-transform: uppercase;
&.on { color: $black; }
}
textarea { height: auto; }
.input-radio,
.input-checkbox {
label {
color: $text;
display: inline-block;
max-width: 80%;
}
}
.input-radio input[type="radio"],
.input-checkbox input[type="checkbox"] {
float: left;
height: 1.2em;
width: 1.2em;
margin: .25em 1em $half-space 0;
}
.field-wrap {
@extend %clear;
&.error {
label { color: $red; }
input { border-color: $red; }
}
}
.checkout-step.error { animation: shake .2s 2 $easeInOutQuint; }
/* $Animations
================================================ */
@keyframes pulse {
0% {
opacity: 0;
transform: scale(.6);
}
80% { transform: scale(1.2); }
100% {
opacity: 1;
transform: scaleY(1);
}
}
@keyframes shrink {
to { height: 0; }
}
@keyframes collapse {
from {
max-height: 30em;
}
to {
max-height: 0;
padding: 0;
}
}
@keyframes flyUp {
from { transform: translateY(6em); }
to { transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeToGray {
to { background-color: $dark-gray; }
}
@keyframes shake {
0% { transform: translate(0, 0); }
33.33% { transform: translate(1em, -1em); }
66.66% { transform: translate(-1em, 1em); }
100% { transform: translate(0, 0); }
}
.fadeOut { animation: fadeOut .3s $easeInOutQuint forwards; }
.pulse { animation: pulse .3s $easeInOutQuint forwards; }
.is-removed {
animation: flyUp .4s $easeInOutQuint forwards reverse,
fadeOut .3s ease forwards;
}
.is-added {
animation: flyUp .4s $easeInOutQuint forwards,
fadeOut .3s ease forwards reverse;
}
/* $Typography
================================================ */
h1, .h1 {
font-size: em(40);
font-weight: 200;
margin: 0 0 em(21, 40);
}
h2, .h2 {
font-size: em(36);
font-weight: 200;
margin: 0 0 em(21, 36);
}
h3, .h3 {
font-size: em(26.667);
font-weight: 300;
letter-spacing: 2px;
margin: 0 0 em(21, 26.667);
text-transform: uppercase;
}
h4, .h4 {
font-size: em(24);
font-weight: 300;
margin: 0 0 em(21, 24);
}
h5, .h5 {
font-size: em(17.778);
font-weight: 400;
margin: 0 0 em(21, 17.778);
}
p,
ul,
ol,
dl,
table { margin: 0 0 em(21); }
.hr-text {
display: table;
font-weight: 600;
margin: $half-space auto $space;
position: relative;
text-transform: uppercase;
&:before,
&:after { content: '\25C8'; }
&:before { margin-right: $half-space; }
&:after { margin-left: $half-space; }
}
/* $Alerts
================================================ */
.alert {
@extend %l-box;
margin: $space;
padding: $half-space;
text-align: center;
}
.alert-default {
background-color: $gray;
border-color: $dark-gray;
}
.alert-warning {
background-color: tint($warning, 60%);
border-color: $warning;
}
.decay-progress {
background-color: $dark-gray;
border-radius: 100%;
height: 1em;
width: 1em;
overflow: hidden;
position: absolute;
top: .3em;
right: .3em;
&:after {
animation:
fadeOut .4s ease-in forwards reverse,
shrink 7s .4s linear forwards;
background-color: $success;
content: ' ';
height: 1em;
width: 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
}
/* $Buttons
================================================ */
.btn {
-webkit-appearance: none;
background-image: linear-gradient(rgba(white, .24), transparent);
cursor: pointer;
border: 1px solid;
display: inline-block;
font: 300 .74em/1.6 'Source Sans Pro', sans-serif;
letter-spacing: 1px;
margin: 0 0 $space;
padding: .8em $space .7em;
position: relative;
text: {
align: center;
decoration: none;
transform: uppercase;
shadow: 1px 1px 0 rgba($black, .4);
}
transition: all .4s ease;
vertical-align: top;
width: 100%;
&:hover,
&:focus {
box-shadow: 3px 3px 0 rgba(black, .4);
outline: none;
}
&:active { box-shadow: 3px 3px 0 rgba(black, .8); }
@include bp(sm) { width: auto; }
}
.btn-primary {
background-color: $brand;
border: 1px solid $black;
color: #fff;
&:active { background-color: shade($brand, 72%); }
}
.btn-secondary {
background-color: $dark-gray;
border-color: shade($dark-gray, 8%);
color: #fff;
&:active {
background-color: shade($dark-gray, 32%);
border-color: shade($dark-gray, 32%);
}
}
.btn-deals {
background-color: $deals;
border-color: $deals;
color: #fff;
&:active {
background-color: shade($deals, 32%);
border-color: shade($deals, 32%);
}
}
.btn-facebook {
background-color: $facebook;
border-color: $facebook;
color: #fff;
}
.btn-tertiary {
background-color: $blue;
border-color: $blue;
color: #fff;
}
.btn-alert {
background-color: $alert;
border-color: $alert;
color: #fff;
}
.btn-success {
background-color: $success;
border-color: $success;
color: #fff;
}
/* $Tooltip
================================================ */
.tooltip-trigger {
color: $black;
cursor: pointer;
font-size: initial;
position: relative;
padding: 0 $half-space;
vertical-align: super;
&:hover .tooltip {
opacity: 1;
transform: translateY(-110%);
visibility: visible;
}
}
.tooltip {
background-color: $black;
border-radius: 3px;
color: #fff;
cursor: default;
display: block;
font-weight: 400;
margin-left: -9em;
padding: $space;
position: absolute;
top: 0;
left: 50%;
opacity: 0;
text-align: center;
transition: opacity .3s linear, transform .3s $easeInOutQuint;
visibility: hidden;
width: 18em;
z-index: 2;
&:after {
border: 10px solid transparent;
border-top-color: $black;
content: ' ';
margin-left: -10px;
top: 98%;
position: absolute;
left: 50%;
z-index: 1;
}
}
/* ================================================
$Cart
================================================ */
.cart-items-body { @extend %reset-list; }
.cart-items-header dd,
.cart-item dd { margin: 0; }
.cart-title-desc,
.cart-item-price,
.cart-item-qty,
.cart-item-subtotal { padding: 0 1.5rem; }
.cart-title-desc,
.cart-item-price,
.cart-item-subtotal {}
.cart-items-header {
border-top: 3px double $dark-gray;
border-bottom: 3px double $dark-gray;
display: none;
font-size: .74em;
padding: $space 0;
text-transform: uppercase;
@include bp(md) { display: block; }
}
.cart-secure-badge {
padding: $half-space 0;
@include bp(md) {
margin-top: $half-space;
padding: $half-space;
text-align: center;
}
}
.cart-items-body > li {
background-color: #fff;
border-bottom: 1px solid $dark-gray;
padding: $half-space 0 .5em;
}
.cart-title-img {
display: none;
@include bp(md) { display: block; }
}
.cart-title-desc { margin-bottom: $space; }
.cart-item-qty label { line-height: 2.5; }
.cart-total { text-align: right; }
.cart-controls .btn-primary { float: right; }
/* ================================================
$Login
================================================ */
.login,
.login-alt {
@extend %l-box;
margin-left: 15%;
margin-right: 15%;
}
.login .btn,
.login-alt .btn { width: 100%; }
/* ================================================
$Checkout
================================================ */
.progress { margin-bottom: $space; }
.progress-step {
color: $dark-gray;
overflow: hidden;
position: relative;
text-align: center;
text-overflow: ellipsis;
a {
color: inherit;
cursor: default;
border: none;
text-decoration: none;
transition: color .4s $easeInOutQuint;
}
&:before,
&:after {
content: '';
display: block;
height: 4px;
}
&:after {
background-color: $dark-gray;
width: 100%;
}
&:before {
position: absolute;
bottom: 0;
left: 0;
width: 0;
transition: width .4s ease .3s;
}
}
.progress-step.is-active {
color: $blue;
a {
color: $blue;
cursor: pointer;
}
&:before {
background-color: $blue;
width: 100%;
}
}
[class*="checkout-step"] { margin-bottom: $double-space; }
.checkout-items {
@include bp(md) { margin-left: $double-space; }
}
.checkout-items-body { @extend %reset-list; }
.checkout-item dd { margin: 0; }
.checkout-step {
@extend %l-box;
.btn-primary { float: right; }
}
.checkout-item + .checkout-item {
border-top: 1px dashed $dark-gray;
margin-top: $half-space;
padding-top: $half-space;
}
.checkout-item dl { margin-bottom: 0; }
.checkout-total {
border-top: 3px double $dark-gray;
margin-top: $half-space;
padding: $half-space 0;
}
/* $Payment
================================================ */
.cc-code {
float: left;
width: 70%;
}
/* $Newsletter
================================================ */
.checkout-footer { text-align: center; }
/* ================================================
$Receipt
================================================ */
.shipped-info,
.paid-info {
@extend %l-box;
ul {
list-style: none;
padding: 0;
}
}
.shipped-info {
@include bp(sm) { margin-right: 5%; }
}
.paid-info {
@include bp(sm) { margin-left: 5%; }
}
/* Receipt Related Posts */
.receipt-rp {
margin: 0 1% 2em;
text-align: center;
overflow: hidden;
position: relative;
&:hover .receipt-rp-header { background-color: rgba($brand, .8); }
img { display: block; }
}
.receipt-rp-header {
background-image: linear-gradient(transparent, rgba($brand, .8) );
color: #fff;
padding: 10em 1em .5em;
position: absolute;
right: 0;
bottom: 0;
left: 0;
transition: background .4s ease;
h5 {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.l-box { @extend %l-box; }
/* ================================================
$Warning
================================================ */
.warning {
background-color: #fffc00;
margin-bottom: 1rem;
padding: 2rem;
}
View Compiled
$(function(){
var $cartItems = $('.cart-item'),
getPrice = /(\d+)\.(\d{2})/g,
animationEnd = 'webkitAnimationEnd oanimationend oAnimationEnd animationend',
removedItemAlert = '<li class="is-added"><div class="alert alert-default" data-mod="undo-alert">{{ Item name }} has been removed from your cart. <a href="" class="btn btn-secondary" data-mod="undo-delete-btn">↩ Undo</a></div></div>',
emptyCartAlert = '<li class="is-added"><div class="alert alert-default"><h3 class="alert-header">Bummer, your cart\'s empty.</h3><div class="alert-body"><p>You currently don\'t have any items in your cart. Need some help? Check out our: </p><a href="" class="btn btn-primary">Products</a><span class=""> or </span><a href="" class="btn btn-deals">Specials</a></div></div></li>',
removedItems = 0;
getSubTotal = function(){
var subTotal = itemPrice * itemQty;
return subTotal.toFixed(2);
};
$cartItems.each(function(index) {
var $cartItem = $(this),
$itemInput = $cartItem.find('input'),
$subTotal = $cartItem.find('.cart-item-subtotal');
itemPrice = $cartItem.find('.cart-item-price').text().match(getPrice);
itemQty = $itemInput.val();
$subTotal.append('$' + getSubTotal());
$itemInput.on('input', function(){
itemPrice = $cartItem.find('.cart-item-price').text().match(getPrice);
itemQty = $cartItem.find('input').val();
if ( itemQty <= 0 ) {
$removedItem = $cartItem;
$removedItem.addClass('is-removed').on(animationEnd, function(){
$removedItem.removeClass('is-removed').addClass('is-hidden');
});
$('[data-mod="undo-alert"]').parent('li').remove();
$removedItem.before(removedItemAlert);
$('[data-mod="undo-alert"]').startDecay();
$('[data-mod="undo-alert"]').parent('li').delay(7000).fadeOut();
removedItems += 1;
}
var cartItemsLength = $cartItems.length;
if ( cartItemsLength === removedItems ) {
$('.cart-items-body').append(emptyCartAlert);
} else {
}
$subTotal.text('$' + getSubTotal());
$subTotal.addClass('pulse').on(animationEnd, function(){
$subTotal.removeClass('pulse');
});
});
});
$('.cart-controls').find('.btn-primary').on('click', function() {
$('.cart').addClass('is-hidden');
$('#login').addClass('is-added').removeClass('is-hidden');
});
$('#login').find('.btn').on('click', function(e){
e.preventDefault();
$('#login').addClass('is-hidden');
$('#checkout').addClass('is-added').removeClass('is-hidden');
});
var validateForms = function(){
var isValid = true,
$formParent = $(this).closest('section');
$formParent.find('input').each(function(){
if ( !$(this).val() ) {
isValid = false;
$(this).closest('.field-wrap').addClass('error');
}
});
if ( isValid ) {
$('.progress-step.is-active').next('.progress-step').addClass('is-active');
if ( $formParent.hasClass('payment-info') ) {
$('#checkout').addClass('is-hidden');
$('#checkout-receipt').addClass('is-added').on(animationEnd, function(){
$(this).removeClass('is-added');
}).removeClass('is-hidden');
} else {
$formParent.addClass('is-hidden');
$formParent.next('section').removeClass('is-hidden').addClass('is-added').on(animationEnd, function(){
$(this).removeClass('is-added');
});
}
return false;
} else {
$formParent.addClass('error');
return false;
}
};
$('#step1, #step2, #step3').find('.btn-primary').on('click', validateForms);
$('#step2, #step3').find('.btn-secondary').on('click', function(e){
e.preventDefault();
$formParent = $(this).closest('section');
$formParent.removeClass('is-added').addClass('is-hidden');
$formParent.prev('section').addClass('is-added').on(animationEnd, function(){
$(this).removeClass('is-added');
}).removeClass('is-hidden');
$('.progress-step.is-active').last('.is-active').removeClass('is-active');
});
var $nlSignupBody = $('.nl-signup-body');
$('#nl-signup').on('click', function(e){
e.preventDefault();
$nlSignupBody.empty().append('<div class="is-added">Good choice! Be sure to lookout for our next newsletter on {{ date }}. You won\'t regret it.</div>');
$('.nl-signup').startDecay();
});
$('#nl-noThanks').on('click', function(e){
e.preventDefault();
$nlSignupBody.empty().append('<div class="is-added">Too bad, please check us out in the future!</div>');
$('.nl-signup').startDecay();
});
});
$.fn.startDecay = function(){
parentContainer = this;
parentContainer.css('position', 'relative').append('<div class="decay-progress"></div>').delay(7000).fadeOut(500);
return false;
};
This Pen doesn't use any external CSS resources.