Skip to content

N
nexpie-grafana-theme
Commit 46f2808e by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #14849 from grafana/panel-option-section 

WIP: Panel option section moved to grafana-ui and new panel option grid
parents 9d4354b7 9e0f961f
Showing with 117 additions and 91 deletions
packages/grafana-ui/src/components/PanelOptionsGrid/PanelOptionsGrid.tsx 0 → 100644
import React, { SFC } from 'react';
interface Props {
cols?: number;
children: JSX.Element[] | JSX.Element;
}
export const PanelOptionsGrid: SFC<Props> = ({ children }) => {
return (
<div className="panel-options-grid">
{children}
</div>
);
};
packages/grafana-ui/src/components/PanelOptionsGrid/_PanelOptionsGrid.scss 0 → 100644
.panel-options-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
@include media-breakpoint-up(lg) {
grid-template-columns: repeat(3, 1fr);
}
}
public/app/features/dashboard/dashgrid/PanelOptionSection.tsx → packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
...@@ -7,11 +7,11 @@ interface Props { ...@@ -7,11 +7,11 @@ interface Props {
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[];
} }
export const PanelOptionSection: SFC<Props> = props => { export const PanelOptionsGroup: SFC<Props> = props => {
return ( return (
<div className="panel-option-section"> <div className="panel-options-group">
{props.title && ( {props.title && (
<div className="panel-option-section__header"> <div className="panel-options-group__header">
{props.title} {props.title}
{props.onClose && ( {props.onClose && (
<button className="btn btn-link" onClick={props.onClose}> <button className="btn btn-link" onClick={props.onClose}>
...@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => { ...@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => {
)} )}
</div> </div>
)} )}
<div className="panel-option-section__body">{props.children}</div> <div className="panel-options-group__body">{props.children}</div>
</div> </div>
); );
}; };
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss 0 → 100644
.panel-options-group {
margin-bottom: 10px;
border: $panel-options-group-border;
border-radius: $border-radius;
background: $page-bg;
}
.panel-options-group__header {
padding: 4px 20px;
font-size: 1.1rem;
background: $panel-options-group-header-bg;
position: relative;
.btn {
position: absolute;
right: 0;
top: 0px;
}
}
.panel-options-group__body {
padding: 20px;
&--queries {
min-height: 200px;
}
}
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
...@@ -3,6 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2'; ...@@ -3,6 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
import { Threshold, BasicGaugeColor } from '../../types'; import { Threshold, BasicGaugeColor } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker'; import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
export interface Props { export interface Props {
thresholds: Threshold[]; thresholds: Threshold[];
...@@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -204,8 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
render() { render() {
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Thresholds">
<h5 className="section-heading">Thresholds</h5>
<div className="thresholds"> <div className="thresholds">
<div className="color-indicators"> <div className="color-indicators">
{this.renderIndicator()} {this.renderIndicator()}
...@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
{this.renderBase()} {this.renderBase()}
</div> </div>
</div> </div>
</div> </PanelOptionsGroup>
); );
} }
} }
packages/grafana-ui/src/components/index.scss
...@@ -3,3 +3,5 @@ ...@@ -3,3 +3,5 @@
@import 'ThresholdsEditor/ThresholdsEditor'; @import 'ThresholdsEditor/ThresholdsEditor';
@import 'Tooltip/Tooltip'; @import 'Tooltip/Tooltip';
@import 'Select/Select'; @import 'Select/Select';
@import 'PanelOptionsGroup/PanelOptionsGroup';
@import 'PanelOptionsGrid/PanelOptionsGrid';
packages/grafana-ui/src/components/index.ts
...@@ -16,3 +16,5 @@ export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker'; ...@@ -16,3 +16,5 @@ export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor'; export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
export { GfFormLabel } from './GfFormLabel/GfFormLabel'; export { GfFormLabel } from './GfFormLabel/GfFormLabel';
export { Graph } from './Graph/Graph'; export { Graph } from './Graph/Graph';
export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
public/app/features/alerting/partials/alert_tab.html
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="alert alert-error m-b-2" ng-show="ctrl.error"> <div class="alert alert-error m-b-2" ng-show="ctrl.error">
<i class="fa fa-warning"></i> {{ctrl.error}} <i class="fa fa-warning"></i> {{ctrl.error}}
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="gf-form-group"> <div class="gf-form-group">
<h4 class="section-heading">Rule</h4> <h4 class="section-heading">Rule</h4>
<div class="gf-form-inline"> <div class="gf-form-inline">
...@@ -125,9 +125,9 @@ ...@@ -125,9 +125,9 @@
</div> </div>
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__header">Notifications</div> <div class="panel-options-group__header">Notifications</div>
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-8">Send to</span> <span class="gf-form-label width-8">Send to</span>
......
public/app/features/dashboard/dashgrid/EditorTabBody.tsx
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
// Components // Components
import { CustomScrollbar } from '@grafana/ui'; import { CustomScrollbar, PanelOptionsGroup } from '@grafana/ui';
import { FadeIn } from 'app/core/components/Animations/FadeIn'; import { FadeIn } from 'app/core/components/Animations/FadeIn';
import { PanelOptionSection } from './PanelOptionSection';
interface Props { interface Props {
children: JSX.Element; children: JSX.Element;
...@@ -97,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> { ...@@ -97,9 +96,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
renderOpenView(view: EditorToolbarView) { renderOpenView(view: EditorToolbarView) {
return ( return (
<PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}> <PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
{view.render()} {view.render()}
</PanelOptionSection> </PanelOptionsGroup>
); );
} }
......
public/app/features/dashboard/dashgrid/QueriesTab.tsx
...@@ -9,7 +9,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; ...@@ -9,7 +9,7 @@ import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
import { QueryInspector } from './QueryInspector'; import { QueryInspector } from './QueryInspector';
import { QueryOptions } from './QueryOptions'; import { QueryOptions } from './QueryOptions';
import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab'; import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
import { PanelOptionSection } from './PanelOptionSection'; import { PanelOptionsGroup } from '@grafana/ui';
// Services // Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
...@@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -216,7 +216,7 @@ export class QueriesTab extends PureComponent<Props, State> {
return ( return (
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}> <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
<> <>
<PanelOptionSection> <PanelOptionsGroup>
<div className="query-editor-rows"> <div className="query-editor-rows">
<div ref={element => (this.element = element)} /> <div ref={element => (this.element = element)} />
...@@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -239,10 +239,10 @@ export class QueriesTab extends PureComponent<Props, State> {
</div> </div>
</div> </div>
</div> </div>
</PanelOptionSection> </PanelOptionsGroup>
<PanelOptionSection> <PanelOptionsGroup>
<QueryOptions panel={panel} datasource={currentDS} /> <QueryOptions panel={panel} datasource={currentDS} />
</PanelOptionSection> </PanelOptionsGroup>
</> </>
</EditorTabBody> </EditorTabBody>
); );
......
public/app/features/dashboard/dashgrid/VisualizationTab.tsx
...@@ -9,7 +9,6 @@ import { EditorTabBody, EditorToolbarView } from './EditorTabBody'; ...@@ -9,7 +9,6 @@ import { EditorTabBody, EditorToolbarView } from './EditorTabBody';
import { VizTypePicker } from './VizTypePicker'; import { VizTypePicker } from './VizTypePicker';
import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp'; import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
import { FadeIn } from 'app/core/components/Animations/FadeIn'; import { FadeIn } from 'app/core/components/Animations/FadeIn';
import { PanelOptionSection } from './PanelOptionSection';
// Types // Types
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
...@@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -62,13 +61,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
} }
return ( return (
<PanelOptionSection> <>
{PanelOptions ? ( {PanelOptions ? (
<PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} /> <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
) : ( ) : (
<p>Visualization has no options</p> <p>Visualization has no options</p>
)} )}
</PanelOptionSection> </>
); );
} }
...@@ -112,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -112,9 +111,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
for (let i = 0; i < panelCtrl.editorTabs.length; i++) { for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
template += template +=
` `
<div class="panel-option-section" ng-cloak>` + <div class="panel-options-group" ng-cloak>` +
(i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') + (i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
`<div class="panel-option-section__body"> `<div class="panel-options-group__body">
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab> <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
</div> </div>
</div> </div>
......
public/app/features/panel/partials/general_tab.html
<div class="panel-option-section"> <div class="panel-options-group">
<!-- <div class="panel&#45;option&#45;section__header">Information</div> --> <!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="section"> <div class="section">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Title</span> <span class="gf-form-label width-7">Title</span>
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
</div> </div>
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__header">Repeating</div> <div class="panel-options-group__header">Repeating</div>
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<div class="section"> <div class="section">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Repeat</span> <span class="gf-form-label width-9">Repeat</span>
...@@ -46,9 +46,9 @@ ...@@ -46,9 +46,9 @@
</div> </div>
</div> </div>
<div class="panel-option-section"> <div class="panel-options-group">
<div class="panel-option-section__header">Drilldown Links</div> <div class="panel-options-group__header">Drilldown Links</div>
<div class="panel-option-section__body"> <div class="panel-options-group__body">
<panel-links-editor panel="ctrl.panel"></panel-links-editor> <panel-links-editor panel="ctrl.panel"></panel-links-editor>
</div> </div>
</div> </div>
public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { GaugeOptions, PanelOptionsProps } from '@grafana/ui'; import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
import { Switch } from 'app/core/components/Switch/Switch'; import { Switch } from 'app/core/components/Switch/Switch';
import { Label } from '../../../core/components/Label/Label'; import { Label } from '../../../core/components/Label/Label';
...@@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps< ...@@ -20,8 +20,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options; const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Gauge">
<h5 className="section-heading">Gauge</h5>
<div className="gf-form"> <div className="gf-form">
<Label width={8}>Min value</Label> <Label width={8}>Min value</Label>
<input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} /> <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
...@@ -42,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps< ...@@ -42,7 +41,7 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
checked={showThresholdMarkers} checked={showThresholdMarkers}
onChange={this.onToggleThresholdMarkers} onChange={this.onToggleThresholdMarkers}
/> />
</div> </PanelOptionsGroup>
); );
} }
} }
public/app/plugins/panel/gauge/GaugePanelOptions.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { BasicGaugeColor, GaugeOptions, PanelOptionsProps, ThresholdsEditor, Threshold } from '@grafana/ui'; import {
BasicGaugeColor,
GaugeOptions,
PanelOptionsProps,
ThresholdsEditor,
Threshold,
PanelOptionsGrid,
} from '@grafana/ui';
import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
import ValueMappings from 'app/plugins/panel/gauge/ValueMappings'; import ValueMappings from 'app/plugins/panel/gauge/ValueMappings';
...@@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G ...@@ -31,15 +38,13 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
const { onChange, options } = this.props; const { onChange, options } = this.props;
return ( return (
<> <>
<div className="form-section"> <PanelOptionsGrid>
<ValueOptions onChange={onChange} options={options} /> <ValueOptions onChange={onChange} options={options} />
<GaugeOptionsEditor onChange={onChange} options={options} /> <GaugeOptionsEditor onChange={onChange} options={options} />
<ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} /> <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
</div> </PanelOptionsGrid>
<div className="form-section">
<ValueMappings onChange={onChange} options={options} /> <ValueMappings onChange={onChange} options={options} />
</div>
</> </>
); );
} }
......
public/app/plugins/panel/gauge/ValueMappings.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap } from '@grafana/ui'; import { GaugeOptions, PanelOptionsProps, MappingType, RangeMap, ValueMap, PanelOptionsGroup } from '@grafana/ui';
import MappingRow from './MappingRow'; import MappingRow from './MappingRow';
...@@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge ...@@ -75,8 +75,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
const { mappings } = this.state; const { mappings } = this.state;
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Value Mappings">
<h5 className="section-heading">Value mappings</h5>
<div> <div>
{mappings.length > 0 && {mappings.length > 0 &&
mappings.map((mapping, index) => ( mappings.map((mapping, index) => (
...@@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge ...@@ -94,7 +93,7 @@ export default class ValueMappings extends PureComponent<PanelOptionsProps<Gauge
</div> </div>
<div className="add-mapping-row-label">Add mapping</div> <div className="add-mapping-row-label">Add mapping</div>
</div> </div>
</div> </PanelOptionsGroup>
); );
} }
} }
public/app/plugins/panel/gauge/ValueOptions.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { GaugeOptions, PanelOptionsProps } from '@grafana/ui'; import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
import { Label } from 'app/core/components/Label/Label'; import { Label } from 'app/core/components/Label/Label';
import { Select} from '@grafana/ui'; import { Select} from '@grafana/ui';
...@@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO ...@@ -40,8 +40,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
const { stat, unit, decimals, prefix, suffix } = this.props.options; const { stat, unit, decimals, prefix, suffix } = this.props.options;
return ( return (
<div className="section gf-form-group"> <PanelOptionsGroup title="Value">
<h5 className="section-heading">Value</h5>
<div className="gf-form"> <div className="gf-form">
<Label width={labelWidth}>Stat</Label> <Label width={labelWidth}>Stat</Label>
<Select <Select
...@@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO ...@@ -73,7 +72,7 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
<Label width={labelWidth}>Suffix</Label> <Label width={labelWidth}>Suffix</Label>
<input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} /> <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
</div> </div>
</div> </PanelOptionsGroup>
); );
} }
} }
public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<div <Component
className="section gf-form-group" title="Value Mappings"
> >
<h5
className="section-heading"
>
Value mappings
</h5>
<div> <div>
<MappingRow <MappingRow
key="Ok-0" key="Ok-0"
...@@ -57,5 +52,5 @@ exports[`Render should render component 1`] = ` ...@@ -57,5 +52,5 @@ exports[`Render should render component 1`] = `
Add mapping Add mapping
</div> </div>
</div> </div>
</div> </Component>
`; `;
public/sass/_variables.dark.scss
...@@ -391,8 +391,8 @@ $panel-editor-tabs-line-color: #e3e3e3; ...@@ -391,8 +391,8 @@ $panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue, 47%); $panel-editor-viz-item-bg-hover: darken($blue, 47%);
$panel-editor-viz-item-bg-hover-active: darken($orange, 45%); $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
$panel-option-section-border: 1px solid $dark-3; $panel-options-group-border: 1px solid $dark-3;
$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1); $panel-options-group-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
$panel-grid-placeholder-bg: darken($blue, 47%); $panel-grid-placeholder-bg: darken($blue, 47%);
$panel-grid-placeholder-shadow: 0 0 4px $blue; $panel-grid-placeholder-shadow: 0 0 4px $blue;
......
public/sass/_variables.light.scss
...@@ -399,8 +399,8 @@ $panel-editor-tabs-line-color: $dark-5; ...@@ -399,8 +399,8 @@ $panel-editor-tabs-line-color: $dark-5;
$panel-editor-viz-item-bg-hover: lighten($blue, 62%); $panel-editor-viz-item-bg-hover: lighten($blue, 62%);
$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%); $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
$panel-option-section-border: 1px solid $gray-6; $panel-options-group-border: 1px solid $gray-6;
$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7); $panel-options-group-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
$panel-grid-placeholder-bg: lighten($blue, 62%); $panel-grid-placeholder-bg: lighten($blue, 62%);
$panel-grid-placeholder-shadow: 0 0 4px $blue-light; $panel-grid-placeholder-shadow: 0 0 4px $blue-light;
......
public/sass/components/_panel_editor.scss
...@@ -230,30 +230,3 @@ ...@@ -230,30 +230,3 @@
min-width: 200px; min-width: 200px;
} }
.panel-option-section {
margin-bottom: 10px;
border: $panel-option-section-border;
border-radius: $border-radius;
}
.panel-option-section__header {
padding: 4px 20px;
font-size: 1.1rem;
background: $panel-option-section-header-bg;
position: relative;
.btn {
position: absolute;
right: 0;
top: 0px;
}
}
.panel-option-section__body {
padding: 20px;
background: $page-bg;
&--queries {
min-height: 200px;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment