diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss b/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss index fcc5af2f..5e98b718 100644 --- a/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss +++ b/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss @@ -32,21 +32,21 @@ // :last-child is not fully supported // see http://www.quirksmode.org/css/contents.html#t29 for the support matrix -@mixin horizontal-list-item($padding: 4px) { +@mixin horizontal-list-item($padding: 4px, $direction: left) { @include no-bullet; white-space: nowrap; - @include float-left; + @include float($direction); padding: { left: $padding; - right: $padding; }; - &:first-child, &.first { - padding-left: 0px; } - &:last-child, &.last { - padding-right: 0px; } } + right: $padding; + }; + &:first-child, &.first { padding-#{$direction}: 0px; } + &:last-child, &.last { padding-#{opposite-position($direction)}: 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. -@mixin horizontal-list($padding: 4px) { +@mixin horizontal-list($padding: 4px, $direction: left) { @include horizontal-list-container; li { - @include horizontal-list-item($padding); } } + @include horizontal-list-item($padding, $direction); } } diff --git a/test/fixtures/stylesheets/compass/css/lists.css b/test/fixtures/stylesheets/compass/css/lists.css index e231f011..1373fc93 100644 --- a/test/fixtures/stylesheets/compass/css/lists.css +++ b/test/fixtures/stylesheets/compass/css/lists.css @@ -44,6 +44,29 @@ ul.wide-horizontal { ul.wide-horizontal li:last-child, ul.wide-horizontal li.last { padding-right: 0px; } +ul.right-horizontal { + margin: 0; + padding: 0; + border: 0; + outline: 0; + overflow: hidden; + display: inline-block; } + ul.right-horizontal { + display: block; } + ul.right-horizontal li { + list-style-image: none; + list-style-type: none; + margin-left: 0px; + white-space: nowrap; + display: inline; + float: right; + padding-left: 4px; + padding-right: 4px; } + ul.right-horizontal li:first-child, ul.right-horizontal li.first { + padding-right: 0px; } + ul.right-horizontal li:last-child, ul.right-horizontal li.last { + padding-left: 0px; } + ul.inline { list-style-type: none; } ul.inline, ul.inline li { diff --git a/test/fixtures/stylesheets/compass/sass/lists.scss b/test/fixtures/stylesheets/compass/sass/lists.scss index f9acf4b4..3d9b1de6 100644 --- a/test/fixtures/stylesheets/compass/sass/lists.scss +++ b/test/fixtures/stylesheets/compass/sass/lists.scss @@ -1,8 +1,9 @@ @import "compass/utilities/lists"; -ul.horizontal { @include horizontal-list; } -ul.wide-horizontal { @include horizontal-list(10px); } -ul.inline { @include inline-list; } -ul.comma { @include comma-delimited-list; } -ul.no-bullets { @include no-bullets; } -ul.pretty { @include pretty-bullets("4x6.png"); } \ No newline at end of file +ul.horizontal { @include horizontal-list; } +ul.wide-horizontal { @include horizontal-list(10px); } +ul.right-horizontal { @include horizontal-list(4px, right); } +ul.inline { @include inline-list; } +ul.comma { @include comma-delimited-list; } +ul.no-bullets { @include no-bullets; } +ul.pretty { @include pretty-bullets("4x6.png"); } \ No newline at end of file