Moved modals inline properties to variables.less

In this commit I moved modals.less inline properties to variables.less
and also added those variables to customize.html.

2 files changed, 17 insertions, 7 deletions

diff --git a/less/modals.less b/less/modals.less
index d79121097..52c1b0df8 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -46,10 +46,10 @@
 // Actual modal
 .modal-content {
   position: relative;
-  background-color: #fff;
-  border: 1px solid #999;
-  border: 1px solid rgba(0,0,0,.2);
-  border-radius: 6px;
+  background-color: @modal-content-bg;
+  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+  border: 1px solid @modal-content-border-color;
+  border-radius: @border-radius-large;
   .box-shadow(0 3px 9px rgba(0,0,0,.5));
   .background-clip(padding-box);
   // Remove focus outline from opened modal
@@ -64,7 +64,7 @@
   bottom: 0;
   left: 0;
   z-index: (@zindex-modal-background - 10);
-  background-color: #000;
+  background-color: @modal-backdrop-bg;
   // Fade for backdrop
   &.fade { .opacity(0); }
   &.fade.in { .opacity(.5); }
@@ -74,7 +74,7 @@
 // Top section of the modal w/ title and dismiss
 .modal-header {
   padding: @modal-title-padding;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid @modal-header-border-color;
   min-height: (@modal-title-padding + @modal-title-line-height);
 }
 // Close icon
@@ -100,7 +100,7 @@
   margin-top: 15px;
   padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
   text-align: right; // right align buttons
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid @modal-footer-border-color;
   .clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
diff --git a/less/variables.less b/less/variables.less
index bf29d3556..97e608b36 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -296,6 +296,16 @@
 @modal-title-padding:         15px;
 @modal-title-line-height:     @line-height-base;
 
+@modal-content-bg:                             #fff;
+@modal-content-border-color:                   rgba(0,0,0,.2);
+@modal-content-fallback-border-color:          #999;
+
+@modal-backdrop-bg:           #000;
+
+@modal-header-border-color:   #e5e5e5;
+
+@modal-footer-border-color:   #e5e5e5;
+
 // Alerts
 // -------------------------
 @alert-bg:                    @state-warning-bg;