github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Compass Core] Allow horizontal lists to be floated to the right.

Browse Source
This commit is contained in:
Milo 2010-07-09 17:54:50 -07:00 committed by Chris Eppstein
parent fe056d6597
commit a220678a5a
3 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss
View File

@ -32,21 +32,21 @@
// :last-child is not fully supported // :last-child is not fully supported
// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix // 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; @include no-bullet;
white-space: nowrap; white-space: nowrap;
@include float-left; @include float($direction);
padding: { padding: {
left: $padding; left: $padding;
right: $padding; }; right: $padding;
&:first-child, &.first { };
padding-left: 0px; } &:first-child, &.first { padding-#{$direction}: 0px; }
&:last-child, &.last { &:last-child, &.last { padding-#{opposite-position($direction)}: 0px; }
padding-right: 0px; } } }
// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap. // 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. // This is not an inline list.
@mixin horizontal-list($padding: 4px) { @mixin horizontal-list($padding: 4px, $direction: left) {
@include horizontal-list-container; @include horizontal-list-container;
li { li {
@include horizontal-list-item($padding); } } @include horizontal-list-item($padding, $direction); } }

23
test/fixtures/stylesheets/compass/css/lists.css vendored
View File

@ -44,6 +44,29 @@ ul.wide-horizontal {
ul.wide-horizontal li:last-child, ul.wide-horizontal li.last { ul.wide-horizontal li:last-child, ul.wide-horizontal li.last {
padding-right: 0px; } 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 { ul.inline {
list-style-type: none; } list-style-type: none; }
ul.inline, ul.inline li { ul.inline, ul.inline li {

13
test/fixtures/stylesheets/compass/sass/lists.scss vendored
View File

@ -1,8 +1,9 @@
@import "compass/utilities/lists"; @import "compass/utilities/lists";
ul.horizontal { @include horizontal-list; } ul.horizontal { @include horizontal-list; }
ul.wide-horizontal { @include horizontal-list(10px); } ul.wide-horizontal { @include horizontal-list(10px); }
ul.inline { @include inline-list; } ul.right-horizontal { @include horizontal-list(4px, right); }
ul.comma { @include comma-delimited-list; } ul.inline { @include inline-list; }
ul.no-bullets { @include no-bullets; } ul.comma { @include comma-delimited-list; }
ul.pretty { @include pretty-bullets("4x6.png"); } ul.no-bullets { @include no-bullets; }
ul.pretty { @include pretty-bullets("4x6.png"); }