From 649c2bb0bf326db36cbbf7e72c0541b19749a70e Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Fri, 28 May 2021 09:20:31 +0200
Subject: [PATCH] Add missing transition to `.form-select` (#34034)

A selectbox is styled in a very similar way as an input (`.form-control`), including border-color and box-shadow. So it can be assumed it should apply the same CSS transition for these properties when focused, but this was missing.

Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
---
 scss/_variables.scss         | 2 ++
 scss/forms/_form-select.scss | 1 +
 2 files changed, 3 insertions(+)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9a1f3daad9..11819f4400 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -826,6 +826,8 @@ $form-select-font-size-sm:        $input-font-size-sm !default;
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
+
+$form-select-transition:          $input-transition !default;
 // scss-docs-end form-select-variables
 
 // scss-docs-start form-range-variables
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 70256255a7..4506a979ad 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -22,6 +22,7 @@
   border: $form-select-border-width solid $form-select-border-color;
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
+  @include transition($form-select-transition);
   appearance: none;
 
   &:focus {