mirror of
https://github.com/grafana/grafana.git
synced 2025-02-10 23:55:47 -06:00
Merge pull request #15332 from grafana/style-fixes
Fixed issues with plus button in threshold and panel option header
This commit is contained in:
commit
89c153d44b
@ -30,13 +30,13 @@
|
||||
&:hover {
|
||||
.panel-options-group__add-circle {
|
||||
background-color: $btn-success-bg;
|
||||
color: $text-color-strong;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-options-group__add-circle {
|
||||
@include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color);
|
||||
@include gradientBar($btn-success-bg, $btn-success-bg-hl);
|
||||
|
||||
border-radius: 50px;
|
||||
width: 20px;
|
||||
|
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.thresholds-row-add-button {
|
||||
@include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color);
|
||||
@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
|
||||
|
||||
align-self: center;
|
||||
margin-right: 5px;
|
||||
@ -34,7 +34,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $text-color-strong;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -119,7 +119,12 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
template +=
|
||||
`
|
||||
<div class="panel-options-group" ng-cloak>` +
|
||||
(i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
|
||||
(i > 0
|
||||
? `<div class="panel-options-group__header">
|
||||
<span class="panel-options-group__title">{{ctrl.editorTabs[${i}].title}}
|
||||
</span>
|
||||
</div>`
|
||||
: '') +
|
||||
`<div class="panel-options-group__body">
|
||||
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
|
||||
</div>
|
||||
@ -228,8 +233,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[pluginHelp]}
|
||||
scrollTop={scrollTop} setScrollTop={this.setScrollTop}>
|
||||
<EditorTabBody
|
||||
heading="Visualization"
|
||||
renderToolbar={this.renderToolbar}
|
||||
toolbarItems={[pluginHelp]}
|
||||
scrollTop={scrollTop}
|
||||
setScrollTop={this.setScrollTop}
|
||||
>
|
||||
<>
|
||||
<FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
|
||||
<VizTypePicker
|
||||
@ -247,11 +257,11 @@ export class VisualizationTab extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: StoreState) => ({
|
||||
urlOpenVizPicker: !!state.location.query.openVizPicker
|
||||
urlOpenVizPicker: !!state.location.query.openVizPicker,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
updateLocation
|
||||
updateLocation,
|
||||
};
|
||||
|
||||
export default connectWithStore(VisualizationTab, mapStateToProps, mapDispatchToProps);
|
||||
|
@ -146,15 +146,17 @@
|
||||
padding-bottom: 6px;
|
||||
transition: transform 1 ease;
|
||||
|
||||
&--current {
|
||||
box-shadow: 0 0 6px $orange;
|
||||
border: 1px solid $orange;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $panel-editor-viz-item-shadow-hover;
|
||||
background: $panel-editor-viz-item-bg-hover;
|
||||
border: $panel-editor-viz-item-border-hover;
|
||||
|
||||
}
|
||||
|
||||
&--current {
|
||||
box-shadow: 0 0 6px $orange !important;
|
||||
border: 1px solid $orange !important;
|
||||
background: $panel-editor-viz-item-bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user