A material design style online banking app interface.
A Pen by Fabio José on CodePen.
<div class="container"> | |
<div class="header"> | |
<ul class="icon_nav"> | |
<li><i class="fa fa-arrow-left"></i></li> | |
<li><i class="fa fa-bars"></i></li> | |
</ul> | |
<h1>Checking</h1> | |
<span class="total pos">430.23</span> | |
</div> | |
<div class="content"> | |
<ul class="list"> | |
<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/15/15</span><span class="amount pos">150.00</span></li> | |
<ul class="info"> | |
<li><h3>Description</h3></li> | |
<li>Transfer from account: XXXXXXXX1234</li> | |
</ul> | |
<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/04/15</span><span class="amount neg">13.99</span></li> | |
<ul class="info"> | |
<li><h3>Description</h3></li> | |
<li>Transfer from account: XXXXXXXX1234</li> | |
</ul> | |
<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
<ul class="info"> | |
<li><h3>Description</h3></li> | |
<li>Transfer from account: XXXXXXXX1234</li> | |
</ul> | |
<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
<ul class="info"> | |
<li><h3>Description</h3></li> | |
<li>Transfer from account: XXXXXXXX1234</li> | |
</ul> | |
<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
<ul class="info"> | |
<li><h3>Description</h3></li> | |
<li>Transfer from account: XXXXXXXX1234</li> | |
</ul> | |
<li><span class="date"><i class="fa fa-arrow-circle-o-right"></i>06/01/15</span><span class="amount neg">45.50</span></li> | |
<ul class="info"> | |
<li><h3>Description</h3></li> | |
<li>Transfer from account: XXXXXXXX1234</li> | |
</ul> | |
</ul> | |
</div> | |
</div> |
A material design style online banking app interface.
A Pen by Fabio José on CodePen.
$(document).ready(function() { | |
$('.list li').hover(function() { | |
$(this).find('i').css('opacity','0.75'); | |
}, function() { | |
$(this).find('i').css('opacity','0.25'); | |
}) | |
var tl = new TimelineMax({paused:false}); | |
$('.list li').each(function() { | |
var open = false; | |
$(this).click(function() { | |
var i = $(this).find('i'); | |
var li = $(this); | |
var desc = $(this).next(); | |
if (open === true) { | |
tl.to(i, .3, {rotation: 0}) | |
.to(li, .3, {borderBottom: 'none'}, '-=.3') | |
.to(desc, .3, {height: '0', padding: '0', ease:Power4.easeOut}, '-=.3'); | |
open = false; | |
} else { | |
tl.to(i, .4, {rotation: 90}) | |
.to(li, .4, {borderBottom: '2px solid #95a5a6'}, '-=.4') | |
.to(desc, .4, {height: '55px', padding: '5px', ease:Bounce.easeOut}, '-=.4'); | |
open = true; | |
} | |
}); | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> |
* { | |
margin: 0; | |
padding: 0; | |
-webkit-user-select: none; | |
} | |
html { | |
background-color: #34495e; | |
} | |
.container { | |
background-color: #ecf0f1; | |
width: 250px; | |
margin: 0 auto; | |
display: block; | |
} | |
.header { | |
cursor: default; | |
width: 100%; | |
background-color: #1abc9c; | |
font-family: 'Roboto', sans-serif; | |
font-weight: 300; | |
font-size: 13px; | |
text-align: center; | |
padding-top: 20px; | |
box-sizing: border-box; | |
padding-bottom: 10px; | |
border-bottom: 2px solid #16a085; | |
} | |
.total { | |
display: block; | |
padding: 10px; | |
font-size: 20px; | |
font-weight: 700; | |
background-color: #ecf0f1; | |
width: 100px; | |
margin: 0 auto; | |
border-radius: 50px; | |
margin-top: 10px; | |
} | |
.icon_nav { | |
display: flex; | |
justify-content: space-between; | |
list-style-type: none; | |
color: #ecf0f1; | |
font-size: 20px; | |
width: 100%; | |
padding: 0 20px 20px 20px; | |
box-sizing: border-box; | |
border-bottom: 2px solid #16a085; | |
} | |
.icon_nav i { | |
cursor: pointer; | |
display: block; | |
padding: 10px; | |
border-radius: 50%; | |
} | |
.icon_nav i:hover { | |
background-color: #16a085; | |
} | |
h1 { | |
margin-top: 10px; | |
font-weight: normal; | |
color: #ecf0f1; | |
} | |
.content { | |
display: flex; | |
justify-content: space-between; | |
} | |
.list { | |
width: 100%; | |
list-style-type: none; | |
font-family: 'Roboto', sans-serif; | |
color: #2c3e50; | |
} | |
.list li { | |
width: 100%; | |
display: flex; | |
justify-content: space-between; | |
padding: 5px 10px 5px 10px; | |
box-sizing: border-box; | |
-webkit-user-select: none; | |
cursor: pointer; | |
} | |
.list li i { | |
margin-right: 5px; | |
opacity: 0.25; | |
} | |
.amount { | |
font-weight: 300; | |
} | |
.pos { | |
color: #27ae60; | |
} | |
.pos:before { | |
content: '+$'; | |
} | |
.neg { | |
color: #c0392b; | |
} | |
.neg:before { | |
content:'-$'; | |
} | |
.info { | |
list-style-type: none; | |
font-size: 12px; | |
background-color: #bdc3c7; | |
padding: 0; | |
width: 100%; | |
overflow: hidden; | |
box-sizing: border-box; | |
height: 0; | |
} | |
.info ul li { | |
background-color: #bdc3c7; | |
width: 100%; | |
height: 100px; | |
border-top: 1px solid #7f8c8d; | |
margin-top: -72px; | |
} | |
.info li h3 { | |
font-weight: normal; | |
font-weight: 700; | |
font-size: 13px; | |
margin-bottom: -5px; | |
} |