199 lines
5.0 KiB
Plaintext
199 lines
5.0 KiB
Plaintext
@import "../../../../assets/less/core/boot.less";
|
|
|
|
.report-container {
|
|
margin-bottom: 15px;
|
|
> ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-bottom: 15px;
|
|
|
|
.item {
|
|
float: left;
|
|
overflow: hidden;
|
|
display: block;
|
|
|
|
.content {
|
|
margin: 5px;
|
|
position: relative;
|
|
|
|
.drag-handle {
|
|
width: 14px;
|
|
height: 14px;
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 13px;
|
|
.opacity(0);
|
|
.transition(opacity 0.2s);
|
|
font-size: 14px;
|
|
cursor: move;
|
|
|
|
&:before {
|
|
.icon(@bars);
|
|
color: @color-report-widget-control-inactive;
|
|
}
|
|
}
|
|
|
|
.widget-control {
|
|
position: absolute;
|
|
display: none;
|
|
width: 15px;
|
|
height: 15px;
|
|
color: @color-report-widget-control-inactive;
|
|
.opacity(1);
|
|
outline: none;
|
|
|
|
&:hover {
|
|
color: @link-color;
|
|
}
|
|
}
|
|
|
|
.report-widget h3 {
|
|
padding-left: 0;
|
|
.transition(padding 0.2s);
|
|
}
|
|
|
|
.edit-widget {
|
|
text-indent: -10000em;
|
|
right: 15px;
|
|
top: 15px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
display: block;
|
|
text-indent: 0;
|
|
left: 0;
|
|
width: 15px;
|
|
height: 15px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&:hover:before {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.inspector-open {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
right: 10px;
|
|
top: 15px;
|
|
}
|
|
}
|
|
|
|
&:hover, &.dragged {
|
|
.widget-control {
|
|
display: block;
|
|
}
|
|
|
|
.report-widget h3 {
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.drag-handle {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
|
|
&.width-1 {width: 8.33%;}
|
|
&.width-2 {width: 16.66%;}
|
|
&.width-3 {width: 24.99%;}
|
|
&.width-4 {width: 33.32%;}
|
|
&.width-5 {width: 41.65%;}
|
|
&.width-6 {width: 49.98%;}
|
|
&.width-7 {width: 58.31%;}
|
|
&.width-8 {width: 66.64%;}
|
|
&.width-9 {width: 74.97%;}
|
|
&.width-10 {width: 83.3%;}
|
|
&.width-11 {width: 91.63%;}
|
|
&.width-12 {width: 100%;}
|
|
|
|
&.dragged {
|
|
.transition-duration(0s) !important;
|
|
.translate3d(0, 0, 0) !important;
|
|
position: absolute;
|
|
opacity: 0.5;
|
|
z-index: 2000;
|
|
}
|
|
|
|
&.placeholder {
|
|
display: none;
|
|
}
|
|
|
|
&.separator {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
&.add-delete .item .content .edit-widget {
|
|
right: 30px;
|
|
}
|
|
|
|
&.wrapped {
|
|
.item {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.manage-widgets {
|
|
display: inline-block;
|
|
color: #bcc3c7;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
border: 1px dashed #bcc3c7;
|
|
.border-radius(@border-radius-base);
|
|
margin-left: 5px;
|
|
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: @link-color;
|
|
color: white;
|
|
border: 1px solid @link-color;
|
|
}
|
|
}
|
|
|
|
.dropdown.open .manage-widgets {
|
|
text-decoration: none;
|
|
background-color: @link-color;
|
|
color: white;
|
|
border: 1px solid @link-color;
|
|
}
|
|
|
|
//
|
|
// Isotope CSS3 transitions
|
|
//
|
|
|
|
&.isotope,
|
|
&.isotope .isotope-item {
|
|
.transition-duration(0.8s);
|
|
}
|
|
|
|
&.isotope {
|
|
.transition-property(height, width);
|
|
}
|
|
|
|
&.isotope .isotope-item {
|
|
-webkit-transition-property: -webkit-transform, opacity;
|
|
-moz-transition-property: -moz-transform, opacity;
|
|
transition-property: transform, opacity;
|
|
}
|
|
}
|
|
|
|
@media (max-width: @screen-sm) {
|
|
.report-container {
|
|
ul .item {
|
|
// The breakpoint should be defined in the CSS and JS,
|
|
// otherwise some widgets can't calculate the width properly,
|
|
// as the JS is applied too late.
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|