<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container"> <!-- style="overflow:hidden" -->
<nav id="mainNav" class="hidden navbar navbar-default navbar-fixed-top navbar-custom affix-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<!-- <img class="navbar-brand" src="#"/> -->
<a class="navbar-brand" href="#page-top">Connect Your Care</a>
</div>
<!-- Menu options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#">Option 1</a>
</li>
<li class="page-scroll">
<a href="#">Option 2</a>
</li>
<li class="page-scroll">
<a href="#">Option 3</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-12 visible-xs">
<!-- Account selection for mobile - I -->
<div class="dropdown">
<button id="actionsDrop" class="btn btn-default dropdown-toggle col-xs-12" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
HSA - $587.50
<span class="caret"></span>
<i class="down-arrow pull-right"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="actionsDrop">
<li class="selected"><a href="#">HSA - $587.50</a></li>
<li><a href="#">FSA - $120.00</a></li>
<li><a href="#">HSAOD - $350.00</a></li>
<li><a href="#">DCAP - $2300,00</a></li>
</ul>
</div>
<!-- Account selection for mobile - F -->
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12" style="overflow:auto">
<div id="MyAccountsTab" class="tabbable tabs-left">
<!-- Account selection for desktop - I -->
<ul class="nav nav-tabs col-md-1 hidden-xs">
<li class="active">
<div data-target="#lA" data-toggle="tab">
<div class="ellipsis">
<span class="account-type">HSA</span><br/>
<span class="account-amount">$587.00</span><br/>
<a href="#" class="account-link">Investments</a>
</div>
</div>
</li>
<li>
<div data-target="#lB" data-toggle="tab">
<div>
<span class="account-type">FSA</span><br/>
<span class="account-amount">$120,00</span><br/>
</div>
</div>
</li>
<li>
<div data-target="#lC" data-toggle="tab">
<div>
<span class="account-type">HSAOD</span><br/>
<span class="account-amount">$350,00</span><br/>
</div>
</div>
</li>
<li>
<div data-target="#lD" data-toggle="tab">
<div>
<span class="account-type">DCAP</span><br/>
<span class="account-amount">$2.300,00</span><br/>
<a href="#" class="account-link">Investments</a>
</div>
</div>
</li>
</ul>
<div class="tab-content col-md-11">
<div class="tab-pane active" id="lA"><!--style="padding-left: 60px; padding-right:100px"-->
<div class="col-md-offset-1">
<div class="row" style="line-height: 14px; margin-bottom: 34.5px">
<div class="col-md-2 col-xs-12" style="height: 65px">
<div class="col-xs-12 bottom-aligned">
<div class="col-xs-12">
<div class="row">
<div class="title">
<span>BALANCE</span>
</div>
<div>
<a href="#" class="balance">$587.50</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4" style="height: 65px">
<div class="col-xs-12 bottom-aligned">
<div class="col-xs-12">
<div class="row balance-amounts-box ellipsis" style="padding-left: 0">
<span>
<a class="clearfix" style="line-height: 18px; font-size:12px" href="#" >Investments</a>
<span style="font-weight:bold">$12.00</span>
</span>
<span>
<a class="clearfix" style="line-height: 18px; font-size:12px" href="#" >Contributions YTD</a>
<span style="font-weight:bold">$12.00</span>
</span>
<span>
<a class="clearfix" style="line-height: 18px; font-size:12px" href="#" >HSAOD</a>
<span style="font-weight:bold">$12.00</span>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-6 col-xs-12 mt-20" style="height: 65px">
<div class="col-xs-12" style="display: table; height: 100%; padding: 0px">
<div style="display: table-cell; vertical-align: bottom; height: 100%">
<div class="row">
<div class="col-xs-12 title">
<span>WHAT WOULD YOU LIKE TO DO?</span>
</div>
<div class="col-xs-12">
<div class="dropdown">
<button id="actionsDrop" class="btn btn-default dropdown-toggle col-xs-12" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
More actions...
<span class="caret"></span>
<i class="down-arrow pull-right"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="actionsDrop">
<li><a href="#">Manage HSA Contributions</a></li>
<li><a href="#">Manage HSAOD Activity</a></li>
<li><a href="#">Go to HSA Save-it!</a></li>
<li><a href="#">View Statements</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-6" >
<div class="title">
<span>EXPENSE SUMMARY</span>
</div>
<div class="col-md-12 top-rounded">
<div class="col-xs-6" style="padding-top:15px; padding-left:3px">
<div class="title">
<span>TOTAL EXPENSE</span>
</div>
<div class="clear-fix"></div>
<div style="margin-bottom: 10px; margin-top: -5px;font-size: 18px; font-weight: bold; line-height:18px">
<span>$458.40</span>
</div>
</div>
<div class="col-xs-6" style="padding-top:15px; padding-left:0px; padding-right:0px">
<div class="dropdown">
<button id="monthsDrop" style="border-style:none; width: 100%" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
September
<span class="caret"></span>
<i class="down-arrow pull-right"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="monthsDrop">
<li><a href="#">January</a></li>
<li><a href="#">February</a></li>
<li><a href="#">March</a></li>
<li><a href="#">April</a></li>
<li><a href="#">May</a></li>
<li><a href="#">June</a></li>
<li><a href="#">July</a></li>
<li><a href="#">August</a></li>
<li><a href="#">September</a></li>
<li><a href="#">October</a></li>
<li><a href="#">November</a></li>
<li><a href="#">Dicember</a></li>
</ul>
</div>
<!-- <select class="form-control">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9" selected>September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>-->
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-12 bottom-rounded" style="overflow-x:auto">
<canvas id="chart" style="width:400px;height:300px"></canvas>
</div>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-6">
<div>
<div class="title">
<span >MY PAYMENT CARD</span>
</div>
<div class="col-md-12 rounded"><!--style="height:5em"-->
<span>TODO</span>
<div class="clear-fix"></div>
</div>
</div>
<div>
<div class="clear-fix"></div>
<div class="title">
<span>ADVICE</span>
</div>
<div class="col-md-12 rounded"><!--style="height:17em"-->
<span>TODO</span>
<div class="clear-fix"></div>
</div>
</div>
</div>
</div>
<div class="clearfix hidden-xs" style="margin-top: 15px"></div>
<div class="row">
<div class="col-md-12">
<div class="title">
<span>RECENT ACTIVITY</span>
</div>
<div class="col-md-12 rounded">
TODO - Recent activity datagrid - TODO
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="lB">
<div class="col-md-offset-1">
<div class="row" style="line-height: 14px; margin-bottom: 34.5px">
<p>FSA account selected.</p>
</div>
</div>
</div>
<div class="tab-pane" id="lC">
<div class="col-md-offset-1">
<div class="row" style="line-height: 14px; margin-bottom: 34.5px">
<p>HSAOD account selected.</p>
</div>
</div>
</div>
<div class="tab-pane" id="lD">
<div class="col-md-offset-1">
<div class="row" style="line-height: 14px; margin-bottom: 34.5px">
<p>DCAP account selected.</p>
</div>
</div>
</div>
</div>
<!-- Account selection for desktop - F -->
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
canvas{
overflow-x:auto;
}
.bottom-aligned {
display:flex;
align-items: flex-end;
height: 100%;
padding:0;
}
.balance-amounts-box > span:not(:last-child) {
border-right: solid 1px #dce1e5;
}
.balance-amounts-box > span {
display:inline-block;
padding-left:7px;
padding-right:7px;
}
div {
/*box-sizing: border-box;*/
outline-color: #ade3ff;
outline-style: none;
}
/* Dropdowns - I */
.dropdown .dropdown-toggle .down-arrow {
display: inline-block;
margin-top: 6px;
margin-left:5px;
width: 16px;
height: 9px;
background-image: url("http://www.htic.es/assets/down-arrow.png")
}
.dropdown .dropdown-toggle .caret {
display: none;
}
.dropdown.open .down-arrow {
behavior:url(-ms-transform.htc);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
transform: rotate(-180deg);
}
.dropdown button,
.dropdown-menu {
background-color: #f6f8f8;
}
.dropdown-menu {
margin-top: 0px;
background-color: #f6f8f8;
border-radius: 0 0 0 0;
}
.dropdown-menu > li > a:hover {
background-color: #96a4ad;
}
/* Dropdowns - F */
div.clearfix {
margin-top: 15px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.margin-top-15 {
margin-top: 15px;
}
/* ROBOTO FONT FACES - I */
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* ROBOTO FONT FACES - F */
/** General HTML style - I */
/*@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);*/
body
{
font-family: 'Roboto', sans-serif;
/*color: #B7C4CB;*/
background-color: #F7F9F9;
margin:0;
padding:0;
width: 100%;
height: 100%;
}
body > div {
margin-top: 10px;
}
a {
/*font-size: 0.9em;*/
color: #72B032;
/*color: #86BB4F;*/
}
a, a:hover, a:focus, a:visited {
text-decoration: none;
}
/** General HTML style - F */
canvas {
margin-bottom: 15px;
}
container {
padding-bottom: 15px;
}
/*#monthDrop*/
.dropdown button .btn-default {
width:100%;
border-color: red;
}
.balance {
line-height: 1em;
font-size:2.5em
}
.title {
color: #a0aeb6;
font-size: 1em;
margin-bottom: 10px;
}
/** Rounded divs - I */
div.rounded,
div.top-rounded,
div.bottom-rounded {
border: solid 1px #dce1e5;
}
div.rounded {
margin-bottom: 20px;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
div.top-rounded {
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
div.bottom-rounded {
border-top-style: none;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
}
/** Rounded divs - F */
/** Dropdown draft - I */
.dropdown span.caret {
float:right;
margin-top:8px;
}
.dropdown button {
text-align: left;
}
.dropdown-menu {
width: 100%;
}
/** Dropdown draft - F */
/** Let tabls-left class be available in bootstrap 3.3.7 - I **/
.tabs-left > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
.tabs-left > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-left > .nav-tabs > li > div {
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a,
.tabs-left > .nav-tabs > li > div {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus,
.tabs-left > .nav-tabs > li > div:hover,
.tabs-left > .nav-tabs > li > div:focus{
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
background-color: #eeeeee;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus,
.tabs-left > .nav-tabs .active > div,
.tabs-left > .nav-tabs .active > div:hover,
.tabs-left > .nav-tabs .active > div:focus{
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
/** Let tabls-left class be available in bootstrap 3.3.7 - F **/
.account-type
{
font-family: 'Roboto', sans-serif;
color: #A0AEB6;
font-size: 1.3em;
font-weight: bold;
line-height: 18px;
}
.account-amount
{
font-family: 'Roboto', sans-serif;
color: #A0AEB6;
font-size: 1.1em;
line-height: 16px;
}
.account-link
{
font-family: 'Roboto', sans-serif;
font-size: 0.85em;
/*line-height: 1em;*/
}
/* TABS */
.tabs-left > .nav-tabs{
margin-right:0px;
padding: 0;
height: 100%; /* 700px - Debe ser el mismo height que el que tenga .tab-content */
}
/* CONTENIDO DE LOS TABS */
.tab-content {
background-color: #FFFFFF;
border:solid 1px #DCE1E5;
border-left-style: none;
height: 100%;
margin-bottom: 15px;
min-height: 700px;
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
-webkit-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05);
}
.tab-content > div {
margin-top: 26px;
}
/* Formato del tab activo */
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus,
.tabs-left > .nav-tabs .active div,
.tabs-left > .nav-tabs .active div:hover,
.tabs-left > .nav-tabs .active div:focus
{
background-color: #FFFFFF;
border-bottom-style: none;
border-left-style: none;
/*border-bottom: 1px solid #DCE1E5;*/
/*border-left: 1px solid #DCE1E5;*/
border-bottom-left-radius: 0px;
border-right-style: none;
margin-right: -1px;
-webkit-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
-moz-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05);
}
/* Formato de los tabs en general */
.tabs-left > .nav-tabs > li:nth-child(1) > a,
.tabs-left > .nav-tabs > li:nth-child(1) > a:hover,
.tabs-left > .nav-tabs > li:nth-child(1) > a:focus,
.tabs-left > .nav-tabs > li:nth-child(1) > div,
.tabs-left > .nav-tabs > li:nth-child(1) > div:hover,
.tabs-left > .nav-tabs > li:nth-child(1) > div:focus
{
cursor: pointer;
border-top-left-radius: 4px;
}
.tabs-left > .nav-tabs > li.active:nth-child(1) > a,
.tabs-left > .nav-tabs > li.active:nth-child(1) > a:hover,
.tabs-left > .nav-tabs > li.active:nth-child(1) > a:focus,
.tabs-left > .nav-tabs > li.active:nth-child(1) > div,
.tabs-left > .nav-tabs > li.active:nth-child(1) > div:hover,
.tabs-left > .nav-tabs > li.active:nth-child(1) > div:focus
{
border-top-left-radius: 4px;
border-bottom-style: none;
border-left: 1px solid #DCE1E5;
}
.tabs-left > .nav-tabs > li > a,
.tabs-left > .nav-tabs > li > div {
/*display:block;*/
/*display: table;*/
/*border: solid 1px transparent;*/
margin-right: -1px;
margin-bottom: -1px;
border:solid 1px #DCE1E5;
border-radius: 0px;
}
/* Style of the div element acting as tab content */
.tabbable.tabs-left > .nav-tabs > li > div > div {
display:block;
width: 100%;
padding: 1em;
min-height: 6em;
}
/** For elements on the same line that jump down - I */
@media (max-width: 767px) {
.mt-20 {
margin-top:20px;
}
.tab-content {
border-left-style: solid;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
}
/** For elements on the same line that jump down - F */
//Load the graph with experimental data
$(document).ready(function(){
var canvas = $("#chart").get(0);
var ctx = canvas.getContext('2d');
// Global Options:
//Chart.defaults.global.defaultFontColor = '#a0aeb6';
//Chart.defaults.global.defaultFontSize = 12;
// Data with datasets options
var data = {
labels: ['Eyecare', 'Medical', 'Dentist', 'Rx','c4','c5','c6'],
datasets: [
{
backgroundColor:
['#313f4d','#54585a','#39af87','#379baf','#ff00ff','#00ff00','#ff0000'],
borderWidth: 0,
data: [84.60, 84.60, 160, 110,300,200,50]
}
]
};
var options = {
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
},
isFixedWidth: false,
barWidth:1,
maintainAspectRatio:true,
legend: {
display: false
},
tooltips: {
mode: 'index',
callbacks: {
label: function(tooltipItem) {
return "$" + Number(tooltipItem.yLabel).toFixed(2);
},
labelTextColor:function(tooltipItem, chart){
return '#000000';
}/*,
titleTextColor:function(tooltipItem, chart){
return '#000000';
}*/
},
backgroundColor: '#ffffff',
borderColor: '#a0aeb6',
borderWidth: 1,
bodySpacing: 0,
cornerRadius: 2,
displayColors: false,
titleMarginTop: 20,
titleMarginBottom: 0,
titleFontSize: 0,
titleFontColor: '#000000',
caretSize: 4,
xAlign: 'center',
yAlign: 'bottom',
xPadding: 12,
yPadding: 12,
},
title: {
display: false,
text: 'Graph title',
position: 'bottom'
},
scales: {
xAxes: [
{
barThickness : 35,
gridLines: {
display: false
},
ticks: {
fontSize: "12",
fontColor: "#000000",
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false,
color: "#dce1e5",
borderDash: [4, 3],
borderDashOffset: 3
},
ticks: {
beginAtZero:true,
fontColor: "#a0aeb6",
fontSize: "12",
callback: function (value) {
return "$"+Number(value)
},
stepSize: 25
}
}]
},
responsive: false
};
// Chart declaration:
var barChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
wdiv = $('canvas').parent().width();
$('canvas').css('width',wdiv);
});
