Add shared CSS for MR approvalsee1979-css

- 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

4 files changed, 44 insertions, 1 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index e037b02a30c..a499a3a9f95 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -384,10 +384,17 @@ img.emoji {
 .flex-align-self-center { align-self: center; }
 .flex-grow { flex-grow: 1; }
 .flex-no-shrink { flex-shrink: 0; }
-.mw-460 { max-width: 460px; }
 .ws-initial { white-space: initial; }
+.overflow-auto { overflow: auto; }
+
+/** COMMON SIZING CLASSES **/
+.w-0 { width: 0; }
+.h-13em { height: 13em; }
+.mw-460 { max-width: 460px; }
+.mw-6em { max-width: 6em; }
 .min-height-0 { min-height: 0; }
 
+/** COMMON SPACING CLASSES **/
 .gl-pl-0 { padding-left: 0; }
 .gl-pl-1 { padding-left: #{0.5 * $grid-size}; }
 .gl-pl-2 { padding-left: $grid-size; }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 4da2243981e..0a0ef2071e9 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -36,6 +36,15 @@ label {
   }
 }
 
+.label-wrapper {
+  display: block;
+  margin: 0;
+}
+
+.form-label {
+  @extend label;
+}
+
 .form-control-label {
   @extend .col-md-2;
 }
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 {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 6954e6599b1..295a5b5ee7a 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -50,6 +50,14 @@ table {
         border-color: $white-normal;
       }
     }
+
+    .thead-white {
+      th {
+        background-color: $white-light;
+        color: $gl-text-color-secondary;
+        border-top: 0;
+      }
+    }
   }
 
   &.responsive-table {
@@ -153,3 +161,4 @@ table {
     border-top: 0;
   }
 }
+