From 918a17a30bbaed3f7d8c80a30b7766b95e636dff Mon Sep 17 00:00:00 2001 From: Burak Tuyan Date: Mon, 30 Jan 2012 00:50:47 +0200 Subject: [PATCH 1/8] 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 --- docs/assets/css/bootstrap.css | 33 ++++++++++-- docs/components.html | 67 ++++++++++++++++++++++-- docs/templates/pages/components.mustache | 67 ++++++++++++++++++++++-- less/button-groups.less | 1 + less/dropdowns.less | 16 +++++- less/navbar.less | 20 ++++++- less/navs.less | 1 + 7 files changed, 190 insertions(+), 15 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c96818a564..e2b419af78 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; } diff --git a/docs/components.html b/docs/components.html index 63a4b3dd08..f8b65b3ae6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -175,11 +175,11 @@ ================================================== -->
-

Split button dropdowns

+

Split button dropdowns and dropups

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

@@ -239,6 +239,42 @@
  • Separated link
  • + +
    +

    Additionally, you can create dropup style split buttons. Simply add a second class, .bottom-up, after .caret and .dropdown-menu classes. Optionally, it's recommended to add a third .pull-right class to provide a better experience.

    +
    @@ -255,6 +291,9 @@ </ul> </div> +
    + Heads up! In some cases (especially on mobile screens) the content of the dropdown or dropup menus will overflow the screen. You need to manually take care of this or use a custom JavaScript code to adjust the alignment of the menu. +
    @@ -684,6 +723,16 @@
  • Separated link
  • +