grafana/public/sass/pages/_explore.scss
Laura Benz d429ec18a0
grafana/ui: convert sass to emotion (#52541)
* refactor: convert .elapsed-time

* refactor: elapsedTime styling not required

* refactor: logs-rows styling not defined, remove classname

* refactor: logs-meta-item__labels styling not defined, remove classname

* refactor: transfer .label-slider styling to its own element

* refactor: clean up .slider styling

* refactor: muted styling not defined, remove classname

* refactor: transfer .space-between styling to its own element + clean up

* refactor: remove icon
2022-07-26 08:31:40 +02:00

158 lines
2.9 KiB
SCSS

.explore-active-button {
box-shadow: $btn-active-box-shadow;
border: 1px solid $orange-dark !important;
color: $orange-dark !important;
}
// TODO: this is used in Loki & Prometheus, move it
.explore-input-margin {
margin-right: 4px;
}
.graph-legend {
flex-wrap: wrap;
}
// TODO: move to Loki and Prometheus
.query-row-break {
flex-basis: 100%;
}
// TODO: Prometheus-specifics, to be extracted to datasource soon
.explore {
.prom-query-field-info {
margin: 0.25em 0.5em 0.5em;
display: flex;
details {
margin-left: 1em;
}
}
}
// ReactTable basic overrides (does not include pivot/groups/filters)
// When integrating ReactTable as new panel plugin, move to _panel_table.scss
.ReactTable {
border: none;
}
.ReactTable .rt-table {
// Allow some space for the no-data text
min-height: 90px;
}
.ReactTable .rt-thead.-header {
box-shadow: none;
background: $list-item-bg;
border-top: 2px solid $body-bg;
border-bottom: 2px solid $body-bg;
height: 2em;
}
.ReactTable .rt-thead.-header .rt-th {
text-align: left;
color: $blue;
font-weight: $font-weight-semi-bold;
}
.ReactTable .rt-thead .rt-td,
.ReactTable .rt-thead .rt-th {
padding: 0.45em 0 0.45em 1.1em;
border-right: none;
box-shadow: none;
}
.ReactTable .rt-tbody .rt-td {
padding: 0.45em 0 0.45em 1.1em;
border-bottom: 2px solid $body-bg;
border-right: 2px solid $body-bg;
}
.ReactTable .rt-tbody .rt-td:last-child {
border-right: none;
}
.ReactTable .-pagination {
border-top: none;
box-shadow: none;
margin-top: $space-sm;
}
.ReactTable .-pagination .-btn {
color: $blue;
background: $list-item-bg;
}
.ReactTable .-pagination input,
.ReactTable .-pagination select {
color: $input-color;
background-color: $input-bg;
}
.ReactTable .-loading {
background: $input-bg;
}
.ReactTable .-loading.-active {
opacity: 0.8;
}
.ReactTable .-loading > div {
color: $input-color;
}
.ReactTable .rt-tr .rt-td:last-child {
text-align: right;
}
.ReactTable .rt-noData {
top: 60px;
z-index: inherit;
}
// React-component cascade fix: show "loading" when loading children
.rc-cascader-menu-item-loading:after {
position: absolute;
right: 12px;
content: 'loading';
color: #767980;
font-style: italic;
}
// React-component cascade fix: vertical alignment issue with Safari
.rc-cascader-menu {
vertical-align: top;
// To fix cascader button width issue in windows + firefox
scrollbar-width: thin;
}
// TODO Experimental
.cheat-sheet-item {
margin: $space-lg 0;
}
.cheat-sheet-item__title {
font-size: $font-size-h3;
}
.cheat-sheet-item__example {
margin: $space-xs 0;
cursor: pointer;
}
.query-type-toggle {
margin-left: 5px;
.btn.active {
background-color: $input-bg;
background-image: none;
background-clip: padding-box;
border: $input-border;
border-radius: $input-border-radius;
@include box-shadow($input-box-shadow);
color: $input-color;
}
}