grafana/public/sass/components/_dashboard_grid.scss
2017-12-08 12:17:09 +01:00

65 lines
1.4 KiB
SCSS

@import "~react-grid-layout/css/styles.css";
@import "~react-resizable/css/styles.css";
.panel-in-fullscreen {
.react-grid-layout {
height: 100% !important;
}
.react-grid-item {
display: none !important;
transition-property: none !important;
}
.panel--fullscreen {
display: block !important;
position: unset !important;
width: 100% !important;
height: 100% !important;
transform: translate(0px, 0px) !important;
}
}
@include media-breakpoint-down(sm) {
.react-grid-layout {
height: 100% !important;
}
.react-grid-item {
display: none;
transition-property: none !important;
}
.panel {
display: block !important;
position: unset !important;
width: 100% !important;
transform: translate(0px, 0px) !important;
margin-bottom: 1rem;
}
}
.theme-dark {
.react-grid-item > .react-resizable-handle {
background-image: url('../img/resize-handle-white.svg');
}
}
// Hack for preventing panel menu overlapping.
.react-grid-item.resizing.panel,
.react-grid-item.panel.dropdown-menu-open,
.react-grid-item.react-draggable-dragging.panel {
z-index: $zindex-dropdown;
}
// Disable animation on initial rendering and enable it when component has been mounted.
.react-grid-item.cssTransforms.panel {
transition-property: none;
}
.animated .react-grid-item.cssTransforms.panel {
transition-property: transform;
}