mirror of
https://github.com/grafana/grafana.git
synced 2025-01-06 22:23:19 -06:00
119 lines
2.6 KiB
SCSS
119 lines
2.6 KiB
SCSS
@import 'react-grid-layout/css/styles';
|
|
@import 'react-resizable/css/styles';
|
|
|
|
.react-resizable-handle {
|
|
// this needs to use visibility and not display none in order not to cause resize flickering
|
|
visibility: hidden;
|
|
}
|
|
|
|
.react-grid-item,
|
|
#grafana-portal-container {
|
|
touch-action: initial !important;
|
|
|
|
&:hover {
|
|
.react-resizable-handle {
|
|
visibility: visible;
|
|
z-index: $zindex-active-panel;
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-in-fullscreen {
|
|
.react-grid-layout {
|
|
height: auto !important;
|
|
}
|
|
.react-grid-item {
|
|
display: none !important;
|
|
transition-property: none !important;
|
|
|
|
&--fullscreen {
|
|
display: block !important;
|
|
position: unset !important;
|
|
transform: translate(0px, 0px) !important;
|
|
}
|
|
}
|
|
|
|
// Disable grid interaction indicators in fullscreen panels
|
|
.panel-header:hover {
|
|
background-color: inherit;
|
|
}
|
|
|
|
.panel-title-container {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.react-resizable-handle {
|
|
display: none;
|
|
}
|
|
|
|
// the react-grid has a height transition
|
|
.react-grid-layout {
|
|
transition-property: none;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
.react-grid-item {
|
|
display: block !important;
|
|
transition-property: none !important;
|
|
position: unset !important;
|
|
transform: translate(0px, 0px) !important;
|
|
margin-bottom: $space-md;
|
|
}
|
|
.panel-repeater-grid-item {
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
.react-grid-item.react-grid-placeholder {
|
|
box-shadow: $panel-grid-placeholder-shadow;
|
|
background: $panel-grid-placeholder-bg;
|
|
z-index: -1;
|
|
opacity: unset;
|
|
}
|
|
|
|
.theme-dark {
|
|
.react-grid-item > .react-resizable-handle::after {
|
|
border-right: 2px solid $gray-1;
|
|
border-bottom: 2px solid $gray-1;
|
|
}
|
|
}
|
|
|
|
.theme-light {
|
|
.react-grid-item > .react-resizable-handle::after {
|
|
border-right: 2px solid $gray-3;
|
|
border-bottom: 2px solid $gray-3;
|
|
}
|
|
}
|
|
|
|
// Hack to prevent panel overlap during drag/hover (due to descending z-index assignment)
|
|
.react-grid-item:not(.context-menu-open, .resizing) {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
z-index: $zindex-active-panel !important;
|
|
}
|
|
}
|
|
|
|
// Hack for preventing panel menu overlapping.
|
|
.react-grid-item.context-menu-open,
|
|
.react-grid-item.resizing,
|
|
.react-grid-item.resizing.panel,
|
|
.react-grid-item.panel.dropdown-menu-open,
|
|
.react-grid-item.react-draggable-dragging.panel {
|
|
z-index: $zindex-dropdown !important;
|
|
}
|
|
|
|
// Disable animation on initial rendering and enable it when component has been mounted.
|
|
.react-grid-item.cssTransforms {
|
|
transition-property: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.react-grid-layout--enable-move-animations {
|
|
.react-grid-item.cssTransforms {
|
|
transition-property: transform;
|
|
}
|
|
}
|
|
}
|