Dashboard widget styles

by niki4810

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<p>&nbsp;</p>
<ul class="dashboard">
    <li class="widget">
        <div class="header"> <b title="Go to report or URL.">Visits by Browser</b>
 <span class="settings">
            <i class="icon-resize-full"></i>
            <i class="icon-remove"></i>
        </span>

        </div>
        <div class="content">
            <div>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="2">1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@TwBootstrap</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </li>
    <li class="widget">
        <div class="header"> <b title="Go to report or URL.">Visits by Browser</b>
 <span...

CSS

.widget {
    margin: 0 10px 0 10px;
    overflow: hidden;
    float:left;
    width : 350px;
    min-height:265px;
}
.widget-maximize {
    z-index: 9999;
	margin: 0.3em;
	padding: 0.4em;
	width : 98%;
	height : 90%;
	left : 0px;
	top: 0px;
	position: fixed;
}
.widget-maximize .content{
    height : inherit;
}
.widget:HOVER .header {
    border: 1px solid #BFBFBF;
    border-bottom: 0;
    line-height: normal;
}
.widget:Hover .content {
    border: 1px solid #BFBFBF;
    border-top:0;
    line-height: normal;
}
/*
.widget:HOVER .settings {
    display : block;
    transition: display 1s;
    -moz-transition: display 1s;
    -webkit-transition: display 1s;
}*/

/*header styles*/
 .header {
    background-color: #FFF;
    border: 1px solid #DBDBDB;
    border-bottom: 0;
    font-size: 15px;
    height: 17px;
    line-height: normal;
    overflow: hidden;
    padding-top: 10px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 2px;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-shadow: #FFF 0 1px;
    white-space: nowrap;
    cursor: move;
    -moz-user-select: none;
    position: relative;
    z-index:510;
}
.header b {
    font-family :'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/*settings styles*/
 .settings {
    position:absolute;
    right:0;
    top:8px;
    background-color: #FFF;
    border: 0;
    height: 29px;
    padding-left: 5px;
    padding-right: 10px;
    /*     display:none; */
}
/*settings icons styles*/
 .settings i {
    color: #000;
    border: 1px solid #DBDBDB;
}
/*settings hover styles*/
 .settings:HOVER {
    cursor : pointer;
}
/*content div css*/
 .content {
    background-color: #FFF;
    border: 1px solid #DBDBDB;
    border-top: 0;
    clear: right;
    padding: 7px;   
}
/*adds top border to first child of content*/
 .content>:first-child {
    border-top: 1px solid #DBDBDB;
    padding-top: 5px;
}
.chart {
    min-width: inherit;
    height: inherit;
   ...

JavaScript

$(function () {


    $(".dashboard").sortable();


    $(".icon-resize-full").click(function (e) {
$(e.currentTarget).closest(".widget").toggleClass("widget-maximize");
$(e.currentTarget).closest(".widget").removeAttr("style");        
    });


});