You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
485 lines
7.8 KiB
485 lines
7.8 KiB
/*
|
|
* Component: Box
|
|
* --------------
|
|
*/
|
|
.box {
|
|
position: relative;
|
|
.border-radius(@box-border-radius);
|
|
background: #ffffff;
|
|
border-top: 3px solid @box-default-border-top-color;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
box-shadow: @box-boxshadow;
|
|
|
|
// 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;
|
|
}
|
|
&.box-default {
|
|
border-top-color: @gray;
|
|
}
|
|
|
|
// collapsed mode
|
|
&.collapsed-box {
|
|
.box-body,
|
|
.box-footer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.nav-stacked {
|
|
> li {
|
|
border-bottom: 1px solid @box-border-color;
|
|
margin: 0;
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// fixed height to 300px
|
|
&.height-control {
|
|
.box-body {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.border-right {
|
|
border-right: 1px solid @box-border-color;
|
|
}
|
|
.border-left {
|
|
border-left: 1px solid @box-border-color;
|
|
}
|
|
|
|
//SOLID BOX
|
|
//---------
|
|
//use this class to get a colored header and borders
|
|
|
|
&.box-solid {
|
|
border-top: 0;
|
|
> .box-header {
|
|
.btn.btn-default {
|
|
background: transparent;
|
|
}
|
|
.btn,
|
|
a {
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Box color variations
|
|
&.box-default {
|
|
.box-solid-variant(@gray, #444);
|
|
}
|
|
&.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;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
.box,
|
|
.overlay-wrapper {
|
|
// Box overlay for LOADING STATE effect
|
|
> .overlay,
|
|
> .loading-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlay {
|
|
z-index: 50;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
.border-radius(@box-border-radius);
|
|
> .fa {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -15px;
|
|
margin-top: -15px;
|
|
color: #000;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.overlay.dark {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
//Add clearfix to header, body and footer
|
|
.box-header,
|
|
.box-body,
|
|
.box-footer {
|
|
.clearfix();
|
|
}
|
|
|
|
//Box header
|
|
.box-header {
|
|
color: #444;
|
|
display: block;
|
|
padding: @box-padding;
|
|
position: relative;
|
|
|
|
//Add bottom border
|
|
&.with-border {
|
|
border-bottom: 1px solid @box-border-color;
|
|
.collapsed-box & {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
//Icons and box title
|
|
> .fa,
|
|
> .glyphicon,
|
|
> .ion,
|
|
.box-title {
|
|
display: inline-block;
|
|
font-size: 18px;
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
> .fa,
|
|
> .glyphicon,
|
|
> .ion {
|
|
margin-right: 5px;
|
|
}
|
|
> .box-tools {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 5px;
|
|
[data-toggle="tooltip"] {
|
|
position: relative;
|
|
}
|
|
|
|
&.pull-right {
|
|
.dropdown-menu {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Box Tools Buttons
|
|
.btn-box-tool {
|
|
padding: 5px;
|
|
font-size: 12px;
|
|
background: transparent;
|
|
color: darken(@box-default-border-top-color, 20%);
|
|
.open &,
|
|
&:hover {
|
|
color: darken(@box-default-border-top-color, 40%);
|
|
}
|
|
&.btn:active {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
//Box Body
|
|
.box-body {
|
|
.border-radius(0; 0; @box-border-radius; @box-border-radius);
|
|
padding: @box-padding;
|
|
.no-header & {
|
|
.border-top-radius(@box-border-radius);
|
|
}
|
|
// Tables within the box body
|
|
> .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Calendar within the box body
|
|
.fc {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.full-width-chart {
|
|
margin: -19px;
|
|
}
|
|
&.no-padding .full-width-chart {
|
|
margin: -9px;
|
|
}
|
|
|
|
.box-pane {
|
|
.border-radius(0; 0; @box-border-radius; 0);
|
|
}
|
|
.box-pane-right {
|
|
.border-radius(0; 0; 0; @box-border-radius);
|
|
}
|
|
}
|
|
|
|
//Box footer
|
|
.box-footer {
|
|
.border-radius(0; 0; @box-border-radius; @box-border-radius);
|
|
border-top: 1px solid @box-border-color;
|
|
padding: @box-padding;
|
|
background-color: @box-footer-bg;
|
|
}
|
|
|
|
.chart-legend {
|
|
&:extend(.list-unstyled);
|
|
margin: 10px 0;
|
|
> li {
|
|
@media (max-width: @screen-sm-max) {
|
|
float: left;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Comment Box
|
|
.box-comments {
|
|
background: #f7f7f7;
|
|
.box-comment {
|
|
.clearfix();
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
&:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
&:first-of-type {
|
|
padding-top: 0;
|
|
}
|
|
img {
|
|
&:extend(.img-sm);
|
|
float: left;
|
|
}
|
|
}
|
|
.comment-text {
|
|
margin-left: 40px;
|
|
color: #555;
|
|
}
|
|
.username {
|
|
color: #444;
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
.text-muted {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
//Widgets
|
|
//-----------
|
|
|
|
/* Widget: TODO LIST */
|
|
|
|
.todo-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
overflow: auto;
|
|
// Todo list element
|
|
> li {
|
|
.border-radius(2px);
|
|
padding: 10px;
|
|
background: #f4f4f4;
|
|
margin-bottom: 2px;
|
|
border-left: 2px solid #e6e7e8;
|
|
color: #444;
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
> 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.handle {
|
|
display: inline-block;
|
|
cursor: move;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
}
|
|
|
|
// END TODO WIDGET
|
|
|
|
/* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
|
|
.chat {
|
|
padding: 5px 20px 5px 10px;
|
|
|
|
.item {
|
|
.clearfix();
|
|
margin-bottom: 10px;
|
|
// The image
|
|
> img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 2px solid transparent;
|
|
.border-radius(50%);
|
|
}
|
|
|
|
> .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: #f4f4f4;
|
|
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
|
|
|
|
//Input in box
|
|
.box-input {
|
|
max-width: 200px;
|
|
}
|
|
|
|
//A fix for panels body text color when placed within
|
|
// a modal
|
|
.modal {
|
|
.panel-body {
|
|
color: #444;
|
|
}
|
|
}
|
|
|