-
Notifications
You must be signed in to change notification settings - Fork 8k
/
_dashboard_grid.scss
118 lines (103 loc) · 3.04 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
// SASSTODO: Can't find this selector, but could break something if removed
.react-grid-layout .gs-w {
z-index: auto;
}
/**
* 1. Due to https://github.com/STRML/react-grid-layout/issues/240 we have to manually hide the resizable
* element.
*/
.dshLayout--viewing {
.react-resizable-handle {
display: none; /* 1 */
}
}
/**
* 1. If we don't give the resizable handler a larger z index value the layout will hide it.
*/
.dshLayout--editing {
.react-resizable-handle {
@include size($euiSizeL);
z-index: $euiZLevel1; /* 1 */
right: 0;
bottom: 0;
padding-right: $euiSizeS;
padding-bottom: $euiSizeS;
}
}
/**
* 1. Need to override the react grid layout height when a single panel is expanded. Important is required because
* otherwise the height is set inline.
*/
.dshLayout-isMaximizedPanel {
height: 100% !important; /* 1. */
}
/**
* When a single panel is expanded, all the other panels moved offscreen.
* Shifting the rendered panels offscreen prevents a quick flash when redrawing the panels on minimize
*/
.dshDashboardGrid__item--hidden {
position: absolute;
top: -9999px;
left: -9999px;
}
/**
* turn off panel transforms initially so that the dashboard panels don't swoop in on first load.
*/
.dshLayout--noAnimation .react-grid-item.cssTransforms {
transition-property: none !important;
}
/**
* 1. We need to mark this as important because react grid layout sets the width and height of the panels inline.
*/
.dshDashboardGrid__item--expanded {
position: absolute;
height: 100% !important; /* 1 */
width: 100% !important; /* 1 */
top: 0 !important; /* 1 */
left: 0 !important; /* 1 */
transform: none !important;
padding: $euiSizeS;
// Altered panel styles can be found in ../panel
}
// Remove padding in fullscreen mode
.kbnAppWrapper--hiddenChrome {
.dshDashboardGrid__item--expanded {
padding: 0;
}
}
// REACT-GRID
.react-grid-item {
/**
* Copy over and overwrite the fill color with EUI color mixin (for theming)
*/
> .react-resizable-handle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpolygon fill='#{hexToRGB($euiColorDarkShade)}' points='6 6 0 6 0 4.2 4 4.2 4.2 4.2 4.2 0 6 0' /%3E%3C/svg%3E%0A");
&::after {
border: none !important; /** overrides library default visual indicator **/
}
&:hover,
&:focus {
background-color: $embEditingModeHoverColor;
}
}
/**
* Dragged/Resized panels in dashboard should always appear above other panels
* and above the placeholder
*/
&.resizing,
&.react-draggable-dragging {
z-index: $euiZLevel2 !important;
}
&.react-draggable-dragging {
transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
@include euiBottomShadowLarge;
border-radius: $euiBorderRadius; // keeps shadow within bounds
}
/**
* Overwrites red coloring that comes from this library by default.
*/
&.react-grid-placeholder {
border-radius: $euiBorderRadius;
background: $euiColorWarning;
}
}