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

View File

@@ -1517,6 +1517,11 @@ table .span12 {
filter: alpha(opacity=30);
content: "\2193";
}
.caret.bottom-up {
border-top: 0;
border-bottom: 4px solid #000000;
content: "\2191";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
@@ -1558,7 +1563,11 @@ table .span12 {
.dropdown-menu.bottom-up {
top: auto;
bottom: 100%;
margin-bottom: 2px;
margin-bottom: 1px;
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
@@ -1992,6 +2001,7 @@ button.btn.small, input[type="submit"].btn.small {
.info .caret,
.success .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
@@ -2217,6 +2227,7 @@ button.btn.small, input[type="submit"].btn.small {
}
.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
}
@@ -2554,8 +2565,22 @@ button.btn.small, input[type="submit"].btn.small {
top: -6px;
left: 10px;
}
.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;
}
.navbar .dropdown-menu.bottom-up:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar .nav .active .caret {
opacity: 1;
@@ -2567,15 +2592,15 @@ button.btn.small, input[type="submit"].btn.small {
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
}
.navbar .nav.pull-right .dropdown-menu {
.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
}
.navbar .nav.pull-right .dropdown-menu:before {
.navbar .nav.pull-right .dropdown-menu:before, .navbar .nav .dropdown-menu.pull-right:before {
left: auto;
right: 12px;
}
.navbar .nav.pull-right .dropdown-menu:after {
.navbar .nav.pull-right .dropdown-menu:after, .navbar .nav .dropdown-menu.pull-right:after {
left: auto;
right: 13px;
}