mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
109 lines
2.2 KiB
SCSS
109 lines
2.2 KiB
SCSS
$select-input-height: 35px;
|
|
$select-input-bg-disabled: $input-bg-disabled;
|
|
|
|
@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);
|
|
}
|
|
|
|
.gf-form-select2__control {
|
|
@include select-control();
|
|
border: 1px solid $input-border-color;
|
|
color: $input-color;
|
|
cursor: default;
|
|
display: table;
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
height: $select-input-height;
|
|
outline: none;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.gf-form-select2__control--is-focused {
|
|
background-color: $input-bg;
|
|
@include select-control-focus();
|
|
}
|
|
|
|
.gf-form-select2__control--is-disabled {
|
|
background-color: $select-input-bg-disabled;
|
|
}
|
|
|
|
.gf-form-select2__control--menu-right {
|
|
.gf-form-select2__menu {
|
|
right: 0;
|
|
left: unset;
|
|
}
|
|
}
|
|
|
|
.gf-form-select2__input {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.gf-form-select2__menu {
|
|
background: $select-input-bg-disabled;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gf-form-select2__option {
|
|
border-left: 2px solid transparent;
|
|
|
|
&.gf-form-select2__option--is-focused,
|
|
&.gf-form-select2__option--is-selected {
|
|
background-color: $dropdownLinkBackgroundHover;
|
|
color: $dropdownLinkColorHover;
|
|
@include left-brand-border-gradient();
|
|
.fa {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gf-form-select2__value-container {
|
|
display: table-cell;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.gf-form-select2__indicators {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-right: 5px;
|
|
width: 25px;
|
|
}
|
|
|
|
.gf-form-select2__select-arrow {
|
|
border-color: $white transparent transparent;
|
|
border-style: solid;
|
|
border-width: 5px 5px 2.5px;
|
|
display: inline-block;
|
|
height: 0;
|
|
width: 0;
|
|
position: relative;
|
|
|
|
&.gf-form-select2__select-arrow--reversed {
|
|
border-color: transparent transparent $white;
|
|
top: -2px;
|
|
border-width: 0 5px 5px;
|
|
}
|
|
}
|
|
.gf-form-input--form-dropdown {
|
|
padding: 0;
|
|
border: 0;
|
|
overflow: visible;
|
|
}
|