diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 56cd7ee1555..1896e74d640 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -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; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index e908f7d4157..45021a210fd 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -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 // ------------------------- diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss index 3dcc5b11562..4950cb586b8 100644 --- a/public/sass/components/_form_select_box.scss +++ b/public/sass/components/_form_select_box.scss @@ -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; - } } diff --git a/public/sass/components/_tagsinput.scss b/public/sass/components/_tagsinput.scss index 915a0f6d480..f4f0ed4c84d 100644 --- a/public/sass/components/_tagsinput.scss +++ b/public/sass/components/_tagsinput.scss @@ -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 {