Add shared CSS for MR approvals

- Adds some common classes
- Updates common css layout (there's more to be done here)
- Adds classes for using <label> to wrap inputs
- Adds select2 bootstrap validation support
- Fixes select2 in modal z-index
- Adds thead-white class

1 files changed, 18 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index a68f1e4e570..bcd601e198a 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -57,6 +57,16 @@
       color: $gl-text-color;
     }
   }
+
+  &.is-invalid {
+    ~ .invalid-feedback {
+      display: block;
+    }
+
+    .select2-choices {
+      border-color: $red-500;
+    }
+  }
 }
 
 .select2-drop,
@@ -67,10 +77,18 @@
   min-width: 175px;
   color: $gl-text-color;
   z-index: 999;
+
+  .modal-open & {
+    z-index: $zindex-modal + 200;
+  }
 }
 
 .select2-drop-mask {
   z-index: 998;
+
+  .modal-open & {
+    z-index: $zindex-modal + 100;
+  }
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {