mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
11ba8070b8
* tag filter: initial react component * dashboard: move tag filter to filterbox * tag filter: customize value rendering * tag filter: get color from name * tag filter: custom option renderer * tag filter: mode with tags in different container * tag filter: refactor * refactoring PR #10519 * tag filter: refactor of PR #10521
102 lines
2.3 KiB
SCSS
102 lines
2.3 KiB
SCSS
$select-input-height: 35px;
|
|
$select-menu-max-height: 300px;
|
|
$select-item-font-size: $font-size-base;
|
|
$select-item-bg: $dropdownBackground;
|
|
$select-item-fg: $input-color;
|
|
$select-option-bg: $dropdownBackground;
|
|
$select-option-color: $input-color;
|
|
$select-noresults-color: $text-color;
|
|
$select-input-bg: $input-bg;
|
|
$select-input-border-color: $input-border-color;
|
|
$select-menu-box-shadow: $menu-dropdown-shadow;
|
|
|
|
@import '../../../node_modules/react-select/scss/default.scss';
|
|
|
|
@mixin select-control() {
|
|
width: 100%;
|
|
margin-right: $gf-form-margin;
|
|
@include border-radius($input-border-radius-sm);
|
|
background-color: $input-bg;
|
|
}
|
|
|
|
@mixin select-control-focus() {
|
|
border-color: $input-border-focus;
|
|
outline: none;
|
|
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $input-box-shadow-focus;
|
|
@include box-shadow($shadow);
|
|
}
|
|
|
|
// react-select tweaks
|
|
.gf-form-input--form-dropdown {
|
|
padding: 0;
|
|
border: 0;
|
|
overflow: visible;
|
|
|
|
.Select-placeholder {
|
|
color: $input-color-placeholder;
|
|
}
|
|
|
|
> .Select-control {
|
|
@include select-control();
|
|
border-color: $dark-3;
|
|
|
|
input {
|
|
min-width: 1rem;
|
|
}
|
|
|
|
.Select-clear,
|
|
.Select-arrow {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.Select-value {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
font-size: $font-size-base * 0.846;
|
|
font-weight: bold;
|
|
line-height: 14px; // ensure proper line-height if floated
|
|
color: $white;
|
|
vertical-align: baseline;
|
|
white-space: nowrap;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
|
background-color: $gray-1;
|
|
}
|
|
}
|
|
|
|
&.is-open > .Select-control {
|
|
background: transparent;
|
|
border-color: $dark-3;
|
|
}
|
|
|
|
&.is-focused > .Select-control {
|
|
background-color: $input-bg;
|
|
@include select-control-focus();
|
|
}
|
|
|
|
&.is-focused:not(.is-open) > .Select-control {
|
|
background-color: $input-bg;
|
|
@include select-control-focus();
|
|
}
|
|
|
|
.Select-menu-outer {
|
|
border: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.Select-option.is-focused {
|
|
background-color: $dropdownLinkBackgroundHover;
|
|
color: $dropdownLinkColorHover;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 2px;
|
|
display: block;
|
|
content: '';
|
|
background-image: linear-gradient(to bottom, #ffd500 0%, #ff4400 99%, #ff4400 100%);
|
|
}
|
|
}
|
|
}
|