-
Notifications
You must be signed in to change notification settings - Fork 8k
/
data_table.scss
179 lines (151 loc) · 4.6 KB
/
data_table.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
.unifiedDataTable {
width: 100%;
max-width: 100%;
height: 100%;
overflow: hidden;
}
.unifiedDataTable__cellValue {
font-family: $euiCodeFontFamily;
}
.unifiedDataTable__cell--expanded {
background-color: $euiColorHighlight;
}
.unifiedDataTable__cell--selected {
background-color: $euiColorHighlight;
}
.unifiedDataTable__cellPopover {
// Fixes https://github.com/elastic/kibana/issues/145216 in Chrome
.lines-content.monaco-editor-background {
overflow: unset !important;
contain: unset !important;
}
}
.unifiedDataTable__cellPopoverValue {
font-family: $euiCodeFontFamily;
font-size: $euiFontSizeS;
}
.unifiedDataTable__inner {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
.euiDataGrid__content {
background: transparent;
}
.euiDataGridHeaderCell {
align-items: start;
&:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button {
height: 100%;
align-items: flex-start;
}
}
.euiDataGrid--headerUnderline .euiDataGridHeaderCell {
border-bottom: $euiBorderThin;
}
.euiDataGridRowCell--controlColumn .euiDataGridRowCell__content,
.euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='openDetails'],
.euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='select'] {
padding-left: 0;
padding-right: 0;
}
.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover {
background-color: tintOrShade($euiColorLightShade, 50%, 0);
}
.euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayRight {
background-color: transparent; // otherwise the grid scrollbar border visually conflicts with the grid toolbar controls
}
.euiDataGridRowCell__content--autoHeight,
.euiDataGridRowCell__content--lineCountHeight {
white-space: pre-wrap;
}
}
.unifiedDataTable__table {
flex-grow: 1;
flex-shrink: 1;
min-height: 0;
}
// We only truncate if the cell is not a control column.
.euiDataGridHeader {
.euiDataGridHeaderCell__content {
white-space: pre-wrap;
}
.euiDataGridHeaderCell__popover {
flex-grow: 0;
flex-basis: auto;
width: auto;
padding-left: $euiSizeXS;
}
}
.euiDataGridRowCell--numeric {
text-align: right;
}
.euiDataGrid__loading,
.euiDataGrid__noResults {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 0 100%;
text-align: center;
height: 100%;
width: 100%;
}
.unifiedDataTableFormatSource {
@include euiTextTruncate;
}
.unifiedDataTable__rowControl {
// fine-tuning the vertical alignment with the text for any row height setting
margin-top: -$euiSizeXS;
.euiDataGridRowCell__content--defaultHeight & { // "Single line" row height setting
margin-top: 0;
}
}
.unifiedDataTable__descriptionList {
// force the content truncation when "Single line" row height setting is active
.euiDataGridRowCell__content--defaultHeight & {
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
height: 100%;
overflow: hidden;
}
}
.unifiedDataTable__descriptionListTitle {
margin-inline: 0 0;
padding-inline: 0;
background: transparent;
font-weight: $euiFontWeightBold;
}
.unifiedDataTable__descriptionListDescription {
margin-inline: $euiSizeS $euiSizeS;
padding-inline: 0;
word-break: break-all;
white-space: normal;
// Special handling for images coming from the image field formatter
img {
// Align the images vertically centered with the text
vertical-align: middle;
// Set the maximum height to the line-height. The used function is the same
// function used to calculate the line-height for the EuiDescriptionList Description.
// !important is required to overwrite the max-height on the element from the field formatter
max-height: lineHeightFromBaseline(2) !important;
// An arbitrary amount of width we don't want to go over, to not have very wide images.
// For most width-height-ratios that will never be hit, because we'd usually limit
// it by the way smaller height. But images with very large width and very small height
// might be limited by that.
max-width: ($euiSizeXXL * 12.5) !important;
}
}
@include euiBreakpoint('xs', 's', 'm') {
// EUI issue to hide 'of' text https://github.com/elastic/eui/issues/4654
.unifiedDataTable__flyoutDocumentNavigation .euiPagination__compressedText {
display: none;
}
}
// Ensure full screen data grids are not covered by elements with a z-index
.unifiedDataTable__fullScreen *:not(
.euiDataGrid--fullScreen,
.euiDataGrid--fullScreen *,
[data-euiportal='true'],
[data-euiportal='true'] *) {
z-index: unset !important;
}