grafana/public/sass/mixins/_buttons.scss
Hugo Häggmark 988b7c4dc3
Feat: Adds reconnect for failing datasource in Explore (#16226)
* Style: made outlined buttons and used it in Alert component

* Refactor: clean up state on load data source failure

* Refactor: test data source thunk created

* Refactor: move logic to changeDatasource and call that from intialize

* Refactor: move load explore datasources to own thunk

* Refactor: move logic to updateDatasourceInstanceAction

* Tests: reducer tests

* Test(Explore): Added tests and made thunkTester async

* Fix(Explore): Fixed so that we do not render StartPage if there is no StartPage

* Fix(Explore): Missed type in merge

* Refactor: Thunktester did not fail tests on async failures and prevented queires from running on datasource failures

* Feat: Fadein error alert to prevent flickering

* Feat: Refresh labels after reconnect

* Refactor: Move useLokiForceLabels into useLokiLabels from PR comments

* Feat: adds refresh metrics to Prometheus languageprovider

* Style: removes padding for connected datasources

* Chore: remove implicit anys
2019-04-01 07:38:00 +02:00

72 lines
1.5 KiB
SCSS

// Button backgrounds
// ------------------
@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor, $text-color, $textShadow);
// in these cases the gradient won't cover the background, so we override
&:hover,
&:focus,
&:active,
&.active,
&.disabled,
&[disabled] {
color: $text-color;
background-image: none;
background-color: $startColor;
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
//box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
@include border-radius($border-radius);
}
@mixin button-outline-variant($color) {
color: $white;
background-image: none;
background-color: transparent;
border: 1px solid $white;
@include hover {
color: $white;
background-color: $color;
}
&:focus,
&.focus {
color: $white;
background-color: $color;
}
&:active,
&.active,
.open > &.dropdown-toggle {
color: $white;
background-color: $color;
&:hover,
&:focus,
&.focus {
color: $white;
background-color: darken($color, 17%);
border-color: darken($color, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
}
@include hover {
border-color: lighten($color, 20%);
}
}
}