<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#DocumentCreateModal">Create Document</button>
<div id="DocumentCreateModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="background: transparent; border: 0; box-shadow: none;">
<div class="modal-body" style="padding: 0;">
<div class="row">
<section class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Add Column
</h4>
</div>
<div class="panel-body">
<ul class="create-list">
<li>
<button id="column-options-1" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-font create-list-icon"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="column-options-1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
<div class="info">
<h2 class="title">Text</h2>
</div>
<div class="actions">
<ul>
<li class="add-column">
<a href="javaScript:void(0)">
<span class="fa fa-plus"></span>
</a>
</li>
</ul>
</div>
</li>
<li>
<i class="fa fa-calendar create-list-icon"></i>
<div class="info">
<h2 class="title">Date</h2>
</div>
<div class="actions">
<ul>
<li class="add-column">
<a href="javaScript:void(0)">
<span class="fa fa-plus"></span>
</a>
</li>
</ul>
</div>
</li>
<li>
<i class="fa fa-list create-list-icon"></i>
<div class="info">
<h2 class="title">List</h2>
</div>
<div class="actions">
<ul>
<li class="add-column">
<a href="javaScript:void(0)">
<span class="fa fa-plus"></span>
</a>
</li>
</ul>
</div>
</li>
<li>
<i class="fa fa-check-square create-list-icon"></i>
<div class="info">
<h2 class="title">Option</h2>
</div>
<div class="actions">
<ul>
<li class="add-column">
<a href="javaScript:void(0)">
<span class="fa fa-plus"></span>
</a>
</li>
</ul>
</div>
</li>
<li>
<i class="fa fa-paperclip create-list-icon"></i>
<div class="info">
<h2 class="title">Attachment</h2>
</div>
<div class="actions">
<ul>
<li class="add-column">
<a href="javaScript:void(0)">
<span class="fa fa-plus"></span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</section>
<section class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Customize Columns
</h4>
</div>
<div class="panel-body"></div>
<div class="panel-footer" style="text-align: center">
<button class="btn btn-success btn-sm">Create</button>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic");
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
body {
padding: 60px 0px;
background-color: rgb(220, 220, 220);
}
.create-list {
list-style: none;
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
}
.create-list > li {
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 5px rgb(51, 51, 51);
box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
padding: 0px;
margin: 0px 0px 20px;
position: relative;
}
.create-list > li > button {
padding: 0;
border: 0;
margin: 0;
width: 45px;
height: 45px;
float: left;
border-right: 1px solid rgb(230, 230, 230);
}
.create-list > li > button:hover, .create-list > li > button:focus, .create-list > li > button:active, .create-list > li > button.active, .create-list > li.open > button.dropdown-toggle {
border: 0;
background-color: #FFF;
border-right: 1px solid rgb(230, 230, 230);
border-radius: 0;
}
.create-list > li > button > .create-list-icon {
font-size: 25px;
padding: 11px;
}
.create-list > li > .create-list-icon {
width: 45px;
height: 45px;
float: left;
font-size: 25px;
padding: 11px;
background-color: #ddd;
}
.create-list > li > .info {
padding-top: 5px;
text-align: center;
}
.create-list > li > .info > .title {
font-size: 13pt;
font-weight: 700;
margin: 0px;
margin-top: 9px;
}
.create-list > li > .actions > ul {
display: table;
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
width: 100%;
text-align: center;
}
.create-list > li > .actions > ul {
margin: 0px;
}
.create-list > li > .actions > ul > li {
display: table-cell;
cursor: pointer;
color: rgb(30, 30, 30);
font-size: 11pt;
font-weight: 300;
padding: 3px 0px;
}
.create-list > li > .actions > ul > li {
padding: 0px;
}
.add-column {
width: 40px;
height: 45px;
}
.add-column a {
display: block;
width: 100%;
color: rgb(75, 110, 168) !important;
}
.create-list > li > .actions {
position: absolute;
top: 0px;
right: 0px;
display: block;
width: 40px;
}
.create-list > li > .info {
position: relative;
height: 45px;
text-align: left;
padding-right: 45px;
margin-left: 60px;
}
.create-list > li > .actions > ul > li > a {
display: block;
width: 40px;
padding: 17px 0px 9px;
}
.create-list > li > .actions > ul > li {
display: block;
padding: 0px;
}
.create-list > li > .actions > ul {
border-left: 1px solid rgb(230, 230, 230);
}
$('.create-list li .dropdown-menu').on('click', function (e) {
console.log('canceled');
e.stopPropagation();
});
