From 2e6fcefc5ca6aa3301f35b0600d963f82f1eb62a Mon Sep 17 00:00:00 2001
From: syed <syed.sayal.shah@gmail.com>
Date: Wed, 24 Jul 2013 18:43:21 +0500
Subject: [PATCH] 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.
---
customize.html | 30 ++++++++++++++++++++++++++++++
less/modals.less | 14 +++++++-------
less/variables.less | 10 ++++++++++
3 files changed, 47 insertions(+), 7 deletions(-)
diff --git a/customize.html b/customize.html
index 0bb8f12b8a..6a44630c49 100644
--- a/customize.html
+++ b/customize.html
@@ -1019,6 +1019,36 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@line-height-base">
<p class="help-block">Modal title line-height</p>
</div>
+ <div class="col-lg-4">
+ <label>@modal-content-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Background color of modal content area</p>
+ </div>
+ <div class="col-lg-4">
+ <label>@modal-content-border-color</label>
+ <input type="text" placeholder="rgba(0,0,0,.2)">
+ <p class="help-block">Modal content border color</p>
+ </div>
+ <div class="col-lg-4">
+ <label>@modal-content-fallback-border-color</label>
+ <input type="text" placeholder="#999">
+ <p class="help-block">Modal content border color <strong>for IE8</strong></p>
+ </div>
+ <div class="col-lg-4">
+ <label>@modal-backdrop-bg</label>
+ <input type="text" placeholder="#000">
+ <p class="help-block">Modal backdrop background color</p>
+ </div>
+ <div class="col-lg-4">
+ <label>@modal-header-border-color</label>
+ <input type="text" placeholder="#e5e5e5">
+ <p class="help-block">Modal header border color</p>
+ </div>
+ <div class="col-lg-4">
+ <label>@modal-footer-border-color</label>
+ <input type="text" placeholder="#e5e5e5">
+ <p class="help-block">Modal footer border color</p>
+ </div>
</div>
<h2 id="variables-carousel">Carousel</h2>
diff --git a/less/modals.less b/less/modals.less
index d791210973..52c1b0df8f 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 bf29d3556c..97e608b361 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;
--
GitLab