Refs #2551: updating modalbox styles and centering

3 files changed, 45 insertions, 2 deletions

diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 4e18317bb..7ddb37b68 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -12,6 +12,7 @@
 
 @import 'components/buttons'
 @import 'components/alerts'
+@import 'components/modals'
 @import 'components/labels'
 @import 'components/select2'
 @import 'components/forms'
diff --git a/app/assets/stylesheets/components/_labels.sass b/app/assets/stylesheets/components/_labels.sass
index 216939972..3514bce81 100644
--- a/app/assets/stylesheets/components/_labels.sass
+++ b/app/assets/stylesheets/components/_labels.sass
@@ -10,5 +10,5 @@
   border-radius: 2px
 
   &.label-default
-    background-color: #fff
-    color: $blue
+    background-color: rgba(#fff, 0.3)
+    color: #fff
diff --git a/app/assets/stylesheets/components/_modals.sass b/app/assets/stylesheets/components/_modals.sass
new file mode 100644
index 000000000..ed6f4da85
--- /dev/null
+++ b/app/assets/stylesheets/components/_modals.sass
@@ -0,0 +1,42 @@
+//----------//
+//  Modals  //
+//----------//
+
+$modalW: 600px
+
+.modal
+  // Modal centering
+  .modal-container
+    display: table
+    width: 100%
+    height: 100%
+
+    .modal-dialog
+      display: table-cell
+      vertical-align: middle
+      width: 100%
+      height: 100%
+      margin: 0
+      text-align: center
+
+      .modal-content
+        display: inline-block
+        text-align: left
+        width: $modalW
+
+  // Modal custom styles
+  .modal-content
+    border-radius: 4px
+    border: none
+    overflow: hidden
+
+    .modal-header
+      border: none
+      background-color: $blue
+      color: #fff
+
+      .modal-title
+        font-size: $h2-size
+
+    .modal-footer
+      border-color: rgba($blue, 0.25)