mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Restructure of component and styling
This commit is contained in:
Hugo Häggmark
parent
1aefc4cc2d
commit
ffe03ee22d
public
@ -1,8 +1,8 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { ExploreId } from 'app/types/explore';
|
||||
import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
|
||||
import { DataSourceSelectItem, RawTimeRange, TimeRange } from '@grafana/ui';
|
||||
import TimePicker from './TimePicker';
|
||||
import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
|
||||
|
||||
interface Props {
|
||||
datasourceMissing: boolean;
|
||||
@ -29,70 +29,136 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.timepickerRef = React.createRef();
|
||||
this.createResponsiveButton = this.createResponsiveButton.bind(this);
|
||||
this.createDatasourcePicker = this.createDatasourcePicker.bind(this);
|
||||
this.createSplittedClassName = this.createSplittedClassName.bind(this);
|
||||
}
|
||||
|
||||
createDatasourcePicker() {
|
||||
const { exploreDatasources, selectedDatasource } = this.props;
|
||||
|
||||
return (
|
||||
<DataSourcePicker
|
||||
onChange={this.props.onChangeDatasource}
|
||||
datasources={exploreDatasources}
|
||||
current={selectedDatasource}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
createResponsiveButton(options: {
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
buttonClassName?: string;
|
||||
iconClassName?: string;
|
||||
}) {
|
||||
const { splitted } = this.props;
|
||||
const { title, onClick, buttonClassName, iconClassName } = options;
|
||||
|
||||
return (
|
||||
<>
|
||||
<button className={`btn navbar-button large-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
|
||||
{!splitted ? title : ''}
|
||||
{iconClassName && <i className={iconClassName} />}
|
||||
</button>
|
||||
<button className={`btn navbar-button small-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
|
||||
{iconClassName && <i className={iconClassName} />}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
createSplittedClassName(className: string) {
|
||||
const { splitted } = this.props;
|
||||
|
||||
return splitted ? `${className}-splitted` : className;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
datasourceMissing,
|
||||
exploreDatasources,
|
||||
exploreId,
|
||||
loading,
|
||||
range,
|
||||
selectedDatasource,
|
||||
splitted,
|
||||
} = this.props;
|
||||
const { datasourceMissing, exploreId, loading, range, splitted } = this.props;
|
||||
const toolbar = this.createSplittedClassName('toolbar');
|
||||
const toolbarItem = this.createSplittedClassName('toolbar-item');
|
||||
const toolbarHeader = this.createSplittedClassName('toolbar-header');
|
||||
const timepickerLarge = this.createSplittedClassName('toolbar-content-item timepicker-large-screens');
|
||||
const timepickerSmall = this.createSplittedClassName('toolbar-content-item timepicker-small-screens');
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
{exploreId === 'left' ? (
|
||||
<div>
|
||||
<a className="navbar-page-btn">
|
||||
<i className="fa fa-rocket" />
|
||||
Explore
|
||||
</a>
|
||||
<div className={toolbar}>
|
||||
<div className={toolbarItem}>
|
||||
<div className={toolbarHeader}>
|
||||
<div className="toolbar-header-title">
|
||||
{exploreId === 'left' && (
|
||||
<a className="navbar-page-btn">
|
||||
<i className="fa fa-rocket fa-fw" />
|
||||
Explore
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div className="toolbar-header-datasource large-screens">
|
||||
<div className="datasource-picker">
|
||||
{!datasourceMissing && !splitted ? this.createDatasourcePicker() : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="toolbar-header-close">
|
||||
{exploreId === 'right' && (
|
||||
<a onClick={this.props.onCloseSplit}>
|
||||
<i className="fa fa-times" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="navbar-page-btn" />
|
||||
<div className="navbar-buttons explore-first-button">
|
||||
<button className="btn navbar-button" onClick={this.props.onCloseSplit}>
|
||||
Close Split
|
||||
</div>
|
||||
<div className={toolbarItem}>
|
||||
{!datasourceMissing && splitted ? (
|
||||
<div className="datasource-picker">{this.createDatasourcePicker()}</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={toolbarItem}>
|
||||
<div className="toolbar-content">
|
||||
{!datasourceMissing && !splitted ? (
|
||||
<div className="toolbar-content-item small-screens">
|
||||
<div className="datasource-picker">{this.createDatasourcePicker()}</div>
|
||||
</div>
|
||||
) : null}
|
||||
{exploreId === 'left' && !splitted ? (
|
||||
<div className="toolbar-content-item">
|
||||
{this.createResponsiveButton({
|
||||
title: 'Split',
|
||||
onClick: this.props.onSplit,
|
||||
iconClassName: 'fa fa-fw fa-columns',
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={timepickerLarge}>
|
||||
<TimePicker
|
||||
ref={this.timepickerRef}
|
||||
range={range}
|
||||
onChangeTime={this.props.onChangeTime}
|
||||
iconOnly={false}
|
||||
/>
|
||||
</div>
|
||||
<div className={timepickerSmall}>
|
||||
<TimePicker
|
||||
ref={this.timepickerRef}
|
||||
range={range}
|
||||
onChangeTime={this.props.onChangeTime}
|
||||
iconOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="toolbar-content-item">
|
||||
<button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!datasourceMissing ? (
|
||||
<div className="navbar-buttons">
|
||||
<DataSourcePicker
|
||||
onChange={this.props.onChangeDatasource}
|
||||
datasources={exploreDatasources}
|
||||
current={selectedDatasource}
|
||||
/>
|
||||
<div className="toolbar-content-item">
|
||||
{this.createResponsiveButton({
|
||||
title: 'Run Query',
|
||||
onClick: this.props.onRunQuery,
|
||||
buttonClassName: 'navbar-button--primary',
|
||||
iconClassName: loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-level-down fa-fw run-icon',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="navbar__spacer" />
|
||||
{exploreId === 'left' && !splitted ? (
|
||||
<div className="navbar-buttons">
|
||||
<button className="btn navbar-button" onClick={this.props.onSplit}>
|
||||
Split
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<TimePicker ref={this.timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
|
||||
<div className="navbar-buttons">
|
||||
<button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
<div className="navbar-buttons relative">
|
||||
<button className="btn navbar-button navbar-button--primary" onClick={this.props.onRunQuery}>
|
||||
Run Query{' '}
|
||||
{loading ? (
|
||||
<i className="fa fa-spinner fa-fw fa-spin run-icon" />
|
||||
) : (
|
||||
<i className="fa fa-level-down fa-fw run-icon" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -39,6 +39,7 @@ interface TimePickerProps {
|
||||
isUtc?: boolean;
|
||||
range?: RawTimeRange;
|
||||
onChangeTime?: (range: RawTimeRange, scanning?: boolean) => void;
|
||||
iconOnly?: boolean;
|
||||
}
|
||||
|
||||
interface TimePickerState {
|
||||
@ -292,19 +293,27 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
|
||||
}
|
||||
|
||||
render() {
|
||||
const { iconOnly } = this.props;
|
||||
const { isUtc, rangeString, refreshInterval } = this.state;
|
||||
|
||||
return (
|
||||
<div className="timepicker">
|
||||
<div className="navbar-buttons">
|
||||
<button className="btn navbar-button navbar-button--tight timepicker-left" onClick={this.handleClickLeft}>
|
||||
<i className="fa fa-chevron-left" />
|
||||
</button>
|
||||
<button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
|
||||
<i className="fa fa-clock-o" />
|
||||
<span className="timepicker-rangestring">{rangeString}</span>
|
||||
{isUtc ? <span className="gf-timepicker-utc">UTC</span> : null}
|
||||
{refreshInterval ? <span className="text-warning"> Refresh every {refreshInterval}</span> : null}
|
||||
</button>
|
||||
{iconOnly ? (
|
||||
<button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
|
||||
<i className="fa fa-clock-o" />
|
||||
</button>
|
||||
) : (
|
||||
<button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
|
||||
<i className="fa fa-clock-o" />
|
||||
<span className="timepicker-rangestring">{rangeString}</span>
|
||||
{isUtc ? <span className="gf-timepicker-utc">UTC</span> : null}
|
||||
{refreshInterval ? <span className="text-warning"> Refresh every {refreshInterval}</span> : null}
|
||||
</button>
|
||||
)}
|
||||
<button className="btn navbar-button navbar-button--tight timepicker-right" onClick={this.handleClickRight}>
|
||||
<i className="fa fa-chevron-right" />
|
||||
</button>
|
||||
|
||||
@ -1,182 +1,248 @@
|
||||
.timepicker-small-screens,
|
||||
.timepicker-small-screens-splitted,
|
||||
.small-screens {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.datasource-picker {
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.toolbar-splitted,
|
||||
.toolbar {
|
||||
display: flex;
|
||||
background: inherit;
|
||||
justify-content: space-between;
|
||||
height: auto;
|
||||
padding: 2px $dashboard-padding;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.toolbar-splitted {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.toolbar-item-splitted,
|
||||
.toolbar-item {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.toolbar-item-splitted:first-child {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.toolbar-header-splitted,
|
||||
.toolbar-header {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-flow: row nowrap;
|
||||
font-size: 18px;
|
||||
min-height: 55px;
|
||||
line-height: 55px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.toolbar-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toolbar-header-datasource {
|
||||
padding-left: $dashboard-padding;
|
||||
flex: 2 1 auto;
|
||||
}
|
||||
|
||||
.toolbar-header-close {
|
||||
color: #d6d6d6;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.toolbar-content-splitted,
|
||||
.toolbar-content {
|
||||
display: flex;
|
||||
flex: 2 1 0;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toolbar-content-item {
|
||||
padding: 10px 2px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1545px) {
|
||||
.timepicker-large-screens-splitted {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timepicker-small-screens-splitted {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1070px) {
|
||||
.timepicker-large-screens {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timepicker-small-screens {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.large-screens {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.small-screens {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.toolbar-content {
|
||||
align-self: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.toolbar-content-item {
|
||||
padding: 5px 2px;
|
||||
}
|
||||
|
||||
.datasource-picker > div > .ds-picker {
|
||||
min-width: 160px;
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.explore {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&-container {
|
||||
padding: $dashboard-padding;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
|
||||
> .explore-split {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Push split button a bit
|
||||
.explore-first-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.explore-panel {
|
||||
margin-top: $panel-margin;
|
||||
}
|
||||
|
||||
.explore-panel__body {
|
||||
padding: $panel-padding;
|
||||
}
|
||||
|
||||
.explore-panel__header {
|
||||
padding: $panel-padding;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
|
||||
.explore-panel__header-label {
|
||||
font-weight: 500;
|
||||
margin-right: $panel-margin;
|
||||
font-size: $font-size-h6;
|
||||
box-shadow: $text-shadow-faint;
|
||||
}
|
||||
|
||||
.explore-panel__header-buttons {
|
||||
margin-right: $panel-margin;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $font-size-h6;
|
||||
}
|
||||
|
||||
// Make sure wrap buttons around on small screens
|
||||
.navbar {
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-page-btn {
|
||||
margin-right: 1rem;
|
||||
|
||||
// Explore icon in header
|
||||
.fa {
|
||||
font-size: 100%;
|
||||
opacity: 0.75;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle mode
|
||||
.navbar-button.active {
|
||||
color: $btn-active-text-color;
|
||||
background-color: $btn-active-bg;
|
||||
}
|
||||
|
||||
.navbar-button--no-icon {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.result-options {
|
||||
margin: 2 * $panel-margin 0;
|
||||
}
|
||||
|
||||
.time-series-disclaimer {
|
||||
width: 300px;
|
||||
margin: $panel-margin auto;
|
||||
padding: 10px 0;
|
||||
border-radius: $border-radius;
|
||||
text-align: center;
|
||||
background-color: $panel-bg;
|
||||
|
||||
.disclaimer-icon {
|
||||
color: $yellow;
|
||||
margin-right: $panel-margin/2;
|
||||
}
|
||||
|
||||
.show-all-time-series {
|
||||
cursor: pointer;
|
||||
color: $external-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .elapsed-time {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.explore-panel__loader {
|
||||
height: 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
margin: $panel-margin / 2;
|
||||
transition: background-color 1s ease;
|
||||
}
|
||||
|
||||
.explore-panel__loader--active {
|
||||
background: $text-color-faint;
|
||||
}
|
||||
|
||||
.explore-panel__loader--active:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 25%;
|
||||
top: 0;
|
||||
top: -50%;
|
||||
height: 250%;
|
||||
position: absolute;
|
||||
animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
|
||||
animation-iteration-count: 100;
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
from {
|
||||
left: -25%;
|
||||
}
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.datasource-picker {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.timepicker {
|
||||
display: flex;
|
||||
|
||||
&-rangestring {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.run-icon {
|
||||
margin-left: 0.25em;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.explore + .explore {
|
||||
border-left: 1px dotted $table-border;
|
||||
}
|
||||
|
||||
.explore-container {
|
||||
padding: $dashboard-padding;
|
||||
}
|
||||
|
||||
.explore-wrapper {
|
||||
display: flex;
|
||||
|
||||
> .explore-split {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-panel {
|
||||
margin-top: $panel-margin;
|
||||
}
|
||||
|
||||
.explore-panel__body {
|
||||
padding: $panel-padding;
|
||||
}
|
||||
|
||||
.explore-panel__header {
|
||||
padding: $panel-padding;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
|
||||
.explore-panel__header-label {
|
||||
font-weight: 500;
|
||||
margin-right: $panel-margin;
|
||||
font-size: $font-size-h6;
|
||||
box-shadow: $text-shadow-faint;
|
||||
}
|
||||
|
||||
.explore-panel__header-buttons {
|
||||
margin-right: $panel-margin;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $font-size-h6;
|
||||
}
|
||||
|
||||
.result-options {
|
||||
margin: 2 * $panel-margin 0;
|
||||
}
|
||||
|
||||
.time-series-disclaimer {
|
||||
width: 300px;
|
||||
margin: $panel-margin auto;
|
||||
padding: 10px 0;
|
||||
border-radius: $border-radius;
|
||||
text-align: center;
|
||||
background-color: $panel-bg;
|
||||
|
||||
.disclaimer-icon {
|
||||
color: $yellow;
|
||||
margin-right: $panel-margin/2;
|
||||
}
|
||||
|
||||
.show-all-time-series {
|
||||
cursor: pointer;
|
||||
color: $external-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .elapsed-time {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.explore-panel__loader {
|
||||
height: 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
margin: $panel-margin / 2;
|
||||
transition: background-color 1s ease;
|
||||
}
|
||||
|
||||
.explore-panel__loader--active {
|
||||
background: $text-color-faint;
|
||||
}
|
||||
|
||||
.explore-panel__loader--active:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 25%;
|
||||
top: 0;
|
||||
top: -50%;
|
||||
height: 250%;
|
||||
position: absolute;
|
||||
animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
|
||||
animation-iteration-count: 100;
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
from {
|
||||
left: -25%;
|
||||
}
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.query-row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@ -352,3 +418,178 @@
|
||||
margin: $panel-margin/2 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// .explore {
|
||||
// flex: 1 1 auto;
|
||||
|
||||
// &-container {
|
||||
// padding: $dashboard-padding;
|
||||
// }
|
||||
|
||||
// &-wrapper {
|
||||
// display: flex;
|
||||
|
||||
// > .explore-split {
|
||||
// width: 50%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Push split button a bit
|
||||
// .explore-first-button {
|
||||
// margin-left: 15px;
|
||||
// }
|
||||
|
||||
// .explore-panel {
|
||||
// margin-top: $panel-margin;
|
||||
// }
|
||||
|
||||
// .explore-panel__body {
|
||||
// padding: $panel-padding;
|
||||
// }
|
||||
|
||||
// .explore-panel__header {
|
||||
// padding: $panel-padding;
|
||||
// padding-top: 5px;
|
||||
// padding-bottom: 0;
|
||||
// display: flex;
|
||||
// cursor: pointer;
|
||||
// margin-bottom: 5px;
|
||||
// transition: all 0.1s linear;
|
||||
// }
|
||||
|
||||
// .explore-panel__header-label {
|
||||
// font-weight: 500;
|
||||
// margin-right: $panel-margin;
|
||||
// font-size: $font-size-h6;
|
||||
// box-shadow: $text-shadow-faint;
|
||||
// }
|
||||
|
||||
// .explore-panel__header-buttons {
|
||||
// margin-right: $panel-margin;
|
||||
// font-size: $font-size-lg;
|
||||
// line-height: $font-size-h6;
|
||||
// }
|
||||
|
||||
// // Make sure wrap buttons around on small screens
|
||||
// .navbar {
|
||||
// flex-wrap: wrap;
|
||||
// height: auto;
|
||||
// }
|
||||
|
||||
// .navbar-page-btn {
|
||||
// margin-right: 1rem;
|
||||
|
||||
// // Explore icon in header
|
||||
// .fa {
|
||||
// font-size: 100%;
|
||||
// opacity: 0.75;
|
||||
// margin-right: 0.5em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Toggle mode
|
||||
// .navbar-button.active {
|
||||
// color: $btn-active-text-color;
|
||||
// background-color: $btn-active-bg;
|
||||
// }
|
||||
|
||||
// .navbar-button--no-icon {
|
||||
// line-height: 18px;
|
||||
// }
|
||||
|
||||
// .result-options {
|
||||
// margin: 2 * $panel-margin 0;
|
||||
// }
|
||||
|
||||
// .time-series-disclaimer {
|
||||
// width: 300px;
|
||||
// margin: $panel-margin auto;
|
||||
// padding: 10px 0;
|
||||
// border-radius: $border-radius;
|
||||
// text-align: center;
|
||||
// background-color: $panel-bg;
|
||||
|
||||
// .disclaimer-icon {
|
||||
// color: $yellow;
|
||||
// margin-right: $panel-margin/2;
|
||||
// }
|
||||
|
||||
// .show-all-time-series {
|
||||
// cursor: pointer;
|
||||
// color: $external-link-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .navbar .elapsed-time {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 3.5rem;
|
||||
// text-align: center;
|
||||
// font-size: 0.8rem;
|
||||
// }
|
||||
|
||||
// .graph-legend {
|
||||
// flex-wrap: wrap;
|
||||
// }
|
||||
|
||||
// .explore-panel__loader {
|
||||
// height: 2px;
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// background: none;
|
||||
// margin: $panel-margin / 2;
|
||||
// transition: background-color 1s ease;
|
||||
// }
|
||||
|
||||
// .explore-panel__loader--active {
|
||||
// background: $text-color-faint;
|
||||
// }
|
||||
|
||||
// .explore-panel__loader--active:after {
|
||||
// content: ' ';
|
||||
// display: block;
|
||||
// width: 25%;
|
||||
// top: 0;
|
||||
// top: -50%;
|
||||
// height: 250%;
|
||||
// position: absolute;
|
||||
// animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
|
||||
// animation-iteration-count: 100;
|
||||
// background: $blue;
|
||||
// }
|
||||
|
||||
// @keyframes loader {
|
||||
// from {
|
||||
// left: -25%;
|
||||
// }
|
||||
// to {
|
||||
// left: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .datasource-picker {
|
||||
// min-width: 200px;
|
||||
// }
|
||||
|
||||
// .timepicker {
|
||||
// display: flex;
|
||||
|
||||
// &-rangestring {
|
||||
// margin-left: 0.5em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .run-icon {
|
||||
// margin-left: 0.25em;
|
||||
// transform: rotate(90deg);
|
||||
// }
|
||||
|
||||
// .relative {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// .link {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user