<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 text-center">
<div class="row">
<h2>Similar Gmail tasks</h2>
<h4>Click Here</h4>
<div class="round hollow text-center">
<a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open tasks </a>
</div>
</div>
</div>
<div class="popup-box chat-popup" id="qnimate">
<div class="popup-head">
<div class="popup-head-left pull-left"><span>Tareas</span></div>
<div class="popup-head-right pull-right">
<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
</div>
</div>
<form action="/OAuth" method="post">
<fieldset class="tasks-list">
<label class="tasks-list-item">
<input type="checkbox" name="task_id" value="aa" class="tasks-list-cb">
<span class="tasks-list-mark"></span>
<span class="tasks-list-desc">title</span>
</label>
<label class="tasks-list-item">
<input type="checkbox" name="task_id" value="aa" class="tasks-list-cb">
<span class="tasks-list-mark"></span>
<span class="tasks-list-desc">titl2e</span>
</label>
<label class="tasks-list-item">
<input type="checkbox" name="task_id" value="aa" class="tasks-list-cb">
<span class="tasks-list-mark"></span>
<span class="tasks-list-desc">titl3</span>
</label>
</fieldset>
<div class="popup-messages-footer">
<div class="btn-footer">
<button class="bg_none" type="submit" name="bandera" value="0"><i class="glyphicon glyphicon-trash"></i></button> <!-- eliminar -->
<button class="bg_none" type="submit" name="bandera" value="3"><i class="glyphicon glyphicon-pencil"></i></button> <!-- modificar-->
<button class="bg_none pull-right" type="submit" name="bandera" value="1"><i class="glyphicon glyphicon-plus"></i> </button> <!-- agregar-->
</div>
</div>
</form>
</div>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
font-family: 'Open Sans', sans-serif;
}
.popup-box {
background-color: #ffffff;
border: 1px solid #b0b0b0;
bottom: 0;
display: none;
height: 415px;
position: fixed;
right: 70px;
width: 300px;
font-family: 'Open Sans', sans-serif;
}
.round.hollow {
margin: 40px 0 0;
}
.round.hollow a {
border: 2px solid #ff6701;
border-radius: 35px;
color: red;
color: #ff6701;
font-size: 23px;
padding: 10px 21px;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
border: 2px solid #000;
border-radius: 35px;
color: red;
color: #000;
font-size: 23px;
padding: 10px 21px;
text-decoration: none;
}
.popup-box-on {
display: block !important;
}
.popup-box .popup-head {
background-color: #fff;
clear: both;
color: #7b7b7b;
display: inline-table;
font-size: 21px;
padding: 7px 10px;
width: 100%;
font-family: Oswald;
}
.bg_none i {
border: 1px solid #ff6701;
border-radius: 25px;
color: #ff6701;
font-size: 17px;
height: 33px;
line-height: 30px;
width: 33px;
}
.bg_none:hover i {
border: 1px solid #000;
border-radius: 25px;
color: #000;
font-size: 17px;
height: 33px;
line-height: 30px;
width: 33px;
}
.bg_none {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
}
.popup-box .popup-head .popup-head-right {
margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
border: 1px solid #7b7b7b;
border-radius: 50%;
width: 44px;
}
.popup-messages-footer > textarea {
border-bottom: 1px solid #b2b2b2 !important;
height: 34px !important;
margin: 7px;
padding: 5px !important;
border: medium none;
width: 95% !important;
}
.popup-messages-footer {
background: #fff none repeat scroll 0 0;
bottom: 0;
position: absolute;
width: 100%;
}
.popup-messages-footer .btn-footer {
overflow: hidden;
padding: 2px 5px 10px 6px;
width: 100%;
}
.simple_round {
background: #d1d1d1 none repeat scroll 0 0;
border-radius: 50%;
color: #4b4b4b !important;
height: 21px;
padding: 0 0 0 1px;
width: 21px;
}
.popup-box .popup-messages {
background: #3f9684 none repeat scroll 0 0;
height: 275px;
overflow: auto;
}
.direct-chat-messages {
overflow: auto;
padding: 10px;
transform: translate(0px, 0px);
}
.popup-messages .chat-box-single-line {
border-bottom: 1px solid #a4c6b5;
height: 12px;
margin: 7px 0 20px;
position: relative;
text-align: center;
}
.popup-messages abbr.timestamp {
background: #3f9684 none repeat scroll 0 0;
color: #fff;
padding: 0 11px;
}
.popup-head-right .btn-group {
display: inline-flex;
margin: 0 8px 0 0;
vertical-align: top !important;
}
.chat-header-button {
background: transparent none repeat scroll 0 0;
border: 1px solid #636364;
border-radius: 50%;
font-size: 14px;
height: 30px;
width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
border: medium none;
min-width: 122px;
padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
font-size: 12px;
padding: 3px 10px;
color: #303030;
}
.popup-messages abbr.timestamp {
background: #3f9684 none repeat scroll 0 0;
color: #fff;
padding: 0 11px;
}
.popup-messages .chat-box-single-line {
border-bottom: 1px solid #a4c6b5;
height: 12px;
margin: 7px 0 20px;
position: relative;
text-align: center;
}
.popup-messages .direct-chat-messages {
height: auto;
}
.popup-messages .direct-chat-text {
background: #dfece7 none repeat scroll 0 0;
border: 1px solid #dfece7;
border-radius: 2px;
color: #1f2121;
}
.popup-messages .direct-chat-timestamp {
color: #fff;
opacity: 0.6;
}
.popup-messages .direct-chat-name {
font-size: 15px;
font-weight: 600;
margin: 0 0 0 49px !important;
color: #fff;
opacity: 0.9;
}
.popup-messages .direct-chat-info {
display: block;
font-size: 12px;
margin-bottom: 0;
}
.popup-messages .big-round {
margin: -9px 0 0 !important;
}
.popup-messages .direct-chat-img {
border: 1px solid #fff;
background: #3f9684 none repeat scroll 0 0;
border-radius: 50%;
float: left;
height: 40px;
margin: -21px 0 0;
width: 40px;
}
.direct-chat-reply-name {
color: #fff;
font-size: 15px;
margin: 0 0 0 10px;
opacity: 0.9;
}
.direct-chat-img-reply-small
{
border: 1px solid #fff;
border-radius: 50%;
float: left;
height: 20px;
margin: 0 8px;
width: 20px;
background:#3f9684;
}
.popup-messages .direct-chat-msg {
margin-bottom: 10px;
position: relative;
}
.popup-messages .doted-border::after {
background: transparent none repeat scroll 0 0 !important;
border-right: 2px dotted #fff !important;
bottom: 0;
content: "";
left: 17px;
margin: 0;
position: absolute;
top: 0;
width: 2px;
display: inline;
z-index: -2;
}
.popup-messages .direct-chat-msg::after {
background: #fff none repeat scroll 0 0;
border-right: medium none;
bottom: 0;
content: "";
left: 17px;
margin: 0;
position: absolute;
top: 0;
width: 2px;
display: inline;
z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {
border-color: transparent #dfece7 transparent transparent;
}
.direct-chat-text::after, .direct-chat-text::before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent #d2d6de transparent transparent;
border-image: none;
border-style: solid;
border-width: medium;
content: " ";
height: 0;
pointer-events: none;
position: absolute;
right: 100%;
top: 15px;
width: 0;
}
.direct-chat-text::after {
border-width: 5px;
margin-top: -5px;
}
.popup-messages .direct-chat-text {
background: #dfece7 none repeat scroll 0 0;
border: 1px solid #dfece7;
border-radius: 2px;
color: #1f2121;
}
.direct-chat-text {
background: #d2d6de none repeat scroll 0 0;
border: 1px solid #d2d6de;
border-radius: 5px;
color: #444;
margin: 5px 0 0 50px;
padding: 5px 10px;
position: relative;
}
.tasks {
margin: 40px auto;
width: 240px;
background: white;
border: 1px solid #cdd3d7;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tasks-header {
position: relative;
line-height: 24px;
padding: 7px 15px;
color: #5d6b6c;
text-shadow: 0 1px rgba(255, 255, 255, 0.7);
background: #f0f1f2;
border-bottom: 1px solid #d1d1d1;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: -moz-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: -o-linear-gradient(top, #f5f7fd, #e6eaec);
background-image: linear-gradient(to bottom, #f5f7fd, #e6eaec);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
}
.tasks-title {
line-height: inherit;
font-size: 14px;
font-weight: bold;
color: inherit;
}
.tasks-lists {
position: absolute;
top: 50%;
right: 10px;
margin-top: -11px;
padding: 10px 4px;
width: 19px;
height: 3px;
font: 0/0 serif;
text-shadow: none;
color: transparent;
}
.tasks-lists:before {
content: '';
display: block;
height: 3px;
background: #8c959d;
border-radius: 1px;
-webkit-box-shadow: 0 6px #8c959d, 0 -6px #8c959d;
box-shadow: 0 6px #8c959d, 0 -6px #8c959d;
}
.tasks-list-item {
display: block;
line-height: 24px;
padding: 12px 15px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tasks-list-item + .tasks-list-item {
border-top: 1px solid #f0f2f3;
}
.tasks-list-cb {
display: none;
}
.tasks-list-mark {
position: relative;
display: inline-block;
vertical-align: top;
margin-right: 12px;
width: 20px;
height: 20px;
border: 2px solid #c4cbd2;
border-radius: 12px;
}
.tasks-list-mark:before {
content: '';
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -6px;
height: 4px;
width: 8px;
border: solid #39ca74;
border-width: 0 0 4px 4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tasks-list-cb:checked ~ .tasks-list-mark {
border-color: #39ca74;
}
.tasks-list-cb:checked ~ .tasks-list-mark:before {
display: block;
}
.tasks-list-desc {
font-weight: bold;
color: #8a9a9b;
}
.tasks-list-cb:checked ~ .tasks-list-desc {
color: #34bf6e;
text-decoration: line-through;
}
$(function(){
$("#addClass").click(function () {
$('#qnimate').addClass('popup-box-on');
});
$("#removeClass").click(function () {
$('#qnimate').removeClass('popup-box-on');
});
})
