Skip to content

Instantly share code, notes, and snippets.

@junyper

junyper/jsbin.duyux.html

Created April 15, 2014 03:16
Show Gist options
  • Save junyper/10699165 to your computer and use it in GitHub Desktop.
Save junyper/10699165 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.duyux.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='dashboard-program-progress' role='progressbar' aria-valuemin='0'>
<span class='dashboard-program-group'>
<span class='course-complete' data-course="1" title="Foo 101"></span>
<span class='course-complete' data-course="2" title="Bar 200"></span>
<span class='course-complete' data-course="3" title="Baz 201"></span>
</span>
<span class='dashboard-program-group'>
<span class='course-complete' data-course="4"></span>
<span class='course-active' data-course="5"></span>
<span data-course="6"></span>
<span data-course="7"></span>
<span data-course="8"></span>
</span>
<span class='dashboard-program-group'>
<span data-course="9"></span>
<span data-course="10"></span>
<span data-course="11"></span>
</span>
<span class='dashboard-program-group'>
<span class='dashboard-program-group'>
<span class='dashboard-program-group'>
<span data-course="12"></span>
<span data-course="13"></span>
</span>
<span data-course="14"></span>
<span data-course="15"></span>
</span>
<span data-course="16"></span>
<span data-course="17"></span>
</span>
</div>
</body>
</html>
Raw
jsbin.duyux.js
$(function(){
$('[data-course]').tooltip({ placement: 'auto'});
});
Raw
jsbin.duyux.less
.dashboard-program-progress {
font-size: 11px;
margin: 20px;
}
.dashboard-program-group {
white-space: nowrap;
display: inline-block;
padding: 1px 0;
> [data-course] {
display: inline-block;
margin: 0 -4px .75em 0;
width: 2.5em;
height: 1.25em;
&:not(:last-child) {
border-bottom: .5em solid #ccc;
}
&.course-complete {
border-color: #5cb85c;
}
&:before {
content: attr(data-course);
border-radius: 50%;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
font-weight: bold;
background-color: #ccc;
color: #fff;
display: inline-block;
vertical-align: middle;
}
&.course-complete:before {
content: '✓';
}
&.course-complete:before,
&.course-active:before {
background-color: #5cb85c;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment