box shadow matching BS4 input shadow

angel-vladov · Mar 4, 2018 · 25dd16c · 25dd16c
1 parent 34ac452
commit 25dd16c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 17 deletions.
diff --git a/dist/select2-bootstrap.css b/dist/select2-bootstrap.css
@@ -60,6 +60,11 @@
 
 .select2-container--bootstrap .select2-selection {
   border-radius: 0.25rem;
+  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   background-color: #fff;
   border: 1px solid #ced4da;
   color: #495057;
@@ -73,6 +78,11 @@
 
 .select2-container--bootstrap .select2-search--dropdown .select2-search__field {
   border-radius: 0.25rem;
+  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   background-color: #fff;
   border: 1px solid #ced4da;
   color: #495057;
@@ -183,12 +193,9 @@
 }
 
 .select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
-  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   border-color: #80bdff;
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
 .select2-container--bootstrap.select2-container--open {
@@ -209,12 +216,16 @@
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   border-bottom-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .select2-container--bootstrap .select2-selection__clear {