diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 44fdb437ae..dde638c05e 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b90cb7635e..c9c2ee8919 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1825,10 +1825,9 @@ table .span24 { *border-right-width: 2px; *border-bottom-width: 2px; } -.dropdown-menu.bottom-up { - top: auto; - bottom: 100%; - margin-bottom: 2px; +.dropdown-menu.pull-right { + right: 0; + left: auto; } .dropdown-menu .divider { height: 1px; @@ -1868,6 +1867,16 @@ table .span24 { left: auto; right: 0; } +.dropup .caret { + border-top: 0; + border-bottom: 4px solid #000000; + content: "\2191"; +} +.dropup .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} .typeahead { margin-top: 2px; -webkit-border-radius: 4px; @@ -2340,6 +2349,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small { .btn-success .caret, .btn-inverse .caret { border-top-color: #ffffff; + border-bottom-color: #ffffff; opacity: 0.75; filter: alpha(opacity=75); } @@ -2551,13 +2561,16 @@ button.btn.btn-small, input[type="submit"].btn.btn-small { } .nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret { border-top-color: #0088cc; + border-bottom-color: #0088cc; margin-top: 6px; } .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { border-top-color: #005580; + border-bottom-color: #005580; } .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { border-top-color: #333333; + border-bottom-color: #333333; } .nav > .dropdown.active > a:hover { color: #000000; @@ -2570,6 +2583,7 @@ button.btn.btn-small, input[type="submit"].btn.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); } @@ -2931,8 +2945,22 @@ button.btn.btn-small, input[type="submit"].btn.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; @@ -2944,11 +2972,15 @@ button.btn.btn-small, input[type="submit"].btn.btn-small { .navbar .nav .active > .dropdown-toggle:hover { color: #ffffff; } -.navbar .nav.pull-right .dropdown-menu:before { +.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 .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 9cfd261fff..41129c304a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -188,12 +188,13 @@ ================================================== -->
-

Buttons dropdowns Contextual dropdown menus built on button groups

+

Button dropdown menus Built on button groups to provide contextual menus

+

Button dropdowns

-

Button dropdowns

+

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

@@ -278,10 +279,14 @@
+
+ Heads up! In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript. +
+

Split button dropdowns

-

Split button dropdowns

+

Overview and examples

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.

@@ -352,7 +357,30 @@
  • Separated link
    • -
    +
    +

    Right aligned menus

    +

    Add .pull-right to the .dropdown-menu of any button dropdown for right aligned menus.

    +
    +
    + Right + + +
    +
    +
    +<div class="btn-group">
+  ...
+  <ul class="dropdown-menu pull-right">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+

    Example markup

    @@ -368,6 +396,44 @@ </ul> </div> +

    Dropup menus

    +

    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

    +
    +
    + Dropup + + +
    +
    + Right dropup + + +
    +
    +
    +<div class="btn-group dropup">
+  <a class="btn" href="#">Dropup</a>
+  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+    <span class="caret"></span>
+  </a>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
    +
    @@ -474,7 +540,7 @@

    Tabs with dropdowns

     <ul class="nav nav-tabs">
@@ -506,7 +582,7 @@
       
    Pills with dropdowns
    
       
 
     <ul class="nav nav-pills">
@@ -812,6 +898,16 @@
                 
  • One more separated link
    • 
               
             
+            
  • 
+              Dropup 
+              
+            
    • 
           
           
    
             
@@ -819,6 +915,16 @@
           
    
       
    Component alignment
    
       
    To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
    
-      
    Adding dropdowns
    
-      
    Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.
    
+      
    Adding dropdown menus
    
+      
    Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.
    
 
     <ul class="nav">
   <li class="dropdown">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 8868d9927a..7c12d8eb15 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -112,12 +112,13 @@
 ================================================== -->
 
    
   
    
-    
    {{_i}}Buttons dropdowns{{/i}} {{_i}}Contextual dropdown menus built on button groups{{/i}}
    
+    
    {{_i}}Button dropdown menus{{/i}} {{_i}}Built on button groups to provide contextual menus{{/i}}
    
   
    
 
+  
    {{_i}}Button dropdowns{{/i}}
    
   
    
     
    
-      
    {{_i}}Button dropdowns{{/i}}
    
+      
    {{_i}}Overview and examples{{/i}}
    
       
    {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}
    
       
    
         
    
@@ -202,10 +203,14 @@
 
    
     
   
+  
    
+    {{_i}}Heads up!{{/i}} {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
+  
    
 
+  
    {{_i}}Split button dropdowns{{/i}}
    
   
    
     
    
-      
    {{_i}}Split button dropdowns{{/i}}
    
+      
    {{_i}}Overview and examples{{/i}}
    
       
    {{_i}}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.{{/i}}
    
       
    
         
    
@@ -276,7 +281,30 @@
             
  • {{_i}}Separated link{{/i}}
    • 
           
         
    
-      
    
+      
    
+      
    {{_i}}Right aligned menus{{/i}}
    
+      
    {{_i}}Add .pull-right to the .dropdown-menu of any button dropdown for right aligned menus.{{/i}}
    
+      
    
+        
    
+          {{_i}}Right{{/i}}
+          
+          
+        
    
+      
    
+
    +<div class="btn-group">
+  ...
+  <ul class="dropdown-menu pull-right">
+    <!-- {{_i}}dropdown menu links{{/i}} -->
+  </ul>
+</div>
+
    
     
    
     
    
       
    {{_i}}Example markup{{/i}}
    
@@ -292,6 +320,44 @@
   </ul>
 </div>
    +

    {{_i}}Dropup menus{{/i}}

    +

    {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

    +
    +
    + {{_i}}Dropup{{/i}} + + +
    +
    + {{_i}}Right dropup{{/i}} + + +
    +
    +
    +<div class="btn-group dropup">
+  <a class="btn" href="#">{{_i}}Dropup{{/i}}</a>
+  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+    <span class="caret"></span>
+  </a>
+  <ul class="dropdown-menu">
+    <!-- {{_i}}dropdown menu links{{/i}} -->
+  </ul>
+</div>
+
    + @@ -398,7 +464,7 @@

    {{_i}}Tabs with dropdowns{{/i}}

     <ul class="nav nav-tabs">
@@ -430,7 +506,7 @@
       
    {{_i}}Pills with dropdowns{{/i}}
    
       
 
     <ul class="nav nav-pills">
@@ -736,6 +822,16 @@
                 
  • {{_i}}One more separated link{{/i}}
    • 
               
             
+            
  • 
+              {{_i}}Dropup{{/i}} 
+              
+            
    • 
           
           
             
@@ -743,6 +839,16 @@
           
    
       
    {{_i}}Component alignment{{/i}}
    
       
    {{_i}}To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.{{/i}}
    
-      
    {{_i}}Adding dropdowns{{/i}}
    
-      
    {{_i}}Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.{{/i}}
    
+      
    {{_i}}Adding dropdown menus{{/i}}
    
+      
    {{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.{{/i}}
    
 
     <ul class="nav">
   <li class="dropdown">
diff --git a/less/button-groups.less b/less/button-groups.less
index a04220a9a6..cfb25f1409 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -137,6 +137,7 @@
 .btn-inverse {
   .caret {
     border-top-color: @white;
+    border-bottom-color: @white;
     .opacity(75);
   }
 }
diff --git a/less/dropdowns.less b/less/dropdowns.less
index fa46e288b1..a0753f2001 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -13,7 +13,9 @@
 .open .dropdown-toggle {
   outline: 0;
 }
+
 // Dropdown arrow/caret
+// --------------------
 .caret {
   display: inline-block;
   width: 0;
@@ -29,6 +31,7 @@
   .opacity(30);
   content: "\2193";
 }
+
 .dropdown .caret {
   margin-top: 8px;
   margin-left: 2px;
@@ -37,7 +40,9 @@
 .open.dropdown .caret {
   .opacity(100);
 }
+
 // The dropdown menu (ul)
+// ----------------------
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -62,11 +67,10 @@
   *border-right-width: 2px;
   *border-bottom-width: 2px;
 
-  // Allow for dropdowns to go bottom up (aka, dropup-menu)
-  &.bottom-up {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: 2px;
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
   }
 
   // Dividers (basically an hr) within the dropdown
@@ -87,6 +91,7 @@
 }
 
 // Hover state
+// -----------
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
@@ -96,6 +101,7 @@
 }
 
 // Open state for the dropdown
+// ---------------------------
 .dropdown.open {
   // IE7's z-index only goes to the nearest positioned ancestor, which would
   // make the menu appear below buttons that appeared later on the page
@@ -117,7 +123,26 @@
   right: 0;
 }
 
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// ------------------------------------------------------
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+.dropup {
+  // Reverse the caret
+  .caret {
+    border-top: 0;
+    border-bottom: 4px solid @black;
+    content: "\2191";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+  }
+}
+
 // Typeahead
+// ---------
 .typeahead {
   margin-top: 2px; // give it some space to breathe
   .border-radius(4px);
diff --git a/less/navbar.less b/less/navbar.less
index b9e63487c8..db299732a0 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -274,11 +274,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);
@@ -297,7 +313,11 @@
 }
 
 // Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu {
+// TODO: rejigger this at some point to simplify the selectors
+.navbar .nav.pull-right .dropdown-menu, 
+.navbar .nav .dropdown-menu.pull-right {
+  left: auto;
+  right: 0;
   &:before {
     left: auto;
     right: 12px;
diff --git a/less/navs.less b/less/navs.less
index a940cc13ca..e00bffe5f8 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -204,11 +204,13 @@
 .nav-tabs .dropdown-toggle .caret,
 .nav-pills .dropdown-toggle .caret {
   border-top-color: @linkColor;
+  border-bottom-color: @linkColor;
   margin-top: 6px;
 }
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
   border-top-color: @linkColorHover;
+  border-bottom-color: @linkColorHover;
 }
 
 // Active dropdown links
@@ -216,6 +218,7 @@
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
   border-top-color: @grayDark;
+  border-bottom-color: @grayDark;
 }
 
 // Active:hover dropdown links
@@ -238,6 +241,7 @@
 .nav .open.active .caret,
 .nav .open a:hover .caret {
   border-top-color: @white;
+  border-bottom-color: @white;
   .opacity(100);
 }