fuelux
Version:
Base Fuel UX styles and controls
1,063 lines (939 loc) • 120 kB
HTML
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8" />
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- allows for visual check of compiled LESS for debugging/testing purposes. Uncomment this, and comment out client-side LESS compilation code below to use this -->
<!--<link href="dist/css/fuelux.css" rel="stylesheet" type="text/css">-->
<!--<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css">-->
<!--CLIENT-SIDE LESS COMPILATION FOR WATCHER-LESS DEV-->
<link href="less/fuelux.less" rel="stylesheet/less" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
<!-- <link href="http://www.fuelcdn.com/fuelux-mctheme/1.4.0/css/fuelux-mctheme.css" rel="stylesheet" type="text/css" /> -->
<script src="bower_components/requirejs/require.js"></script>
<script type="text/javascript">
(function () {
requirejs.config({
config: {
moment: {
noGlobal: true
}
},
paths: {
jquery: 'bower_components/jquery/dist/jquery',
underscore: 'bower_components/underscore/underscore',
bootstrap: 'bower_components/bootstrap/dist/js/bootstrap',
moment: 'bower_components/moment/min/moment-with-locales',
fuelux: 'js',
hbs: 'bower_components/require-handlebars-plugin/hbs',
fuelux_templates: 'templates/handlebars/fuelux',
bootstrap_templates: 'templates/handlebars/bootstrap'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'bootstrap'
}
},
hbs: {
partialsUrl: 'templates/handlebars'
}
});
})();
require(['jquery', 'index'], function($){ });
</script>
</head>
<body>
<form>
<div class="container" id="mainWrapper">
<section id="checkboxes">
<h2>Checkboxes</h2>
<div class="thin-box">
<section id="checkboxes-toggling">
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox1">
<input type="checkbox" class="sr-only" data-toggle=".checkboxToggle" />
<span class="checkbox-label">Custom checkbox toggles by class</span>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox2">
<input type="checkbox" class="sr-only" data-toggle="#checkboxToggle" />
<span class="checkbox-label">Custom checkbox toggles by id</span>
</label>
</div>
<div aria-hidden="true" class="checkboxToggle alert alert-warning hidden">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="checkboxToggle alert alert-success hidden">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="alert alert-info hidden" id="checkboxToggle">This message's visibility toggles by id with a checkbox above.</div>
</section>
<section id="checkboxes-highlighting-block"><!-- why duplicate the highlight classes on div.checkbox and label?, why span.checkbox-label vs. text node, why does checked input require 'checked' class too? -->
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox1">
<input type="checkbox" class="sr-only" />
<span class="checkbox-label">Custom block-level highlight checkbox</span>
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox2">
<input type="checkbox" class="sr-only" />
<span class="checkbox-label">Custom block-level highlight checkbox</span>
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox3">
<input type="checkbox" class="sr-only" />
<span class="checkbox-label">Custom block-level highlight checkbox</span>
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox4">
<input type="checkbox" class="sr-only" />
<span class="checkbox-label">Custom block-level highlight checkbox</span>
</label>
</div>
</section>
<section id="checkbox-add-on" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkbox within input-group-addon</h3>
</header>
<section class="x-panel-body">
<div class="input-group" id="inputwithcheckbox">
<input id="inputwithcheckboxInput" name="inputwithcheckboxInput" class=" form-control" placeholder="placeholder" />
<label class="input-group-addon checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" aria-label="..." id="inputwithcheckboxCheckbox" value="option1" />
</label>
</div>
<div class="input-group" id="inputwithcheckbox2">
<label class="input-group-addon checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" aria-label="..." id="inputwithcheckboxCheckbox2" value="option1" />
</label>
<input id="inputwithcheckboxInput2" name="inputwithcheckboxInput2" class=" form-control" placeholder="placeholder" />
</div><!-- /input-group -->
</section>
</section>
<section id="checkboxes-highlighting-inline">
<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox5">
<input type="checkbox" class="sr-only" />
<span class="checkbox-label">Custom inline highlight checkbox</span>
</label>
<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox6">
<input type="checkbox" class="sr-only" />
<span class="checkbox-label">Custom inline highlight checkbox</span>
</label>
</section>
</div>
<div class="btn-panel">
<button type="button" class="btn btn-default" id="btnCheckboxToggle">toggle #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxDisable">disable #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxEnable">enable #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxDestroy">destroy and append #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxIsChecked">is #myCustomCheckbox1 checked?</button>
<button type="button" class="btn btn-default" id="btnCheckboxGetValue">log #myCustomCheckbox1 value</button>
<button type="button" class="btn btn-default" id="btnCheckboxCheck">check #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxUncheck">uncheck #myCustomCheckbox1</button>
</div>
</section>
<section id="checkboxes-no-js">
<h2>Checkboxes (no javascript)</h2>
<div class="thin-box">
<section id="checkboxes-no-js-block" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkboxes (no javascript) Block</h3>
</header>
<section class="x-panel-body">
<div class="checkbox">
<input type="checkbox" id="checkboxes-no-js-block--1" name="checkboxes-no-js-block--1" value="" />
<label for="checkboxes-no-js-block--1">
Checkbox: unchecked on page load
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxes-no-js-block--2" name="checkboxes-no-js-block--2" checked="checked" value="" />
<label for="checkboxes-no-js-block--2">
Checkbox: checked on page load
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxes-no-js-block--3" name="checkboxes-no-js-block--3" disabled="disabled" value="" />
<label for="checkboxes-no-js-block--3">
Checkbox: disabled and unchecked on page load
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxes-no-js-block--4" name="checkboxes-no-js-block--4" disabled="disabled" checked="checked" value="" />
<label for="checkboxes-no-js-block--4">
Checkbox: disabled and checked on page load
</label>
</div>
</section>
</section>
<section id="checkboxes-no-js-inline" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkboxes (no javascript) Inline</h3>
</header>
<section class="x-panel-body">
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--1" name="checkboxes-no-js-inline--1" checked="checked" value="" />
<label for="checkboxes-no-js-inline--1">
1, 2, buckle my shoe
</label>
</span>
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--2" name="checkboxes-no-js-inline--2" value="" />
<label for="checkboxes-no-js-inline--2">
3, 4, shut the door
</label>
</span>
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--3" name="checkboxes-no-js-inline--3" checked="checked" disabled="disabled" value="" />
<label for="checkboxes-no-js-inline--3">
5, 6, pick up sticks
</label>
</span>
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--4" name="checkboxes-no-js-inline--4" disabled="disabled" value="" />
<label for="checkboxes-no-js-inline--4">
7, 8, lay them straight
</label>
</span>
</section>
</section>
<section id="checkboxes-no-js-toggling" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkboxes (no javascript) Toggling</h3>
</header>
<div class="x-panel-body">
<div class="checkbox">
<input type="checkbox" id="checkboxes-no-js-toggling--1" name="checkboxes-no-js-toggling--1" data-toggle="collapse" data-target=".checkboxes-no-js-toggling-class" value="" />
<label for="checkboxes-no-js-toggling--1">
Toggles by class
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxes-no-js-toggling--2" name="checkboxes-no-js-toggling--2" data-toggle="collapse" data-target="#checkboxes-no-js-toggling-id" aria-controls="checkboxes-no-js-toggling-id" value="" />
<label for="checkboxes-no-js-toggling--2">
Toggles by ID
</label>
</div>
<div aria-hidden="true" class="alert alert-warning fade collapse checkboxes-no-js-toggling-class">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="alert alert-success fade collapse checkboxes-no-js-toggling-class">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="alert alert-info fade collapse" id="checkboxes-no-js-toggling-id">This message's visibility toggles by id with a checkbox above.</div>
</div>
</section>
<section id="checkboxes-no-js-block-highlighting" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkboxes (no javascript) Block Highlighting</h3>
</header>
<section class="x-panel-body">
<div class="checkbox highlight">
<input type="checkbox" id="checkboxes-no-js-block-highlighting--1" name="checkboxes-no-js-block-highlighting--1" checked="checked" value="" />
<label for="checkboxes-no-js-block-highlighting--1">
Checkbox: checked on page load
</label>
</div>
<div class="checkbox highlight">
<input type="checkbox" id="checkboxes-no-js-block-highlighting--2" name="checkboxes-no-js-block-highlighting--2" value="" />
<label for="checkboxes-no-js-block-highlighting--2">
Checkbox: unchecked on page load
</label>
</div>
<div class="checkbox highlight">
<input type="checkbox" id="checkboxes-no-js-block-highlighting--3" name="checkboxes-no-js-block-highlighting--3" checked="checked" disabled="disabled" value="" />
<label for="checkboxes-no-js-block-highlighting--3">
Checkbox: unchecked and disabled on page load
</label>
</div>
<div class="checkbox highlight">
<input type="checkbox" id="checkboxes-no-js-block-highlighting--4" name="checkboxes-no-js-block-highlighting--4" disabled="disabled" value="" />
<label for="checkboxes-no-js-block-highlighting--4">
Checkbox: checked and disabled on page load
</label>
</div>
</section>
</section>
<section id="checkbox-no-js-multiline" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkbox (no javascript) Checkbox with multiple line label</h3>
</header>
<section class="x-panel-body">
<div class="form-horizontal">
<div class="form-group">
<div class="checkbox multiline">
<input type="checkbox" id="checkboxes-no-js-multiline" name="checkboxes-no-js-multiline" checked="checked" value="" />
<label for="checkboxes-no-js-multiline"></label>
</div>
<div class="control-label">
<label for="checkboxes-no-js-multiline">Have you eaten an african cherry orange, bilberry, ceylon gooseberry, dead man's fingers, or a governor’s plum?</label>
</div>
</div>
</div>
</section>
</section>
<section id="checkboxes-no-js-inline-highlighting" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkboxes (no javascript) Inline Highlighting</h3>
</header>
<section class="x-panel-body">
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--1" name="checkboxes-no-js-inline-highlighting--1" checked="checked" value="" />
<label for="checkboxes-no-js-inline-highlighting--1">
1, 2, buckle my shoe
</label>
</span>
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--2" name="checkboxes-no-js-inline-highlighting--2" value="" />
<label for="checkboxes-no-js-inline-highlighting--2">
3, 4, shut the door
</label>
</span>
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--3" name="checkboxes-no-js-inline-highlighting--3" checked="checked" disabled="disabled" value="" />
<label for="checkboxes-no-js-inline-highlighting--3">
5, 6, pick up sticks
</label>
</span>
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--4" name="checkboxes-no-js-inline-highlighting--4" disabled="disabled" value="" />
<label for="checkboxes-no-js-inline-highlighting--4">
7, 8, lay them straight
</label>
</span>
</section>
</section>
</div>
</section>
<section id="combobox">
<h2>Combobox</h2>
<div class="thin-box">
<div style="width: 300px;">
<div class="input-group input-append dropdown combobox" id="myCombobox">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-flip="auto"><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" data-target="window" role="menu">
<li data-value="1"><a href="#">One</a>
</li>
<li data-value="2"><a href="#">Two</a>
</li>
<li data-selected="true" data-value="3"><a href="#">Three</a>
</li>
<li data-value="4"><a href="#">Four</a>
</li>
<li data-value="Item Five" data-foo="bar" data-fizz="buzz"><a href="#">Item Five</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="btn-panel">
<button id="btnComboboxGetSelectedItem" type="button" class="btn btn-default">log item</button>
<button id="btnComboboxSelectByValue" type="button" class="btn btn-default">set by value (One)</button>
<button id="btnComboboxSelectByIndex" type="button" class="btn btn-default">set by element index (Two)</button>
<button id="btnComboboxSelectByText" type="button" class="btn btn-default">set by text (Four)</button>
<button id="btnComboboxSelectBySelector" type="button" class="btn btn-default">set by CSS selector li[data-fizz=buzz] (Item Five)</button>
<button id="btnComboboxDisable" type="button" class="btn btn-default">disable</button>
<button id="btnComboboxEnable" type="button" class="btn btn-default">enable</button>
<button id="btnComboboxDestroy" type="button" class="btn btn-default">destroy and append</button>
</div>
</section>
<section id="datepicker">
<h2>Datepicker</h2>
<div class="thin-box">
<div style="width: 300px;">
<div class="datepicker" id="myDatepicker">
<div class="input-group">
<input class="form-control" id="myDatepickerInput" type="text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"></span>
<span class="sr-only">Toggle Calendar</span>
</button>
<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
<div class="datepicker-calendar">
<div class="datepicker-calendar-header">
<button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span>
</button>
<button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span>
</button>
<button type="button" class="title">
<span class="month">
<span data-month="0">January</span>
<span data-month="1">February</span>
<span data-month="2">March</span>
<span data-month="3">April</span>
<span data-month="4">May</span>
<span data-month="5">June</span>
<span data-month="6">July</span>
<span data-month="7">August</span>
<span data-month="8">September</span>
<span data-month="9">October</span>
<span data-month="10">November</span>
<span data-month="11">December</span>
</span> <span class="year"></span>
</button>
</div>
<table class="datepicker-calendar-days">
<thead>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="datepicker-calendar-footer">
<button type="button" class="datepicker-today">Today</button>
</div>
</div>
<div class="datepicker-wheels" aria-hidden="true">
<div class="datepicker-wheels-month">
<h2 class="header">Month</h2>
<ul>
<li data-month="0">
<button type="button">Jan</button>
</li>
<li data-month="1">
<button type="button">Feb</button>
</li>
<li data-month="2">
<button type="button">Mar</button>
</li>
<li data-month="3">
<button type="button">Apr</button>
</li>
<li data-month="4">
<button type="button">May</button>
</li>
<li data-month="5">
<button type="button">Jun</button>
</li>
<li data-month="6">
<button type="button">Jul</button>
</li>
<li data-month="7">
<button type="button">Aug</button>
</li>
<li data-month="8">
<button type="button">Sep</button>
</li>
<li data-month="9">
<button type="button">Oct</button>
</li>
<li data-month="10">
<button type="button">Nov</button>
</li>
<li data-month="11">
<button type="button">Dec</button>
</li>
</ul>
</div>
<div class="datepicker-wheels-year">
<h2 class="header">Year</h2>
<ul></ul>
</div>
<div class="datepicker-wheels-footer clearfix">
<button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span>
</button>
<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-panel">
<button type="button" class="btn btn-default" id="btnDatepickerEnable">enable</button>
<button type="button" class="btn btn-default" id="btnDatepickerDisable">disable</button>
<button type="button" class="btn btn-default" id="btnDatepickerLogFormattedDate">log formatted date</button>
<button type="button" class="btn btn-default" id="btnDatepickerLogDateObj">log date object</button>
<button type="button" class="btn btn-default" id="btnDatepickerSetDate">set date 7 days ahead (will log new value)</button>
<button type="button" class="btn btn-default" id="btnDatepickerDestroy">destroy and append</button>
</div>
</section>
<section id="infinitescroll">
<h2>Infinite Scroll</h2>
<div class="clearfix thin-box">
<div class="infinitescroll" id="myInfiniteScroll1">
<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
</div>
<div class="infinitescroll" id="myInfiniteScroll2">
<p>Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor, hodor. Hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor - hodor hodor hodor? Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor... Hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor - hodor, hodor. Hodor hodor hodor! Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor hodor - hodor; hodor hodor hodor hodor?! Hodor, HODOR hodor, hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor. Hodor hodor - hodor?! Hodor HODOR hodor, hodor hodor. Hodor. Hodor hodor - hodor HODOR hodor, hodor hodor hodor! Hodor. Hodor hodor hodor hodor hodor?! Hodor hodor HODOR! Hodor hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor hodor, hodor, hodor hodor. </p>
<p>Hodor hodor hodor - hodor? Hodor hodor hodor hodor hodor hodor! Hodor! Hodor hodor, hodor, hodor. Hodor hodor; hodor hodor - hodor. Hodor. Hodor hodor hodor. Hodor! Hodor hodor, hodor - hodor? </p>
<p>Hodor hodor HODOR! Hodor hodor hodor; hodor hodor hodor! Hodor. Hodor hodor... Hodor hodor hodor hodor. Hodor, hodor, hodor. Hodor hodor - HODOR hodor, hodor hodor? Hodor, hodor. Hodor. Hodor, hodor - HODOR hodor, hodor hodor - hodor. Hodor hodor, hodor. Hodor hodor?! Hodor hodor... Hodor hodor hodor - hodor. Hodor. </p>
<p>Hodor, hodor. Hodor. Hodor, HODOR hodor, hodor HODOR hodor, hodor hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor, hodor. Hodor. Hodor, hodor hodor hodor? Hodor hodor - hodor... Hodor hodor hodor?! Hodor, hodor hodor hodor; hodor hodor; hodor hodor hodor! </p>
</div>
</div>
<div class="btn-panel">
<button type="button" class="btn btn-default" id="btnInfiniteScrollEnable">enable</button>
<button type="button" class="btn btn-default" id="btnInfiniteScrollDisable">disable</button>
<button type="button" class="btn btn-default" id="btnInfiniteScrollDestroy">destroy and append</button>
</div>
</section>
<section id="loader">
<h2>Loader</h2>
<div class="clearfix thin-box" id="loaderWrapper">
<div class="loader" data-initialize="loader" id="myLoader1"></div>
</div>
<div class="btn-panel">
<button type="button" class="btn btn-default" id="btnLoaderDestroy">destroy and append</button>
</div>
</section>
<section id="pillbox">
<h2>Pillbox</h2>
<div class="thin-box">
<div id="myPillbox1Wrapper" style="width: 300px;"></div>
<br/>
<div id="myPillbox2Wrapper" style="width: 230px;"></div>
</div>
<div class="btn-panel">
<!--<button type="button" class="btn btn-default" id="btnPillboxEnable">enable</button>-->
<!--<button type="button" class="btn btn-default" id="btnPillboxDisable">disable</button>-->
<button type="button" class="btn btn-default" id="btnPillboxAdd">add with color</button>
<button type="button" class="btn btn-default" id="btnPillboxRemoveByValue">remove by value "item 2"</button>
<button type="button" class="btn btn-default" id="btnPillboxRemoveBySelector">remove by selector ".example-pill-class"</button>
<button type="button" class="btn btn-default" id="btnPillboxRemoveByText">remove by text "item 3"</button>
<button type="button" class="btn btn-default" id="btnPillboxItems">log items to console</button>
<button type="button" class="btn btn-default" id="btnPillboxDestroy">destroy and append</button>
</div>
</section>
<section id="placard">
<h2>Placard</h2>
<div class="thin-box">
<div class="placard" data-initialize="placard" id="myPlacard1">
<div class="placard-popup"></div>
<input class="form-control placard-field" type="text" />
</div>
<br/>
<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard2">
<div class="placard-popup"></div>
<div class="placard-header">
<h5>Header</h5>
</div>
<input class="form-control placard-field" type="text" />
<div class="placard-footer">
<a class="placard-cancel" href="#">Cancel</a>
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
</div>
</div>
<br/>
<br/>
<div style="background: #eee; display: inline-block; padding: 10px;">
<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard3">
<div class="placard-popup"></div>
<div class="placard-header">
<h5>Header</h5>
</div>
<textarea class="form-control glass placard-field"></textarea>
<div class="placard-footer">
<a class="placard-cancel" href="#">Cancel</a>
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
</div>
</div>
</div>
<br/>
<div class="placard" data-ellipsis="true" data-initialize="placard" id="myPlacard4">
<div class="placard-popup"></div>
<div class="placard-header">
<h5>Header</h5>
</div>
<div class="form-control placard-field" contenteditable="true"></div>
<div class="placard-footer">
<a class="placard-cancel" href="#">Cancel</a>
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
</div>
</div>
<div style="display: inline-block; padding: 10px;">
<div class="placard" data-initialize="placard" id="myPlacard5">
<div class="placard-popup"></div>
<div class="placard-header">
<h5>Header</h5>
</div>
<div class="form-control placard-field" contenteditable="true" data-textarea="true"></div>
<div class="placard-footer">
<a class="placard-cancel" href="#">Cancel</a>
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
</div>
</div>
</div>
</div>
<div class="btn-panel">
<button type="button" class="btn btn-default" id="btnPlacardEnable">enable</button>
<button type="button" class="btn btn-default" id="btnPlacardDisable">disable</button>
<button type="button" class="btn btn-default" id="btnPlacardDestroy">destroy and append</button>
</div>
</section>
<section id="radio-buttons">
<h2>Radio Buttons</h2>
<div class="thin-box">
<!--Block-level Radios-->
<div class="radio">
<label class="radio-custom" data-initialize="radio" id="myCustomRadio1">
<input class="sr-only" name="radio1" type="radio" value="" id="radio1" />
<span class="radio-label">Custom radio unchecked on page load</span>
</label>
</div>
<div class="radio">
<label class="radio-custom" data-initialize="radio" id="myCustomRadio2">
<input checked="checked" class="checked sr-only" name="radio1" type="radio" value="" id="radio2" />
<span class="radio-label">Custom radio checked on page load</span>
</label>
</div>
<div class="radio">
<label class="radio-custom" data-initialize="radio" id="myCustomRadio3">
<input class="sr-only" disabled="disabled" name="radio2" type="radio" value="" />
<span class="radio-label">Custom radio disabled and unchecked on page load</span>
</label>
</div>
<div class="radio">
<label class="radio-custom" data-initialize="radio" id="myCustomRadio4">
<input checked="checked" class="checked sr-only" disabled="disabled" name="radio2" type="radio" value="" />
<span class="radio-label">Custom radio disabled and checked on page load</span>
</label>
</div>
<br/>
<!--Inline radios-->
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio1">
<input checked="checked" class="checked sr-only" name="radio3" type="radio" value="" /> <span class="radio-label">1, 2, buckle my shoe</span>
</label>
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio2">
<input class="sr-only" name="radio3" type="radio" value="" /> <span class="radio-label">3, 4, shut the door</span>
</label>
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio3">
<input class="sr-only" disabled="disabled" name="radio4" type="radio" value="" /> <span class="radio-label">5, 6, pick up sticks</span>
</label>
<label class="radio-custom radio-inline" data-initialize="radio" id="myCustomInlineRadio4">
<input checked="checked" class="checked sr-only" disabled="disabled" name="radio4" type="radio" value="" /> <span class="radio-label">7, 8, lay them straight</span>
</label>
<br/>
<br/>
<!--Toggling capability-->
<div class="radio">
<label class="radio-custom" data-initialize="radio" id="myCustomTogglingRadio1">
<input class="sr-only" data-toggle=".radioToggle" name="radio5" type="radio" value="" />
<span class="radio-label">Custom radio toggles by class</span>
</label>
</div>
<div class="radio">
<label class="radio-custom" data-initialize="radio" id="myCustomTogglingRadio2">
<input class="sr-only" data-toggle="#radioToggle" name="radio5" type="radio" value="" />
<span class="radio-label">Custom radio toggles by id</span>
</label>
</div>
<div aria-hidden="true" class="radioToggle alert alert-warning hidden">This message's visibility toggles by class with a radio above.</div>
<div aria-hidden="true" class="radioToggle alert alert-success hidden">This message's visibility toggles by class with a radio above.</div>
<div aria-hidden="true" class="alert alert-info hidden" id="radioToggle">This message's visibility toggles by id with a radio above.</div>
<br/>
<!--Highlight capability-->
<div class="radio highlight">
<label class="radio-custom highlight" data-initialize="radio" id="myCustomHighlightRadio1">
<input class="sr-only" name="radio6" type="radio" value="" />
<span class="radio-label">Custom block-level highlight radio</span>
</label>
</div>
<div class="radio highlight">
<label class="radio-custom highlight" data-initialize="radio" id="myCustomHighlightRadio2">
<input class="sr-only" name="radio6" type="radio" value="" />
<span class="radio-label">Custom block-level highlight radio</span>
</label>
</div>
<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomHighlightRadio3">
<input class="sr-only" name="radio7" type="radio" value="" /> <span class="radio-label">Custom inline highlight radio</span>
</label>
<label class="radio-custom radio-inline highlight" data-initialize="radio" id="myCustomHighlightRadio4">
<input class="sr-only" name="radio7" type="radio" value="" /> <span class="radio-label">Custom inline highlight radio</span>
</label>
</div>
<div class="btn-panel">
<button type="button" class="btn btn-default" id="btnRadioDisable">disable #myCustomRadio1</button>
<button type="button" class="btn btn-default" id="btnRadioEnable">enable #myCustomRadio1</button>
<button type="button" class="btn btn-default" id="btnRadioDestroy">destroy and append #myCustomRadio1</button>
<button type="button" class="btn btn-default" id="btnRadioIsChecked">is #myCustomRadio1 checked?</button>
<button type="button" class="btn btn-default" id="btnRadioCheck">check #myCustomRadio1</button>
<button type="button" class="btn btn-default" id="btnRadioUncheck">uncheck #myCustomRadio1</button>
</div>
</section>
<section id="radiobuttons-no-js">
<h2>Radio Buttons (no javascript)</h2>
<div class="thin-box">
<section id="radiobuttons-no-js-block" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Block</h3>
</header>
<section class="x-panel-body">
<div class="radio">
<input type="radio" id="radiobuttons-no-js-block--1" name="radiobuttons-no-js-block--group-1" value="" />
<label for="radiobuttons-no-js-block--1">
Radio Button: unchecked on page load
</label>
</div>
<div class="radio">
<input type="radio" id="radiobuttons-no-js-block--2" name="radiobuttons-no-js-block--group-1" checked="checked" value="" />
<label for="radiobuttons-no-js-block--2">
Radio Button: checked on page load
</label>
</div>
<div class="radio">
<input type="radio" id="radiobuttons-no-js-block--3" name="radiobuttons-no-js-block--group-2" disabled="disabled" value="" />
<label for="radiobuttons-no-js-block--3">
Radio Button: disabled and unchecked on page load
</label>
</div>
<div class="radio">
<input type="radio" id="radiobuttons-no-js-block--4" name="radiobuttons-no-js-block--group-2" disabled="disabled" checked="checked" value="" />
<label for="radiobuttons-no-js-block--4">
Radio Button: disabled and checked on page load
</label>
</div>
</section>
</section>
<section id="radiobuttons-no-js-inline" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Inline</h3>
</header>
<section class="x-panel-body">
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-inline--1" name="radiobuttons-no-js-inline--group-1" checked="checked" value="" />
<label for="radiobuttons-no-js-inline--1">
1, 2, buckle my shoe
</label>
</div>
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-inline--2" name="radiobuttons-no-js-inline--group-1" value="" />
<label for="radiobuttons-no-js-inline--2">
3, 4, shut the door
</label>
</div>
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-inline--3" name="radiobuttons-no-js-inline--group-2" checked="checked" disabled="disabled" value="" />
<label for="radiobuttons-no-js-inline--3">
5, 6, pick up sticks
</label>
</div>
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-inline--4" name="radiobuttons-no-js-inline--group-2" disabled="disabled" value="" />
<label for="radiobuttons-no-js-inline--4">
7, 8, lay them straight
</label>
</div>
</section>
</section>
<section id="radiobuttons-no-js-toggling" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Toggling</h3>
</header>
<div class="x-panel-body">
<div class="container-fluid">
<div class="row">
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-toggling--1--on" name="radiobuttons-no-js-toggling-class--1" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--1" aria-controls="radiobuttons-no-js-toggling-class--1" value="" />
<label for="radiobuttons-no-js-toggling--1--on">
On
</label>
</div>
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-toggling--1--off" name="radiobuttons-no-js-toggling-class--1" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--1" aria-controls="radiobuttons-no-js-toggling-class--1" checked="checked" value="" />
<label for="radiobuttons-no-js-toggling--1--off">
Off
</label>
</div>
</div>
<div class="row">
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-toggling--2--on" name="radiobuttons-no-js-toggling--2" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--2" aria-controls="radiobuttons-no-js-toggling-class--2" value="" />
<label for="radiobuttons-no-js-toggling--2--on">
On
</label>
</div>
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-toggling--2--off" name="radiobuttons-no-js-toggling--2" data-toggle="collapse" data-target=".radiobuttons-no-js-toggling-class--2" aria-controls="radiobuttons-no-js-toggling-class--2" checked="checked" value="" />
<label for="radiobuttons-no-js-toggling--2--off">
Off
</label>
</div>
</div>
<div class="row">
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-toggling--3--on" name="radiobuttons-no-js-toggling-id" data-toggle="collapse" data-target="#radiobuttons-no-js-toggling-id" aria-controls="radiobuttons-no-js-toggling-id" value="" />
<label for="radiobuttons-no-js-toggling--3--on">
On
</label>
</div>
<div class="radio-inline">
<input type="radio" id="radiobuttons-no-js-toggling--3--off" name="radiobuttons-no-js-toggling-id" data-toggle="collapse" data-target="#radiobuttons-no-js-toggling-id" aria-controls="radiobuttons-no-js-toggling-id" checked="checked" value="" />
<label for="radiobuttons-no-js-toggling--3--off">
Off
</label>
</div>
</div>
</div>
<div aria-hidden="true" class="alert alert-warning fade collapse radiobuttons-no-js-toggling-class--1" id="radiobuttons-no-js-toggling-class--1">This message's visibility toggles by class with a radio above.</div>
<div aria-hidden="true" class="alert alert-success fade collapse radiobuttons-no-js-toggling-class--2" id="radiobuttons-no-js-toggling-class--2">This message's visibility toggles by class with a radio above.</div>
<div aria-hidden="true" class="alert alert-info fade collapse" id="radiobuttons-no-js-toggling-id">This message's visibility toggles by id with a radio above.</div>
</div>
</section>
<section id="radiobuttons-no-js-block-highlighting" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Block Highlighting</h3>
</header>
<section class="x-panel-body">
<div class="radio highlight">
<input type="radio" id="radiobuttons-no-js-block-highlighting--1" name="radiobuttons-no-js-block-highlighting--group-1" checked="checked" value="" />
<label for="radiobuttons-no-js-block-highlighting--1">
Radio Button: checked on page load
</label>
</div>
<div class="radio highlight">
<input type="radio" id="radiobuttons-no-js-block-highlighting--2" name="radiobuttons-no-js-block-highlighting--group-1" value="" />
<label for="radiobuttons-no-js-block-highlighting--2">
Radio Button: unchecked on page load
</label>
</div>
<div class="radio highlight">
<input type="radio" id="radiobuttons-no-js-block-highlighting--3" name="radiobuttons-no-js-block-highlighting--group-2" checked="checked" disabled="disabled" value="" />
<label for="radiobuttons-no-js-block-highlighting--3">
Radio Button: unchecked and disabled on page load
</label>
</div>
<div class="radio highlight">
<input type="radio" id="radiobuttons-no-js-block-highlighting--4" name="radiobuttons-no-js-block-highlighting--group-2" disabled="disabled" value="" />
<label for="radiobuttons-no-js-block-highlighting--4">
Radio Button: checked and disabled on page load
</label>
</div>
</section>
</section>
<section id="radio-no-js-add-on" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Radio inline within input-group-addon</h3>
</header>
<section class="x-panel-body">
<div class="input-group">
<span class="input-group-addon">
<span class="radio-inline">
<input type="radio" id="example-radio-addon" value="" />
<label for="example-radio-addon"></label>
</span>
</span>
<input type="text" class="form-control" value="Radio within input add-on" />
</div><!-- /input-group -->
</section>
</section>
<section id="radio-no-js-multiline" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Radio button with multiline label</h3>
</header>
<section class="x-panel-body">
<div class="form-horizontal">
<div class="form-group">
<div class="radio multiline">
<input type="radio" id="radio-no-js-multiline--1" name="radio-no-js-multiline" value="" />
<label for="radio-no-js-multiline--1"></label>
</div>
<div class="control-label">
<label for="radio-no-js-multiline--1">Have you eaten an african cherry orange, bilberry, ceylon gooseberry, dead man's fingers, or a governor’s plum?</label>
</div>
</div>
<div class="form-group">
<div class="radio multiline">
<input type="radio" id="radio-no-js-multiline--2" name="radio-no-js-multiline" value="" />
<label for="radio-no-js-multiline--2"></label>
</div>
<div class="control-label">
<label for="radio-no-js-multiline--2">How about an apple?</label>
</div>
</div>
</div>
</section>
</section>
<section id="radiobuttons-no-js-inline-highlighting" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Inline Highlighting</h3>
</header>
<section class="x-panel-body">
<div class="radio-inline highlight">
<input type="radio" id="radiobuttons-no-js-inline-highlighting--1" name="radiobuttons-no-js-inline-highlighting--1" checked="checked" value="" />
<label for="radiobuttons-no-js-inline-highlighting--1">
1, 2, buckle my shoe
</label>
</div>
<div class="radio-inline highlight">
<input type="radio" id="radiobuttons-no-js-inline-highlighting--2" name="radiobuttons-no-js-inline-highlighting--1" value="" />
<label for="radiobuttons-no-js-inline-highlighting--2">
3, 4, shut the door
</label>
</div>
<div class="radio-inline highlight">
<input type="radio" id="radiobuttons-no-js-inline-highlighting--3" name="radiobuttons-no-js-inline-highlighting--2" checked="checked" disabled="disabled" value="" />
<label for="radiobuttons-no-js-inline-highlighting--3">
5, 6, pick up sticks
</label>
</div>
<div class="radio-inline highlight">
<input type="radio" id="radiobuttons-no-js-inline-highlighting--4" name="radiobuttons-no-js-inline-highlighting--2" disabled="disabled" value="" />
<label for="radiobuttons-no-js-inline-highlighting--4">
7, 8, lay them straight
</label>
</div>
</section>
</section>
</div>
</section>
<section id="repeater">
<h2>Repeater</h2>
<div class="thin-box">
<div class="repeater" data-staticheight="400" id="myRepeater">
<div class="repeater-header">
<div class="repeater-header-left">
<span class="repeater-title">Awesome Repeater</span>
<div class="repeater-search">
<div class="search input-group">
<input type="search" class="form-control" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</div>
</div>
<div class="repeater-header-right">
<div class="btn-group selectlist repeater-filters" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label"> </span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-selected="true"><a href="#">All</a>
</li>
<li data-value="some"><a href="#">Some</a>
</li>
<li data-value="others"><a href="#">Others</a>
</li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text" />
</div>
<div class="btn-group repeater-views" data-toggle="buttons">
<label class="btn btn-default active">
<input name="repeaterViews" type="radio" value="list.list" /><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn