From d20603296c579c225142bc8344671c098ada0a5c Mon Sep 17 00:00:00 2001
From: Eric Meyer <eric@oddbird.net>
Date: Wed, 11 Aug 2010 16:35:08 -0600
Subject: [PATCH] inline-block-list mixin

---
 .../utilities/lists/_inline-block-list.scss   | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss

diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss b/frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss
new file mode 100644
index 00000000..dfc7c1b5
--- /dev/null
+++ b/frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss
@@ -0,0 +1,46 @@
+// Inline-Block list layout module.
+//
+// Easy mode using simple descendant li selectors:
+//
+//   ul.nav
+//     +inline-block-list
+//
+// Advanced mode:
+// If you need to target the list items using a different selector then use
+// +inline-block-list-container on your ul/ol and +inline-block-list-item on your li.
+// This may help when working on layouts involving nested lists. For example:
+//
+//   ul.nav
+//     +inline-block-list-container
+//     > li
+//       +inline-block-list-item
+
+@import "bullets";
+@import "horizontal-list";
+@import "compass/utilities/general/float";
+
+// Can be mixed into any selector that target a ul or ol that is meant
+// to have an inline-block layout. Used to implement +inline-block-list.
+@mixin inline-block-list-container {
+  @include horizontal-list-container; }
+
+// Can be mixed into any li selector that is meant to participate in a horizontal layout.
+// Used to implement +inline-block-list.
+
+@mixin inline-block-list-item($padding: false) {
+  @include no-bullet;
+  @include inline-block;
+  white-space: nowrap;
+  @if $padding {
+    padding: {
+      left: $padding;
+      right: $padding;
+    };    
+  }
+}
+
+// A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap.
+@mixin inline-block-list($padding: false) {
+  @include inline-block-list-container;
+  li {
+    @include inline-block-list-item($padding); } }