Created
June 9, 2013 17:24
-
-
Save TimPietrusky/5744400 to your computer and use it in GitHub Desktop.
A CodePen by Tim Pietrusky. FlatUI Checkout concept - My entry for the "Shopping Cart" CodePen [rodeo 007](http://blog.codepen.io/rodeo/season-two/#week-three). Images taken from [thinkgeek.com](http://thinkgeek.com) because I love all products they have :D I used the [Pure](http://purecss.io) grid, so this is also responsive.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="onepage-checkout"> | |
<div class="pure-g-r"> | |
<!-- Billing & shipping address --> | |
<div class="pure-u-1-4"> | |
<div class="pure-u-1-1"> | |
<div class="wrapper wrapper__alpha"> | |
<h2 class="__alpha">Billing Address</h2> | |
<address class="wrapper--box"> | |
Tim Pietrusky <br> | |
Frankfurt (Main) <br> | |
Germany | |
</address> | |
<button class="gamma">change</button> | |
</div> | |
</div> | |
<div class="pure-u-1-1"> | |
<div class="wrapper wrapper__alpha"> | |
<h2 class="__alpha">Shipping Address</h2> | |
<address class="wrapper--box"> | |
Tim Pietrusky <br> | |
Frankfurt (Main) <br> | |
Germany | |
</address> | |
<button class="gamma">change</button> | |
</div> | |
</div> | |
</div> | |
<!-- Shipping --> | |
<div class="pure-u-1-4"> | |
<div class="pure-u-1-1"> | |
<div class="wrapper wrapper__beta"> | |
<h2 class="__alpha">Shipment</h2> | |
<ul class="wrapper--box"> | |
<li> | |
<input type="radio" name="shipment" id="standard" /> | |
<label for="standard">Standard</label> | |
</li> | |
<li> | |
<input type="radio" name="shipment" id="express" /> | |
<label for="express">Express</label> | |
</li> | |
<li> | |
<input type="radio" name="shipment" id="tomorrow" /> | |
<label for="tomorrow">Tomorrow Morning</label> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<!-- Delivery --> | |
<div class="pure-u-1-1"> | |
<div class="wrapper wrapper__beta"> | |
<h2 class="__alpha">Delivery</h2> | |
<ul class="wrapper--box"> | |
<li> | |
<input type="radio" name="delivery" id="complete" /> | |
<label for="complete">Complete</label> | |
</li> | |
<li> | |
<input type="radio" name="delivery" id="part" /> | |
<label for="part">Part</label> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<!-- Payment --> | |
<div class="pure-u-1-1"> | |
<div class="wrapper wrapper__delta"> | |
<h2 class="__alpha">Payment</h2> | |
<ul class="wrapper--box"> | |
<li> | |
<input type="radio" name="payment" id="creditcard" /> | |
<label for="creditcard">Creditcard</label> | |
</li> | |
<li> | |
<input type="radio" name="payment" id="paypal" /> | |
<label for="paypal">PayPal</label> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="pure-u-1-2"> | |
<div class="wrapper wrapper__gamma"> | |
<h2 class="__alpha">Cart</h2> | |
<table class=""> | |
<thead> | |
<tr> | |
<th>Article(s)</th> | |
<th></th> | |
<th>Total(s)</th> | |
</tr> | |
</thead> | |
<tr class="wrapper--box"> | |
<td class="alpha"> | |
<div class="pure-g"> | |
<div class="pure-u-1-4"> | |
<img src='http://a.tgcdn.net/images/products/zoom/f499_minecraft_foam_sword_pickaxe.jpg'> | |
</div> | |
<div class="pure-u-3-4"> | |
<div class="helper--alpha"> | |
<h3>Minecraft Foam Sword and Pickaxe</h3> | |
<p>$45.99</p> | |
<p> | |
<button class="alpha">remove</button> | |
</p> | |
</div> | |
</div> | |
</div> | |
</td> | |
<td class="alpha"> | |
<input type='number' value='1'> | |
</td> | |
<td class="alpha"> | |
$45.99 | |
</td> | |
</tr> | |
<tr> | |
<td colspan="3"><hr></td> | |
</tr> | |
<tr class="wrapper--box"> | |
<td> | |
<div class="pure-g"> | |
<div class="pure-u-1-4"> | |
<img src='http://a.tgcdn.net/images/products/zoom/ed08_star_wars_death_star_tea_infuser.jpg'> | |
</div> | |
<div class="pure-u-3-4"> | |
<div class="helper--alpha"> | |
<h3>Star Wars Death Star Tea Infuser</h3> | |
<p>$12.99</p> | |
<p> | |
<button class="alpha">remove</button> | |
</p> | |
</div> | |
</div> | |
</td> | |
<td> | |
<input type='number' value='2'> | |
</td> | |
<td > | |
$25.98 | |
</td> | |
</tr> | |
<tr> | |
<th colspan='2'>Subtotal</th> | |
<td>$71.97</td> | |
</tr> | |
<tr> | |
<th colspan='2'>Sales Tax</th> | |
<td>$3.60</td> | |
</tr> | |
<tr> | |
<th colspan='2'>Shipping</th> | |
<td>$15.00</td> | |
</tr> | |
<tr class="alpha"> | |
<th colspan='2'>Total</th> | |
<td>$90.57</td> | |
</tr> | |
</table> | |
<div class="text--right"> | |
<button class="beta">checkout</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Flat Checkout | |
* | |
* My entry for the "Shopping Cart" CodePen rodeo 007. | |
* http://blog.codepen.io/rodeo/season-two/#week-three | |
* | |
* Images taken from thinkgeek.com because I love | |
* all products they have :D | |
* | |
* I used the Pure grid, so this is also responsive. | |
* http://purecss.io | |
* | |
* You can edit the variable $unit-alpha to ++/-- all | |
* sizes on this concept. | |
* | |
* | |
* 2013 by Tim Pietrusky | |
* timpietrusky.com | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass"; | |
@import url(http://fonts.googleapis.com/css?family=Lato:400,700); | |
/* | |
* Variables | |
*/ | |
$color-alpha: #2ecc71; | |
$color-beta: #27ae60; | |
$color-gamma: #ecf0f1; | |
$color-delta: #bdc3c7; | |
$color-epsilon: #3498db; | |
$color-zeta: #2980b9; | |
$color-eta: #e74c3c; | |
$color-theta: #c0392b; | |
$color-iota: #9b59b6; | |
$color-kappa: #8e44ad; | |
$color-lambda: #1abc9c; | |
$color-my: #16a085; | |
$unit-alpha: .5em; | |
$transition-alpha: .15s; | |
/* | |
* CSS | |
*/ | |
body { | |
font: 1em/1.5 'Lato', sans-serif; | |
background: $color-gamma; | |
} | |
.wrapper { | |
margin: $unit-alpha $unit-alpha $unit-alpha * 2 $unit-alpha; | |
padding: $unit-alpha * 2 $unit-alpha $unit-alpha $unit-alpha; | |
border-top: $unit-alpha solid #fff; | |
border-bottom: ($unit-alpha / 2) solid $color-delta!important; | |
background: #fff; | |
box-shadow: 0 0 0 $unit-alpha rgba($color-delta, 0); | |
@include transition(box-shadow $transition-alpha linear); | |
&:hover { | |
box-shadow: 0 0 0 $unit-alpha rgba($color-delta, .6); | |
} | |
h2 { | |
font-size: 2em; | |
font-weight: 700; | |
margin: 0 0 $unit-alpha 0; | |
} | |
h3 { | |
font-weight: 400; | |
margin: 0; | |
font-size: 1.2em; | |
line-height: 1.2; | |
} | |
address { | |
font-style: normal; | |
margin-bottom: $unit-alpha; | |
} | |
ul { | |
margin: 0; | |
} | |
li { | |
margin-bottom: $unit-alpha; | |
border-bottom: .25em solid #fff; | |
padding-bottom: $unit-alpha; | |
&:last-child { | |
border: none; | |
padding-bottom: 0; | |
margin-bottom: 0; | |
} | |
} | |
label { | |
cursor: pointer; | |
} | |
input { | |
width: 1.15em; | |
height: 1.15em; | |
background: #fff; | |
margin-right: .25em; | |
cursor: pointer; | |
box-shadow: inset 0 0 0 .25em #fff; | |
vertical-align: text-bottom; | |
@include appearance(none); | |
@include transition(background $transition-alpha linear); | |
&[type="number"] { | |
width: 1.75em; | |
height: 60%; | |
border: none; | |
padding: 0 $unit-alpha / 2; | |
text-align: center; | |
font-size: 2em; | |
position: relative; | |
&:focus { | |
outline: none; | |
background: $color-gamma; | |
} | |
&::-webkit-inner-spin-button, | |
&::-webkit-outer-spin-button { | |
-webkit-appearance: none; | |
cursor: pointer; | |
width: .5em; | |
height: 100%; | |
text-align: center; | |
color: $color-delta; | |
&:before { | |
position: absolute; | |
left: 0; | |
top: 0; | |
content: '\25B4'; | |
} | |
&:after { | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
content: '\25BE'; | |
} | |
} | |
} | |
&:checked { | |
background: #ccc; | |
} | |
} | |
img { | |
max-width: 100%; | |
max-height: 8em; | |
border: .25em solid #fff; | |
} | |
table { | |
width: 100%; | |
border-spacing: 0 $unit-alpha / 2; | |
border-collapse: separate; | |
margin-top: (-$unit-alpha / 2); | |
} | |
th { | |
text-align: right; | |
padding-right: .5em * 2; | |
} | |
thead { | |
background: $color-eta; | |
th { | |
text-align: left; | |
padding: $unit-alpha; | |
color: #fff; | |
&:last-child { | |
text-align: right; | |
} | |
} | |
} | |
tr { | |
&.alpha { | |
background: $color-eta; | |
color: #fff; | |
> th { | |
padding: $unit-alpha $unit-alpha * 2 $unit-alpha $unit-alpha; | |
} | |
} | |
} | |
hr { | |
border: none; | |
border-bottom: $unit-alpha / 2 solid #fff; | |
} | |
button { | |
border: none; | |
padding: $unit-alpha; | |
background: $color-gamma; | |
@include appearance(none); | |
@include transition(background $transition-alpha linear); | |
&:hover { | |
background: $color-delta; | |
} | |
&:before { | |
content: attr(data-icon); | |
padding-right: $unit-alpha; | |
} | |
&.alpha { | |
&:before { | |
content: "x"; | |
color: $color-eta; | |
} | |
} | |
&.beta { | |
background: $color-lambda; | |
color: #fff; | |
font-weight: 700; | |
padding: $unit-alpha * 2; | |
margin-top: $unit-alpha / 2; | |
font-size: 1.25em; | |
&:hover { | |
background: $color-my; | |
} | |
&:before { | |
content: '\25B6'; | |
} | |
} | |
&.gamma { | |
&:before { | |
content: '\25AA'; | |
color: $color-delta; | |
} | |
&:hover { | |
&:before { | |
color: $color-gamma; | |
} | |
} | |
} | |
} | |
.text--right { | |
text-align: right; | |
} | |
.helper--alpha { | |
padding-left: $unit-alpha * 3; | |
} | |
.wrapper--box { | |
color: #fff; | |
padding: $unit-alpha; | |
list-style-type: none; | |
} | |
/* | |
* alpha | |
*/ | |
&.wrapper__alpha { | |
border-color: $color-beta; | |
.wrapper--box { | |
background: $color-beta; | |
} | |
h2 { | |
color: $color-alpha; | |
} | |
} | |
/* | |
* beta | |
*/ | |
&.wrapper__beta { | |
border-color: $color-zeta; | |
.wrapper--box { | |
background: $color-zeta; | |
} | |
h2 { | |
color: $color-epsilon; | |
} | |
li { | |
border-color: $color-epsilon; | |
} | |
input { | |
&:checked { | |
background: $color-epsilon; | |
} | |
} | |
} | |
/* | |
* gamma | |
*/ | |
&.wrapper__gamma { | |
border-color: $color-theta; | |
.wrapper--box { | |
border-top: $unit-alpha solid $color-theta; | |
color: #000; | |
} | |
h2, | |
h3 { | |
color: $color-eta; | |
} | |
hr { | |
border-color: $color-eta; | |
} | |
} | |
/* | |
* delta | |
*/ | |
&.wrapper__delta { | |
border-color: $color-iota; | |
.wrapper--box { | |
background: $color-kappa; | |
} | |
h2 { | |
color: $color-iota; | |
} | |
li { | |
border-color: $color-iota; | |
} | |
input { | |
&:checked { | |
background: $color-iota; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment