aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-07-17 23:54:09 -0700
committerMark Otto <[email protected]>2013-07-17 23:54:09 -0700
commite57758cbb453602549742360120653e08863671f (patch)
tree49519e2e8025cd6c813d004915654f3a22515a97
parent3604b868064f6e48e1301b1148779a8a819200fc (diff)
downloadbootstrap-e57758cbb453602549742360120653e08863671f.tar.xz
bootstrap-e57758cbb453602549742360120653e08863671f.zip
Drop `.nav-header` for `.dropdown-header`
* Since we no longer have `.nav-list`, I've nuked the `.nav-header` * However, dropdowns can still have section headings, so I've kept that around with the addition of `.dropdown-header` * Restyled it a smidge as well
-rw-r--r--docs/_includes/nav-components.html1
-rw-r--r--docs/assets/css/bootstrap.css24
-rw-r--r--docs/components.html25
-rw-r--r--less/dropdowns.less19
-rw-r--r--less/navs.less16
5 files changed, 45 insertions, 40 deletions
diff --git a/docs/_includes/nav-components.html b/docs/_includes/nav-components.html
index ed00b62fa..514dcfed3 100644
--- a/docs/_includes/nav-components.html
+++ b/docs/_includes/nav-components.html
@@ -3,6 +3,7 @@
<ul class="nav">
<li><a href="#dropdowns-example">Example</a></li>
<li><a href="#dropdowns-alignment">Alignment options</a></li>
+ <li><a href="#dropdowns-headers">Headers</a></li>
<li><a href="#dropdowns-disabled">Disabled menu items</a></li>
</ul>
</li>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e625405e2..237769521 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2275,6 +2275,14 @@ input[type="button"].btn-block {
outline: 0;
}
+.dropdown-header {
+ display: block;
+ padding: 3px 20px;
+ font-size: 12px;
+ line-height: 1.428571429;
+ color: #999999;
+}
+
.dropdown-backdrop {
position: fixed;
top: 0;
@@ -2303,11 +2311,6 @@ input[type="button"].btn-block {
margin-bottom: 1px;
}
-.dropdown .dropdown-menu .nav-header {
- padding-right: 20px;
- padding-left: 20px;
-}
-
.list-group {
padding-left: 0;
margin-bottom: 20px;
@@ -2710,17 +2713,6 @@ button.close {
text-align: center;
}
-.nav-header {
- display: block;
- padding: 3px 15px;
- font-size: 11px;
- font-weight: bold;
- line-height: 1.428571429;
- color: #999999;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- text-transform: uppercase;
-}
-
.tabbable:before,
.tabbable:after {
display: table;
diff --git a/docs/components.html b/docs/components.html
index 5cc3a1e28..9202b133a 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -48,6 +48,31 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</ul>
{% endhighlight %}
+ <h3 id="dropdowns-headers">Dropdown headers</h3>
+ <p>Add a header to break up label sections of actions in any dropdown menu.</p>
+ <div class="bs-example">
+ <div class="dropdown clearfix">
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+ <li class="dropdown-header">Dropdown header</li>
+ <li><a tabindex="-1" href="#">Action</a></li>
+ <li><a tabindex="-1" href="#">Another action</a></li>
+ <li><a tabindex="-1" href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li class="dropdown-header">Dropdown header</li>
+ <li><a tabindex="-1" href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div><!-- /example -->
+{% highlight html %}
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+ <li class="dropdown-header">Dropdown header</li>
+ ...
+ <li class="divider"></li>
+ <li class="dropdown-header">Dropdown header</li>
+ ...
+</ul>
+{% endhighlight %}
+
<h3 id="dropdowns-disabled">Disabled menu options</h3>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example">
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 8ae9dbba1..7e35d4287 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -120,6 +120,17 @@
}
}
+// Dropdown section headers
+// ---------------------------
+.dropdown-header {
+ display: block;
+ padding: 3px 20px;
+ font-size: @font-size-small;
+ line-height: @line-height-base;
+ color: @gray-light;
+}
+
+
// Backdrop to catch body clicks on mobile, etc.
// ---------------------------
@@ -158,11 +169,3 @@
margin-bottom: 1px;
}
}
-
-// Tweak nav headers
-// ---------------------------
-// Increase padding from 15px to 20px on sides
-.dropdown .dropdown-menu .nav-header {
- padding-left: 20px;
- padding-right: 20px;
-}
diff --git a/less/navs.less b/less/navs.less
index 87780a156..9f671643a 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -195,22 +195,6 @@
-// Nav headers (for dropdowns and lists)
-// -------------------------
-
-.nav-header {
- display: block;
- padding: 3px 15px;
- font-size: @font-size-mini;
- font-weight: bold;
- line-height: @line-height-base;
- color: @gray-light;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
- text-transform: uppercase;
-}
-
-
-
// Tabbable tabs
// -------------------------