HTML
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
</head>
<body>
<div class="checkout">
<input type="checkbox" id="cc" checked>
<label for="cc">
<div class="tab cc">
<h3 class="tab__title"><span class="fa fa-chevron-left"></span>Credit Card<span class="fa fa-check"></span></h3>
<div class="tab__content">
<div class="input-group">
<input type="text" class="full cc-number" placeholder="Card Number">
<input type="text" class="expiry" placeholder="MM / YY"><input type="text" class="cvc" placeholder="CVC">
<input type="checkbox" id="remember"><label for="remember">Remember me</label>
<button type="button" class="button--action button--circle">GO</button>
</div>
</div>
</div>
</label>
<input type="checkbox" id="agreement">
<label for="agreement">
<div class="tab agreement">
<h3 class="tab__title">Agreement<span class="fa fa-check"></span></h3>
<div class="tab__content">
<div class="agreement__text">
<p>Kombucha offal kale chips semiotics, health goth shoreditch craft beer pickled occupy gentrify wayfarers franzen. Fanny pack crucifix jean shorts portland mumblecore chartreuse. Yr migas scenester, hoodie artisan fap chicharrones brunch ramps. Waistcoat venmo austin photo booth 90's affogato, viral craft beer readymade iPhone fashion axe. Cliche health goth cold-pressed cronut banjo selfies ennui synth locavore, etsy hoodie ethical. Synth everyday carry small batch, try-hard photo booth green juice tumblr farm-to-table normcore. Irony kinfolk fanny pack, beard scenester drinking vinegar asymmetrical man braid helvetica venmo chicharrones.
</p>
</div>
</div>
</div>
</label>
<input type="checkbox" id="payment">
<label for="payment">
<div class="tab payment">
<h3 class="tab__title">Payment<span class="fa fa-check"></span></h3>
<div class="tab__content">
<span class="text-large">$32.00</span>
<button type="button" class="button button--action">Pay Now</button>
</div>
</div>
</label>
<input type="checkbox" id="confirmation">
<label for="confirmation">
<div class="tab confirmation">
<h3 class="tab__title">Confirmation<span class="fa fa-check"></span></h3>
<div class="tab__content">
<p>Confirm purchase?</p>
<button type="submit" class="button button--action yes"><span class="fa fa-check"></span>Yes</button>
<button type="button" class="button button--action no"><span class="fa fa-times"></span>No</button>
</div>
</div>
</label>
</div>
</body>
SCSS
/* Design by Gal Shir https://dribbble.com/shots/2501344-Checkout-Interface */
/* TODO:
* Fix tabs not working when click is on top of a button
*/
/*** [Colours] ***/
$color-base-cc: #a9ead6;
$color-base-agreement: #46cdcf;
$color-base-payment: #3d84a8;
$color-base-confirmation: #48466d;
$color-cc: #59ABE3;
$color-agreement: #446CB3;
$color-payment: #81CFE0;
$color-confirmation: #52B3D9;
@mixin cc-background {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradienteditor/#a9ead6+0,9edacb+100 */
background: $color-base-cc;
/* Old browsers */
background: linear-gradient(to right, $color-base-cc 0%, #9edacb 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@mixin agreement-background {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#46cdcf+0,3fb8bf+100 */
background: $color-base-agreement;
/* Old browsers */
background: linear-gradient(to right, $color-base-agreement 0%, #3fb8bf 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@mixin payment-background {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3d84a8+0,37779c+100 */
background: $color-base-payment;
/* Old browsers */
background: linear-gradient(to right, $color-base-payment 0%, #37779c 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@mixin confirmation-background {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48466d+0,413f67+100 */
background: $color-base-confirmation;
/* Old browsers */
background: linear-gradient(to right, $color-base-confirmation 0%, #413f67 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/*** [Resets] ***/
html {
box-sizing: border-box;
background: #22313F;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/*** [Vars & Mixins] ***/
$width-checkout: 300px;
$height-checkout: 500px;
$height-tab: $height-checkout / 6;
$height-tab-grow: 3 * $height-tab;
$padding-tab: 0.5rem 1.5rem;
$padding-input: 0.7rem 0.8rem;
$font-base: 'Roboto';
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*** [Menu styling] ***/
.checkout {
@include center;
width: $width-checkout;
height: $height-checkout;
font-family: $font-base;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
input[type="checkbox"] {
position: absolute;
top: -9999px;
left: -9999px;
& + label {
position: relative;
cursor: pointer;
&:first-of-type .tab {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
&:last-of-type .tab {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
&:checked {
& + label {
.tab {
height: 3 * $height-tab;
}
}
& + label .tab__content {
opacity: 1;
}
& + label h3 .fa-check {
opacity: 0;
}
}
}
.tab {
position: relative;
width: 100%;
height: $height-tab;
padding: $padding-tab;
transition: height 400ms cubic-bezier(.72, -0.25, .4, 1.2);
z-index: 2;
&__content {
opacity: 0;
transition: opacity 500ms ease;
}
.text-large {
font-size: 3rem;
font-weight: 700;
}
&__title {
font-weight: 300;
margin-bottom: 35px;
.fa-chevron-left {
margin-right: 15px;
}
.fa-check {
position: absolute;
right: 2rem;
opacity: 1;
transition: opacity 300ms ease;
}
}
.button {
&--action {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
height: 40px;
margin-top: 1.5rem;
padding: 0 1rem;
background: transparent;
color: #eee;
font-weight: 700;
text-transform: uppercase;
border: 2px solid #eee;
cursor: pointer;
border-radius: 20px;
z-index: 1;
}
&--circle {
width: 40px;
padding: 0;
border-radius: 50%;
}
}
&.cc {
@include cc-background;
color: darken($color-base-cc, 45%);
.input-group {
input[type='text'] {
padding: $padding-input;
background: transparent;
border: 1px solid desaturate(darken($color-base-cc, 25%), 30%);
&.cc-number {
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: 0;
}
&.expiry {
width: 60%;
border-bottom-left-radius: 5px;
border-right: 0;
}
&.cvc {
width: 40%;
border-bottom-right-radius: 5px;
}
&.expiry,
.cvc {
display: inline-block;
}
}
input[type='checkbox'] + label:before {
display: inline-block;
margin-top: 2rem;
margin-right: 0.5rem;
width: 20px;
height: 20px;
background: transparent;
content: '\00a0';
border: 1px solid desaturate(darken($color-base-cc, 25%), 30%);
border-radius: 5px;
}
}
}
&.agreement {
@include agreement-background;
color: darken($color-base-agreement, 25%);
.tab__content {
height: 100%;
}
.agreement__text {
width: 100%;
height: 60%;
margin-top: -1rem;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
background: darken($color-base-agreement, 25%);
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background: darken($color-base-agreement, 25%);
border-radius: 10px;
}
}
}
&.payment {
@include payment-background;
color: lighten($color-base-payment, 30%);
}
&.confirmation {
@include confirmation-background;
color: lighten($color-base-confirmation, 30%);
.button--action {
bottom: 5rem;
opacity: 0.4;
transition: opacity 200ms ease;
&.no {
left: 1.5rem;
}
&.yes {
width: 120px;
left: 6.5rem;
}
&:hover {
opacity: 1;
}
.fa {
margin-right: 5px;
}
}
}
}
}
::-webkit-input-placeholder {
color: desaturate(darken($color-base-cc, 45%), 10%);
}
:-moz-placeholder {
/* Firefox 18- */
color: desaturate(darken($color-base-cc, 45%), 10%);
}
::-moz-placeholder {
/* Firefox 19+ */
color: desaturate(darken($color-base-cc, 45%), 10%);
}
:-ms-input-placeholder {
color: desaturate(darken($color-base-cc, 45%), 10%);
}
2 Responses