397 lines
8.9 KiB
Plaintext
397 lines
8.9 KiB
Plaintext
/*
|
|
component: Boxes
|
|
-------------------------
|
|
*/
|
|
|
|
.box {
|
|
position: relative;
|
|
background: #ffffff;
|
|
border-top: 2px solid darken(@box-border-color, 20%);
|
|
margin-bottom: 20px;
|
|
.border-radius(@box-border-radius);
|
|
width: 100%;
|
|
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
// Box color variations
|
|
&.box-primary {
|
|
border-top-color: @light-blue;
|
|
}
|
|
&.box-info {
|
|
border-top-color: @aqua;
|
|
}
|
|
&.box-danger {
|
|
border-top-color: @red;
|
|
}
|
|
&.box-warning {
|
|
border-top-color: @yellow;
|
|
}
|
|
&.box-success {
|
|
border-top-color: @green;
|
|
}
|
|
|
|
// fixed height to 300px
|
|
&.height-control {
|
|
.box-body {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
// Box header
|
|
.box-header {
|
|
position: relative;
|
|
.clearfix();
|
|
//Add top left and top right border radius
|
|
.border-radius(@box-border-radius; @box-border-radius; 0; 0);
|
|
border-bottom: 0px solid @box-border-color;
|
|
color: #444;
|
|
padding-bottom: 10px;
|
|
// Icons and box title
|
|
> .fa, > .glyphicon, > .ion,
|
|
.box-title {
|
|
display: inline-block;
|
|
padding: 10px 0px 10px 10px;
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
float: left;
|
|
cursor: default;
|
|
//text-transform: capitalize;
|
|
}
|
|
a {
|
|
color: #444;
|
|
}
|
|
// Box Tools
|
|
> .box-tools {
|
|
padding: 5px 10px 5px 5px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// Box body
|
|
.box-body {
|
|
padding: 10px;
|
|
.border-radius(0; 0; @box-border-radius; @box-border-radius);
|
|
// Tables within the box body
|
|
> table, > .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.chart-responsive {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Charts
|
|
> .chart {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
svg, canvas { width: 100%!important;}
|
|
}
|
|
|
|
// Calendar within the box body
|
|
.fc {
|
|
margin-top: 5px;
|
|
}
|
|
// Calendar title
|
|
.fc-header-title h2 {
|
|
font-size: 15px;
|
|
line-height: 1.6em;
|
|
color: #666;
|
|
margin-left: 10px;
|
|
}
|
|
.fc-header-right {
|
|
padding-right: 10px;
|
|
}
|
|
.fc-header-left {
|
|
padding-left: 10px;
|
|
}
|
|
// Calendar table header cells
|
|
.fc-widget-header {
|
|
background: #fafafa;
|
|
box-shadow: inset 0px -3px 1px rgba(0,0,0,0.02);
|
|
}
|
|
.fc-grid {
|
|
width: 100%;
|
|
border: 0;
|
|
}
|
|
.fc-widget-header:first-of-type,
|
|
.fc-widget-content:first-of-type {
|
|
border-left: 0;
|
|
border-right: 0;
|
|
}
|
|
.fc-widget-header:last-of-type,
|
|
.fc-widget-content:last-of-type {
|
|
border-right: 0;
|
|
}
|
|
// tables in the box body
|
|
.table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.full-width-chart {
|
|
margin: -19px;
|
|
}
|
|
&.no-padding .full-width-chart {
|
|
margin: -9px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// Box footer
|
|
.box-footer {
|
|
border-top: 1px solid @box-border-color;
|
|
.border-radius(0; 0; @box-border-radius; @box-border-radius);
|
|
padding: 10px;
|
|
background-color: @box-footer-bg;
|
|
}
|
|
|
|
//
|
|
// SOLID BOX:
|
|
//------------------
|
|
//use this class to get a colored header and borders
|
|
//
|
|
|
|
&.box-solid {
|
|
|
|
border-top: 0px;
|
|
> .box-header {
|
|
padding-bottom: 0px!important;
|
|
.btn.btn-default {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// Box color variations
|
|
&.box-primary {
|
|
.box-solid-variant(@light-blue);
|
|
}
|
|
&.box-info {
|
|
.box-solid-variant(@aqua);
|
|
}
|
|
&.box-danger {
|
|
.box-solid-variant(@red);
|
|
}
|
|
&.box-warning {
|
|
.box-solid-variant(@yellow);
|
|
}
|
|
&.box-success {
|
|
.box-solid-variant(@green);
|
|
}
|
|
|
|
> .box-header > .box-tools > .btn {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// collapsed mode
|
|
&.collapsed-box {
|
|
.box-header {
|
|
.border-radius(@box-border-radius);
|
|
}
|
|
}
|
|
|
|
// Fix font color for tiles
|
|
&[class*='bg'] {
|
|
> .box-header {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
//BOX GROUP
|
|
.box-group {
|
|
> .box {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
// jQuery Knob in a box
|
|
.knob-label {
|
|
text-align: center;
|
|
color: #333;
|
|
font-weight: 100;
|
|
font-size: 12px;
|
|
margin-bottom: 0.3em;
|
|
}
|
|
|
|
//
|
|
// Widgets
|
|
//-----------
|
|
//
|
|
|
|
// Widget: TODO LIST
|
|
|
|
.todo-list {
|
|
margin: 0;
|
|
padding: 0px 0px;
|
|
list-style: none;
|
|
// Todo list element
|
|
> li {
|
|
.border-radius(2px);
|
|
padding: 10px;
|
|
background: @table-striped-color;
|
|
margin-bottom: 2px;
|
|
border-left: 2px solid #e6e7e8;
|
|
color: #444;
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
// Color varaity
|
|
&.danger {
|
|
border-left-color: @red;
|
|
}
|
|
&.warning {
|
|
border-left-color: @yellow;
|
|
}
|
|
&.info {
|
|
border-left-color: @aqua;
|
|
}
|
|
&.success {
|
|
border-left-color: @green;
|
|
}
|
|
&.primary {
|
|
border-left-color: @light-blue;
|
|
}
|
|
|
|
> input[type='checkbox'] {
|
|
margin: 0 10px 0 5px;
|
|
}
|
|
|
|
.text {
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
// Time labels
|
|
.label {
|
|
margin-left: 10px;
|
|
font-size: 9px;
|
|
}
|
|
|
|
// Tools and options box
|
|
.tools {
|
|
display: none;
|
|
float: right;
|
|
color: @red;
|
|
// icons
|
|
> .fa, > .glyphicon, > .ion {
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
&:hover .tools {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.done {
|
|
color: #999;
|
|
.text {
|
|
text-decoration: line-through;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.label {
|
|
background: @gray!important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.handle {
|
|
display: inline-block;
|
|
cursor: move;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
}
|
|
// END TODO WIDGET
|
|
|
|
// Chat widget
|
|
.chat {
|
|
padding: 5px 20px 5px 10px;
|
|
|
|
.item {
|
|
.clearfix();
|
|
margin-bottom: 10px;
|
|
// The image
|
|
> img {
|
|
//display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 2px solid transparent;
|
|
.border-radius(50%)!important;
|
|
&.online {
|
|
border: 2px solid @green;
|
|
}
|
|
&.offline {
|
|
border: 2px solid @red;
|
|
}
|
|
}
|
|
|
|
// The message body
|
|
> .message {
|
|
margin-left: 55px;
|
|
margin-top: -40px;
|
|
> .name {
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
// The attachment
|
|
> .attachment {
|
|
.border-radius(@attachment-border-radius);
|
|
background: #f0f0f0;
|
|
margin-left: 65px;
|
|
margin-right: 15px;
|
|
padding: 10px;
|
|
> h4 {
|
|
margin: 0 0 5px 0;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
> p, > .filename {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
font-style: italic;
|
|
margin: 0;
|
|
|
|
}
|
|
.clearfix();
|
|
}
|
|
}
|
|
|
|
}
|
|
// END CHAT WIDGET
|
|
|
|
// Box overlay for LOADING STATE effect
|
|
> .overlay, > .loading-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
> .overlay {
|
|
z-index: 1010;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
> .overlay.dark {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
> .loading-img {
|
|
z-index: 1020;
|
|
background: transparent url('../img/ajax-loader1.gif') 50% 50% no-repeat;
|
|
}
|
|
|
|
} |