Sha256: 1b88617e19294234ec059dc8ed41f2348cd1fc5eaa430ff54b647ef65fb1cc5c
Contents?: true
Size: 1.68 KB
Versions: 14
Compression:
Stored size: 1.68 KB
Contents
// 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";
@import "compass/utilities/general/clearfix";
@import "compass/utilities/general/reset";
@import "compass/utilities/general/float";
// 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.
@mixin horizontal-list-container {
@include reset-box-model;
@include clearfix; }
// Can be mixed into any li selector that is meant to participate in a horizontal layout.
// Used to implement +horizontal-list.
//
// :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, $direction: left) {
@include no-bullet;
white-space: nowrap;
@include float($direction);
padding: {
left: $padding;
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, $direction: left) {
@include horizontal-list-container;
li {
@include horizontal-list-item($padding, $direction); } }
Version data entries
14 entries across 11 versions & 2 rubygems