2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

Adding dropup support to split buttons and navbar

* Documents the hidden .dropdown-menu.bottom-up option (to be used for dropups)
* Extends the .bottom-up class to carets and all relevant caret styles
* Adds .dropdown-menu.pull-right class for right-aligned dropdowns and dropups
* Adds examples and some information to the "split dropdown" and "navbar" sections of the Docs
This commit is contained in:
Burak Tuyan
2012-01-30 00:50:47 +02:00
parent 7bf2767452
commit 918a17a30b
7 changed files with 190 additions and 15 deletions
+1
View File
@@ -136,6 +136,7 @@
.success {
.caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(75);
}
}
+15 -1
View File
@@ -29,6 +29,14 @@
.opacity(30);
content: "\2193";
}
// Allow for caret to show up (goes well with dropup-menus)
&.bottom-up {
border-top: 0;
border-bottom: 4px solid @black;
content: "\2191";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
@@ -68,7 +76,13 @@
&.bottom-up {
top: auto;
bottom: 100%;
margin-bottom: 2px;
margin-bottom: 1px;
}
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
+18 -2
View File
@@ -253,11 +253,27 @@
left: 10px;
}
}
// Menu position and menu caret support for dropups via extra bottom-up class
.navbar .dropdown-menu.bottom-up {
&:before {
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret {
border-top-color: @white;
border-bottom-color: @white;
}
.navbar .nav .active .caret {
.opacity(100);
@@ -276,7 +292,7 @@
}
// Right aligned menus need alt position
.navbar .nav.pull-right .dropdown-menu {
.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {
+1
View File
@@ -227,6 +227,7 @@
.nav .open.active .caret,
.nav .open a:hover .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}