Separate BS4 overrides into own file; remove all reassignments of -300

10 files changed, 26 insertions, 28 deletions

diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index c20738a20c3..056d4b7207a 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -14,7 +14,6 @@ $border-radius-base: 3px !default;
 
 $modal-body-bg: $white-light;
 $input-border: $border-color;
-$input-border-focus: $focus-border-color;
 
 $padding-base-vertical: $gl-vert-padding;
 $padding-base-horizontal: $gl-padding;
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c46b0b5db09..b1a20c06910 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -1,4 +1,5 @@
 @import 'framework/variables';
+@import 'framework/variables_overrides';
 @import 'framework/mixins';
 
 @import 'bootstrap';
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 646cedd79ed..ea4798fcefd 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -350,7 +350,7 @@
   &:focus {
     cursor: text;
     box-shadow: none;
-    border-color: lighten($dropdown-input-focus-border, 20%);
+    border-color: lighten($blue-300, 20%);
     color: $gray-darkest;
     background-color: $gray-light;
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index eebce8b9011..83bc3776178 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -615,7 +615,7 @@
 
   &:focus {
     color: $dropdown-link-color;
-    border-color: $dropdown-input-focus-border;
+    border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
     ~ .fa {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 5d79610b21e..9b09ed0ed0a 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -205,7 +205,7 @@
 
   &.focus,
   &.focus:hover {
-    border-color: $dropdown-input-focus-border;
+    border-color: $blue-300;
     box-shadow: 0 0 4px $search-input-focus-shadow-color;
   }
 
@@ -294,7 +294,7 @@
   &:hover,
   &:focus {
     color: $gl-text-color;
-    border-color: $dropdown-input-focus-border;
+    border-color: $blue-300;
     outline: none;
   }
 
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index b40dcf93969..88d2f0aaf85 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -153,7 +153,7 @@
     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
     &:focus {
-      border-color: $input-border-focus;
+      border-color: $blue-300;
     }
 
     &.select2-active {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4db9efff6ee..136a5612ddc 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -177,7 +177,6 @@ $border-gray-dark: darken($white-normal, $darken-border-factor);
  * UI elements
  */
 $border-color: #e5e5e5;
-$focus-border-color: $blue-300;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
 $well-light-border: #f1f1f1;
@@ -392,8 +391,7 @@ $dropdown-divider-color: rgba(#000, 0.1);
 $dropdown-title-btn-color: #bfbfbf;
 $dropdown-input-color: #555;
 $dropdown-input-fa-color: #c7c7c7;
-$dropdown-input-focus-border: $focus-border-color;
-$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, 0.4);
+$dropdown-input-focus-shadow: rgba($blue-300, 0.4);
 $dropdown-loading-bg: rgba(#fff, 0.6);
 $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
@@ -834,19 +832,3 @@ Prometheus
 $prometheus-table-row-highlight-color: $theme-gray-100;
 
 $priority-label-empty-state-width: 114px;
-
-/*
- * Override Bootstrap 4 variables
- */
-
-$secondary: $gray-light;
-$input-disabled-bg: $gray-light;
-$input-border-color: $theme-gray-200;
-$input-color: $gl-text-color;
-$font-family-sans-serif: $regular-font;
-$font-family-monospace: $monospace-font;
-$input-line-height: 20px;
-$btn-line-height: 20px;
-$table-accent-bg: $gray-light;
-$card-border-color: $border-color;
-$card-cap-bg: $gray-light;
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
new file mode 100644
index 00000000000..b9c343fa2e9
--- /dev/null
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -0,0 +1,16 @@
+/*
+ * This file is only for overriding Bootstrap 4 variables.
+ * Please add any new variables to variables.scss
+ */
+
+$secondary: $gray-light;
+$input-disabled-bg: $gray-light;
+$input-border-color: $theme-gray-200;
+$input-color: $gl-text-color;
+$font-family-sans-serif: $regular-font;
+$font-family-monospace: $monospace-font;
+$input-line-height: 20px;
+$btn-line-height: 20px;
+$table-accent-bg: $gray-light;
+$card-border-color: $border-color;
+$card-cap-bg: $gray-light;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index dcf590e7331..8acd64ca1a1 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -69,7 +69,7 @@
 
       .comment-toolbar,
       .nav-links {
-        border-color: $focus-border-color;
+        border-color: $blue-300;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 60b280fd12e..c9405004c38 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -23,7 +23,7 @@ $search-avatar-size: 16px;
 .search-text-input:hover,
 .form-control:hover,
 :not[readonly] {
-  border-color: lighten($dropdown-input-focus-border, 20%);
+  border-color: lighten($blue-300, 20%);
   box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
 }
 
@@ -127,7 +127,7 @@ input[type='checkbox']:hover {
   &.search-active {
     form {
       @extend .form-control:focus;
-      border-color: $dropdown-input-focus-border;
+      border-color: $blue-300;
       box-shadow: none;
 
       @include media-breakpoint-up(xl) {