<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Legend</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default">
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:700,300,400);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
</style>
<link href="http://oss.maxcdn.com/icheck/1.0.2/skins/all.min.css" rel="stylesheet">
<style>
html,
body
{
height: 100%;
font-weight:400;
overflow-y: auto;
overflow-x: hidden;
background: #e5e5e5;
font-family: Lato, sans-serif;
}
.wrap
{
margin: 0 auto;
height: 100%;
padding: 5px 10px;
position: relative;
}
/* Dynamic Grid Styles */
.wrap > .container
{
max-width: 960px;
width: 100%;
height: 100%;
position: relative;
padding: 15px 0 15px;
}
/* Well Styles */
.well
{
border: 0;
padding: 20px;
min-height: 63px;
background: #fff;
box-shadow: none;
border-radius: 3px;
position: relative;
max-height: 100000px;
border-bottom: 2px solid #ccc;
transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
-ms-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-webkit-transition: max-height 0.5s ease;
}
</style>
<style>
/* iCheck page styles */
.colors ul { padding: 0; }
.colors li{list-style-type: none;position:relative;float:left;width:16px;height:16px;margin:2px 1px 0 0;background:#000;cursor:pointer;filter:alpha(opacity=50);opacity:.5;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;}
.colors li:hover{filter:alpha(opacity=100);opacity:1}
.colors li.active{height:20px;margin-top:0;filter:alpha(opacity=75);opacity:.75}
.colors li.red{background:#d54e21}
.colors li.green{background:#78a300}
.colors li.blue{background:#0e76a8}
.colors li.aero{background:#9cc2cb}
.colors li.grey{background:#73716e}
.colors li.orange{background:#f70}
.colors li.yellow{background:#fc0}
.colors li.pink{background:#ff66b5}
.colors li.purple{background:#6a5a8c}
.skin-square .colors li.red{background:#e56c69}
.skin-square .colors li.green{background:#1b7e5a}
.skin-square .colors li.blue{background:#2489c5}
.skin-square .colors li.aero{background:#9cc2cb}
.skin-square .colors li.grey{background:#73716e}
.skin-square .colors li.yellow{background:#fc3}
.skin-square .colors li.pink{background:#a77a94}
.skin-square .colors li.purple{background:#6a5a8c}
.skin-square .colors li.orange{background:#f70}
.skin-flat .colors li.red{background:#ec7063}
.skin-flat .colors li.green{background:#1abc9c}
.skin-flat .colors li.blue{background:#3498db}
.skin-flat .colors li.grey{background:#95a5a6}
.skin-flat .colors li.orange{background:#f39c12}
.skin-flat .colors li.yellow{background:#f1c40f}
.skin-flat .colors li.pink{background:#af7ac5}
.skin-flat .colors li.purple{background:#8677a7}
.skin-line .colors li.yellow{background:#ffc414}
</style>
</head>
<body class="left">
<section class="wrap">
<div class="container">
<ol class="breadcrumb">
<li><a href="#">Form Elements</a></li>
<li><a href="#">Components</a></li>
<li><a href="#">iCheck</a></li>
<li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-refresh"></i></a></li>
</ol>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="well">
<div class="header">Minimal Skin <a class="headerclose"><i class="icon-remove pull-right"></i></a> <a class="headerrefresh"><i class="icon-refresh pull-right"></i></a> <a class="headershrink"><i class="icon-chevron-down pull-right"></i></a></div>
<div class="skin skin-minimal">
<div class="skin-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="minimal-checkbox-1" class="icheck">
<input tabindex="5" type="checkbox" id="minimal-checkbox-1"> Checkbox 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="minimal-checkbox-2" class="icheck">
<input tabindex="6" type="checkbox" id="minimal-checkbox-2" checked> Checkbox 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="minimal-checkbox-disabled" class="icheck">
<input type="checkbox" id="minimal-checkbox-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="minimal-checkbox-disabled-checked" class="icheck">
<input type="checkbox" id="minimal-checkbox-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="minimal-radio-1" class="icheck">
<input tabindex="7" type="radio" id="minimal-radio-1" name="minimal-radio"> Radio 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="minimal-radio-2" class="icheck">
<input tabindex="8" type="radio" id="minimal-radio-2" name="minimal-radio" checked> Radio 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="minimal-radio-disabled" class="icheck">
<input type="radio" id="minimal-radio-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="minimal-radio-disabled-checked" class="icheck">
<input type="radio" id="minimal-radio-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
</div>
<div class="colors clearfix">
<p class="text-muted"><small>Color schemes</small></p>
<ul>
<li class="active" title="Black"></li>
<li class="red" title="Red"></li>
<li class="green" title="Green"></li>
<li class="blue" title="Blue"></li>
<li class="aero" title="Aero"></li>
<li class="grey" title="Grey"></li>
<li class="orange" title="Orange"></li>
<li class="yellow" title="Yellow"></li>
<li class="pink" title="Pink"></li>
<li class="purple" title="Purple"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="well">
<div class="header">Square Skin <a class="headerclose"><i class="icon-remove pull-right"></i></a> <a class="headerrefresh"><i class="icon-refresh pull-right"></i></a> <a class="headershrink"><i class="icon-chevron-down pull-right"></i></a></div>
<div class="skin skin-square">
<div class="skin-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="square-checkbox-1" class="icheck">
<input tabindex="9" type="checkbox" id="square-checkbox-1"> Checkbox 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="square-checkbox-2" class="icheck">
<input tabindex="6" type="checkbox" id="square-checkbox-2" checked> Checkbox 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="square-checkbox-disabled" class="icheck">
<input type="checkbox" id="square-checkbox-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="square-checkbox-disabled-checked" class="icheck">
<input type="checkbox" id="square-checkbox-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="square-radio-1" class="icheck">
<input tabindex="7" type="radio" id="square-radio-1" name="square-radio"> Radio 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="square-radio-2" class="icheck">
<input tabindex="8" type="radio" id="square-radio-2" name="square-radio" checked> Radio 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="square-radio-disabled" class="icheck">
<input type="radio" id="square-radio-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="square-radio-disabled-checked" class="icheck">
<input type="radio" id="square-radio-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
</div>
<div class="colors clearfix">
<p class="text-muted"><small>Color schemes</small></p>
<ul>
<li class="active" title="Black"></li>
<li class="red" title="Red"></li>
<li class="green" title="Green"></li>
<li class="blue" title="Blue"></li>
<li class="aero" title="Aero"></li>
<li class="grey" title="Grey"></li>
<li class="orange" title="Orange"></li>
<li class="yellow" title="Yellow"></li>
<li class="pink" title="Pink"></li>
<li class="purple" title="Purple"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="well">
<div class="header">Flat Skin <a class="headerclose"><i class="icon-remove pull-right"></i></a> <a class="headerrefresh"><i class="icon-refresh pull-right"></i></a> <a class="headershrink"><i class="icon-chevron-down pull-right"></i></a></div>
<div class="skin skin-flat">
<div class="skin-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="flat-checkbox-1" class="icheck">
<input tabindex="9" type="checkbox" id="flat-checkbox-1"> Checkbox 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="flat-checkbox-2" class="icheck">
<input tabindex="6" type="checkbox" id="flat-checkbox-2" checked> Checkbox 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="flat-checkbox-disabled" class="icheck">
<input type="checkbox" id="flat-checkbox-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="flat-checkbox-disabled-checked" class="icheck">
<input type="checkbox" id="flat-checkbox-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="flat-radio-1" class="icheck">
<input tabindex="7" type="radio" id="flat-radio-1" name="flat-radio"> Radio 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="flat-radio-2" class="icheck">
<input tabindex="8" type="radio" id="flat-radio-2" name="flat-radio" checked> Radio 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="flat-radio-disabled" class="icheck">
<input type="radio" id="flat-radio-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="flat-radio-disabled-checked" class="icheck">
<input type="radio" id="flat-radio-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
</div>
<div class="colors clearfix">
<p class="text-muted"><small>Color schemes</small></p>
<ul>
<li class="active" title="Black"></li>
<li class="red" title="Red"></li>
<li class="green" title="Green"></li>
<li class="blue" title="Blue"></li>
<li class="aero" title="Aero"></li>
<li class="grey" title="Grey"></li>
<li class="orange" title="Orange"></li>
<li class="yellow" title="Yellow"></li>
<li class="pink" title="Pink"></li>
<li class="purple" title="Purple"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="well">
<div class="header">Line Skin <a class="headerclose"><i class="icon-remove pull-right"></i></a> <a class="headerrefresh"><i class="icon-refresh pull-right"></i></a> <a class="headershrink"><i class="icon-chevron-down pull-right"></i></a></div>
<div class="skin skin-line">
<div class="skin-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="form-group">
<input tabindex="9" type="checkbox" id="line-checkbox-1">
<label for="line-checkbox-1">Checkbox 1</label>
</div>
<div class="form-group">
<input tabindex="6" type="checkbox" id="line-checkbox-2" checked>
<label for="line-checkbox-2">Checkbox 2</label>
</div>
<div class="form-group">
<input type="checkbox" id="line-checkbox-disabled" disabled>
<label for="line-checkbox-disabled">Disabled</label>
</div>
<div class="form-group">
<input type="checkbox" id="line-checkbox-disabled-checked" checked disabled>
<label for="line-checkbox-disabled-checked">Disabled & checked</label>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="form-group">
<input tabindex="7" type="radio" id="line-radio-1" name="line-radio">
<label for="line-radio-1">Radio 1</label>
</div>
<div class="form-group">
<input tabindex="8" type="radio" id="line-radio-2" name="line-radio" checked>
<label for="line-radio-2">Radio 2</label>
</div>
<div class="form-group">
<input type="radio" id="line-radio-disabled" disabled>
<label for="line-radio-disabled">Disabled</label>
</div>
<div class="form-group">
<input type="radio" id="line-radio-disabled-checked" checked disabled>
<label for="line-radio-disabled-checked">Disabled & checked</label>
</label>
</div>
</div>
</div>
<div class="colors clearfix">
<p class="text-muted"><small>Color schemes</small></p>
<ul>
<li class="active" title="Black"></li>
<li class="red" title="Red"></li>
<li class="green" title="Green"></li>
<li class="blue" title="Blue"></li>
<li class="aero" title="Aero"></li>
<li class="grey" title="Grey"></li>
<li class="orange" title="Orange"></li>
<li class="yellow" title="Yellow"></li>
<li class="pink" title="Pink"></li>
<li class="purple" title="Purple"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="well">
<div class="header">Polaris Skin <a class="headerclose"><i class="icon-remove pull-right"></i></a> <a class="headerrefresh"><i class="icon-refresh pull-right"></i></a> <a class="headershrink"><i class="icon-chevron-down pull-right"></i></a></div>
<div class="skin skin-polaris">
<div class="skin-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="polaris-checkbox-1" class="icheck">
<input tabindex="9" type="checkbox" id="polaris-checkbox-1"> Checkbox 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="polaris-checkbox-2" class="icheck">
<input tabindex="6" type="checkbox" id="polaris-checkbox-2" checked> Checkbox 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="polaris-checkbox-disabled" class="icheck">
<input type="checkbox" id="polaris-checkbox-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="polaris-checkbox-disabled-checked" class="icheck">
<input type="checkbox" id="polaris-checkbox-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="polaris-radio-1" class="icheck">
<input tabindex="7" type="radio" id="polaris-radio-1" name="polaris-radio"> Radio 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="polaris-radio-2" class="icheck">
<input tabindex="8" type="radio" id="polaris-radio-2" name="polaris-radio" checked> Radio 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="polaris-radio-disabled" class="icheck">
<input type="radio" id="polaris-radio-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="polaris-radio-disabled-checked" class="icheck">
<input type="radio" id="polaris-radio-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="well">
<div class="header">Futurico Skin <a class="headerclose"><i class="icon-remove pull-right"></i></a> <a class="headerrefresh"><i class="icon-refresh pull-right"></i></a> <a class="headershrink"><i class="icon-chevron-down pull-right"></i></a></div>
<div class="skin skin-futurico">
<div class="skin-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="futurico-checkbox-1" class="icheck">
<input tabindex="9" type="checkbox" id="futurico-checkbox-1"> Checkbox 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="futurico-checkbox-2" class="icheck">
<input tabindex="6" type="checkbox" id="futurico-checkbox-2" checked> Checkbox 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="futurico-checkbox-disabled" class="icheck">
<input type="checkbox" id="futurico-checkbox-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="futurico-checkbox-disabled-checked" class="icheck">
<input type="checkbox" id="futurico-checkbox-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="checkbox icheck form-group">
<label for="futurico-radio-1" class="icheck">
<input tabindex="7" type="radio" id="futurico-radio-1" name="futurico-radio"> Radio 1
</label>
</div>
<div class="checkbox icheck form-group">
<label for="futurico-radio-2" class="icheck">
<input tabindex="8" type="radio" id="futurico-radio-2" name="futurico-radio" checked> Radio 2
</label>
</div>
<div class="checkbox icheck form-group">
<label for="futurico-radio-disabled" class="icheck">
<input type="radio" id="futurico-radio-disabled" disabled> Disabled
</label>
</div>
<div class="checkbox icheck form-group">
<label for="futurico-radio-disabled-checked" class="icheck">
<input type="radio" id="futurico-radio-disabled-checked" checked disabled> Disabled & checked
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" ></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/icheck/1.0.2/icheck.min.js"></script>
<script>
function icheck() {
$('.colors li').click(function () {
var self = $(this);
if (!self.hasClass('active')) {
self.siblings().removeClass('active');
var skin = self.closest('.skin'),
color = self.attr('class') ? '-' + self.attr('class') : '',
checkbox = skin.data('icheckbox'),
radio = skin.data('iradio'),
checkbox_default = 'icheckbox_minimal',
radio_default = 'iradio_minimal';
if (skin.hasClass('skin-square')) {
checkbox_default = 'icheckbox_square', radio_default = 'iradio_square';
checkbox == undefined && (checkbox = 'icheckbox_square-green', radio = 'iradio_square-green');
};
if (skin.hasClass('skin-flat')) {
checkbox_default = 'icheckbox_flat', radio_default = 'iradio_flat';
checkbox == undefined && (checkbox = 'icheckbox_flat-red', radio = 'iradio_flat-red');
};
if (skin.hasClass('skin-line')) {
checkbox_default = 'icheckbox_line', radio_default = 'iradio_line';
checkbox == undefined && (checkbox = 'icheckbox_line-blue', radio = 'iradio_line-blue');
};
checkbox == undefined && (checkbox = checkbox_default, radio = radio_default);
skin.find('input, .skin-states .state').each(function () {
var element = $(this).hasClass('state') ? $(this) : $(this).parent(),
element_class = element.attr('class').replace(checkbox, checkbox_default + color).replace(radio, radio_default + color);
element.attr('class', element_class);
});
skin.data('icheckbox', checkbox_default + color);
skin.data('iradio', radio_default + color);
self.addClass('active');
};
});
$('.skin-minimal input').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal',
increaseArea: '20%'
});
$('.skin-square input').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
increaseArea: '20%'
});
$('.skin-flat input').iCheck({
checkboxClass: 'icheckbox_flat-red',
radioClass: 'iradio_flat-red'
});
$('.skin-line input').each(function () {
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-blue',
radioClass: 'iradio_line-blue',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '-10%'
});
$('.skin-futurico input').iCheck({
checkboxClass: 'icheckbox_futurico',
radioClass: 'iradio_futurico',
increaseArea: '20%'
});
}
icheck();
</script>
</body>
</html>
