From faadde2379a05c3c002a1de76a47b170dadff776 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Sat, 23 May 2009 09:15:33 -0700
Subject: [PATCH] [Compass Core] Extracted two new mixins from
 +horizontal-list. Closes GH-9. The new +horizontal-list-container and
 +horizontal-list-item mixins can be used to build your horizontal list when
 you need more control over the selectors (E.g. when working with nested
 lists).

---
 .../utilities/lists/_horizontal_list.sass     | 58 ++++++++++++++-----
 1 file changed, 45 insertions(+), 13 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal_list.sass b/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal_list.sass
index 35b4e5bb..9df188d3 100644
--- a/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal_list.sass
+++ b/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal_list.sass
@@ -1,20 +1,52 @@
+//**\\
+  Horizontal list layout module.
+  
+  Easy mode using simple descendant li selectors:
+  
+    ul.nav
+      +horizontal-list
+  
+  Advanced mode:
+  If you need to target the list items using a different selector then use
+  +horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
+  This may help when working on layouts involving nested lists. For example:
+  
+    ul.nav
+      +horizontal-list-container
+      > li
+        +horizontal-list-item
+
 @import bullets.sass
 @import compass/utilities/general/reset.sass
 @import compass/utilities/general/float.sass
 
-// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
-// This is not an inline list.
-=horizontal-list(!padding = 4px)
+//**
+  Can be mixed into any selector that target a ul or ol that is meant
+  to have a horizontal layout. Used to implement +horizontal-list.
+=horizontal-list-container
   +reset-box-model
   +clearfix
+
+//**
+  Can be mixed into any li selector that is meant to participate in a horizontal layout.
+  Used to implement +horizontal-list.
+=horizontal-list-item(!padding = 4px)
+  +no-bullet
+  :white-space nowrap
+  +float-left
+  :padding
+    :left= !padding
+    :right= !padding
+  &.first
+    :padding-left 0px
+  &.last
+    :padding-right 0px
+
+//**
+  A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
+  This is not an inline list.
+=horizontal-list(!padding = 4px)
+  +horizontal-list-item-container
   li
-    +no-bullet
-    :white-space nowrap
-    +float-left
-    :padding
-      :left= !padding
-      :right= !padding
-    &.first
-      :padding-left 0px
-    &.last
-      :padding-right 0px
+    +horizontal-list-item(!padding)
+