From 1b814458c9476c32a92390e9e5cd989a51d04f05 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Oct 2012 16:41:13 -0700 Subject: [PATCH] improve dropdown submenu docs; add docs for left submenu; remove all dupe css for left submenu --- docs/assets/css/bootstrap.css | 12 ++++ docs/components.html | 69 ++++++++++++++++------- docs/templates/pages/components.mustache | 71 +++++++++++++++++------- less/dropdowns.less | 45 +++++---------- 4 files changed, 126 insertions(+), 71 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 25b0a19829..69ac841423 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2929,6 +2929,18 @@ table [class*=span], border-left-color: #ffffff; } +.dropdown-submenu.pull-left { + float: none; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + .dropdown .dropdown-menu .nav-header { padding-right: 20px; padding-left: 20px; diff --git a/docs/components.html b/docs/components.html index f369cfa1b4..7623cda4b5 100644 --- a/docs/components.html +++ b/docs/components.html @@ -165,25 +165,11 @@

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

-
-
- -
+
+ +
+

Default

+
+ +
+

Dropup

+
+ +
+
+ +
+

Left submenu

+
+ +
+
+ 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 67770a766a..6cb5aa69ec 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -94,25 +94,11 @@
 
           
{{_i}}Sub menus on dropdowns{{/i}}

           
{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.{{/i}}

-          

-            

-              
-              

+          

+
+            

+              
Default

+              

                 
               

-            

+            
{{! /.pull-left }}
+
+            

+              
Dropup

+              

+                
+              

+            
{{! /.pull-left }}
+
+            

+              
Left submenu

+              

+                
+              

+            
{{! /.pull-left }}
+
           
{{! /example }}
 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 9622d2d46e..5ed279167e 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -206,39 +206,20 @@
   border-left-color: @dropdownLinkColorHover;
 }
 
-// Left-opening Sub menus
-// ---------------------------
-.dropdown-submenu-left {
-  position: relative;
-}
-.dropdown-submenu-left > .dropdown-menu {
-  top: 0;
-  left: -100%;
-  margin-top: -6px;
-  margin-left: -1px;
-  -webkit-border-radius: 6px 0px 6px 6px;
-     -moz-border-radius: 6px 0px 6px 6px;
-          border-radius: 6px 0px 6px 6px;
-}
-.dropdown-submenu-left:hover > .dropdown-menu {
-  display: block;
-}
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
 
-.dropdown-submenu-left > a:before {
-  display: block;
-  content: "  ";
-  float: left;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 5px 5px 0px;
-  border-right-color: darken(@dropdownBackground, 20%);
-  margin-top: 5px;
-  margin-left: -10px;
-}
-.dropdown-submenu-left:hover > a:after {
-  border-right-color: @dropdownLinkColorHover;
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+       -moz-border-radius: 6px 0 6px 6px;
+            border-radius: 6px 0 6px 6px;
+  }
 }
 
 // Tweak nav headers