1.explore-active-button {
2  box-shadow: $btn-active-box-shadow;
3  border: 1px solid $orange-dark !important;
4  color: $orange-dark !important;
5}
6
7// TODO: check if this is used
8.explore {
9  display: flex;
10  flex: 1 1 auto;
11  flex-direction: column;
12}
13
14.explore + .explore {
15  border-left: 1px dotted $table-border;
16}
17
18.explore-container {
19  display: flex;
20  flex: 1 1 auto;
21  flex-direction: column;
22  padding: $dashboard-padding;
23  padding-top: 0;
24}
25
26.explore-wrapper {
27  display: flex;
28  height: 100%;
29
30  > .explore-split {
31    width: 50%;
32  }
33}
34
35// TODO: this is used in Loki & Prometheus, move it
36.explore-input-margin {
37  margin-right: 4px;
38}
39
40// TODO: move to public/app/features/explore/Time.tsx
41.navbar .elapsed-time {
42  position: absolute;
43  left: 0;
44  right: 0;
45  top: 48px;
46  text-align: center;
47  font-size: 11px;
48}
49
50.graph-legend {
51  flex-wrap: wrap;
52}
53
54// TODO: move to Loki and Prometheus
55.query-row-break {
56  flex-basis: 100%;
57}
58
59// TODO: Prometheus-specifics, to be extracted to datasource soon
60.explore {
61  .prom-query-field-info {
62    margin: 0.25em 0.5em 0.5em;
63    display: flex;
64
65    details {
66      margin-left: 1em;
67    }
68  }
69}
70
71// ReactTable basic overrides (does not include pivot/groups/filters)
72// When integrating ReactTable as new panel plugin, move to _panel_table.scss
73
74.ReactTable {
75  border: none;
76}
77
78.ReactTable .rt-table {
79  // Allow some space for the no-data text
80  min-height: 90px;
81}
82
83.ReactTable .rt-thead.-header {
84  box-shadow: none;
85  background: $list-item-bg;
86  border-top: 2px solid $body-bg;
87  border-bottom: 2px solid $body-bg;
88  height: 2em;
89}
90
91.ReactTable .rt-thead.-header .rt-th {
92  text-align: left;
93  color: $blue;
94  font-weight: $font-weight-semi-bold;
95}
96
97.ReactTable .rt-thead .rt-td,
98.ReactTable .rt-thead .rt-th {
99  padding: 0.45em 0 0.45em 1.1em;
100  border-right: none;
101  box-shadow: none;
102}
103
104.ReactTable .rt-tbody .rt-td {
105  padding: 0.45em 0 0.45em 1.1em;
106  border-bottom: 2px solid $body-bg;
107  border-right: 2px solid $body-bg;
108}
109
110.ReactTable .rt-tbody .rt-td:last-child {
111  border-right: none;
112}
113
114.ReactTable .-pagination {
115  border-top: none;
116  box-shadow: none;
117  margin-top: $space-sm;
118}
119
120.ReactTable .-pagination .-btn {
121  color: $blue;
122  background: $list-item-bg;
123}
124
125.ReactTable .-pagination input,
126.ReactTable .-pagination select {
127  color: $input-color;
128  background-color: $input-bg;
129}
130
131.ReactTable .-loading {
132  background: $input-bg;
133}
134
135.ReactTable .-loading.-active {
136  opacity: 0.8;
137}
138
139.ReactTable .-loading > div {
140  color: $input-color;
141}
142
143.ReactTable .rt-tr .rt-td:last-child {
144  text-align: right;
145}
146
147.ReactTable .rt-noData {
148  top: 60px;
149  z-index: inherit;
150}
151
152// React-component cascade fix: show "loading" when loading children
153.rc-cascader-menu-item-loading:after {
154  position: absolute;
155  right: 12px;
156  content: 'loading';
157  color: #767980;
158  font-style: italic;
159}
160
161// React-component cascade fix: vertical alignment issue with Safari
162.rc-cascader-menu {
163  vertical-align: top;
164  // To fix cascader button width issue in windows + firefox
165  scrollbar-width: thin;
166}
167
168// TODO Experimental
169
170.cheat-sheet-item {
171  margin: $space-lg 0;
172}
173
174.cheat-sheet-item__title {
175  font-size: $font-size-h3;
176}
177
178.cheat-sheet-item__example {
179  margin: $space-xs 0;
180  cursor: pointer;
181}
182
183.query-type-toggle {
184  margin-left: 5px;
185
186  .btn.active {
187    background-color: $input-bg;
188    background-image: none;
189    background-clip: padding-box;
190    border: $input-border;
191    border-radius: $input-border-radius;
192    @include box-shadow($input-box-shadow);
193    color: $input-color;
194  }
195}
196