<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 ---------->
<style type="text/css">
.nav-tabs li a,
.nav-tabs li a:active,
.nav-tabs li a:focus { outline:0px !important; -webkit-appearance:none; text-decoration:none; color: #000000;}
/* panel */
.panel {margin-top: 25px;}
.panel .panel-heading { padding: 5px 5px 0 5px;}
.panel .nav-tabs {border-bottom: none;}
</style>
<style>
.panel-edit
{
max-height: 0;
overflow-y: hidden;
top: -50px;
border: 0px;
-webkit-transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-moz-transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-o-transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94);
transition: max-height 0.8s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.open
{
max-height: 300px ;
}
#panel-content
{
padding: 10px;
margin-top: 5px;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
height: 200px;
background-color: #fcfcfc;
}
</style>
<style>
.switch
{
position: relative;
display: inline-block;
vertical-align: top;
width: 102px;
height: 31px;
background-color: transparent;
cursor: pointer;
box-sizing: content-box;
overflow: hidden;
}
.switch-input:checked ~ .switch-handle
{
left: 70px;
}
.switch-label
{
border-color: blue;
border-width:2px;
border-radius: 2px;
position: relative;
display: block;
height: 30px;
font-size: 15px;
text-transform: uppercase;
background: none repeat scroll 0% 0% white;
transition: all 0.15s ease-out 0s;
}
.switch-handle
{
position: absolute;
top: 2px;
left: 2px;
width: 30px;
height: 26px;
border-width:1px;
border-color: r;
border-radius: 1px;
background: none repeat scroll 0% 0% white;
transition: left 0.15s ease-out 0s;
background-color: red;
}
.switch-input
{
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
}
.switch-label:before,
.switch-label:after
{
position: absolute;
top: 50%;
margin-top: -0.5em;
line-height: 1;
transition: inherit;
}
.switch-label:before
{
content: attr(data-off);
right: 11px;
color: rgb(209, 212, 215);
}
.switch-label:after
{
content: attr(data-on);
left: 11px;
border-color: red;
opacity: 0;
}
.switch-input:checked ~ .switch-label { background: none repeat scroll 0% 0% red; }
.switch-input:checked ~ .switch-label:before { opacity: 0; }
.switch-input:checked ~ .switch-label:after { opacity: 1; }
.switch-default > .switch-input:checked ~ .switch-label { background: none repeat scroll 0% 0% rgb(209, 212, 215); }
</style>
<style>
.form-control
{
background-color: #fff;
background-image: none;
border-radius: 4px;
box-shadow: none;
outline: none;
border-width: 2px;
color: #555;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
}
.form-control:focus
{
border-color: #66afe9;
box-shadow: none;
outline: none;
border-width: 2px;
}
</style>
<div class="container" style="padding-top: 25px;">
<div class="panel panel-default">
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#cant-do-all-the-work-for-you" data-toggle="tooltip" data-placement="top" title="Add Contact"><i class="glyphicon glyphicon-plus"></i></a></li>
<li><a href="#" class="hide-search" data-command="toggle-search" data-toggle="tooltip" data-placement="top" title="Toggle Search"><i class="glyphicon glyphicon-cog"></i></a></li>
</ul>
</div>
</div>
<div class="panel-edit" id="panel-edit">
<div id="panel-content">
<form class="form-horizontal" >
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="col-sm-5 control-label">Test Mode</label>
<div class="col-sm-7">
<label class="switch switch-default pull right">
<input class="switch-input" checked="checked" type="checkbox">
<span class="switch-label" data-on="ON" data-off="OFF"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
<div class="form-group">
<label for="name1" class="col-sm-5 control-label">Email Address</label>
<div class="col-sm-7">
<input type="text" name="name1" class="form-control" placeholder="control1" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
Select events and click below<BR>
<BR>
<INPUT TYPE="submit" CLASS="btn btn-outline btn-default" id="toggle" VALUE="Submit">
</form>
</div>
</div>
<div class="row" style="display: none;">
<div class="col-xs-12">
<div class="input-group c-search">
<input type="text" class="form-control" id="contact-list-search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button>
</span>
</div>
</div>
</div>
<div class="panel-body">
<h3>Letters</h3>
<FORM ACTION="" METHOD="post">
<INPUT TYPE="hidden" NAME="FormName" VALUE="PrintLetters">
<TABLE class="table table-striped">
<THEAD>
<TR><TH>Print</TH><TH style="text-align:left">Subscription</TH><TH style="text-align:left">Venue</TH><TH>Date/Time</TH><TH>Quantity</TH></TR>
</THEAD>
<TBODY>
<TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Winter)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Spring)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Summer)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR>
<TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>Season Subscription (Fall)</TD><TD>Downtown Theater</TD><TD>1/1/2015 12:00 PM</TD><TD>8</TD></TR>
</TBODY>
</TABLE>
Select events and click below<BR><BR>
<INPUT TYPE="submit" CLASS="btn btn-outline btn-default" VALUE="Submit">
</FORM>
</div>
</div>
</div>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
body {
padding: 30px 0px 60px;
}
.panel > .list-group .list-group-item:first-child {
/*border-top: 1px solid rgb(204, 204, 204);*/
}
@media (max-width: 767px) {
.visible-xs {
display: inline-block !important;
}
.block {
display: block !important;
width: 100%;
height: 1px !important;
}
}
#back-to-bootsnipp {
position: fixed;
top: 10px; right: 10px;
}
.c-search > .form-control {
border-radius: 0px;
border-width: 0px;
border-bottom-width: 1px;
font-size: 1.3em;
padding: 12px 12px;
height: 44px;
outline: none !important;
}
.c-search > .form-control:focus {
outline:0px !important;
-webkit-appearance:none;
box-shadow: none;
}
.c-search > .input-group-btn .btn {
border-radius: 0px;
border-width: 0px;
border-left-width: 1px;
border-bottom-width: 1px;
height: 44px;
}
.c-list {
padding: 0px;
min-height: 44px;
}
.title {
display: inline-block;
font-size: 1.7em;
font-weight: bold;
padding: 5px 15px;
}
ul.c-controls {
list-style: none;
margin: 0px;
min-height: 44px;
}
ul.c-controls li {
margin-top: 8px;
float: left;
}
ul.c-controls li a {
font-size: 1.7em;
padding: 11px 10px 6px;
}
ul.c-controls li a i {
min-width: 24px;
text-align: center;
}
ul.c-controls li a:hover {
background-color: rgba(51, 51, 51, 0.2);
}
.c-toggle {
font-size: 1.7em;
}
.name {
font-size: 1.7em;
font-weight: 700;
}
.c-info {
padding: 5px 10px;
font-size: 1.25em;
}
$(function () {
/* BOOTSNIPP FULLSCREEN FIX */
if (window.location == window.parent.location) {
$('#back-to-bootsnipp').removeClass('hide');
}
$('[data-toggle="tooltip"]').tooltip();
$('#fullscreen').on('click', function(event) {
event.preventDefault();
window.parent.location = "http://bootsnipp.com/iframe/4l0k2";
});
$('a[href="#cant-do-all-the-work-for-you"]').on('click', function(event) {
event.preventDefault();
$('#cant-do-all-the-work-for-you').modal('show');
})
$('[data-command="toggle-search"]').on('click', function(event) {
event.preventDefault();
$(this).toggleClass('hide-search');
if ($(this).hasClass('hide-search')) {
$('.c-search').closest('.row').slideUp(100);
}else{
$('.c-search').closest('.row').slideDown(100);
}
})
$('#contact-list').searchable({
searchField: '#contact-list-search',
selector: 'li',
childSelector: '.col-xs-12',
show: function( elem ) {
elem.slideDown(100);
},
hide: function( elem ) {
elem.slideUp( 100 );
}
})
});
