mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

Update dropdown vars

Browse Source 
* Update `.nav-divider` mixin to simplify to a 1px line (one value
instead of two in parametric mixin)
* Rename and consolidate dropdown caret vars
* Add vars to Customizer
This commit is contained in:
Mark Otto
2013-07-23 23:18:53 -07:00
parent cdf6019e11
commit 398038c798
4 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
customize.html
View File

@@ -817,6 +817,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@dropdown-link-hover-bg</label> <label>@dropdown-link-hover-bg</label>
<input type="text" placeholder="@dropdown-link-active-bg"> <input type="text" placeholder="@dropdown-link-active-bg">
<p class="help-block">Hovered dropdown menu entry background color</p> <p class="help-block">Hovered dropdown menu entry background color</p>
<h3>Dropdown caret</h3>
<label>@dropdown-caret-color</label>
<input type="text" placeholder="@dropdown-caret-color">
<p class="help-block">Indicator arrow for showing an element has a dropdown</p>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Colors</h3> <h3>Colors</h3>
@@ -834,12 +838,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Dividers</h3> <h3>Dividers</h3>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<label>@dropdown-divider-top</label> <label>@dropdown-divider-bg</label>
<input type="text" placeholder="#e5e5e5"> <input type="text" placeholder="#e5e5e5">
<p class="help-block">Dropdown divider top border color</p> <p class="help-block">Dropdown divider top border color</p>
<label>@dropdown-divider-bottom</label>
<input type="text" placeholder="#fff">
<p class="help-block">Dropdown divider bottom border color</p>
</div> </div>
</div> </div>

6
less/dropdowns.less
View File

@@ -11,7 +11,7 @@
height: 0; height: 0;
margin-left: 2px; margin-left: 2px;
vertical-align: middle; vertical-align: middle;
border-top: 4px solid @caret-border-top-color; border-top: 4px solid @dropdown-caret-color;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-left: 4px solid transparent; border-left: 4px solid transparent;
content: ""; content: "";
@@ -45,7 +45,7 @@
// Dividers (basically an hr) within the dropdown // Dividers (basically an hr) within the dropdown
.divider { .divider {
.nav-divider(@dropdown-divider-top, @dropdown-divider-bottom); .nav-divider(@dropdown-divider-bg);
} }
// Links within the dropdown menu // Links within the dropdown menu
@@ -159,7 +159,7 @@
// Reverse the caret // Reverse the caret
.caret { .caret {
border-top: 0; border-top: 0;
border-bottom: 4px solid @dropup-caret-border-color; border-bottom: 4px solid @dropdown-caret-color;
content: ""; content: "";
} }
// Different positioning for bottom up menu // Different positioning for bottom up menu

7
less/mixins.less
View File

@@ -332,12 +332,11 @@
// Horizontal dividers // Horizontal dividers
// ------------------------- // -------------------------
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: #fff) { .nav-divider(@color: #e5e5e5) {
height: 2px; // 1px for background, one for border height: 1px;
margin: ((@line-height-computed / 2) - 1) 0; margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden; overflow: hidden;
background-color: @top; background-color: @color;
border-bottom: 1px solid @bottom;
} }
// Alerts // Alerts

7
less/variables.less
View File

@@ -147,8 +147,7 @@
@dropdown-bg: #fff; @dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15); @dropdown-border: rgba(0,0,0,.15);
@dropdown-fallback-border: #ccc; @dropdown-fallback-border: #ccc;
@dropdown-divider-top: #e5e5e5; @dropdown-divider-bg: #e5e5e5;
@dropdown-divider-bottom: #fff;
@dropdown-link-active-color: #fff; @dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg; @dropdown-link-active-bg: @component-active-bg;
@@ -157,9 +156,7 @@
@dropdown-link-hover-color: #fff; @dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-hover-bg: @dropdown-link-active-bg;
@caret-border-top-color: #000; @dropdown-caret-color: #000;
@dropup-caret-border-color: #000;
// COMPONENT VARIABLES // COMPONENT VARIABLES