IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-30 12:44:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Clean up css for react-select v2 #13425

Browse Source
This commit is contained in:
Johannes Schill 2018-10-08 13:39:00 +02:00
parent be7ed3ebca
commit cc20b8de36
4 changed files with 8 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/sass/_variables.dark.scss
View File

@ -194,6 +194,7 @@ $input-box-shadow-focus: rgba(102, 175, 233, 0.6);
$input-color-placeholder: $gray-1 !default;
$input-label-bg: $gray-blue;
$input-label-border-color: $dark-3;
$input-color-select-arrow: $white;
// Search
$search-shadow: 0 0 30px 0 $black;

1
public/sass/_variables.light.scss
View File

@ -190,6 +190,7 @@ $input-box-shadow-focus: $blue !default;
$input-color-placeholder: $gray-4 !default;
$input-label-bg: $gray-5;
$input-label-border-color: $gray-5;
$input-color-select-arrow: $gray-1;
// Sidemenu
// -------------------------

93
public/sass/components/_form_select_box.scss
View File

@ -1,19 +1,5 @@
$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: $menu-dropdown-bg;
$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;
$select-text-color: $text-color;
$select-input-bg-disabled: $input-bg-disabled;
$select-option-selected-bg: $dropdownLinkBackgroundActive;
// @import '../../../node_modules/react-select/scss/default.scss';
@mixin select-control() {
width: 100%;
@ -29,13 +15,10 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
@include box-shadow($shadow);
}
// new react-select WIP
.gf-form-select2__control {
@include select-control();
border-color: $dark-3;
border: 1px solid #262628;
color: #d8d9da;
border: 1px solid $input-border-color;
color: $input-color;
cursor: default;
display: table;
border-spacing: 0;
@ -86,7 +69,7 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
color: $dropdownLinkColorHover;
@include left-brand-border-gradient();
.fa {
color: white;
color: $white;
}
}
}
@ -104,7 +87,7 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
}
.gf-form-select2__select-arrow {
border-color: #999 transparent transparent;
border-color: $white transparent transparent;
border-style: solid;
border-width: 5px 5px 2.5px;
display: inline-block;
@ -113,79 +96,13 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
position: relative;
&.gf-form-select2__select-arrow--reversed {
border-color: transparent transparent #999;
border-color: transparent transparent $white;
top: -2px;
border-width: 0 5px 5px;
}
}
// 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: $input-padding-y $input-padding-x;
font-size: $font-size-md;
line-height: $input-line-height;
vertical-align: baseline;
white-space: nowrap;
}
}
&.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 {
border-left: 2px solid transparent;
}
.Select-option.is-focused {
background-color: $dropdownLinkBackgroundHover;
color: $dropdownLinkColorHover;
@include left-brand-border-gradient();
}
}
.gf-form-input--form-dropdown-right {
.Select-menu-outer {
right: 0;
left: unset;
}
}

9
public/sass/components/_tagsinput.scss
View File

@ -19,7 +19,7 @@
.tag {
margin-right: 2px;
color: white;
color: $white;
[data-role='remove'] {
margin-left: 8px;
@ -63,13 +63,6 @@
.tag-count-label {
margin-left: 3px;
}
.gf-form-input--form-dropdown {
.Select-menu-outer {
border: 0;
width: 100%;
}
}
}
.tag-filter-values {