-
Notifications
You must be signed in to change notification settings - Fork 11.6k
/
_dashboard_grid.scss
118 lines (101 loc) · 2.64 KB
/
_dashboard_grid.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
@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;
}
}
}